Menu

dojox.widget.Portlet

Project owner:Shane O’Sullivan
since:1.3.2

The dojox.widget.Portlet is an enhanced version of the dijit.TitlePane widget, designed to be used in the dojox.layout.GridContainer.

Introduction

The Portlet widget adds enhanced features to the dijit.TitlePane widget. It adds the ability to close (remove) the widget from a GridContainer, and also to have configurable settings.

The settings types included are:

  • dojox.widget.PortletSettings The base settings widget. Places the settings at the top of the Portlet, which slide into view when the settings icon is pressed.
  • dojox.widget.PortletDialogSettings Displays the settings is a pop up modal dialog.
  • dojox.widget.PortletFeedSettings The settings widget to be used with the dojox.widget.FeedPortlet. It can be a simple text input displaying the URL to an Atom or RSS feed, or a select node displaying multiple feeds to load.

It is worth noting that this widget just implements one possible front end of a Portlet. The JSR-168 standard for Portlets contains a lot more than this. A full Portlet implementation requires both server side and client side code. This widget only serves to present the Portlet on the client side.

Usage

<div data-dojo-type="dojox.widget.Portlet" title="My Flickr">

  <div data-dojo-type="dojox.widget.PortletSettings">
    <div data-dojo-type="dojox.layout.TableContainer" cols="1">
      <div data-dojo-type="dijit.form.TextBox" title="Option 3"></div>
      <div data-dojo-type="dijit.form.TextBox" title="Option 4"></div>
    </div>
  </div>

  <div>
    The Contents of the portlet go here
  </div>
</div>

Examples

Basic Portlet

This example shows a very simplistic Portlet, with just a simple PortletSettings widget and text content.

Load the Portlet JavaScript.

dojo.require("dijit.dijit");
dojo.require("dojox.widget.Portlet");

<div data-dojo-type="dojox.widget.Portlet" title="A Simple Portlet">
    <div data-dojo-type="dojox.widget.PortletSettings">
          This is a simple settings widget.
          Put whatever you like in here
    </div>

    <div style="height: 100px;">
      The contents of the portlet go in here.
          Try clicking the settings icon in the title bar to see the settings.

    </div>
</div>

@import "{{baseUrl}}dojox/widget/Portlet/Portlet.css"

Basic Feed Portlet

This example shows a FeedPortlet with a single URL. A FeedPortlet is an extension of Portlet, and can be used to load an ‘Atom <http://en.wikipedia.org/wiki/Atom_(standard)>’_ or ‘RSS <http://en.wikipedia.org/wiki/RSS>’_ feed and display it as a list. The FeedPortlet displays the titles of the feed items, and shows the contents of each item, or story, in a tooltip when the mouse hovers over it.

Load the Portlet JavaScript.

dojo.require("dijit.dijit");
dojo.require("dojox.widget.Portlet");
dojo.require("dojox.widget.FeedPortlet");

<div data-dojo-type="dojox.widget.FeedPortlet" title="Todays News"
   id="todaysNews"
   url="http://news.google.com/news?hl=en&topic=t&output=atom"
   maxResults="5"
   >
   <div data-dojo-type="dojox.widget.PortletFeedSettings"></div>

   <div>
   This is a FeedPortlet with a single feed.
   Click the settings icon in the title bar to enter a
   different feed to load.  Hovering over a news item shows a summary
   of it in a tooltip.
   </div>
</div>

@import "{{baseUrl}}dojox/widget/Portlet/Portlet.css"

Expandable Feed Portlet With Multiple URLs

An ExpandableFeedPortlet is an extension of FeedPortlet. Like FeedPortlet it can load an Atom or RSS feed from a URL, however it displays the feed items in a list with an icons placed to the left of each item. When an icon is clicked, the content of the item, or story, is shown. This is different from the FeedPortlet, which displays the content in a tooltip.

This example also shows the dojox.widget.PortletFeedSettings widget being used with multiple URLs. If the PortletFeedSettings is created as a SELECT node, it will display multiple URLs to the user, along with labels which are more readable than URLs.

Load the Portlet JavaScript.

dojo.require("dijit.dijit");
dojo.require("dojox.widget.Portlet");
dojo.require("dojox.widget.FeedPortlet");

<div data-dojo-type="dojox.widget.ExpandableFeedPortlet" title="Dojo News"
  id="todaysNews"
  maxResults="5"
  >
  <select data-dojo-type="dojox.widget.PortletFeedSettings">
    <option value="http://shaneosullivan.wordpress.com/category/dojo/feed/">Dojo Blatherings</option>
    <option value="http://www.dojotoolkit.org/aggregator/rss">Planet Dojo</option>
    <option value="http://feeds2.feedburner.com/ajaxian">Ajaxian</option>
  </select>

  <div>
      This is a FeedPortlet with a multiple feeds.
      Click the settings icon in the title bar to choose a
      different feed to load.
  </div>
</div>

@import "{{baseUrl}}dojox/widget/Portlet/Portlet.css"

Portlets In A Grid Container

This examples shows Portlets as they are intended to be used, inside a dojox.layout.GridContainer. It shows three Portlets, all of which can be dragged around the page.

Load the Portlet and GridContainer JavaScript.

dojo.require("dijit.dijit");
dojo.require("dojox.widget.Portlet");
dojo.require("dojox.widget.FeedPortlet");
dojo.require("dojox.layout.GridContainer");
dojo.require("dojox.widget.Calendar");

Include the CSS for the Portlet, the GridContainer, and the Calendar widgets.

@import "{{baseUrl}}dojox/widget/Portlet/Portlet.css";
@import "{{baseUrl}}dojox/layout/resources/GridContainer.css";
@import "{{baseUrl}}dojox/widget/Calendar/Calendar.css";

.dndDropIndicator {
  border: 2px dashed #99BBE8;
  cursor:default;
  margin-bottom:5px;
}

This example includes three Portlets in a GridContainer. The GridContainer lays out the widgets in a grid enables dragging them around. The GridContainer in this example has two columns, set using the ‘nbZones’ attribute. This example also shows the Calendar Portlet containing another Dojo widget, the dojox.widget.Calendar.

<div data-dojo-type="dojox.layout.GridContainer"
    id="gc1"
    acceptTypes="dojox.widget.Portlet, dojox.widget.FeedPortlet,dojox.widget.ExpandableFeedPortlet"
    hasResizableColumns="false"
    opacity="0.3"
    nbZones="2"
    allowAutoScroll="true"
    withHandles="true"
    handleClasses="dijitTitlePaneTitle"
    region="center"
    minChildWidth="200"
    minColWidth="40">

    <div data-dojo-type="dojox.widget.Portlet" title="First Portlet">

      <div data-dojo-type="dojox.widget.PortletSettings">
        Put whatever settings you like in here
      </div>
      <div>
         Drag me around by clicking on my title bar
      </div>
    </div>


    <div data-dojo-type="dojox.widget.ExpandableFeedPortlet" title="Dojo News"
      id="todaysNews"
      maxResults="5">
      <select data-dojo-type="dojox.widget.PortletFeedSettings">
        <option value="http://shaneosullivan.wordpress.com/category/dojo/feed/">Dojo Blatherings</option>
        <option value="http://www.dojotoolkit.org/aggregator/rss">Planet Dojo</option>
        <option value="http://feeds2.feedburner.com/ajaxian">Ajaxian</option>
      </select>

      <div>
        This is a FeedPortlet with a multiple feeds.
            Click the settings icon in the title bar to choose different feed to load.
      </div>
    </div>


    <div data-dojo-type="dojox.widget.Portlet" title="Calendar Portlet">
      <div data-dojo-type="dojox.widget.PortletSettings">
        Put whatever settings you like in here
      </div>
      <div>
         Drag me around by clicking on my title bar.
      </div>
      <div data-dojo-type="dojox.widget.Calendar">
        <script type="dojo/connect" data-dojo-event="onValueSelected" data-dojo-args="date">
          dojo.byId("dateGoesHere").innerHTML = "Date Selected: " + date.toString();
        </script>
      </div>
      <div id="dateGoesHere">

      </div>
    </div>

  </div>
Error in the documentation? Can’t find what you are looking for? Let us know!