Framework ZK
ZK 6.5 Responsive design
7 de Agosto de 2012, charla de Jumper Chen, Senior Engineer, Potix Corporation
Versión de ZK 6.5
Contenido
Introducción
Este tutorial pertenece a la siguiente serie:
- ZK Responsive Design, enfoque/filosofía
- ZK 6.5 Responsive design
- ZK 6.5 Empezando con el Responsive Design
- ZK 6.5 Consejos para dispositivos móviles
Dentro de la versión ZK 6.5, una de nuevas características de que introduce ZK es el Responsive Design. El objetivo del equipo de ZK is cubrir toda la variedad de dispositivos y pantallas, en el siguiente tutorial te enseñaremos como lidiar con toda la diversidad.
Layouts fluidas
Desde la release de ZK 5, hemos puesto a tu disposición una forma de ajustar el tamaño de los componentes usando tanto vflex or hflex en vez de componentes con una altura y anchura fijos en píxeles
Por ejemplo,
Nota: A continuación, si el código de no se vé en su totalidad, puedes selecciónarlo y cópiarlo a un documento de texto
<hlayout vflex="1">
<window title="Column 25%" vflex="1" hflex="1" sclass="column1" border="normal">
toffee candy canes cheesecake gummies apple pie. Pie cupcake cheesecake sugar plum tart donut
bear claw caramels. Sesame snaps candy candy faworki sesame snaps chocolate wypas cheesecake.
Cupcake cupcake chupa chups dragée bonbon cotton candy pudding.
</window>
<window title="Column 25%" vflex="1" hflex="1" sclass="column2" border="normal">
toffee candy canes cheesecake gummies apple pie. Pie cupcake cheesecake sugar plum tart donut
bear claw caramels. Sesame snaps candy candy faworki sesame snaps chocolate wypas cheesecake.
Cupcake cupcake chupa chups dragée bonbon cotton candy pudding.
</window>
<window title="Column 50%" vflex="1" hflex="2" sclass="column3" border="normal">
toffee candy canes cheesecake gummies apple pie. Pie cupcake cheesecake sugar plum tart donut
bear claw caramels. Sesame snaps candy candy faworki sesame snaps chocolate wypas cheesecake.
Cupcake cupcake chupa chups dragée bonbon cotton candy pudding.
</window>
</hlayout>
En el ejemplo anterior, utilizábamos los atributos vflex y hflex para ajustar el tamaño de los componentes de acuerdo al tamaño de pantalla de diferentes dispositivos. A continuación demostraremos cómo hacerlo mediante Adaptive Layouts.
Adaptive Layouts
El layout adaptativo es más conveniente que un el layout fluido, el problema que encontramos en el layout fluido es que el contenido únicamente cambia según el tamaño de la pantalla, pero el diseño se rompe si la pantalla no es lo suficientemente grande. El layout adaptativo resuelve esto usando CSS 3 Media Querys.
Por ejemplo,
Nota: A continuación, si el código de no se vé en su totalidad, puedes selecciónarlo y cópiarlo a un documento de texto
<?taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t"?>
<zk>
<style>
.z-hlayout-inner {
${t:applyCSS3('box-sizing', 'border-box')};
height: 100%;
}
.z-hlayout-inner {
width: 25%;
}
.z-hlayout-inner:last-child {
width: 50%;
}
@media screen and (max-width: 1024px) {
.z-hlayout-inner {
width: 50%;
height: 50%;
}
.z-hlayout-inner:last-child {
width: 100%;
display: block;
}
}
@media screen and (max-width: 750px) {
.z-hlayout-inner {
width: 100%;
height: 33%;
display: block;
}
}
</style>
<hlayout vflex="1">
<window title="Column 25%" height="100%" sclass="column1" border="normal">
toffee candy canes cheesecake gummies apple pie. Pie cupcake cheesecake sugar plum tart donut
bear claw caramels. Sesame snaps candy candy faworki sesame snaps chocolate wypas cheesecake.
Cupcake cupcake chupa chups dragée bonbon cotton candy pudding.
</window>
<window title="Column 25%" height="100%" sclass="column2" border="normal">
toffee candy canes cheesecake gummies apple pie. Pie cupcake cheesecake sugar plum tart donut
bear claw caramels. Sesame snaps candy candy faworki sesame snaps chocolate wypas cheesecake.
Cupcake cupcake chupa chups dragée bonbon cotton candy pudding.
</window>
<window title="Column 50%" height="100%" sclass="column3" border="normal">
toffee candy canes cheesecake gummies apple pie. Pie cupcake cheesecake sugar plum tart donut
bear claw caramels. Sesame snaps candy candy faworki sesame snaps chocolate wypas cheesecake.
Cupcake cupcake chupa chups dragée bonbon cotton candy pudding.
</window>
</hlayout>
</zk>
Como puedes ver, hemos eliminado vflex y hflex en el componente Window y reemplazado por estilos CSS directamente, y algunos parámetros @media query para cambiar el componente para que se ajuste al tamaño de la pantalla. max-width: 1024px para el ipad o tablets max-width: 750px para el iphone o smartphones. Pero estos cambios afectan únicamente al cliente, entonces, ¿cómo sabe el desarrollador de ZK en el servidor que ha habido un cambio de orientación en el dispositivo por ejemplo? o ¿cuántos estilos de los componentes tienen que escalarse en una tablet táctil?. Las respuestas a continuación.
Responsive Design (Un poco de todo)
En ZK 6.5, hemos refinado y pulido todos los componentes, ahora ellos realizan lo necesario sin problemas para ajustarse a un navegador clásico de PC o a una Tableta. En algunos casos, el aspecto por defecto puede no ser el apropiado para el usuario o para ajustarse a los diferentes dispositivos, por lo tanto podemos utilizar el evento ClientInfoEvent para detectar cualquier cambio de orientación en el navegador, y ajustar los componentes y su orientación para que el usuario tenga la mejor experiencia.
For example,
Zul Source Code
Nota: A continuación, si el código de no se vé en su totalidad, puedes selecciónarlo y cópiarlo a un documento de texto
<zk>
<zscript><![CDATA[
void doOrientationChange(ClientInfoEvent evt) {
if ("portrait".equals(evt.getOrientation())) {
main.setWidth("100%");
if (evt.getDesktopWidth() < 640)
sv.setVisible(false);
Clients.resize(content);
} else {
if (!execution.isBrowser("mobile"))
main.setWidth("80%");
sv.setVisible(true);
Clients.resize(content);
}
}
]]></zscript>
<tabbox id="main" sclass="main" width="${zk.mobile > 0 ? '100%' : '80%'}"
vflex="1" onClientInfo="doOrientationChange(event)" tabscroll="false"
apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('TweetsVM')">
<custom-attributes org.zkoss.zul.image.preload="true" />
<tabs>
<tab>
<caption>
<div sclass="home" />
Home
</caption>
</tab>
<tab>
<caption>
<image sclass="connect" />
Connect
</caption>
</tab>
<tab>
<caption>
<image sclass="discover" />
Discover
</caption>
</tab>
</tabs>
<tabpanels vflex="1" hflex="1">
<tabpanel vflex="1" hflex="1">
<hlayout id="content" sclass="main-content" vflex="1">
<scrollview id="sv" orient="vertical" vflex="1" hflex="1"
children="@init(vm.profiles)">
<template name="children" var="profile">
<groupbox mold="3d" sclass="profile" hflex="1">
<vlayout>
<hlayout>
<image sclass="@bind(profile.ownerIcon)" />
<vlayout>
<a sclass="fullname" label="@bind(profile.author)" />
<label value="View my profile page" style="color:gray" />
</vlayout>
</hlayout>
<hlayout sclass="status">
<div sclass="vbar first-vbar" hflex="1">
<label sclass="number" value="@bind(profile.tweets)" />
<separator />
<label sclass="text" value="TWEETS" />
</div>
<div sclass="vbar" hflex="1">
<label sclass="number" value="@bind(profile.following)" />
<separator />
<label sclass="text" value="FOLLOWING" />
</div>
<div sclass="vbar" hflex="1">
<label sclass="number" value="@bind(profile.followers)" />
<separator />
<label sclass="text" value="FOLLOWERS" />
</div>
</hlayout>
<textbox rows="2" placeholder="Compose new Tweet..."
multiline="true" hflex="1" />
</vlayout>
</groupbox>
</template>
</scrollview>
<listbox model="@load(vm.tweets)" vflex="1" hflex="1">
<template name="model" var="tweet">
<listitem>
<listcell>
<hlayout>
<image sclass="@load(tweet.authorIcon)" />
<div>
<label sclass="author" value="@load(tweet.author)" />
<separator />
<label sclass="content" multiline="true"
value="@load(tweet.content)" />
</div>
</hlayout>
</listcell>
</listitem>
</template>
</listbox>
</hlayout>
</tabpanel>
</tabpanels>
</tabbox>
</zk>
En este ejemplo, hemos creado el layout con componentes de ZK y hemos registrado el evento ClientInfoEvent para contraolar si la pantalla se reorienta. Gestionamos el contenido principal del listbox usando vflex y hflex para expandir el contenido del tweet de acuerdo a la altura máxima, y entonces aplicamos los mismo conceptos que hemos mencionado en Adaptive Layouts, mediante @Media Query para ajustar algunas áreas de la página, por ejemplo haciendo invisible el área de información del perfil en los smartphones. A continaución veamos un ejemplo de esto en la siguiente sección Contenido CSS.
Nota: Algunos de los componentes y características usadas a continuación únicamente están disponibles en ZK Enterprise Edition. Puedes descargarla y probarla gratuitamente durante 60 días.
Características de las diferentes versiones de ZK
Contenido CSS
Nota: A continuación, si el código de no se vé en su totalidad, puedes selecciónarlo y cópiarlo a un documento de texto
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
<%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>
<%-- For tablet or orientation in portrait devices --%>
@media only screen and (orientation:portrait) {
body {
margin: 0;
padding: 0;
${t:gradient('ver', '#cedce7 0%;#596a72 100%')};
}
<%-- Customize the default tabbox styling --%>
.z-tabs-header {
height: auto;
background: black;
}
.z-tabs-cnt > li.z-tab,
.z-tabs-cnt > .z-tab:active {
background: transparent;
${t:boxShadow('none')};
border: 0;
width: 128px;
height: 32px;
}
.z-tab .z-label {
display: none;
}
.z-tabs-cnt > li.z-tab.z-tab-seld,
.z-tabs-cnt > li.z-tab.z-tab-seld:first-child,
.z-tabs-cnt > li.z-tab.z-tab-seld:active,
.z-tabs-cnt > li.z-tab.z-tab-seld:active:first-child {
background: black;
border-color: transparent;
${t:boxShadow('1px 1px 0 black')};
}
.z-tabs-cnt > .z-tabs {
background: #555;
}
td.z-caption-r {
text-align: center;
}
.main-content {
max-height: 2048px;
}
<%-- Change the tab styling --%>
.z-tab .home {
background: transparent;
}
.z-tab-seld .home {
background: ${t:gradValue('ver', '#02ABDE 0%; #007497 50%; #02ABDE 100%')};
}
.home:before {
top: 12px;
left: 25px;
}
.home:after {
top: -1px;
left: 30px;
}
.connect {
background: url(${c:encodeURL('/images/icons/icon_friendrequests_white.png')}) no-repeat center center;
}
.discover {
background: url(${c:encodeURL('/images/icons/icon_messagestop_white.png')}) no-repeat center center;
}
.z-tab .z-image,
.z-tab .home {
height: 32px;
line-height: 28px;
width: 80px;
}
tr.z-listbox-odd {
${t:gradient('ver', '#cedce7 0%;#596a72 100%')};
}
.z-scrollview-content-ver:first-child .profile {
margin: 10px;
}
.profile {
margin-left: 10px;
border: 3px solid #CFCFCF;
${t:borderRadius('15px')};
${t:boxShadow('0 0 7px rgba(0, 0, 0, 0.70)')};
}
.z-groupbox-3d-cnt {
border: 0px;
}
}
<%-- For smartphones or small screen --%>
@media screen and (orientation:portrait) and (max-width: 720px) {
.main-content {
max-height: 1024px;
}
.z-tabs-cnt > li.z-tab,
.z-tabs-cnt > .z-tab:active {
background: transparent;
${t:boxShadow('none')};
border: 0;
width: 80px;
height: 32px;
}
.z-tab .z-image,
.z-tab .home {
height: 32px;
line-height: 28px;
width: 60px;
}
.home:before {
top: 12px;
left: 20px;
}
.home:after {
top: -1px;
left: 25px;
}
.main-content > .z-hlayout-inner:first-child {
display: none;
}
}
Sumario
El equipo de ZK Framework se esfuerzan para hacer el desarrollo Web y Táctil fácil y simple. Nos cuidamos mucho de no introducir otro conjunto de componentes que aprender, queremos que nuestros usuarios produzcan su producto o sitio web usando un único código base y que este funcione en cualquier sitio.
Descargas
El código completo - Github o descargar el fichero war aquí.
Este documento es un extracto de la documentación oficial del Framework ZK, traducido y ampliado por Francisco Ferri. Colaborador de Potix (creadores del Framework ZK). Si quieres contactar con él puedes hacerlo en franferri@gmail.com, en twitter @franciscoferri o en LinkedIn