ZK 6.5 Responsive design

0
9899

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

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

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

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

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

Dejar respuesta

Please enter your comment!
Please enter your name here