8/16/2011

How to create a Liferay Action Menu

Just a quick tutorial on how to create those Liferay Action Menus that you can find everywhere in liferay. Here is one example from the Liferay User Menu:

And here is a little tutorial that shows how those so-called icon menus can be created. All you need are URLs (pointing to your portlets class` methods) and icons. That´s it. The example I will show you now will use all the icons you can find under 
\tomcat-6.0.29\webapps\ROOT\html\themes\classic\images\common.


Here is an example that creates two icons and links them to actionURLs in the portlet class. Notice how we just have to specify that we want to have the edit or permissions icons without having to specify a path or a filename. That´s what I call convention over configuration!

<liferay-ui:icon-menu>
  <portlet:actionURL name="edit" var="edit"/>
  <liferay-ui:icon image="edit" message="Edit" url="<%=edit.toString() %>" />
  <portlet:actionURL name="permissions" var="permissions"/> 
  <liferay-ui:icon image="permissions" message="Permissions" url="<%= permissions.toString() %>" />
</liferay-ui:icon-menu>
Quick Explanation: the action URLs link to the method in the portlet class that matches the "name" attribute. The icon tag is linked to an icon in the chosen theme, has a message and connect to the action URL. That´s all !! I love it !!!


If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.