Tuesday 15 December 2015

Liferay ui tab

liferay-ui:tabs
This tag is usefull for generating tab based view for your content.
It renders as:

tag:
  <portlet:renderURL var="portletURL"></portlet:renderURL>  
   <liferay-ui:tabs param="currTAB" names="tab1,tab2,tab3" refresh="<%= true %>" url="<%=portletURL.toString() %>">  
       <liferay-ui:section>  
        <%@ include file="tab1.jsp" %>  
       </liferay-ui:section>  
       <liferay-ui:section>  
        <%@ include file="tab2.jsp" %>  
       </liferay-ui:section>  
       <liferay-ui:section>  
        <%@ include file="tab3.jsp" %>  
       </liferay-ui:section>  
   </liferay-ui:tabs>  

names is the labels of your tabs. Depending on your names attributes [comma separated], number of tabs would be generated. Inside liferay-ui:tabs tag, liferay-ui:section will serve as content of any tab. 
Tab names and its content are matched per order they are defined.
refresh:false, page will not refresh when you click on any tab.
true, page will get refreshed whenever clicking on any tab.

liferay-ui:input-date
You may need form to have date field as input.
To serve you, liferay comes up with input-date tag with liferay-ui tag library.
It renders as:
tag:
 <liferay-ui:input-date yearRangeEnd="2017" yearRangeStart="2000" dayParam="day" monthParam="month" yearParam="year"/>  
yearRangeStart yearRangeEnd attributes specifies year start-end.
dayParam,monthParam,yearParam these attributes' value would be name of select components so you can get it's value at server side.
By default current date would be shown, you can change default behavior by attributes dayValue, monthValue, yearValue.
You may want to have null[blank] selection of your date[day or month or year], then you can make any of attributes[ dayNullable,monthNullbale,yearNullable monthAndYearNullbale] as true


liferay-ui:calendar
This tag is useful when you want to show calendar like ui as shown below.
It renders as:

tag:
 <liferay-ui:calendar year="2013" month="1" headerPattern="dd/MM/yyyy" day="3"/>  

day,month,and year specifies which date you want to have calendar shown.
headerPattern specifies date pattern shown at header of calendar.

No comments:

Post a Comment