AUI Image Gallery - How to?

                 Photo Gallery, self-explanatory terms  that says its a bunch of photos displayed in a proper manner and can be traversed next-previous.

And below picuture will come to your mind.

Let see how this can be achieved in Liferay by AUI library.

Its very simple, you just need to have below html structure.

 <div id="photogallery">  
   <a href="photo-1.jpg">  
     <img src="photo-1-thumbnail.jpg"/>  
   </a>  
   <a href="photo-2.jpg">  
     <img src="photo-2-thumbnail.jpg"/>  
   </a>  
   <a href="photo-3.jpg">  
     <img src="photo-3-thumbnail.jpg"/>  
   </a>  
 </div>  

This could be achieved by Web-Content Structure-Tempalte or custom entity.

And below javascript.

 <script type="text/javascript">  
   AUI().ready('aui-image-viewer-gallery', function(A) {  
     var imageGallery1 = new A.ImageGallery({  
       links : '#photogallery a',  
       caption : 'Images',  
       autoPlay : true,  
       paginator : {},  
       delay : 20000  
     }).render();  
   });  
 </script>  

And you are done!!
You will be shown with thumbnail images in row, by clicking on any of images gallery would be shown as image shown above.




Its very simple, isnt it?


Lets understand above code a bit.

In javascript, you just need to construct ImageGallery with links "#photogallery a", here photogallery is id of outer div containing anchor tags.

For ImageGallery you can define certain attributes like
autoplay: true by which Slideshow will be played automatically,
caption: 'Images', Images word would be displayed below images.
delay:20000, this parameter is in milli-second means after each 20 second next image would come.
paginator:{}, you can define total attribute inside paginator in order to show less images in horizontal bar.

There are many such attributes AUI ImageGallery comes with.

Example portlet code available at Photo Gallery Portlet.

I hope this would be helpful.
Regards,

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,

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,