Create WebContent and Integrate Flow Player to Play Videos in Liferay

Most of the times we have a requirement from the client to show videos on the home page for marketing purpose or to promote the brands. At that time I looked into the internet for so many different players but I found the Flow Player as the Most efficient and easy to integrate it.

Note:- Download source code at the end of this blog.

Below are some of the Features of Flow Player which make him so much popular:-

• Basic Features

•   Play/Pause Controls
•   FullScreen
•   Playlist 

• Advance Features

•  Common Clipping ( for eg. :-  you can set the duration for all the files in the playlist to play for only 5 seconds )
•  Clipping ( for eg. :-  you can set the duration for each and every individual file in the playlist)
•  Advertising ( You can integrate Advertising in the Flowplayer same as you see in the youtube )
•  Streaming ( Online streaming from live server )

There are so many different video formats are available on Internet. Some Particular format of Video required respective company's Player but some other formats are open and other players can play them.

As FlowPlayer runs on Flash Video Object, so it can virtually handle all format which are supported by flash.

Supported Video Format

Here I am going to show you the small demo about how to integrate Flow Player in Liferay and play videos with the help of it.

List of the necessary files required in order to integrate Flow Player with Liferay are as below:-

jquery1.8.js - Javascript file required for the Flow Player.
flowplayer-3.2.12.min.js - Javascript file required for the Flow Player.
flowplayer.ipad-3.2.12.min.js - Optional Javascript file required for the Flow Player to make Ipad Compatible.
flowplayer-3.2.16.swf - Flash File required in order to play Video or Audio.
flowplayer.controls-3.2.15.swf - Flash File which contains Controls of Flow Player like Volume Control, Slider, Play/Pause etc.

We can integrate the Flow player in two ways either we can use Web Content(Structure/template) or directly integrate in the Liferay Portlet.

Here we are going to see Flow Player integration with Web Content(Structure / Template)

There are three ways to include the Javascript and Flash file :-

1) If you have developed a theme for your site then put the Javascript and Flash files in theme and then include in Velocity(Template).

1. Folder Structure in theme

2) Put the JavaScript and Flash Files in the Document and Media.

2. Files in Document and Media

3) Most appropriate way, put the Javascript files in the Theme and Flash Files in Document and Media.

3.1 Files and Folder in Theme

3.2 Files in Document and Media

Here we are using the third approach.

After configuring the files, now we will start with creating the web-content.

Web Content is Divided in three Parts as below :-

1) Creating Structure.  2) Creating Template. 3) Creating Content.

4. Liferay 6.1 Web Content

1) Creating Structure

4.1 Creating Structure

After Clicking on the Add Structure button the below screen appears.

4.1.1 Structure GUI

Name and Description are the fields in order to name the Structure and also give appropriate description for that structure.

After Scrolling Down you will find XML Schema Definition section. Click on the Add Row button and go on adding as per below screenshot.

4.1.2 Structure XML Schema GUI

We have added three fields in XML Schema as per above screenshot.

VideoFile - Type as Text-Field (It will contain the path of the Video like Flv or mp4 file path).
SWFPlayer - Type as Document and Media ( It will have the flowplayer-3.2.16.swf file from the Document and Media).
SWFPlayerControl - Type as Document and Media ( It will have the flowplayer.controls-3.2.15.swf file from the Document and Media).

Now we are done with our Structure part.

2) Creating Template

4.2 Lifeay 6.2 Creating Template

After clicking on the Add Template button the below screen appears.

4.2.1 Template GUI

Name and Description are the fields in order to name the Template and also give appropriate description for that Template.
Cacheable is for caching the content.
Structure Selection is for selecting the structure that we have created
Language Type is for writting the Template code in different languages (VM,CSS,FTL,XSL)
Launch Editor will open the Screen in which you will be able to write the Template Code.

As you see in screenshot, the Editor with Default Code. Remove that Default Code and add below code in your editor.

Click on update button of Editor and now Save the Template.

Explanation of Template Code

• $image-path will find the image path from theme.
• 2nd and 3rd line is for importing the javascript file that we need to include in Flow Player. But one important thing is that as our Javascript File is in the JS Folder so we moved upto JavaScript Path from ImagePath accordingly.
• Now we have defined link with id as player and href is the location where we will get video file path from the Web-Content Dynamically.
• As we have written Flow Player configuration in ready function of the JavaScript. So When the page will be loaded and it will be ready then Javascript ready function will get called. In that our Flow Player function will be called.
• First parameter in the flow player function is the id of the anchor where we want to place the flow player.
• Second parameter in the flow player function is the parameter that contains the Main SWF File Path.
• Third Parameter is the Plugins of the Flow Player. Here we used Play/Pause, Slider that contains inside the Plugins swf.
• We can add more parameter if we want in the Flow Player functions.

3) Creating Web-Content

4.3 Create Web Content

There are two option either Basic Web Content or Flow Player :-

If you select Basic Web Content then you have to manually select Structure and Template for that web content.
But if you select FlowPlayer then it will automatically select Structure and Template of Flow Player.

After Clicking on it below screen appears.

4.3.1 GUI of Web Content

Title -  Will be appropriate title for the Web Content
Video file - It is the parameter that we defined in the Structure. Add the appropriate path of the Video File
SWF Player & SWF Control File that we need to select it from the Document and Media as we have specified in Structure.

After selecting the SWFPlayer and SWFPlayer Control appropriate SWF's. Click on the Publish Button.

Your Web Content is Created.

Now go any page in the site with Site Administrator or Administrator as a Role in liferay.
You will see the ADD Button on the DockBar.
Click on the ADD Button and select Web Content Display Portlet. It will appear in the page.
From the Web Content Display Portlet select Flow Player. It will appear as below :-

Flow Player integrated with Web Content

Congrats !! Now your job is done.

Download complete source code from here.

Hope it will be useful.

New Features in Liferay Portal v6.2

With every new version of Liferay, it is becoming more robust and easy to use. As I am the member of Liferay 6.2 Comunnity Verifier Group, So I am quite excited to explore its features.

Here I am going to list down some of the new features that you are going to see in Liferay 6.2 CE.

UI Refinements

In the Liferay 6.2 CE Version you will see all the things are very much organized or Categorize form then the previous version.

• Look & Feel :- When I downloaded the latest tomcat bundle of liferay 6.2 CE, the first thing I noticed is there is a change in the Default Liferay theme. Liferay is now upgraded to Alloy 2.0.

Liferay 6.1 Theme

Liferay 6.2 Theme

•   Dockbar :- The Second thing that come into focus is the Dockbar. In Liferay 6.2 they have made it more Categorize form. They have Categorize Admin(Control Panel) and MySites which all comes together in GOTO Section in liferay 6.1 version.

Liferay 6.1 Dockbar

Liferay 6.2 Dockbar

  

• Control Panel :- There was a Major Change in the Control Panel Section. It was divided into Four Sections

• Users - It contains User, UserGroup, Password Policies, Roles, Organization etc in this section.
• Sites - It contains Sites,Sites Template,Page Template,Blogs,Wiki, Document and Media etc in this section.
• Apps - It contains Market Place,Plugins Configuration, Plugins Installation etc in this section.
• Configuration - It contains Portal Settings,Custom Fields,Server Administration and Portal Instances in this section.                   

                    Liferay 6.1 Control Panel                                                         Liferay 6.2 Control Panel

Sites

There are couple of changes and also new portlets are added at site level.

• Recycle Bin :- The name itself speaks a lot. You all knows what the Recycle Bin do in Windows or Trash in Mac. The same feature liferay has implemented here.
  
  In Previous versions of liferay if a user accidentally deletes a document from the Documents and Media portlet, the user has no way to easily restore the document.After this feature is implemented, as an end user, you can easily restore your deleted files by going to the recycle bin to restore files that have been deleted lately. It also provides automatically clean up the Recycle Bin if the file entry is older than one month.    

                                              

Liferay 6.2 Recycle Bin Portlet

• Web Content Management :- You can now organize Web Content in Folders and Sub-Folders in the same way as Document and Media.

 

Liferay 6.2 WCM

• New Template Script Editor with Auto complete :- Good to have this. It was hectic to write scripts in previous versions. It will make life easier.

Liferay 6.2 Script Editor

• Application Display Templates :-  We can make our own Custom templates for Wiki, Blogs, Asset Publisher etc.

Liferay 6.2 Application Display Templates

And lots More .......

Mobile Theme in Liferay

Now no need to do any nightmare work for creating mobile theme. No need to find User Agents and writting different CSS for different device. Single CSS will work for all device.

You are just few steps away for becoming expert in Mobile Theme.

NOTE :- Considering that you are aware of creating the Basic Theme in Liferay.

1) Create a Simple theme as we are creating for normal website portal(Make CSS code as percentage specific rather than Pixel specific for width Especially.).

2) While creating theme, Don't forget to add two most important things.

•      In the portal_normal.vm, header section put the below line

    <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1">

•      In the Script part add below line

     AUI().use('aui-viewport');

Above Two lines will handle your theme according to your device.

3) Complete your coding part that you required for creating the theme( Navigation , footer, etc).

4) Once the Development part is done from your end then you need to do the Configuration part for different device.  

5) Now no need to find user-Agent in Liferay with if and else conditions on the Code of theme. Liferay has solved that problem for us now. Liferay has introduced Mobile Device Rules which will do our work.

6) In order to make it compatible with different Devices like Iphone,Ipad,Android Devices you need to install plugins called WURFL.

 http://sourceforge.net/projects/lportal/files/Liferay%20Plugins/6.1.0%20GA1/wurfl-web-6.1.0.1-ce-ga1-20120106155615760.war/download

7) Once You installed Plugins. Follow the below Video to create different rules for different devices.



8) If you don't have device with you for testing then Install User-Agent Switcher in browser for Chrome and also for Firefox ( Required to restart the browser once you switch the User-Agent).

Thank You Guys for reading. Please post your comments and reviews.

Tabs with Search Container in Liferay

Generally we have to write a lot of javascript and java code in order to deal with paging in Web based application.

But with liferay you don't have to deal with that any more. Your life become easier with liferay.

As I used to post regularly in liferay forums. I found that most of the people face issues of pagination with Tabbing.
Here I would represent how search container works with Tabs.

Below are some of the screenshot for the demo that I am going to discuss in this post.

As you will refer above screenshot, you will be able to see two tabs and both of them having list of data.
First Tab show the list of all the User Group and the Second Tab shows the list of all Users for the Current Company.

Below are the steps you need to follow :-

1) First Create the Controller Class which will extend the MVC Controller and put it's Entry in the portlet.xml.


SearchContainerController.java
2) In order to create the Tabbing View, you have to write below code in your jsp page. So in my case I have created the view.jsp and whose entry by default set in the portlet.xml.
3) As you can see in the view.jsp, there are different sections for User and UserGroup. So we have created separate pages for both of them. In order to display data related to UserGroup and User, we have created usergroup.jsp and user.jsp respectively.

usergroup.jsp

user.jsp

NOTE :- Here on the basis of  "tabs" parameter, it will return the search container.

4) In order to make the code more readable, I created the separate class for both the UserGroup i.e., UserGroupUtil and for User i.e.,UserUtil

UserGroupUtil
UserUtil
In order to work pagging in proper way for search container with different tabs. We need to create the iterator URL in proper manner. Because Pagging in Search Container works based on IteratorURL. So we need to pass proper parameter in the Iterator URL. The Below code plays an key role in the Tabbing with Search Container.
In the above code I used HashMap, because if we have more parameter to pass then we can pass easily in the Iterator URL. Hope it will be useful !!!!

Integrating Solr with Liferay 6

Building Solr & Installing Solr instance on tomcat.

1. Download Solr-1.3.0 release from Solr.
2. Unzip .tar on some location. For eg. /opt/solr/
3. Make /opt/solr/example/solr as a $SOLR_HOME.
4. Copy apache-solr-1.3.0.war file from /opt/solr/dist and paste it into /opt/solr/example/solr.
5. Open up the /opt/solr/example/solr/conf/solrconfig.xml
   Replace
   <dataDir>${solr.data.dir: ./solr/data}</dataDir>
   by following 
   <dataDir>${solr.data.dir:/opt/solr/example/solr/data}</dataDir>

    Note: The dataDir can also be temporarily overridden with the JAVA_OPTS environment variable  prior to starting Tomcat

             export JAVA_OPTS="$JAVA_OPTS -Dsolr.data.dir=/opt/solr/example/solr/data"

6. It is recommended to run the Solr instance on separate tomcat instance other than liferay tomcat.
7. So for separate tomcat for solr, consider it here. $SOLR_TOMCAT
8. Into $SOLR_TOMCAT/conf/Catalina/localhost , create one solr.xml file and copy following content into the file and save it.

9. Now start tomcat and check that it is running without any error or not.

Integrating Solr plugin with Liferay

1. Download Solr plugin which is compatible with the Liferay version.
2. Drop the plugin into $LIFERAY_HOME/deploy directory.
3. Start liferay tomcat server. After started liferay tomcat, just stop both the tomcat servers (SOLR_TOMCAT and LIFERAY_TOMCAT).
4. Openup the $LIFERAY_HOME/tomcat-6.0.18/webapps/solr-web/WEB-INF/classes/META-INF/solr-spring.xml

           for bean id=”solrServer” give the solar tomcat settings and save it.

           for eg. http://localhost:8181/solr

5. Copy the $LIFERAY_HOME/tomcat-6.0.18/webapps/solr-web/WEB-INF/conf/schema.xml file and paste it into /opt/solr/example/solr/conf/ directory.

Congratulation, you have done!

Dynamic Query in Liferay

Liferay provides several ways by which we can retrieve data from database. One of them is dynamic query. You can easily fire complex query using dynamic query and it will reduce overhead of creating custom finder methods. Lets go step by step with easy example. If you want to fire simple AND query then here is the example.

Above query will search in table MycustomTable for records which has status as Pending and userId as 10122. If you want to sort your records in particular order that also you can do.


Above query will order records based on Modified Date and RequestId. Now if you want to fire some complex query like combination of or , And , Between and Like then here is the example. By using RestrictionFactoryUtil we can file OR,AND,Like and Between query.


As you can see above query will try to fetch those records which has subject like "Test Subject" and its created_date is in between the above dates or the records which has status as pending. To execute dynamic query.

Deploying Ext in Liferay 6

On Deploying EXT, We face the problem that our changes are not getting reflected.

I seen people in liferay forums continuously asking for the same.

It is not perfect but will work in the case , if you can't execute the command ant direct-deploy and want to execute ant deploy command.

The following steps you have to follow in order to redeploy the EXT Portlet

My Portlet name is Alert-ext so I am referring with this name in the below steps :-

1) Stop the Server
2) put ext-redeploy-6.0.5.jar in tomcat-6.0.29/Webapps/ROOT/WEB-INF/lib/
3) Delete the Alert-ext portlet from the webapps folder if in case you are redeploying
4) Remove ext-Alert-ext-service.jar from the tomcat-6.0.29\lib\ext
5) Remove all the *-ext.xml from the path tomcat-6.0.29\webapps\ROOT\WEB-INF except struts-config-ext.xml
6) Remove all the jar file related to ext from the tomcat-6.0.29\webapps\ROOT\WEB-INF\lib except ext-redeploy-6.0.5.jar
7) Start the Server
8) Deploy the EXT Portlet
9) After that it will ask for rebooting the server once the EXT portlet is successfully deployed.
10) Now once again start the server.

Your EXT portlet will re-deployed successfully and all the changes will get Executed.

Hope it helps !!!