Thursday 13 March 2014

Custom Terms of condition page per site-Liferay

Hello,

Liferay very famous portal framework gives ability to add more then one sites in our portal instance.

It may happen that User want customized terms and condition page per site and we can easily achieve this goal through hook in Liferay and also manage it from user interface.

Lets go...Step by step,

1) Create "TERMS-OF-USE-PER-SITE" web content in particular site.Here please note that the name of the web content is important because hook fetch that content while showing terms and condition page to the user.
So in each and every site you have that above name page.
You can change the name of the page but for that you have to change your hook accordingly ;)

2)Create a hook in Liferay developer studio you can use eclipse with Liferay plugins as well.
Showing project structure as below.


3) Now add below content in terms_of_use.jsp




 <%@page import="com.liferay.portlet.journal.service.JournalArticleLocalServiceUtil"%>  
 <%@page import="com.liferay.portlet.journal.model.JournalArticle"%>  
 <%@ include file="/html/portal/init.jsp" %>  
 <%  
 String currentURL = PortalUtil.getCurrentURL(request);  
 String termsofuse= "TERMS-OF-USE-PER-SITE";  
 String referer = ParamUtil.getString(request, WebKeys.REFERER, currentURL);  
 if (referer.equals(themeDisplay.getPathMain() + "/portal/update_terms_of_use")) {  
      referer = themeDisplay.getPathMain() + "?doAsUserId=" + themeDisplay.getDoAsUserId();  
 }  
 %>  
 <c:set var="articleCount" value="<%=JournalArticleLocalServiceUtil.getArticlesCount(themeDisplay.getScopeGroupId()) %>"/>  
 <aui:form action='<%= themeDisplay.getPathMain() + "/portal/update_terms_of_use" %>' name="fm">  
      <aui:input name="doAsUserId" type="hidden" value="<%= themeDisplay.getDoAsUserId() %>" />  
      <aui:input name="<%= WebKeys.REFERER %>" type="hidden" value="<%= referer %>" />  
      <c:choose>  
           <c:when test="<%=JournalArticleLocalServiceUtil.getArticlesCount(themeDisplay.getScopeGroupId()) > 0 %>">  
           <c:catch var ="catchException">  
                       <%String articleResourcePrimKey = JournalArticleLocalServiceUtil.getArticleByUrlTitle(themeDisplay.getScopeGroupId(), termsofuse).getArticleId();%>  
                     <liferay-ui:journal-article groupId="<%=themeDisplay.getScopeGroupId() %>" articleId="<%=articleResourcePrimKey %>" />  
           </c:catch>  
           </c:when>  
      </c:choose>  
                <c:if test = "${catchException != null || articleCount==0}" >  
                     <p>  your custom or default content
           </c:if>  
      <c:if test="<%= !user.isAgreedToTermsOfUse() %>">  
           <aui:button-row>  
                <aui:button type="submit" value="i-agree" />  
                <%  
                String taglibOnClick = "alert('" + UnicodeLanguageUtil.get(pageContext, "you-must-agree-with-the-terms-of-use-to-continue") + "');";  
                %>  
                <aui:button onClick="<%= taglibOnClick %>" type="cancel" value="i-disagree" />  
           </aui:button-row>  
      </c:if>  
 </aui:form>  


3) Add below content in liferay-hook.xml


 <?xml version="1.0"?>  
 <!DOCTYPE hook PUBLIC "-//Liferay//DTD Hook 6.1.0//EN" "http://www.liferay.com/dtd/liferay-hook_6_1_0.dtd">  
 <hook>  
      <language-properties>  
           content/Language_en.properties  
      </language-properties>  
      <custom-jsp-dir>/custom_jsps</custom-jsp-dir>  
 </hook>  

Anddd  you are done.....:D

Deploy the hook create web content with specific name as described in step 1.Which can be managed by User interface.

Thanks....GOOD DAY.

Tuesday 11 March 2014

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