The navigation for your site can have a huge impact on how people interact with it. Poorly designed navigation can ruin even the best of content, causing people to run screaming from your site to warn the other villagers of the monster you created. This is an exaggeration of course, but the point is that your site’s navigation should be taken seriously.
One important aspect of design is how your navigation is organized. The placement and layout of your site’s navigation can play a big part in how your site is perceived. Liferay UI provides a easy to use tag that allows you to create a list-style navigation with ease:
liferay-ui:icon-list. In fact, Liferay’s Sign In portlet makes use of this tag for its navigation:
As its name suggests, the
liferay-ui:icon-list tag allows you to create a navigation menu from a list of icons. Liferay UI also provides the
liferay-ui:icon-menu tag for a pop-up menu navigation. You can read more about this tag here.
This tutorial covers how to use the
liferay-ui:icon-list tag to create a list-style navigation menu. By the end of this tutorial you should be able to keep the torch carrying mob at bay, at least when it comes to the navigation of your apps.
Setting Up the liferay-ui:icon-list Tag
The example in this tutorial shows how to add and use the
liferay-ui:icon-list tag in the
view.jsp of a portlet by using the following steps:
- Step 1: Reference the liferay-ui Taglib.
- Step 2: Add the liferay-ui:icon-list Tags in the View JSP.
- Step 3: Insert and Configure the liferay-ui:icon Tags inside of the liferay-ui:icon-list Tags.
Go through each of these steps to get your navigation going!
Step 1: Reference the liferay-ui Taglib
view.jspof your portlet. Create one if it doesn’t already exist.
Add this directive to reference the
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
You can now use Liferay UI tags in your portlet! Next, you’ll add the
liferay-ui:icon-list tag to your portlet. It sounds like the unruly mob is already starting to head back to the village!
Step 2: Add the liferay-ui:icon-list Tags in the View JSP
Next, add the
liferay-ui:icon-list tags to the bottom of your portlet’s
view.jsp. The example here shows these tags:
In the next step, you’ll place all the icons in your list inside the tags you just added.
Step 3: Insert and Configure the liferay-ui:icon Tags inside of the liferay-ui:icon-list Tags
Still inside the
view.jsp, nest the
liferay-ui:icon tags inside the
liferay-ui:icon-list tags. There are a few attributes for the
liferay-ui:icon tag that you should note. One such attribute is
image attribute tells Liferay what image to use for the icon. For example, if the value of
"status_online", then Liferay uses its default icon for a user that is online. The
message attribute defines the text to use alongside the icon. For example, if you set the value of
"Sign In", that text appears next to the icon. Finally, the
url attribute defines the URL to go to when the icon is clicked. Here’s an example of an icon list with three icons that use these attributes:
<liferay-ui:icon-list> <liferay-ui:icon image="status_online" message="Sign In" url="www.liferay.com"/> <liferay-ui:icon image="edit" message="edit" url="www.liferay.com"/> <liferay-ui:icon image="add_article" message="Add Article" url="www.liferay.com"/> </liferay-ui:icon-list>
Of course, you can add as many icons as you need to your list. The figure here shows the icon list created by the above code:
There you have it! You can rest easy now, knowing that the villagers will enjoy your site’s navigation.