Class attributes for iWidgets on static pages
Similar to the portlet microformat, the portal supports the iWidget microformat. You use it to place an instance of an iWidget on a static page that you want to be rendered by the portal. If the iWidget definition that is referenced in the iWidget microformat has not been registered to the portal before creating the static page, the static page deployment process makes sure of the iWidget registration.
For more information refer to the following list of class attributes. Examples of iWidgets rendered from HTML is also provided. For more information about the iWidget microformat for including iWidgets into a broader set of markup, such as a portal page, refer to the link to the iWidget specification below.
Including iWidgets in a static page
iw-iWidget
This value of the class attribute identifies the beginning of the microformat for placing an iWidget instance on a static page. In addition to the value iw-iWidget, the element for the iWidget instance can specify the class iw-Sandbox to instruct the iContext to place the iWidget instance in a separate JavaScript sandbox. The id attribute of this element provides a unique identifier for this iWidget instance in the scope of the static page. The value of the style attribute of the element is the reference to the portal skin that decorates the iWidget instance on the static page. The reference takes the form of a skin URI that is composed of the skin scheme name, a colon, and the unique name of the portal skin to apply.
iw-Definition
An HTML anchor element with this value of the class attribute represents the mandatory reference to the iWidget definition that the iWidget instance is based on. The value of the href attribute of this element is a URI that points to the iWidget definition XML file. The portal can load the iWidget definition XML file from the following locations:
- A location that the portal can access via HTTP routed through the portal Ajax Proxy. For example, this can be http://someServer:10039/someWidget/someWidget/someWidget.xml .
- A server relative URL that is relative to the portal server. For example, this can be /someWidget/someWidget/someWidget.xml .
- A location within the portal WebDAV file store that is identified by a corresponding portal WebDAV URI. For example, this can be dav:fs-type1/iwidgets/someWidget/someWidget.xml .
Both the iw-iWidget and the iw-Definition attributes represent the minimum class attribute values required for adding iWidgets on a static page. Refer to the following example for rendering a static page with a single iWidget instance from full HTML markup. The iWidget instances uses the standard Page Builder skin and is added to the sampleContainer component container in the layout of the static page.
Example:
<html>
<head>
<title>Sample Static Page with iWidget instance</title>
</head>
<body>
<p>This is a static page example, which includes a single iWidget instance.</p>
<div class="component-container" name="sampleContainer">
<!-- microformat to include an instance of the SampleWidget iWidget in the page -->
<div class="iw-iWidget" id="sampleWidget" style="skin:csa2.standard">
<!-- references the definition of this iWidget instance using a WebDAV file store URI -->
<a class="iw-Definition" href="dav:fs-type1/iwidgets/sampleWidget/SampleWidget.xml"></a>
</div>
</div>
</body>
</html>
The iWidget specification details further class attribute values. Those microformats can be used when placing an iWidget instance on a static page to override specifications from the referenced iWidget definition or to define iWidget items that do not exist in the referenced iWidget definition. The following paragraphs provide an overview of the available class attribute values.
Defining iWidget event descriptions and events
iw-EventDescription
An element with this value of the class attribute wraps the description of a single iWidget event. The title attribute specifies the name of this description.
iw-PayloadType
The content of an element with this value of the class attribute provides type information, as specified by the iWidget specification, for the payload of the containing iWidget event.
iw-Description
An element with this value of the class attribute contains a set of localized values for the description of the containing iWidget event. The elements that provide the localized values are identified by the class attribute value iw-Value . These elements specify the locale for their content by using the lang attribute.
iw-Title
An element with this value of the class attribute contains a set of localized values for the title of the containing iWidget event. The elements that provide the localized values are identified by the class attribute value iw-Value . These elements specify the locale for their content using the lang attribute.
iw-Event
An element with this value of the class attribute wraps the definition of a single iWidget event. The title attribute specifies the name of this iWidget event. In addition to iw-Event , the element for the iWidget event definition can have the class iw-Published or iw-Handled or both to specify that the iWidget instance broadcasts the defined iWidget event, listens to iWidget events of this type, or publishes and handles the iWidget event, respectively.
iw-DescRef
An element with this value of the class attribute carries two pieces of information. Firstly, the href attribute carries an optional reference to an event description defined in the iWidget definition or in this instance of the iWidget placement microformat. Secondly, the content of this element optionally specifies the payload for the event, usually, if there is no reference to an event description.
iw-Handler
The content of an element with this value of the class attribute provides the name of the JavaScript method which handles the event.
iw-NewWire
The content of an element with this value of the class attribute provides the name of the JavaScript method which handles the onNewWire predefined event related to this event.
iw-RemoveWire
The content of an element with this value of the class attribute provides the name of the JavaScript method which handles the onRemoveWire predefined event related to this event.
Example:
<div class="component-container" name="sampleContainer">
<div class="iw-iWidget" id="sampleWidget" style="skin:csa2.standard">
<a class="iw-Definition" href="dav:fs-type1/iwidgets/sampleWidget/SampleWidget.xml"></a>
<!-- one per described iWidget event -->
<span class="iw-EventDescription" title="sampleEventDescription">
<span class="iw-PayloadType">{text/javascript}String</span>
<span class="iw-Description">
<!-- one per locale -->
<span class="iw-Value" lang="en">This is a sample event description.</span>
</span>
<span class="iw-Title">
<!-- one per locale -->
<span class="iw-Value" lang="en">Sample Event Description</span>
</span>
</span>
<!-- one per event -->
<span class="iw-Event iw-Published iw-Handled" title="sampleEvent">
<a class="iw-DescRef" href="#sampleEventDescription"></a>
<span class="iw-Handler">handleEventFn</span>
<span class="iw-NewWire">handleNewWireFn</span>
<span class="iw-RemoveWire">handleRemoveWireFn</span>
</span>
</div>
</div>
Defining wires between iWidget instances
iw-ReceivedEvent
An element with this value of the class attribute wraps the definition of a wire between iWidget instances that are located on the same portal page.
iw-SourceEvent
An element with this value of the class attribute describes the source endpoint of the wire. The href attribute of this element refers to the id attribute of the iWidget instance that sources the event, while the content of this element provides the event name that the iWidget instance uses.
iw-TargetEvent
An element with this value of the class attribute describes the target endpoint of the wire. Since it is contained within the microformat placing the target iWidget instance, no reference to that is required. The event name that is to be delivered can be different from the one that the source iWidget instance generates. The content of this element specifies the event name to be used.
The following example shows the specification of a wire when placing a single iWidget instance on a static page from an HTML fragment. The example does not show the microformat that includes the source iWidget instance, and it assumes that the target endpoint of the wire is defined in the iWidget definition of the shown iWidget instance.
<div class="component-container" name="sampleContainer">
<div class="iw-iWidget" id="sampleWidget" style="skin:csa2.standard">
<a class="iw-Definition" href="dav:fs-type1/iwidgets/sampleWidget/SampleWidget.xml"></a>
<!-- one per event to receive -->
<span class="iw-ReceivedEvent">
<a class="iw-SourceEvent" href="#anotherSampleWidgetID">sampleSourceEvent</a>
<span class="iw-TargetEvent">sampleTargetEvent</span>
</span>
</div>
</div>
Initializing iWidget item sets
iw-ItemSet
An element with this value of the class attribute wraps the definition of a single iWidget item set. The title attribute specifies the name of this iWidget item set.
iw-Item
An element with this value of the class attribute contains a set of localized values for the item referenced by using the href attribute of this element. The elements that provide the localized values are identified by the class attribute value iw-Value . Those elements specify the locale for their content by using the lang attribute.
The following example shows the initialization of an iWidget item set, which contains one item, when placing a single iWidget instance on a static page from an HTML fragment:
<div class="component-container" name="sampleContainer">
<div class="iw-iWidget" id="sampleWidget" style="skin:csa2.standard">
<a class="iw-Definition" href="dav:fs-type1/iwidgets/sampleWidget/SampleWidget.xml"></a>
<!-- override values from iWidget definition -->
<span class="iw-ItemSet" title="sampleItemSet">
<!-- one per item value supplied -->
<a class="iw-Item" lang="en" href="#sampleItem">sampleValueForEnglish
<!-- one per additional locale -->
<span class="iw-Value" lang="de">sampleValueForGerman</span>
</a>
</span>
</div>
</div>
Defining iWidget instance content
iw-Content
An element with this value of the class attribute specifies the markup that is to be displayed when the iWidget instance is rendered in a particular iWidget mode. Whereas the iWidget definition can already provide the iWidget content, it can also allow the page designer to set the iWidget content when placing an iWidget instance on a specific page by using the iWidget microformat. The iWidget mode is also given as value of the class attribute of this element, whereas the content of this element is the iWidget content for this iWidget mode. Pre-defined iWidget modes are: view , edit , personalize, config , and help .
The following example shows how you specify of the iWidget content for the view mode when you place a single iWidget instance on a static page from an HTML fragment:
<div class="component-container" name="sampleContainer">
<div class="iw-iWidget" id="sampleWidget" style="skin:csa2.standard">
<a class="iw-Definition" href="dav:fs-type1/iwidgets/sampleWidget/SampleWidget.xml"></a>
<!-- one per iWidget mode (if allowed by the iWidget definition) -->
<div class="iw-Content view">
<!-- content for this iWidget mode -->
<p>The iWidget instance is currently rendered in view mode.</p>
</div>
</div>
</div>
Complex example of a static page including iWidgets
The code snippet given below combines all the examples shown above in one single static page from full HTML markup. In order to create a wire between iWidgets, a second iWidget instance is placed on the static page that serves as the publisher of the event.
<html>
<head>
<title>Sample Static Page with two wired iWidget instances</title>
</head>
<body>
<p>This is a static page example, which includes two iWidget instance that can exchange events.</p>
<div class="component-container" name="sampleContainer">
<!-- microformat to include an instance of the SampleWidgetA iWidget in the page -->
<div class="iw-iWidget" id="SampleWidgetA" style="skin:csa2.standard">
<!-- references the definition of this iWidget instance using an portal server relative URL -->
<a class="iw-Definition" href="/sampleWidgetA/sampleWidgetA/SampleWidgetA.xml"></a>
</div>
<!-- microformat to include an instance of the SampleWidgetB iWidget in the page -->
<div class="iw-iWidget" id="SampleWidgetB" style="skin:csa2.standard">
<!-- references the definition of this iWidget instance using a WebDAV file store URI -->
<a class="iw-Definition" href="dav:fs-type1/iwidgets/sampleWidgetB/SampleWidgetB.xml"></a>
<!-- defines an event description -->
<span class="iw-EventDescription" title="sampleEventDescription">
<!-- defines the JavaScript type String as payload of events based on this event description -->
<span class="iw-PayloadType">{text/javascript}String</span>
<span class="iw-Description">
<!-- defines the description of this event description for the English locale -->
<span class="iw-Value" lang="en">This is a sample event description.</span>
</span>
<span class="iw-Title">
<!-- defines the title of this event description for the English locale-->
<span class="iw-Value" lang="en">Sample Event Description</span>
</span>
</span>
<!-- defines a target event based on the sampleEventDescription event description;
this event is handled by the handleEventFn JavaScript function -->
<span class="iw-Event iw-Handled" title="sampleTargetEvent">
<a class="iw-DescRef" href="#sampleEventDescription"></a>
<span class="iw-Handler">handleEventFn</span>
</span>
<!-- defines wire between sampleWidgetA and sampleWidgetB, where
- the source event is specified in the definition of sampleWidgetA and
- the target event is specified in the microformat of sampleWidgetB -->
<span class="iw-ReceivedEvent">
<a class="iw-SourceEvent" href="#SampleWidgetA">sampleSourceEvent</a>
<span class="iw-TargetEvent">sampleTargetEvent</span>
</span>
<!-- overrides the items of the sampleItemSet item set from the iWidget definition -->
<span class="iw-ItemSet" title="sampleItemSet">
<!-- overrides the values of the sampleItem item of the iWidget definition
with values for the English and for the German locale -->
<a class="iw-Item" lang="en" href="#sampleItem">sampleValueForEnglish
<!-- defines the value of this item for the German locale -->
<span class="iw-Value" lang="de">sampleValueForGerman</span>
</a>
</span>
<!-- defines the markup of the iWidget instance in view mode -->
<div class="iw-Content view">
<!-- defines the content for this iWidget mode -->
<p>The iWidget instance of SampleWidgetB is currently rendered in view mode.</p>
</div>
</div>
</div>
</body>
</html>
Parent
Defining and rendering a static portal page in HTML
Example HTML markup for defining a portal page
Class attributes for portlets on static pages
Class attributes for a portlet container on static pages
Class attributes for components on static pages
Navigation options for static pages
Portlets for adding dynamic elements to static pages
January 4, 2012
2012/01/04 v7. Edition 2: Second edition includes corrections a...
| | 2011/12/15 documentation refresh
| | | |