Dynamic Customization in Theme via Theme Settings

Liferay provides rapid development feature for its theme.

Many time we may need some part of theme on need bases, timely changeable features.

For Example, say back ground images of portal should be customizable/changeable

on run-time. or you need customized/changeable menu on run-time.

This is achievable by theme settings in liferay-hook.xml of developed theme. 

 <?xml version="1.0"?>  
 <!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.1.0//EN"  
 "http://www.liferay.com/dtd/liferay-look-and-feel_6_1_0.dtd">  
 <look-and-feel>  
      <compatibility>  
           <version>6.1.0+</version>  
      </compatibility>  
      <theme id="example" name="Example">  
            <settings>  
           <setting key="image" type="text" configurable="true" value="image.png" />  
                <setting key="navigation-menu" type="select" configurable="true" value="mega-menu" options="mega-menu,default-menu,custom"/>  
      </settings>  
      </theme>  
 </look-and-feel>  

Above setting attributes will be available in interface so you can set it anytime.

Now, in your theme's vm file, you may want to have custom view based on these settings.

You would require to check values of these settings, below is the code snippet to fetch those 

setting.

 #set ($theme_settings = $themeDisplay.getThemeSettings())  
 $theme_settings.getProperty('Image')   
 $theme_settings.getProperty('navigation-menu')   

You can have if else conditions based on value of settings to customize your view.

Hope this would help you. 

Regards, 

Application Display Templates - One of the New Features in Liferay 6.2

                       Liferay comes with many collaboration functionality related portlets like Asset Publisher, Blogs, Wiki, Media Gallery.

                      Many  times client has requirement which differs in terms of look and feel from this OOB portlets, to achieve such requirement the only way before Liferay 6.2 was to create jsp hook and do modification to jsp files. But this doesnt required any more if your requirement is not so complex.

                      Liferay 6.2, comes with concept "Application Display Templates",  WithApplication Display Templates, you can define custom display templates used to render asset-centric applications.

Liferay comes with 7 Application Display Templates as shown in image below.

 Each of Edit Screen for Application Display Template contains respective variables to use in Editor.

For Example: Asset Entries/ Blog Entries / Pages / Tags / Documents are available as entries variable in respective templates

           
Lets understand it by example:
Say you want to display list of Asset Entries in Asset Publisher with just title and date[with format dd MM yyyy].

To achieve this create on Asset Publisher Template, with script as below.

 #if (!$entries.isEmpty())  
   #foreach ($curEntry in $entries)  
     <a href='$assetPublisherHelper.getAssetViewURL($renderRequest, $renderResponse, $curEntry)'>$curEntry.getTitle($locale)</a>  
     $dateTool.format("dd MMM yyyy",  
  $dateTool.toDate("EEE, dd MMM yyyy hh:mm:ss Z", $curEntry.getPublishDate()), $locale)  
     <br/>  
     #end  

       
And then in Asset Publisher's Configuration Display Setting >  Display Template, select your created Asset Publisher Template and save configurations.
Similarly, you can set Display Template for portlets like Blogs, Wiki, Tags navigation, Categories navigation, SiteMap, Media Gallery etc.

By this you will see list of assets with Published date in particular format.

Thus, you can customize view of Asset Publisher portlet.

Similarly, you can also customize view for Blogs portlet, Tags navigation, Site Map, Categories Navigation, Media Gallery.

You will find default Carousel Display Template for Media Gallery in Liferay 6.2 version.

Cheers!

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,