ZK 6.5 Responsive design

0
10089

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

     
      
        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.      
      
                 
        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.  
      
      
        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.      
      
 

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"?>
  
  
  
  
      
        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 dragee bonbon cotton candy pudding.  
      
      
        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 dragee bonbon cotton candy pudding.  
      
      
        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 dragee bonbon cotton candy pudding.  
      
  
 

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

  
  
      
          
          
              
                  
                    
Home Connect Discover

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í.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad