Responsive Design in ZK Part 2
Responsive Design
While providing a fluid layout make a UI usable in any screen resolution, some user experiences may require widely different layouts and designs depending on the type or size of the device used to browse the application. In this case, a responsive design can be used to switch between layouts based on browser information.
2.1 MVC Client Info event and composer
The onClientInfo event is used to relay client information such as device dimensions and orientation to the server, and update them if they change during browsing. This event will fire during page initialization and whenever client properties changes, such as tablet orientation or desktop browser resizing. More information of this event can be found here: https://www.zkoss.org/wiki/ZK_Component_Reference/Tablet_Devices/Events/ClientInfoEvent
This event can be leveraged in the MVC pattern, using a controller to alter the page structure based on the information returned from the client. For example, we may want to create a design where a drop component to select one of 3 options will displayed on “large” devices (width >= 1200px), but will be replaced by 3 radio buttons on smaller devices. The underlying data model is reused between these two UI states. When transitioning to a different state we can use this technique to initialize the new UI objects based on the previous UI state data.
[Screenshots]
[Git links]
2.2 MVVm media queries and Shadow components
The same structure can be created following the MVVm pattern using the @MatchMedia annotation introduced in ZK 8.0.2 and shadow elements introduced in ZK 8.0.0
http://books.zkoss.org/zk-mvvm-book/8.0/syntax/matchmedia.html http://books.zkoss.org/zk-mvvm-book/8.0/syntax/shadow_elements.html
The MVVm is a natural fit for this task, since it already provides a clear separation between data and view. On the ViewModel side, the @MatchMedia annotation will trigger whenever the associated media query condition is fulfilled. Media query definition here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
The UI state is represented by a single ViewModel field and control the view. On the view side, Shadow elements are used to instantiate and cleanup the relevant UI elements for each state.
[Screenshots]
[Git links]
2.3 Integrating fluid design elements
Fluid and responsive design can be integrated to create a more granular UI experience. For example, a template generated using responsive design can incorporate fluid design elements to subdivide this template’s display options.
For example, based on the previous case we can add bootstrap grid entries for extra-small, small and medium states to the small layout generated in ZK.
[Screenshots]
[Git links]