Using the Dojo TabContainer widget in a HATS portlet project

You can use the Dojo TabContainer widget in a HATS portlet project.

Note:

HATS Dojo widgets are not supported in HATS portlets. When creating tabs using the Dojo TabContainer widget, use HATS non-Dojo widgets to render host components within the tabs.

To use the Dojo TabContainer widget in a HATS portlet project, follow the steps similar to using the widget in a HATS Web project, with the following considerations.

The Use Dojo technology option is not available when creating a HATS portlet project. After a HATS portlet project is created, in the HATS Projects view right-click on the project, select Properties -> Project Facets. Expand the Web 2.0 project facet and select Dojo Toolkit on WebSphere Portal 1.0. This makes Dojo widgets available for selection on the Palette view.
When dragging the Dojo TabConatiner into the screen transformation, on the Specify a jsp file for Dojo bootstrap entries page, select Generate in the portlet jsp file, clear Generate portlet helper JavaScript classes in portlet application, and click OK.
If dragging the Dojo TabContainer widget to the Design view does not cause the widget to be added to the source, a workaround is to drag the widget to the location after the <TD> tag in the Source view.
The following TabContainer <div> tag is created.
Note:
The user interface for entering the number of tabs is not prompted and the ContentPane is not generated.
```
<div dojoType="dijit.layout.TabContainer"
		  id="tabContainer_<portletAPI:namespace/>"
       style="width: 500px; height: 100px"></div>
```

To create tabs, drag ContentPane widgets (under Dojo Layout Widgets from the Palette view) to before the </div> tag, resulting in the following source:

<div dojoType="dijit.layout.TabContainer"
		  id="tabContainer_<portletAPI:namespace/>"
       style="width: 500px; height: 100px">
<div dojoType="dijit.layout.ContentPane"
					id="contentPane_<portletAPI:namespace/>"></div>
<div dojoType="dijit.layout.ContentPane"
					id="contentPane_<portletAPI:namespace/>"></div>
<div dojoType="dijit.layout.ContentPane"
					id="contentPane_<portletAPI:namespace/>"></div>
</div>

Add titles and insert a HATS component into each ContentPane widget.
Note:
You can see the layout in Design view, but nothing is displayed in the Preview view.
Export the portlet and deploy it to a Portal server.
Note:
If necessary, you can adjust the height and width of the TabContainer widget to get the desired display. Note that you must use fixed height and width on the TabContainer widget in case the tabbed folder is not displayed at runtime.

Below is example source for a TabContainer widget, containing three tabs, rendering an IBM® i Main Menu screen. The tabs contain the HATS Selection list, Command line, and Function key host components, respectively.

<!-- Insert your HATS component tags here. -->

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
   <!-- flm:table -->
   <tbody>
         <tr>
            <td>
            <div dojoType="dijit.layout.TabContainer"
	               id="tabContainer_<portletAPI:namespace/>"
                 style="width: 500px; height: 400px">
            <div dojoType="dijit.layout.ContentPane"
	               id="contentPane_<portletAPI:namespace/>" title="MenuOption">
                 <HATS:Component
                       row="5" erow="17" col="1" ecol="80" 
                       alternate="" alternateRenderingSet="" textReplacement=""
	                    widget="com.ibm.hats.transform.widgets.SLRadioButtonWidget"
	                    widgetSettings=""
					        type="com.ibm.hats.transform.components.SelectionListComponent"
					        componentSettings=""  />
            </div>
            <div dojoType="dijit.layout.ContentPane"
					     id="contentPane_<portletAPI:namespace/>" title="CommandLine">
                 <HATS:Component
					         row="19" erow="21" col="1" ecol="80" 
                       alternate="" alternateRenderingSet="" textReplacement=""
					         widget="com.ibm.hats.transform.widgets.InputWidget"
					         widgetSettings=""
					         type="com.ibm.hats.transform.components.CommandLineComponent"
					         componentSettings=""  />
            </div>
            <div dojoType="dijit.layout.ContentPane"
					     id="contentPane_<portletAPI:namespace/>" title="FunctionKey">
                 <HATS:Component
					           row="22" erow="23" col="1" ecol="80" 
                         alternate="" alternateRenderingSet="" textReplacement=""
					           widget="com.ibm.hats.transform.widgets.ButtonWidget"
					           widgetSettings=""
					           type="com.ibm.hats.transform.components.FunctionKeyComponent"
					           componentSettings=""  />
            </div>
            </div>
            </td>
        </tr>
   </tbody>
</table>