Introduction

Previously in ZK, applications exceeding the boundaries of browser resolution relies on desktop browsers to automatically generates scroll bars by using CSS style overflow attribute so users can view the entire page but this feature unfortunately is not available on tablet or mobile browsers.

In upcoming ZK 6.5 where responsive design and one codebase for multiple devices is the key, we therefore introduce users to a new scrollview component, which is a component designed to easily construct a scroll-able web page on both tablet and mobile browsers.

When end users access your application via a Tablet or any mobile devices, scrollview component detects and triggers this feature. Oppositely, if the application was accessed via a desktop browser, scrollview remains un-triggered while desktop browser will automatically generate scroll bars when needed just like before.

Demo
Let’s take a look at the demo video below first before digging into the implementation.

Implementation

• Implementation of scrollview is easy. It can be easily used in a simple zul file as shown below:

    
        This is Window 1
    
    
        This is Window 2
    
    

• scrollview also supports onScroll event: in the event you can easily detect if the user is scrolling outside boundaries, and you can choose to append more contents such as to load new updates in the case of Facebook.

<scrollview id="sv"
  onScroll="@command('append',
           target=self,
           pos=event.pos,
           outBound=event.outOfBound)">
  <!-- omitted -->
</scrollview>

public class ViewModel {
  //omitted...
  @command
  public void append(@BindingParam("target") Scrollview sv,
      @BindingParam("pos") int pos,
      @BindingParam("outBound") boolean outBound) {
    if (outBound && pos > 0) {
      //do something when scroll outside bottom boundaries
    } else if (outBound && pos < 0) {
      //do something when scroll outside top boundaries
    }
  }
}

For more detailed information on Scrollview component, please visit here

Related readings:
ZK 6.5 & responsive design: Desktop and tablet applications from the same codebase
ZK 6.5 & Tablet UI Design