Creating Liferay Search Container

Creating Liferay Search Container GUIs

Time for some basic knowledge:

What does the liferay-ui tld say about the search container? How is it possible to create nice and functional search container GUIS? Read the following and you know more:

The search container is always rendering a set of rows that contain one or more columns to display search results. You may change the way the search container is rendering the rows but in the end it will always be a set of rows. So what we are going to do now will only affect the rows itself. We won't change the search container to display grids or something similar.

The liferay search container is structured as follows:

1. <liferay-ui:search-container >   
2. <liferay-ui:search-container-results>  
3. <!-- Calculate results-->  
4. </liferay-ui:search-container-results>  
5. <liferay-ui:search-container-row>  
6. <!--Create the rows that display the search results-->  
7. </liferay-ui:search-container-row>  
8. </liferay-ui:search-container >  

<liferay-ui:search-container >

<liferay-ui:search-container-results>

<!-- Calculate results-->

</liferay-ui:search-container-results>

<liferay-ui:search-container-row>

<!--Create the rows that display the search results-->

</liferay-ui:search-container-row>

</liferay-ui:search-container >

Because we will only care for the rows, we will jump right in and take a look at some of the tags you can use:


search-container-column-text

1. <liferay-ui:search-container-column-text name="userName" property="userName" />  

<liferay-ui:search-container-column-text name="userName" property="userName" />

The column text tag creates a label filled with a header text (name) and a populated value of the search container entity (property). In our case, the property userName would be taken from our entity and displayed.


search-container-column-jsp

1. <liferay-ui:search-container-column-jsp path="/your.jsp" align="right" />  

<liferay-ui:search-container-column-jsp path="/your.jsp" align="right" />

Very powerful! Allows to create a complete JSP that will be displayed in every row. By using this tag you can create your own forms with AlloyUI or standard HTML / Javascript and let the search container do all the magic.

search-container-column-button

1. <liferay-ui:search-container-column-button align="right" href="<%= yourUrl %>" name='clickMe' />  

<liferay-ui:search-container-column-button align="right" href="<%= yourUrl %>" name='clickMe' />

Allows to create a button pretty easy and connect it to a URL.

search-container-column-score

1. <liferay-ui:ratings classPK="<%=user.getUserId()%>" className="<%=User.class.getName() %>" />  

<liferay-ui:ratings classPK="<%=user.getUserId()%>" className="<%=User.class.getName() %>" />

Shows the score for the retrieved object.

These

 tags allow you to create very fast very powerful search container GUIs.

 I´ve only touched the surface here and there is a lot more of liferay

magic that you can discover. Just take a look at the TLD which you can

find here: 

http://code.google.com/p/liferay-book/source/browse/trunk/portlets/library-portlet/docroot/WEB-INF/tld/liferay-ui.tld?spec=svn3&r=3