Buscar
Social
IntelliJ IDEA

Contenido de otras web
En javaHispano...
« ApacheCon Europe 2012 | Main | Resultados de las elecciones 2012 al Java Community Process »
viernes
nov092012

ZK 6.5 Responsive design

ZK Framework




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

  1. Introducción
    1. Layouts Fluidas
    2. Layouts Adaptativas
  2. Responsive Design (Un poco de todo)
  3. Contenido CSS
  4. Sumario
  5. Descargas

Introducción

Este tutorial pertenece a la siguiente serie:

  1. ZK Responsive Design, enfoque/filosofía
  2. ZK 6.5 Responsive design
  3. ZK 6.5 Empezando con el Responsive Design
  4. 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,

Layouts fluidos

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,

Layouts fluidos

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,

Layouts fluidos

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

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (1)

excelente articulo.. yo estoy usando ZK 6.5 de hace un mes mas o menos y este articulo me cae como anillo al dedo. gracias

noviembre 13, 2012 | Registered Commentermarioko

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>