Introduction

If you thought responsive web design (RWD) in ZK could not get any better, you thought wrong.
In the past, ZK has provided a way for developers to make their website responsive in CSS. Since the metric to weight search results on a mobile device is now largely based on how mobile-friendly a site is, we are committed to providing a more convenient and flexible way for developers.
ZK introduces what is called MatchMedia, a new feature in ZK 8.0.2 MVVM. RWD websites can now be developed in JAVA without any CSS.
In this post we will investigate the results of combining MatchMedia with UI template injection in ZK 8 and discover its power and versatility.

ZK Responsive Website Demo

The following demonstrates how the website viewing interacts with the width of the browser.

Required Configuration

Versions:

• ZK PE and EE: 8.0.2.FL.20160329-Eval or later

ViewModel

We provided a new annotation for developers to use.

• @MatchMedia: [ElementType.METHOD] a way to invoke the method when the media query matches.
  Values of this annotation should follow the criteria which are listed in this media query’s spec.

Using these methods, we change the applied template when media query is matched.
Line 1 and 10: we declare @MatchMedia on the method we want to invoke when the viewport matches the media queries we declared in the annotation value.
Line 2 and 11: we have to notify binding on one or more property changes.
@ContextParam in line 3 and line 12 are optional; by using @ContextParam we could get the client information by reaching the triggered event ClientInfoEvent.
Line 4 and 13: we get the desktop width by the event.

	@MatchMedia("all and (max-width: 768px)")
	@NotifyChange("*")
	public void max768(@ContextParam(ContextType.TRIGGER_EVENT) ClientInfoEvent evt) {
		browserWidth = "Browser Width: " + evt.getDesktopWidth() + "px";
		rightTemplate = "verti";
		tabboxOrient = "top";
		gridTemp = "grid3";
	}

	@MatchMedia("all and (max-width: 414px)")
	@NotifyChange("*")
	public void max414(@ContextParam(ContextType.TRIGGER_EVENT) ClientInfoEvent evt) {
		browserWidth = "Browser Width: " + evt.getDesktopWidth() + "px";
		mainTemplate = "verti";
		navWidth = "100%";
	}

As shown in the demo video, when the width of your browser is smaller than 768px, the method max768 will be invoked, and the layout will be changed.
And if the width is smaller than 414px, both max768 and max414 will be invoked.
(Notice that we couldn’t ensure the invoke order when the media query region is overlapping.)

ZUL

	

		
		
	
	
	
	
	//omitted

Downloads

The whole demo project can be found on Github project