Blogs

Many people ask how to build portlets which display Flash (SWF) content in the portal with options for changing and controlling that content.

Well, you don't have to build a portlet to handle this. I mean, you can... but you don't have too. Liferay provides all the tools you need to do this right out of the CMS and you can give yourself as much control as you like while still making it simple for non-techincal people...

- First, make sure that the Document Library portlet is configured to allow SWF files (should by default in recent versions).

in portal(-ext).properties:

dl.file.extensions=...,.swf,...

- Upload a file.

- Next, in the Journal portlet, create a Journal Structure with the following basic schema (add more params as you see fit).

Journal Structure:
<root>
  <dynamic-element name='swf-file' type='document_library'></dynamic-element>
  <dynamic-element name='width' type='text'></dynamic-element>
  <dynamic-element name='height' type='text'></dynamic-element>
</root>

- Create a Journal Template which will process the values defined in the Structure.

Journal Template (Velocity - VM):
<object width="${width.getData()}" height="${height.getData()}">
  <param name="movie" value="http://@portal_url@${swf-file.getData()}"></param>
  <param name="wmode" value="transparent"></param>
  <embed src="http://@portal_url@${swf-file.getData()}"  type="application/x-shockwave-flash" wmode="transparent" width="${width.getData()}" height="${height.getData()}"></embed>
</object>

Associate this template with the structure above.

Now create articles which use the above structure and you'll have a file selection dialog available to select a file from Document Library (select your file). Set the desired height, width, "Save", "Approve".

Now all you need to do is add a Journal Content portlet to any page and then select the Article you just created.

The beauty is now that changing the swf is as easy as uploading a new file, and then editting the article and choosing the new file.

Hope that helps!