Valor y Fuerza de ZK ZK es un marco de interfaz de usuario basada en componentes que le permite construir aplicaciones ricas de Internet (RIA) y las aplicaciones móviles sin tener que aprender ava!cript o AA"# $sted puede construir aplicaciones AA" %eb altamente interactivas y sensibles en ava puro# ZK ofrece cientos de comp compon onent entes es& & que que est' est'n n disea diseado dos s para para divers diversos os nes nes** al+u al+uno nos s para para la visualización visualización de +ran cantidad cantidad de datos y al+unos para la entrada del usuario# usuario# ,odemos crear f'cilmente componentes en un len+ua-e len+u a-e con formato "./* Z$/# 0odas 0odas las acciones del usuario en una p'+ina como 1acer clic y escribir se pued pueden en maneane-ar ar f'c f'cilme ilment nte e en un cont contrrolad olador or## ,uede uede mani manipu pula larr los los componentes para responder a la acción usuarios en un controlador y los cambios que realice se re2e-ar' en los nave+adores autom'ticamente# 3o es necesario preocuparse por los detalles de comunicación entre los nave+adores y serv servido idore res* s* ZK lo mane mane-a -ar' r'n n por por usted# usted# Ad Adem em's 's de la manip manipula ulaci ción ón de compon component entes es direct directame amente nte** es decir decir .V4 (.odel (.odelo o 5 Vista5 Vista54on 4ontr trola olador dor)* )* ZK tambi tambi6n 6n es comp compat atibl ible e con con otro otro patr patrón ón de dise diseo* o* .VV .VV. . (.od (.odelo elo55 Vie% Vie%55 Vie%.odel)* que da el controlador y ver m's separación# 7stos dos enfoques son son mutu mutuam amen ente te inte interc rcam ambi biab able les* s* y se pued puede e ele+ ele+ir ir uno uno de ello ellos s a su consideración arquitectónica#
Arquitectura de ZK#
/a ima+en de arriba es una arquitectura simplicada ZK# 4uando un nave+ador visita una p'+ina de una aplicación ZK* ZK crea componentes escritos en Z$/ y las crea en el nave+ador# ,uede manipular los componentes de controlador de la aplicación para aplicar la ló+ica de presentación de interfaz de usuario#
Todos los cambios realizados en los componentes refejarán automáticamente en el navegador del usuario y ZK mane-an la cone8ión subyacente para usted#
4ódi+o Fuente# 0odos los códi+os fuente utilizado en este libro est'n disponibles en +it1ub# A medida que nuestra aplicación de e-emplo tiene 9 con+uraciones diferentes* nuestro códi+o fuente se divide en 9 ramas: z;<* z;< 5 sprin+* y z;< 5 A,,# 1ttps:==+it1ub#com=z;oss=z;essentials
/a rama z;< contiene e-emplos del cap>tulo & al cap>tulo ?# /a rama z;< 5 resorte tiene e-emplos inte+rados con !prin+ y la rama z;< 5 A,, contiene e-emplos que se inte+ran !prin+ y la persistencia de datos dentro de una base de datos con ,A#
,uede 1acer clic en el icono @ ZI,@ para descar+ar la rama seleccionada actual como un arc1ivo zip#
iseo de maquetación# Al principio* construimos la interfaz de usuario que +eneralmente se inicia desde el diseo de la maquetación# ZK proporciona varios componentes de diseo para los requisitos de maquetado diferentes* y puede incluso con+urar atributos de un componente para a-ustar detalles la maquetación#
Requerimientos de maquetado#
/a ima+en de arriba es el trazado de destino que vamos a crear en este cap>tulo* y este tipo de diseo es muy comBn en aplicaciones %eb# 7l banner en la parte superior contiene el icono de la aplicación* el t>tulo y el nombre del usuario en la esquina derec1a de la mayor>a# 7l pie de p'+ina en la parte inferior contiene información +eneral# /a barra lateral de la izquierda contiene 9 enlaces que te diri+en a 9 $R/ diferentes# 7l 'rea central muestra la función actual#
ZK proporciona varios componentes de trazado y cada uno de ellos tiene diferentes estilos# ,uede utilizar un componente de diseo solo o combinarlos para crear un diseo m's comple-o# !e+Bn nuestro requisito de* Corder /ayout* a-usta los requisitos que se necesitan con D zonas: 3orte* oeste* centro* Eriente y sur# ,odemos utilizar el norte como una bandera* oeste como sidebar* sur como un pie de p'+ina y el centro como la pantalla de función principal#
4onstruir la vista 4onstruir la vista en ZK es b'sicamente crear componentes* y 1ay dos maneras de 1acerlo: por medio de ava (pro+ramación) y enfoque (declarativa) basado en "./# Incluso puede mezclar estos dos enfoques# ZK te permite componer una interfaz de usuario en ava mediante pro+ramación que es una caracter>stica llamada richlet * pero no utiliza este enfoque en este libro# ZK tambi6n proporciona un len+ua-e de formato "./ llamado ZK UserI nt er f ace Mar kupLanguage( ZUML) .4ada elemento "./ manda /oader ZK para crear un componente# 4ada atributo "./ describe qu6 valor a asi+nar al componente creado# $tilizamos este enfoque principalmente en nuestro e-emplo#
7scribiendo un Z$/ ,ara crear un componente en ZK* debemos utilizar un len+ua-e basado en "./ llamado Z$/* y todos los arc1ivos escritos en Z$/ deben tener la e8tensión de arc1ivo @#zul@# 7n arc1ivos de tipo #zul* un componente puede ser representado como un elemento "./ (etiqueta)* y se puede con+urar el estilo de cada componente* comportamiento* función estableciendo atributos a cada etiqueta#
,rimero* cree un nuevo arc1ivo de te8to con nombre inde8#zul y escriba el si+uiente contenido:
•
•
•
•
•
Línea 2: 4ada etiqueta "./ representa un componente* y el nombre de etiqueta es i+ual que el nombre del componente# 7l atributo @ hfex@ y
@vfex@ controla la 2e8ibilidad de tamao 1orizontal y vertical de un componente# Al poner "1" que si+nica Fit-the-Rest (ajusta el resto) # ,or lo tanto* el Border Layout se estirar' para llenar todo el espacio disponible de p'+ina entera en anc1ura y altura porque es un componente de la ra>z# !e permite sólo un componente dentro de North adem's de una leyenda# Línea : !orth es un componente 1i-o que sólo se puede poner dentro del Border Layout # 0ambi6n puede -ar la altura de un componente* especicando un valor en p>8eles para evitar su altura cambia debido al tamao del nave+ador# Línea # $: A-uste collapsible en true permite colapsar la zona oeste 1aciendo clic en un botón de 2ec1a# A-uste de splittable en true le permite a-ustar la anc1ura de %est y minsize limita el tamao m>nimo de anc1o que se puede a-ustar# Línea 1&: 4on+uración de autoscroll en true va a decorar el 'enter con un desplazamiento de la barra cuando 'enter contiene una +ran cantidad de información que superan la altura de su# Línea (#)#11#1(: estas Labels son para identicar las 'reas de *order La+out y les eliminaremos en el resultado nal# A continuación* puede ver el resultado desde tu nave+ador como aba-o:
4onstruir la interfaz de usuario con componentes A1ora tenemos un esqueleto de la aplicación* la si+uiente que debemos 1acer es llenar cada 'rea con los componentes# 4rearemos un arc1ivo de zul separada para cada 'rea y lue+o combinarlos -untos# chapter1,-ain./ul
Línea 1: 7l atributo spacingG controla el espacio entre el contenido de sus componentes 1i-os# 7n el banner* 1ay una ima+en con un 1iperv>nculo* el t>tulo y el nombre de usuario# Vamos a ver cómo construir estos elementos con los componentes de ZK:
c ha pt e r 1 / ba nne r . z ul Hdiv 12e8@&@ v2e8@&@ sclass@banner@J H1bo8 12e8@&@ v2e8@&@ ali+n@center@J Ha 1ref@1ttp:==%%%#z;oss#or+=@ J Hima+e src@=im+s=z;lo+o#pn+@ %idt1@Lp8@ =J H=aJ Hdiv %idt1@MLLp8@J Hlabel value@Application 3ame@ sclass@banner51ead@ =J H=divJ H1bo8 12e8@&@ v2e8@&@ pac;@end@ ali+n@end@J Anonymous H=1bo8J H=1bo8J H=divJ
•
•
•
•
•
•
Línea 1: 0classN podemos especicar un selector de clase 4!!* y 1ablaremos sobre ello m's adelante# Línea 2: 7l box que es un la+out de diseo puede or+anizar sus componentes 1i-o en una la 1orizontal# !u atributo align controla la alineación vertical# Línea : /a a crea un 1iperv>nculo lo mismo que un O0./ a3 elemento# Línea (: image es similar a O0./ img3 que puede mostrar una ima+en# Línea 4: pac5 controla la alineación 1orizontal# 7specique end en ambos pac5 y align para 1acer la pantalla de @Anónimo@ de te8to en la esquina inferior derec1a# Línea 1&: Aqu> todav>a no implementamos autenticación aBn* as> usar nombre de usuario est'tico @Anónimo@ aqu>#
,ara la barra lateral* queremos or+anizar elementos de nave+ación por uno vertical# Oay m's de una forma de lo+rar esto# Aqu>* utilizamos una re-illa (6rid) que es conveniente para el arre+lo de componentes de 1i-o en un diseo de matriz# c hapt e r 1 / s i de ba r . z ul H+rid 12e8@&@ v2e8@&@ sclass@sidebar@J HcolumnsJ Hcolumn %idt1@9Pp8@=J Hcolumn=J H=columnsJ Hro%sJ Hro%J Hima+e src@=im+s=site#pn+@=J Ha 1ref@1ttp:==%%%#z;oss#or+=@ JZK H=aJ H=ro%J Hro%J
Hima+e src@=im+s=demo#pn+@=J Ha 1ref@1ttp:==%%%#z;oss#or+=z;demo@ JZK emoH=aJ H=ro%J Hro%J Hima+e src@=im+s=doc#pn+@=J Ha 1ref@1ttp:==boo;s#z;oss#or+=%i;i=ZKQevelopersQReference@ J ZK eveloper Reference H=aJ H=ro%J H=ro%sJ H=+ridJ
•
• •
Línea 1: Al+unos componentes como 6rid soporta limitados componentes 1i-os y tambi6n notar' las relaciones -er'rquicas entre los componentes 1i-o* por e-emplo* las las sólo pueden contener la# 4onsulte a ZK componente=datos de referencia para m's detalles# Línea : !ólo puede poner 'olumn interior de 'olumns# Línea )#4: puesto que denimos dos 'olumns* cada 7o8 9la; puede tener dos componentes* y cada uno pertenece a una column#
Seneralmente ponemos al+unos datos de contacto en el
chapt er 1/ f oot er . z ul Hdiv 12e8@&@ v2e8@&@ sclass@footer@J Hvbo8 12e8@&@ v2e8@&@ ali+n@center@J ZK 7ssentials* you are usin+ ZK TUdes;top#%ebApp#version Ha 1ref@1ttp:==%%%#z;oss#or+@J1ttp:==%%%#z;oss#or+H=aJ H=vbo8J H=divJ •
Línea
2:
=box*
como
box*
or+aniza los
componentes 1i-o
verticalmente# 7specicamos @ center@ en align para alinear los te8tos 1orizontalmente en el centro# •
Línea : ,uede usar e8presiones de 7/ cuerpo del elemento de
etiqueta o un atributo# Oay tambi6n muc1os ob-etos impl>cita)* y el escritorio es uno de ellos# 4onsulte el avadoc de or+#z;oss#z;#ui# es;top para saber las propiedades disponibles# A continuación* vamos a combinar estas p'+inas zul separados en c1apter& = inde8#zul
Incluir pa+inas separadas#
,ara completar la p'+ina* tenemos que poner esas p'+inas individuales en el 'rea correspondiente del *order La+out# ,ara todas las 'reas* que utilizamos incluyen ( include) componentes para combinar p'+inas separadas# 7ste componente puede combinar un zul separados por usted cuando visita el zul padres# 7ste uso se presenta a continuación:
c ha pt e r 1 / i nde x. z ul HWlin; rel@styles1eet@ type@te8t=css@ 1ref@=style#css@WJ Hz;J Hborderlayout 12e8@&@ v2e8@&@J Hnort1 1ei+1t@&LLp8@ border@none@ J Hinclude src@=c1apter&=banner#zul@ =J H=nort1J H%est %idt1@XPLp8@ border@none@ collapsible@true@ splittable@true@ minsize@9LL@J Hinclude src@=c1apter&=sidebar#zul@ =J H=%estJ Hcenter id@main4ontent@ autoscroll@true@J Hinclude src@=c1apter&=main#zul@=J H=centerJ Hsout1 1ei+1t@DLp8@ border@none@J Hinclude src@=c1apter&=footer#zul@ =J H=sout1J H=borderlayoutJ H=z;J •
Línea 1: la directiva lin5 G vincula una 1o-a de estilos e8terna ba-o la
carpeta ra>z# •
Línea ># 4# 12# 1>: 7specique una ruta de zul separados en el
atributo src para incluir una p'+ina en la p'+ina actual# espu6s de incluir M p'+inas separadas zul* terminamos el e-emplo de este cap>tulo# $sted puede visitar 1ttp:==local1ost:
Aplicando 4!! Adem's de establecer el atributo de un componente* tambi6n podemos cambiar el estilo de un componente por 4!! (1o-a de estilo en cascada)# Oay dos atributos para aplicar 4!!: •
7l atributo st+le# 4omo atributo de estilo de elemento de O0./* puede escribir directamente la sinta8is 4!! como el valor del atributo#
Hlabel value@41apter 9@ style@font5%ei+1t: boldN@=J •
7l atributo sclass# ebe especicar un nombre de selector de clase 4!! como el valor del atributo#
Hdiv sclass@banner@J
,ara utilizar un selector de clase 4!!* debe denirla primero en un Z$/# Oay X formas de denir un selector de clase 4!!# &# HstyleJ. Hz;J HstyleJ # banner U bac;+round5color: Y&LXd9DN color: %1iteN paddin+: Dp8 &Lp8N H=styleJ ### H=z;J
X# ,or la directiva HWlin;WJ# ,uede vincular a una 1o-a de estilos e8terna que puede aplicar a muc1as p'+inas# $samos de esta manera en el e-emplo denir 4!!# HWlin; rel@styles1eet@ type@te8t=css@ 1ref@=style#css@WJ Hz;J ### H=z;J
4ontrol de componentes ,odemos construir la interfaz de usuario con componentes de ZK* pero tambi6n controlarlos# 7n este cap>tulo* continuamos utilizando el e-emplo del cap>tulo anterior* pero quitar los 9 elementos con 1iperv>nculos en la barra lateral y sustituirlas por una acción rediri+iendo# ,ara lo+rarlo* vamos a escribir códi+o en ava para cada art>culo para responder a un usuario 1acer clic en y rediri+ir al usuario a un sitio e8terno#
Zscript forma m's sencilla de responder a clic de un usuario es escribir un m6todo detector de eventos e invocarlo en el atributo on'lic5 # ,odemos denir un detector de eventos en ava dentro de un elemento zscript3 y esos códi+os se interpretar'n cuando se visita el Z$/# 7ste elemento tambi6n permite que
otros len+ua-es de script como ava!cript* Ruby* o Sroove# /script 3 es muy adecuado para el prototipado r'pido y se interpreta cuando se evalBa una p'+ina zul# ,uede ver el cambio sin necesidad de volver a la implementación# ,ero tiene problemas en el rendimiento y entorno de clBster* no recomendamos usarlo en entornos de producción# Ev entl i st enerr edi r ect ( ) H+rid 12e8@&@ v2e8@&@ sclass@sidebar@J HzscriptJH[\4A0A\ ==zscript code* it runs on server site* use it for fast prototypin+ -ava#util#.ap sites ne% -ava#util#Oas1.ap()N
sites#put(@z;@*@1ttp:==%%%#z;oss#or+=@)N sites#put(@demo@*@1ttp:==%%%#z;oss#or+=z;demo@)N sites#put(@devref@*@1ttp:==boo;s#z;oss#or+=%i;i=ZKQevelopersQReference@)N
void redirect(!trin+ name)U !trin+ loc sites#+et(name)N if(loc[null)U e8ecution#sendRedirect(loc)N ]]JH=zscriptJ ###
• •
•
Línea 2: 7s me-or encerrar el códi+o con H [ \ 4A0A \ ] ] J # Línea 11: enición de un m6todo de evento oyente como un m6todo ava normal y se vuelve a diri+ir un nave+ador de acuerdo con la variable pasada# Línea 1(: /a e-ecución es una variable impl>cita que se puede utilizar directamente sin declaración# Representa una e-ecución de una solicitud de cliente que contiene información relacionada#
espu6s de denir el detector de eventos* debemos indicar que en el evento de una la atribuimos on'lic5 porque queremos invocar el detector de eventos al 1acer clic en una la#
I nv ok ee ve ntl i s t e ner sa t" onCl i c k"
H+ridJ ### Hro%sJ Hro% sclass@sidebar5fn@ on4lic;redirect(@z;@) J Hima+e src@=im+s=site#pn+@=J ZK H=ro%J Hro% sclass@sidebar5fn@ on4lic;redirect(@demo@)J Hima+e src@=im+s=demo#pn+@=J ZK emo H=ro%J Hro% sclass@sidebar5fn@ on4lic;redirect(@devref@) J Hima+e src@=im+s=doc#pn+@=J ZK eveloper Reference H=ro%J H=ro%sJ H=+ridJ
A1ora bien* si 1ace clic en 7o8 de 6rid en la barra lateral* el nave+ador ser' rediri+ido a un sitio correspondiente# 7ste enfoque es muy simple y r'pido* por lo que es especialmente adecuado para la construcción de un prototipo# !in embar+o* si necesita una me-or arquitectura para su aplicación* que ten>a me-or no utilizar Zscript 1ttp:==boo;s#z;oss#or+=z;essentials5 boo;=master=controllin+Qcomponents=inQcontroller#1tml
