Implementing container widget in Web 2.0 applications

About this task

To implement a widget container, refers to the following steps:

Procedure

  1. Use the following widget definition to define a container widget:
    <entry id='BTTContainer' definition='../widget/container/BTTContainer.xml'></entry>
  2. Then add widget definitions in file BTTContainer.xml. For detailed information, refer to the code in WebSphere® Multichannel Bank Transformation Toolkit Web 2.0 sample.
  3. Then define a service with the container widget in the service list XML file, and input the layout attributes in the definition for the container widget instance and its children. Following is a definition of Border container:
    <Service id="9.1" name="BorderContainer" desc="event_transfer"
    logo="theme/servicelogo/navlogo.gif">
    	<Widget name="BTTContainer" type="Border" persist="false" gutters="true">
    		<children>
    			<Widget name="simpleHTMLWgt" region="top" xheight="80%"
    splitter="true">
    				<attribute name="url" value="http://www.google.com"/>
    				<attribute name="height" value="100%"/>
    			</Widget>
    			<Widget name="event_transfertoWgt" region="right"></Widget>
    			<Widget name="event_transferfromWgt" region="left" splitter="true"
    xwidth="100px"></Widget>
        </children>
    	</Widget>
    		</Service>
    In this definition, there are three sub-widget instances as the children of the container widget instance. simpleHTMLWgt widget is on the top of the container widget, transferfromWgt widget is at the lower left, and event_transfertoWgt widget is at the lower right.
  4. You can also define a Tab container as demonstrated in the following block of code:
    <Service id="9.2" name="TabContainer"
    desc="event_transfer" logo="theme/servicelogo/navlogo.gif">
    	<Widget name="BTTContainer" type="Tab" xheight="100%" xwidth="100%">
    		<children>
    			<Widget name="simpleHTMLWgt" title="Website">
    				<attribute name="url" value="http://www.google.com"/>
    				<attribute name="height" value="100%"/>
    			</Widget>
    			<Widget name="event_transferfromWgt" title="transferFrom"></Widget>
    			<Widget name="event_transfertoWgt" title="transferTo"></Widget>
    		</children>
    	</Widget>
    		</Service>
  5. In the same way, you can define Accordion container as:
    <Service id="9.3"
    name="AccordionContainer" desc="event_transfer"
    logo="theme/servicelogo/navlogo.gif">
    	<Widget name="BTTContainer" type="Accordion" xheight="60%">
    		<children>
    			<Widget name="simpleHTMLWgt" title="Website">
    				<attribute name="url" value="http://www.google.com"/>
    				<attribute name="height" value="100%"/>
    			</Widget>
    			<Widget name="event_transferfromWgt" title="transferFrom"></Widget>
    			<Widget name="event_transfertoWgt" title="transferTo"></Widget>
    		</children>
    	</Widget>
    		</Service>
    Also, WebSphere Multichannel Bank Transformation Toolkit Web 2.0 container widget supports nested container types, following is an example of nesting containers:
    <Service id="9.1.1.1" name="BorderContainer_nested1" desc="event_transfer_nested_multiple" logo="theme/servicelogo/navlogo.gif"> 
    <Widget name="BTTContainer"type="Border">
    		<children>
    				<Widget name="BTTContainer" type="Border" region="top"
    xheight="50%" splitter="true">
    				<attribute name="height" value="100%"/>
    				<children>
    				<Widget name="event_transfertoWgt" region="center"></Widget>
    				<Widget name="event_transferfromWgt" region="left" xwidth="50%"
    ></Widget>
    				</children>
    			</Widget>
    				<Widget name="BTTContainer" type="Tab" region="left" splitter="true" xwidth="30%">
    				<attribute name="height" value="100%"/>
    				<children>
    				<Widget name="simpleHTMLWgt" title="Website">
    				<attribute name="url" value="http://www.google.com"/>
    				<attribute name="height" value="100%"/>
    			</Widget>
    			<Widget name="event_transferfromWgt" title="transferFrom"></Widget>
    			<Widget name="event_transfertoWgt" title="transferTo"></Widget>
    		</children>
    	</Widget>
    			<Widget name="BTTContainer" type="Accordion" region="center">
    		<attribute name="height" value="100%"/>
    		<children>
    		<Widget name="simpleHTMLWgt" title="Website">
    			<attribute name="url" value="http://www.google.com"/>
    			<attribute name="height" value="100%"/>
    		</Widget>
    		<Widget name="event_transferfromWgt" title="transferFrom"></Widget>
    		<Widget name="event_transfertoWgt" title="transferTo"></Widget>
    		</children>
    	</Widget>
    		</children>
          </Widget>
    </Service>
    Web users can save a service which contains a container widget instance into the work area. When web users log on again, they will find the same container widget instance on the same position of the work area.