30 April, 2012

Use of structure and template (Video Portlet)

Here I have try to put information as simple as possible.
Here you will see how we can use structure and template in web content.

To understand the use of structure and template we will take example of video playing functionality.
 Structure will be useful to upload the video and  template would be responsible to display the content in specific format.



Video player using structure and template

Just follow below steps :



1) Go to control panel >> web content section
2) Click on structure tab and Create sample structure (i.e video structure) (see below screenshot)

 Now as per screen shot , click on add row and define video_link filed name and type would be Document and media. Now save it.We are done with structure which has only once filed right now. you can add as many fields as you want.
3)Click on template tab and create one template (i.r video template) (See below screenshot)


Now as per screenshot, you can see one button called "Launch editor" just click on that and put below code into it :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.9.min.js"></script>

<!-- set up container for the player -->
<a id="player" style="width:500px;height:320px;display:block"></a>

<!-- third argument is flowplayer configuration. you cannot use events -->
<script language="JavaScript">
flashembed("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.10.swf", {
    config: {
        clip: 'http://localhost:8080$video_link.getData()',
        plugins: {
            controls: null
        }
    }
});
</script>

4) Now create one web content and associate structure and template to that web content.
5) so when you associate video link structure , web content will have once field to upload the video called video_link which we had created in structure.(See below screen shot)

 6) once you upload the video just click on publish button and publish this document.
7) Now to show this video we will use web content display portelt and configure our web content into that which we have created using video structure and video template.(See below screenshot)




So now you can see the beauty of structure and template in liferay CMS portlet.

Hope this will be useful to reduce effort at some place where you are thinking to create separate portlet to upload video and play video.

Enjoy!!!!!!!!

Rate Me:

7 Discussion:

hemant kumar singh said...

hi..........
the method you posted isint working cold you tell me the method in more detail

Jignesh Vachhani said...

Which method you are talking about here?

hemant kumar singh said...

hi jignesh....
i was talking about your steps that enable vedios in webcontent portlet..actullay the problem is that i follwed all the steps but du to some unknown reason the vedios cant be seen, instead of it the white blank is displayed
thanks plseas rly asap
thanks
hemant

Jignesh Vachhani said...

Hemant,

Sorry for being late in reply..
Hope you would have resolve this issue now but still if you are facing the same problem, please mention your steps here what code you have written.

Sreejith said...

Dear Hemant,
The problem may be, you might have used
clip: 'http://localhost:8080$video_link.getData()',

where you may not be accessing the site using localhost:8080
if so, do change the url and try out

regards
Sreejith

钟鸿 said...

Hi. I create a video protlet successfully following your tutorial. I feel confused about how to displaying a video through a video link instead of uploading the video in the Document and Media center.

Anonymous said...

Hi. I create a video protlet successfully following your tutorial. I feel confused about how to displaying a video through a video link instead of uploading the video in the Document and Media center.