So far, we have discussed portals and how to create pages. Now, you are ready to learn how to use portlets.
Note
A Portlet is an application that contains specific business logic that provides a fragment of content in a portal page. The information shown as the output of a portlet could depend on specific user permissions. Permissions are related to the user accessing the page; this means that the potential output for the fragment is dynamic for each user.
Each portlet is hosted in a Portlet Container that manages the execution of portlet requests and provides a user-session mechanism. The sessions are used to check permissions and to show user-oriented information for each active session in the portal.
In this example, you will learn how to add and remove applications against portal pages.
We want to create a standard portlet for showing details in the Contact us page that we have created in the previous recipe.
In this recipe, we will start by implementing a portlet as a Gadget without writing specific Java code.
Note
A Gadget is a simple application written in XML and JavaScript that allows you to create custom dashboards for specific user-oriented features that can be used by any gadget container.
First, let's create a new gadget showing the HTML content for our new Contact us page:
- Leave your pointer on Group | Administration and click on Application Registry.
- Click on Create a new gadget.
- Set the value
Contactusin the Name field and type the following code in the Source field:<?xml version="1.0" encoding="UTF-8" ?> <!-- ** * * Author : Piergiorgio Lucidi * * Apr 06, 2012 * --> <Module> <ModulePrefs author="Piergiorgio Lucidi" title="Contact us" directory_title="Contact us" title_url="http://www.open4dev.com" description="This is the Contact us page of the example Financials portal." height="600"> <Locale lang="en"/> </ModulePrefs> <Content type="html"> <![CDATA[ <body> <div> <h2>Your company name</h2> <strong>Our Office</strong> <p>Your company address</p> <p>Your company phone number</p> <strong>Email us</strong> <p><a href="mailto:[email protected]">[email protected]</a></p> </div> </body> ]]> </Content> </Module> - Click on the Save button and you should find the new gadget available in the list on the left panel.
- Add a category for this new gadget by clicking on Click here to add into categories.
- Select Gadgets and click on the Save button.
- Now we have a new portlet available in the Gadgets category. In order to use it in the Contact us page, leave your pointer on Site | financials and click on Contact us.
- Leave your pointer on Site Editor and click on Edit Page.
- In the Page Editor panel, click on Gadgets in the Applications tab.
- Listed among Gadgets you should see the new Contact us gadget. Drag-and-drop it in the page panel on the left.
- Click on Switch View Mode to take a look at the page preview before saving your changes.
- Click on the disk icon at the top-right of the Page Editor.
- Finally, you should see the HTML fragment in the Contact us page as shown in the following screenshot:
GateIn supports standard portlets and standard gadgets as applications for pages.
In this recipe, we have seen how to create a new standard custom gadget to create an HTML fragment for a block in the page.
This is done because GateIn doesn't provide any mechanism for dynamic web content management, but you can implement your own portlet to achieve this goal for your specific requirements.
Note
Notice that the Enterprise versions of GateIn, provided by JBoss and eXo, include specific types of portlets dedicated to managing web content.
The differences between portlets and gadgets are related to your specific requirements, and depend on the type of business logic that you need to implement.
A gadget is based on XML and JavaScript code, this means you can't write complex business logic rules for your client application. You can only implement a simple client application for rendering the HTML fragment for the page.
However, if you need an Enterprise-class code for your business logic and you need to write your own Java code, you have to implement a standard portlet for your client. In this way you will have all the capabilities offered by the portlet standard that are available in GateIn as a standard portlet container.
Of course, you can try to use other portlets in the Page Editor. The categories available in the Applications tab are as follows:
- Administration
- Dashboard
- Gadgets
- Web
Under the Administration category, you will find the following portlets:
- Application Registry: This allows to manage applications (portlet and gadgets)
- New Account: This exposes the registration feature
- Organization Management: This manages users, groups, and memberships
The Dashboard category contains the following:
- Dashboard Portlet: This manages the dashboard of users
- Gadget Wrapper Portlet: The default wrapper used for gadgets
The Gadget Wrapper Portlet is the default wrapper that is automatically applied when you drag-and-drop a gadget in the page. This is done because in any portlet container, you need a portlet implementation for each application and GateIn provides a standard wrapper for supporting gadget applications.
The default Gadgets provided in GateIn are:
- Calculator
- Calendar
- Rss Reader: An example of a simple RSS Reader
- Todo: Manages a simple to-do list
Finally, the last category available is Web, which contains the following portlets:
- IFrame: Renders an HTML
iframetag configuring thesrcattribute in the portlet preferences - SiteMap: Dynamically generates the HTML fragment for the default sitemap
Using the Containers tab, you can add some sections in the page with a dedicated layout, with the following options:
- Rows Layout: This allows positioning portlets in rows
- Columns Layout: This allows positioning portlets in columns
- Autofit Columns Layout: This allows positioning portlets in autofit columns
- Tabs Layout: This allows creating tab sections
- Mixed Layout: This allows using mixed-layout sections
By simply dragging-and-dropping portlets on the page, you can set up a different output for the page. For instance, we can now try to set up a three-columns layout and then add three different applications in the same row:
- Leave your pointer on the Site Editor and click on Edit Page.
- Remove the existing Contact us portlet. from the page.
- Click on the Containers tab in the Page Editor.
- Click on Columns Layout and drag-and-drop the Three Columns layout in the page.
- Click on Applications tab.
- Drag-and-drop the Contact us page.
- Drag-and-drop the Calendar gadget.
- Drag-and-drop the Calculator gadget.
- Click on the disk icon at the top right of the Page Editor to save the page.
You should see output in your page similar to the following screenshot:
In this section, we will see how we can manage the settings for a portlet:
- With the Page Editor you can drag-and-drop applications inside page sections. It is also possible to change settings for existing portlets using the tooltip available in the page layout:
- Grid icon: Allows changing the location of the portlet
- Pencil icon: Allows changing portlet settings
- X icon: Removes the portlet instance from the page
- Click on the pencil icon.
- The default selected tab is Portlet Setting. Here you can change the following options for categorizing and changing the output of the portlet:
- Portlet Title: Sets the title of the portlet
- Width: Sets the size in pixels of the width
- Height: Sets the size in pixels of the height
- Show Info Bar: Manages the rendering of the information bar
- Show Portlet Mode: Manages the rendering of the portlet mode
- Show Window State: Manages the rendering of the windows state
- Description: Changes the description
- Click on the Select Icon tab to select a new icon for the portlet.
- If you don't want to change the portlet icon, skip to the next step. Otherwise, select the category on the left panel and then select your preferred icon for the portlet. Click on the Save And Close button to save your new choice.
- Click on Decoration Themes tab to choose a new theme for the portlet.
- If you don't want to change the portlet theme you can skip to the next step. Otherwise, choose the style from the select list and then select one of the available styles in the left panel. Notice that you have a complete preview of the selected theme on the right panel. When you find the right theme for your portlet, click on the Save And Close button.
- Click on the Access Permission tab for setting specific permissions for the current portlet instance. By default, the portlet has public access, but by deselecting the checkbox Make it public, you will be able to set different permissions.
- In order to set different permissions click on the Add Permission button.
- Select a group in the left panel.
- Select the membership type on the right panel.
- Click on the Save And Close button.