Skip to main content link. Accesskey S

Widget

A widget is a container for some data. Also known as a portlet. It has a title, some actions you can perform on it, and it typically loads an abbreviated version of an application.

Directionality:

Side Bar widget

Plain widget

Classes

  • lotusWidget2 - the class that goes on the wrapper div for the component. (The previous version is lotusWidget and you can get the code from the doc/components/sampleIframes/sample_widget.htm file.)
  • lotusWidgetBody - the class that wraps the data in the widget.
  • lotusWidgetFooter - the class that wraps the widget footer.
  • lotusWidgetSearch - this is an additional class for the search control in a widget. We don't have an example of this.
  • lotusWidgetPlain - add as an additional class to the lotusWidgetDiv to hide the titlebar (except on hover).

Basic Implementation

A widget consists of a titlebar, a header, a body and a footer.

The header is created with an h2 tag and contains an action icon. The header text is floated left using the lotusLeft class, and the button is floated right, using the lotusRight class.

The widget body wraps the widget data.

The widget footer contains any footer information.

An h3 tag creates the header, which can contain header text. The header can be a link.

Variations

A smaller version of the widgets can sit in the sidebar. It is constructed the same way but it contains smaller bits of data (and no paging controls).

A plain, no-skin widget sits on the page with no border or titlebar until you hover over the widget.

Examples

Sample HTML

Sample HTML - Side Bar widget

Sample HTML - Plain

CSS (widget2.css)

CSS (grid.css)

Theme CSS (widget2Theme.css)

The widget component markup was based off of an exercise done to simplify the existing markup for a portlet.

The section and widget components at one point shared the same look and feel.

Feb 2009: added "no skin" (plain) and "all borders turned on" options.

March 2009: all borders turned on is no longer an option. It is the default.

4/1/09: Additional adjustments to styles for header and footer - for alignment and for proper sizing of text. An additional example for a widget that sits in the sidebar was included. Styles for a layout grid (lotusGrid) for the people pictures were created but were implemented independently of the widget component styles. Scroll arrows were added to the arrow sprite graphic and styles added to the base css files.

5/19/09: Added a second version of the widget which gets rid of built-in margins except for a bottom margin, adds padding to the widget body area, and moves the footer outside of the widget body. This is the recommended version moving forward.

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.