Embed portlet in theme

• Create a portlet with any name you want, EX. "portlet-embedded".
• Write your code in portlet (view.jsp) to be displayed.

• After adding your code to the portlet deploy the portlet so it is available for to use in theme.

• Embedding portlet in theme

• Open the velocity template file in which you want to embed the portlet.

• Add below code in velocity template.

Code snippet

<div id="embedded-test-div">
$theme.runtime("headercart_WAR_headercartportlet","queryString", $velocityPortletPreferences.toString())
</div>

• The Red marked line is for to embed a portlet in to theme
• name="headercart_WAR_headercartportlet" the name of your portlet to be embedded with.
• queryString="" give queryString if any other wise blank as it is optional.
• You can set preferences using velocityPortletPreferences string or give blank this is also optional.

• You are done now deploy the theme and you will get the porltet embedded with theme.

• For more information do visit the link

Example of Embedding a portlet in to a web content portlet

• Create a portlet with any name you want, EX. "portlet-embedded".
• Write your code in portlet (view.jsp) to be displayed.

• After adding your code to the portlet deploy the portlet so it is available for to use in web content.

• Adding web content on page

• Go to dock bar and select Add button and click Web Content Display so it's add Web Content Display portlet on to your page.

• After adding web content to page now add the content to web content display by clicking Add Web Content button of Web Content Display portlet. 

Code snippet

   <div id="test-div">
<div id="testdata">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. 
</div>
<div id="embedded-test-div">
            <runtime-portlet 
name="portletembedded_WAR_portletembeddedportlet" 
instance="" queryString=""/>
</div>
</div>

• The Red marked line is for to embed a portlet in to web content 
• name="portletembedded_WAR_portletembeddedportlet" the name of your portlet to be embedded with.
• instance="" give instance name other wise blank.
• queryString="" give queryString if any other wise blank.
• After adding this save the web content with proper name.
• So it display the web content with your data plus the portlet with their data as shown below. 

IPC using client side java script

• Introduction

  The client-side mechanism to communicate portlets is based on events,uses events instead of direct js calls accross portlets is very important
  since it's not possible to know at deployment time which other portlets will be available in a given page.

  By firing/triggering an event one portlet just notifies that something has happened,
  and then one or more of the other portlets in the page might be listening and act accordingly.

  Code snippet:

  Example: Updating a label inside second-portlet using a link provided in the first-portlet.
  
  snippet-1: insert the below code in to docroot/view.jsp of first-portlet.
  
  <script>
  jQuery(
          function () {
            jQuery('a.change_label').click(
              function(event) {
                Liferay.fire('changeLabel');
                return false;
              });
            jQuery('a.remove_label').click(
              function(event) {
                Liferay.fire('removeLabel');
                return false;
              });
         }
  );
  </script>
  <a class="change_label">Click here to fire event</a><br/>
  <a class="remove_label">Remove label on second portlet</a>
  
  snippet-2: insert the below code in to docroot/view.jsp of second-portlet.
  
  <script>
          Liferay.on(
             'changeLabel',
             function(event) {
               jQuery('label.info_label').html('Event fired on first-portlet');
             }
          );
          Liferay.on(
             'removeLabel',
             function(event) {
               jQuery('label.info_label').html('');
             }
          );
                
  </script>
  <br/><label class="info_label" />
  Deploy these portlets and check how they work.
  
  Congratulations !!

  NOTE:

   Liferay.trigger(eventName, data)
   Liferay.bind(eventName, function, [scope])

  These methods have been deprecated in Liferay 6 in favor of

   Liferay.fire(eventName, data)
   Liferay.on(eventName, function, [scope])

   For more Information about this please check this link

   

   

AUI Carousel using WebContent (Structure/Template)

To Create carousel like above image or as shown on Liferay home page

Follow under Given Steps

• Create Structure using under given structure.xml code
• Create Template using under given template.vm code
• After creating structure and template now just add appropriate parameters and images.
• And your carousel is ready for you.

There is a nice tutorial on AlloyUI Carousel which describes in detail about it in very simple term.

structure.xml

1234567891011121314151617181920212223242526272829303132333435363738394041424344

<?xml version="1.0"?> <root> <dynamic-element name="imageIndex" type="text" index-type="" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[true]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Index of the first visible item of the carousel]]></entry> <entry name="label"><![CDATA[Image Index]]></entry> <entry name="predefinedValue"><![CDATA[0]]></entry> </meta-data> </dynamic-element> <dynamic-element name="timeInterval" type="text" index-type="" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[true]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Interval time in seconds between an item transition.]]></entry> <entry name="label"><![CDATA[Time Interval]]></entry> <entry name="predefinedValue"><![CDATA[0.75]]></entry> </meta-data> </dynamic-element> <dynamic-element name="maxImageHeight" type="text" index-type="" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[true]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Provide max height of image element. ex-200]]></entry> <entry name="label"><![CDATA[Max Image Height]]></entry> <entry name="predefinedValue"><![CDATA[250]]></entry> </meta-data> </dynamic-element> <dynamic-element name="maxImageWidth" type="text" index-type="" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[true]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Provide max width of image element. ex-150]]></entry> <entry name="label"><![CDATA[Max Image Width]]></entry> <entry name="predefinedValue"><![CDATA[600]]></entry> </meta-data> </dynamic-element> <dynamic-element name="ImageElementSet" type="selection_break" index-type="keyword" repeatable="true"> <dynamic-element name="image" type="image" index-type="keyword" repeatable="false" /> <dynamic-element name="linkUrl" type="text" index-type="keyword" repeatable="false"/> </dynamic-element> </root>

Below are the details of some basic parameters that we've defined in structure.xml

• imageIndex - Index of the first visible item of the carousel
• timeInterval - Interval time in seconds between an item transition
• maxImageHeight - Provide max height of image element. ex-200
• maxImageWidth - Provide max width of image element. ex-150
• ImageElementSet
  • image - Browse & upload image to be displayed
  • linkUrl - Url of image if you want to make it clickable
   
  

template.vm

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

#set($imageWidth = $maxImageWidth.Data) #set($imageHeight = $maxImageHeight.Data) #set($imageWidthPx = $imageWidth + "px") #set($imageHeightPx = $imageHeight + "px") #set($interval = $timeInterval.Data) #set($activeIndexValue = $imageIndex.Data) <style type="text/css"> .aui-carousel { -moz-user-select: none; margin: 20px 0; } .aui-carousel-item { border-radius: 10px 10px 10px 10px; text-indent: -9999em; } .aui-carousel li { margin: 0 !important; } </style> #set($totalCount = 0) <div id="carousal"> #foreach($imageElement in $ImageElementSet.getSiblings()) #if($imageElement.image.getData() != "") #if($imageElement.linkUrl.getData() != "") <a href="$imageElement.linkUrl.Data"> <img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" /> </a> #else <img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" /> #end #set($totalCount = $totalCount + 1) #end #end </div> #if($totalCount > 0) <script> AUI().ready('aui-carousel', function(A) { var carousel = new A.Carousel( { contentBox: '#carousal', activeIndex: $activeIndexValue, intervalTime: $interval, width: $imageWidth, height: $imageHeight }).render(); }); </script> #end