Liferay UI Tags - 1

Liferay UI Tags:

          Liferay comes with many tag libraries with it.[aui,theme,ui,securiy,util].Here we are to talk about some of the tags of liferay ui tag library.

liferay-ui:ratings
This tag is useful when you want to have rating for your custom entity.
It renders as:

tag:

 <liferay-ui:ratings className="entity classname" classPK="primarykey of entity"/>

On rating it will automatically add entry for entity in ratingsentry database table of liferay.

liferay-ui:asset-tags-selector
This tag is useful when you want to have tag selector for your custom entity or liferay's any entity[assets].
It renders as :

tag:

 <liferay-ui:asset-tags-selector/>  

It gives functionality of selecting tags, adding tags. Basically this component provides assetTagNames hidden parameter as comma separated values of tags selected,added.
You have to write your own logic for adding/updating mapping of tags and your entity based on hidden parameter.If you provide classPK and className attribute with asset-tags-selector it will give you tags for that entity.

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.

liferay-ui:icon-
There are about five tags related to icon as shown below.
What it does is self-explanatory so just mapping them with images how they looks.
They render as:

  <liferay-ui:icon-delete url="<%=portletURL.toString() %>"/>  
   <liferay-ui:icon-deactivate url="<%=portletURL.toString() %>"/>  
   <liferay-ui:icon-help message="Help"></liferay-ui:icon-help>  
   <liferay-ui:icon-menu>  
    <liferay-ui:icon-delete url="<%=portletURL.toString() %>"/>  
    <liferay-ui:icon-deactivate url="<%=portletURL.toString() %>"/>  
   </liferay-ui:icon-menu>  
   <liferay-ui:icon-list>  
    <liferay-ui:icon-delete url="<%=portletURL.toString() %>"/>  
    <liferay-ui:icon-deactivate url="<%=portletURL.toString() %>"/>  
   </liferay-ui:icon-list>  

NOTE:Stay tuned for next blog on same topic..!
Example code available at liferay-tags-portlet.

  Regards,