Layout PSML Components for Portlets

We saw how menus and panes define the navigational layout of a site. Here we will look at how to layout portlets on a particular pane. A pane is the container for portlets. Inside this container we have the choice of laying out portlets in a number of designs. This is accomplished using portlet controllers. In Tutorial 3, we only define portlets in the third pane Jetspeed Portlets.

There are a fair number of controllers available for portlets: 


1. One Column - All portlets flow down a single column on the pane
2. Single Row - All portlets flow across the pane in a single row
3. Three Column - The portlets flow down 3 columns, given column width percentages:
    a. 25/50/25
    b. 33/33/33
4. Two Column - The portlets flow down 2 columns, given column width percentages:
    a. 50/50
    b. 25/75
    c. 75/25

Lets look at the pane definition for the Turbine default resource. Here we define four portlets to occupy this pane using a TwoColumns controller: 


    <portlets id="103">
        <metainfo>
            <title>Jetspeed Portlets</title>
        </metainfo>

        <controller name="TwoColumns"/>

        <entry parent="BBCFrontPage">
            <layout>
                <property name="column" value="0"/>
                <property name="row" value="0"/>
            </layout>
        </entry>

        <entry parent="WeatherPortlet">
            <layout>
                <property name="column" value="0"/>
                <property name="row" value="1"/>
            </layout>
            <parameter name="weather_city_info" value="US/AZ/Phoenix"/>
            <parameter name="weather_style" value="infobox"/>
        </entry>

        <entry parent="StockQuote">
            <layout>
                <property name="column" value="1"/>
                <property name="row" value="0"/>
            </layout>
        </entry>
        <entry parent="DatabaseBrowserTest">
            <layout>
                <property name="column" value="1"/>
                <property name="row" value="1"/>
            </layout>
            <parameter name="sql" value="select * from coffees"/>
            <parameter name="windowSize" value="10"/>
        </entry>

    </portlets>

Notice that you can specify the location of the portlet using the layout element and the column and row properties. This is a task that is normally better handled by the customizer: 


 <layout>
   <property name="column" value="1"/>
   <property name="row" value="0"/>
 </layout>

If its not already obvious, the entry element is used to reference a portlet. We will have a closer look at the entry tag in tutorial 5.

There are controls that can be applied to portlet entries as decorators. When applied to a portlet entry, controls define the window around the portlet. Here are some typical controls: 


1. Boxed Title Control  draws a box around the portlet, adds a title bar and action icons. 
2. Clear Portlet Control  draws no decorators
3. Simple Titled Control  adds a title bar and action icons, but no box

Finally there are default settings for controls, controllers and skins which are defined in JetspeedResources.properties.merge. 


services.PortalToolkit.default.control = TitlePortletControl
services.PortalToolkit.default.controller = OneColumn
services.PortalToolkit.default.skin = orangegrey

Portlet entries which do not have a control specified will use the default control. In the default Jetspeed deployment, this is the control described as '3.' above, the Simple Title Control.