Portlet class

The Portlet class extends ContentPanel to provide a special type of panel that can be repositioned in the Viewport by the user with a Portal container. It may appear similar to a window in a desktop application. Creating a Portlet is similar to creating other containers. This code:

Portlet portlet = new Portlet();
portlet.setHeight(150);
portlet.setHeading("Example Portlet");

creates a Portlet like this:

A Portlet can be excluded from being repositioned by pinning it using:

portal.setPinned(true);

Apart from that, a Portlet inherits all the features of a standard ContentPanel.

The Portal class

A Portal is a special container for Portlet components. In fact, it is a Container containing a collection of LayoutContainer components arranged using ColumnLayout. Each of those LayoutContainer components in turn is able to contain Portlet components, arranged using a RowLayout.

Portal also supports dragging and dropping of Portlet components, both in terms of changing the row it is in within a column and the column within the Portal.

When creating a Portal, we need to set the number of columns the Portal should create in the constructor. We also need to set the widths of each column before using the setColumnWidth method of the Portal.

So to create a Portal with two columns, (one using 30 percent of the width and the second 70 percent) we would define it as follows:

Portal portal = new Portal(2);
portal.setColumnWidth(0, 0.3);
portal.setColumnWidth(1, 0.7);

We can then add a Portlet to each column like this:

Portlet portlet1 = new Portlet();
portlet1.setHeight(150);
portlet1.setHeading("Example Portlet 1");
portal.add(portlet1, 0);

Portlet portlet2 = new Portlet();
portlet2.setHeight(150);
portlet2.setHeading("Example Portlet 2");
portal.add(portlet2, 1);

This will produce the following output:

Both Portlet components can be dragged and dropped into different positions. The Portlet turns into a blue box while being dragged as shown in the following screenshot:

A Portlet will automatically resize and ft into the column in which it is dropped, as seen in the next screenshot:

ToolButton

Like ContentPanel that Portlet extends, we can add ToolButton components to the header. These can be very useful for making a Portlet look and behave even more like windows in a desktop application.

portlet.getHeader().addTool(new ToolButton("x-tool-minimize"));
portlet.getHeader().addTool(new ToolButton("x-tool-maximize"));
portlet.getHeader().addTool(new ToolButton("x-tool-close"));

The output can be seen as shown in the following screenshot:

At the moment, we are using ContentPanel components in our example application and laying them out using a BorderLayout. We shall now see that it does not take much to change the ContentPanel components into Portlet components and manage them using a Portal.

Portlet components are ideally suited to being independent, self-contained user interface elements that respond to the data passed to them. Rather than tying them into a Portal directly, we can use the MVC components to cause the Portal to respond to the creation of a new Portlet to preserve that independence.

Time for action – creating a Portal Controller and a Portlet View

1. The first thing we need to do is add a new EventType to the existing AppEvents class named NewPortletCreated. We will fire this when we create a new Portlet.

   public static final EventType NewPortletCreated = new EventType();

   
   

2. Create a new class named PortalController that extends Controller.

   public class PortalController extends Controller {

   
   

   Unlock access to the largest independent learning library in Tech for FREE!

   Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

   Renews at €14.99/month. Cancel anytime

   START FREE TRIAL
3. Create a new class named PortalView that extends View.

   public class PortalView extends View {

   
   

4. Create a constructor that sets the Controller of the PortalView.

   public PortalView(PortalController portalController) {
   super(portalController);
   }

   
   

5. Returning to PortalController, create a variable to hold the PortalView and override the initialize method to set the view.

   private PortalView portalView;
   @Override
   public void initialize() {
   super.initialize();
   portalView = new PortalView(this);
   }

   
   

6. Create a constructor that registers each EventType the PortalController should observe, specifically NewPortletCreated creation and Error.

   public PortalController() {
   registerEventTypes(AppEvents.NewPortletCreated );
   registerEventTypes(AppEvents.Error);
   }

   
   

7. Override the handleEvent method to forward any events to the View apart from errors which for the time being we will just log to the GWT log.

   @Override
   public void handleEvent(AppEvent event) {
   EventType eventType = event.getType();
   if (eventType.equals(AppEvents.error)) {
   GWT.log("Error", (Throwable) event.getData());
   } else {
   forwardToView(portalView, event);
   }
   }

   
   

8. Returning to PortalView, create a new portal field consisting of a Portal component with two columns.

   private final Portal portal = new Portal(2);

   
   

9. Override the initialize method to set the width of the two columns, the first to 30 percent of the width of the Portal and the second to 70 percent.

   @Override
   protected void initialize() {
   portal.setColumnWidth(0, 0.3);
   portal.setColumnWidth(1, 0.7);
   }

   
   

10. Now create a Viewport, set the layout to FitLayout, add the Portal, and then add the Viewport to GWT's RootPanel.

    @Override
    protected void initialize() {
    portal.setColumnWidth(0, 0.3);
    portal.setColumnWidth(1, 0.7);

    
    final Viewport viewport = new Viewport();
    viewport.setLayout(new FitLayout());
    viewport.add(portal);
    RootPanel.get().add(viewport);
    }

11. We also need to implement the handleEvent method of the View. For now, we will catch the NewPortletCreated event, but we will not do anything with it yet.

    @Override
    protected void handleEvent(AppEvent event) {
    EventType eventType = event.getType();
    if (eventType.equals(AppEvents.NewPortletCreated )) {

    
    }
    }

12. Finally, go to the onModuleLoad method of the EntryPoint RSSReader class and instead of creating an AppController, create a PortalController, and remove the line that forwards an Init AppEvent, as we will not be using it. The onModuleLoad method will now look like this:

    public void onModuleLoad() {
    final FeedServiceAsync feedService =
    GWT.create(FeedService.class);
    Registry.register(RSSReaderConstants.FEED_SERVICE, feedService);
    Dispatcher dispatcher = Dispatcher.get();
    dispatcher.addController(new PortalController());
    }

    
    

What just happened?

We created the basic framework for a Portal layout of our application. However, if we started it now, we would just get a blank screen. What we need to do is add Portlet components.

The actual Portlet components are not too complicated. They will just act as wrappers.