Class attributes for iWidgets on static pages

Class attributes for iWidgets on static pages

Similar to the portlet microformat, the portal supports the iWidget microformat. We use it to place an instance of an iWidget on a static page to be rendered by the portal. If the iWidget definition 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.
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 iWidget Specification V 2.1

Including iWidgets in a static page

iw-iWidget 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 decorating the iWidget instance on the static page. The reference takes the form of a skin URL 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 mandatary reference to the iWidget definition that the iWidget instance is based on. The value of the href attribute of this element is a URL pointing 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.
http://someServer:10039/someWidget/someWidget/someWidget.xml

A server relative URL that is relative to the portal server...
/someWidget/someWidget/someWidget.xml

A location within the portal WebDAV file store identified by a corresponding portal WebDAV URI.
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 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">

         
         <div class="iw-iWidget" id="sampleWidget" style="skin:csa2.standard">

            
            <a class="iw-Definition" href="http://myco.com/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.

Define 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 has 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 using the lang attribute.
iw-Title An element with this value of the class attribute contains has 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="http://myco.com/p/dav:fs-type1/iwidgets/sampleWidget/SampleWidget.xml"></a>

      
      <span class="iw-EventDescription" >
         <span class="iw-PayloadType">{text/javascript}String</span>
         <span class="iw-Description">
            
            <span class="iw-Value" lang="en">This is a sample event description.</span>
         </span>
         <span class="iw-Title">
            
            <span class="iw-Value" lang="en">Sample Event Description</span>
         </span>
      </span>

      
      <span class="iw-Event iw-Published iw-Handled" >
         <a class="iw-DescRef" href="http://setgetweb.com/p/portal80/#sampleEventDescription"></a>
         <span class="iw-Handler">handleEventFn</span>
         <span class="iw-NewWire">handleNewWireFn</span>
         <span class="iw-RemoveWire">handleRemoveWireFn</span>
      </span>
   </div>
</div>
Define 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="http://myco.com/p/dav:fs-type1/iwidgets/sampleWidget/SampleWidget.xml"></a>

      
      <span class="iw-ReceivedEvent">
         <a class="iw-SourceEvent" href="http://setgetweb.com/p/portal80/#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 has a set of localized values for the item referenced 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 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="http://setgetweb.com/p/portal80/dav:fs-type1/iwidgets/sampleWidget/SampleWidget.xml"></a>

      
      <span class="iw-ItemSet" >
         
         <a class="iw-Item" lang="en" href="http://setgetweb.com/p/portal80/#sampleItem">sampleValueForEnglish             &
            lt;!-- one per additional locale -->
            <span class="iw-Value" lang="de">sampleValueForGerman</span>
         </a>
      </span>
   </div>
</div>
Define 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 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 we 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="http://setgetweb.com/p/portal80/dav:fs-type1/iwidgets/sampleWidget/SampleWidget.xml"></a>

      
      <div class="iw-Content view">
         
         <p>The iWidget instance is currently rendered in view mode.</p>
      </div>
   </div>
</div>
Complex example of a static page including iWidgets

The following code snippet combines all the examples shown previously in one single static page from full HTML markup. 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">
         
         <div class="iw-iWidget" id="SampleWidgetA" style="skin:csa2.standard">
            
            <a class="iw-Definition" href="http://setgetweb.com/p/portal80//sampleWidgetA/sampleWidgetA/SampleWidgetA.xml"></a>
         </div>

         
         <div class="iw-iWidget" id="SampleWidgetB" style="skin:csa2.standard">
            
            <a class="iw-Definition" href="http://setgetweb.com/p/portal80/dav:fs-type1/iwidgets/sampleWidgetB/SampleWidgetB.xml"></a>

            
            <span class="iw-EventDescription" >
               
               <span class="iw-PayloadType">{text/javascript}String</span>
               <span class="iw-Description">
                  
                  <span class="iw-Value" lang="en">This is a sample event description.</span>
               </span>
               <span class="iw-Title">
                  
                  <span class="iw-Value" lang="en">Sample Event Description</span>
               </span>
            </span>

            
            <span class="iw-Event iw-Handled" >
               <a class="iw-DescRef" href="http://setgetweb.com/p/portal80/#sampleEventDescription"></a>
               <span class="iw-Handler">handleEventFn</span>
            </span>

            
            <span class="iw-ReceivedEvent">
               <a class="iw-SourceEvent" href="http://setgetweb.com/p/portal80/#SampleWidgetA">sampleSourceEvent</a>
               <span class="iw-TargetEvent">sampleTargetEvent</span>
            </span>

            
            <span class="iw-ItemSet" >
               
               <a class="iw-Item" lang="en" href="http://setgetweb.com/p/portal80/#sampleItem">sampleValueForEnglish                   
               
                  <span class="iw-Value" lang="de">sampleValueForGerman</span>
               </a>
            </span>

            
            <div class="iw-Content view">
               
               <p>The iWidget instance of SampleWidgetB is currently rendered in view mode.</p>
            </div>
         </div>
      </div>
   </body>
</html>
Parent: Define and render a static portal page in HTML
Related reference:
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
Registering iWidgets for use with the Page Builder theme
iWidget Specification V 2.1: http://public.dhe.ibm.com/software/dw/lotus/mashups/developer/iwidget-spec-v2.1.pdf

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 has 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 using the lang attribute.
iw-Title	An element with this value of the class attribute contains has 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.

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.

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 has a set of localized values for the item referenced 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 using the lang attribute.