Dynamic JCarousal in Zk+Liferay portlet

Dynamic JCarousal in Zk+Liferay portlet


So we have already seen simple JCarousal in our previous post ...now lets make Dynamic one.

Lets start...

1) Edit ZkController.java as below:

 package com.liferay.zk.controller;  
 import java.util.ArrayList;  
 import java.util.HashMap;  
 import java.util.List;  
 import java.util.Map;  
 import org.zkoss.zhtml.Ul;  
 import org.zkoss.zk.ui.Executions;  
 import org.zkoss.zk.ui.select.SelectorComposer;  
 import org.zkoss.zk.ui.select.annotation.Wire;  
 import org.zkoss.zk.ui.util.Clients;  
 import org.zkoss.zul.Window;  
 public class ZkController extends SelectorComposer<Window> {  
      private static final long serialVersionUID = 1L;  
      @Wire("#mycarousel")  
      private Ul mycarousel;  
 @Override  
 public void doAfterCompose(Window comp) throws Exception {  
      // TODO Auto-generated method stub  
      super.doAfterCompose(comp);  
      
      List<String> imageurls = new ArrayList<String>();  
      imageurls.add("http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg");  
      imageurls.add("http://static.flickr.com/57/199481087_33ae73a8de_s.jpg");  
      imageurls.add("http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");  
      imageurls.add("http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");  
      imageurls.add("http://static.flickr.com/69/199481255_fdfe885f87_s.jpg");  
      imageurls.add("http://static.flickr.com/58/199481218_264ce20da0_s.jpg");  
      imageurls.add("http://static.flickr.com/70/229228324_08223b70fa_s.jpg");  
      Map<String, List<String>> arg = new HashMap<String, List<String>>();  
      arg.put("map",imageurls );  
      Executions.createComponents("/zul/template.zul", mycarousel, arg);       
      Clients.evalJavaScript("jQuery('#mycarousel').jcarousel({ scroll: 1,visible: 3});");  
 }  
 }  

Here we have added urls of images dynamically in our java class.You can also pass one POJO list and manipulate it on zul page. How to manipulate that we gonna see on this page like I have done in this post for getting urls of images in my zul file.

2)Edit view.zul file as below:

 <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>  
 <zk xmlns:html="http://www.w3.org/1999/xhtml">  
 <window title="jcarousel" id="window" apply="com.liferay.zk.controller.ZkController">  
 <div class=" jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">  
 <html:ul class="jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 950px;">  
           <!-- dynamically add html li tags here with help of java controller... -->  
   </html:ul>  
  </div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;"></div>  
  <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div></div>  
  </div>  
 </window>  
 </zk>  

3)Keep main.css as it is as was in previous post.

4)Make template.zul file and add below content and put that file under docroot/zul folder.

 <?page title="new page title" contentType="text/html;charset=UTF-8"?>  
 <zk xmlns:html="http://www.w3.org/1999/xhtml" forEach="${arg.map}">  
  <html:li class="jcarousel-item jcarousel-item-horizontal " style="float: left; list-style: none outside none;" ><image width="75" height="75" src="${each}"></image></html:li>  
 </zk>  

This file work as a template which is manipulate by controller and added this manipulated content to main view.zul file.

Project Structure:

5)  And its done...Deploy it and You will see below screen.....:D

You can use this technique for creating different elements dynamically like for List elements You could use this tweak ....;) GOOD DAY