Liferay UI tags - 2

Continuing previous blog, here are some more liferay-ui tags.

liferay-ui:input-move-boxes

   This tag is useful when you need to use input move box having left and right boxes where one can   move input items from one box to other. Image below is more descriptive what I am trying to say.

tag:

  <%  
      List leftBox = new ArrayList(), rightBox = new ArrayList();  
      rightBox.add(new KeyValuePair("5","I5"));  
      leftBox.add(new KeyValuePair("1", "I1"));  
      leftBox.add(new KeyValuePair("2", "I2"));  
      leftBox.add(new KeyValuePair("3", "I3"));  
      leftBox.add(new KeyValuePair("4", "I4"));  
      %>  
      <liferay-ui:input-move-boxes  
      leftBoxName="left_box"  
      leftTitle="Available Items"  
      leftList="<%=leftBox%>"  
      leftReorder="true"  
      rightBoxName="items"  
      rightTitle="Selected Items"  
      rightList="<%=rightBox%>"  
      rightReorder="true"   
       />  

•   leftBoxName,rightBoxName would be select box element name.
•   leftList, rightList are list of items[KeyValuePair objects] to be displayed in select box.
•   leftTitle, rightTitle are titles  to be displyed.
•   rightReOrder,leftReOrder sets if you want to make select box items to be reorder-able.

    NOTE: This is just presentation logic, in order to get all rightSide selection or leftSide selection   before submitting form they needs to be made as selected by js.
   For Example:

 $('#_liferaytags_WAR_liferaytagsportlet_items option').attr('selected', 'selected')  

liferay-ui:asset-links

   Liferay provides functionality of relating assets to other asset. In Edit Screen of asset there is section Related Assets for selecting related assets.
   liferay-ui:asset-links is usefull when you want to display related assets of some asset entry.
   It renders as:
  

tag:

 <liferay-ui:asset-links assetEntryId="11706" className="<%=JournalArticle.class.getName() %>" classPK="11704"></liferay-ui:asset-links>  

liferay-ui:input-time

    It renders as below:

    tag:

 <liferay-ui:input-time minuteParam="minute" amPmParam="ampm" hourParam="hour"/>  

    value of hour, minute and am/pm would be available as request parameters named as  hourParam,   minuteParam and ampmParam respectively.

liferay-ui:input-time-zone 

   It renders as select drop-down of timezones below:

   tag:

 <liferay-ui:input-time-zone name="timezone"/>  

    selected value will be available as request parameter named timezone.

liferay-ui:panel-container
 
   You may need to display contents in panel view. liferay-ui:panel is useful.
   It renders as:
 

  tag:

 <liferay-ui:panel-container accordion="false">  
           <liferay-ui:panel title="Panel1">  
                Panel1 Content  
           </liferay-ui:panel>  
           <liferay-ui:panel title="Panel2">  
                Panel2 Content  
           </liferay-ui:panel>  
 </liferay-ui:panel-container>  

 By setting accordian to true, you can have accordian view for panels.

Code available at liferay-tags-portlet

Still more tags to come....!

Regards,