Sample Layout (Tab Layout)
The following is an example of a Web Dynpro page layout, composed of a tab strip with one tab for each iView on the page. The portal user can display an iView by clicking on its tab; all other iViews are hidden.
Each tab has the same ID as its corresponding iView.
The layout is built with one ViewContainerUIElement control and a TabStrip control, and has the following runtime flow:
...
1. A specific number of tabs are created dynamically, based on the number of iViews on the page.
2. When a user clicks a tab, the following occurs:
a. The ViewContainerUIElementcontrol is moved to the selected tab.
b. The iView for that tab is set to be shown. All other iViews are set to be hidden.
c. The layout’s single container is rendered, but only the iView for that tab is rendered because the others are set to be hidden.
Procedure
...
1. Create a Web Dynpro development component.
2. Set a dependency to the pb_api development component (located in the EP-WDC software component).
3. Create a new component called TabComp.
A view, window and interface view are automatically created. Delete the interface view.
4. Implement the IPageLayout component interface definition as follows:
a. Right-click Implemented Interfaces and select Add.
The Implement Component Interfaces window is displayed.
b. Click Add, select the IPageLayout interface, and click OK.
IPageLayout is now displayed as an implemented interface. The interface view of IPageLayout is displayed, as well as the window that implements it (TabWindow).
c. Click Finish.
The Implementation Results window is displayed, which shows all the windows, interface views, methods and other objects that will be added to the project as a result of implementing IPageLayout.
When you expand the object tree, the following is displayed:
5. Create and map the following context attributes
a. Component Controller:
■ iViews (java.util.List): List of iViews to be displayed on the page
b. Tab View:
■ iViews (java.util.List): List of iViews to be displayed on the page. Map this attribute to the iViews attribute in the component controller.
■ SelectedTab (string): ID of the currently selected tab
■ prevTab (string): ID of the tab selected immediately before the currently selected tab.
6. In the Tab view layout, do the following:
a. Delete the DefaultTextView element.
b. In the RootUIElementContainer, set the layout property to MatrixLayout.
c. Add a TabStrip control, and then do the following:
■ Set the layoutData property to MatrixHeadData.
■ Bind the selectedTab property to the selectedTab context attribute.
d. Add a ViewContainerUIElementcontrol, and then do the following:
■ Set the layoutData property to MatrixHeadData.
7. In the Tab view code, add code to do the following:
○ The first time the view is displayed, a tab for each iView is created, and the first tab is displayed.
○ Each time the view is displayed, check which tab was selected. Remove the ViewContainerUIElementcontrol from the previously selected tab and place it on the newly selected tab.
○ Hide all iViews except the one for the currently selected tab.
All this is done with the following code in the wdDoModifyView() method:
public static void wdDoModifyView(IPrivateTestWDCompView wdThis, IPrivateTestWDCompView.IContextNode wdContext, com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime)
{
//@@begin wdDoModifyView
// Get list of iViews from context
List l = wdContext.currentContextElement().getIViews();
IWDTabStrip tabStrip = (IWDTabStrip) view.getElement("TabStrip");
boolean firstIview = true;
for (Iterator iter = l.iterator(); iter.hasNext();) {
Object o = iter.next();
// Only perform if called from the Page Builder
if (o instanceof IPBIviewData) {
IPBIviewData data = (IPBIviewData) o;
String id = data.getIviewID();
// If first time view displayed, set up view
if (firstTime) {
((IiView) data.getAttributeSet()).
putAttribute("com.sap.portal.iview.ShowTray", "false");
data.setHide(true);
// Create tab for each iView
IWDTab tab = (IWDTab) view.createElement(IWDTab.class, id);
IWDCaption header = (IWDCaption)
view.createElement(IWDCaption.class, null);
header.setText(data.getName());
tab.setHeader(header);
tabStrip.addTab(tab);
// If first iView, show it
if (firstIview) {
firstIview = false;
prevTab = tab;
wdContext.currentContextElement().setPrevTab(tab.getId());
IWDViewContainerUIElement viewCont =
(IWDViewContainerUIElement)
((IWDTransparentContainer) view.getRootElement())
.removeChild("ViewContainerUIElement");
tab.setContent(viewCont);
data.setHide(false);
}
// If not first time, change visible tab
} else {
data.setHide(true);
if (wdContext.currentContextElement()
.getSelectedTab().equalsIgnoreCase(id)) {
IWDTab prevTab = (IWDTab) view.getElement(
wdContext.currentContextElement().getPrevTab());
data.setHide(false);
IWDTab tab = (IWDTab) view.getElement(id);
IWDViewContainerUIElement viewCont =
((IWDViewContainerUIElement) prevTab.getContent());
prevTab.setContent(null);
tab.setContent(viewCont);
wdContext.currentContextElement().setPrevTab(tab.getId());
}
}
}
}
//@@end
}
Organize imports and rebuild the project so all objects are resolved.
8. Add a ILayoutContainercomponent usage, as follows:
a. Right-click Used Components and select Add Used Component. The New Web Dynpro Componet Usage dialog is displayed.
b. In the Name textbox, enter Col1 for the used component.
c. Next to the Used Web Dynpro Component textbox, click Browse and select ILayoutContainer.
9. For the component usage added in the previous step, declare the component interface controller as a required controller in the component controller, as follows:
a. Open the component controller.
b. In the Required Controllers section of the Properties tab, click Add.
c. Select the component interface controller of the component usages, and then click OK. The component usage is also selected.
10. Open the Tab window. The Tab view is already embedded.
In the ViewContainerUIElementelement in the view, do the following:
a. Right-click and select Embed view.
b. Select Embed Interface View of a Component Interface and click Next.
c. Select LayoutContainerInterfaceView from the Col1 component that you created, and click Finish.
11. Add the following code to the setContainer() method in the component controller:
// Get list of iViews and set iViews context attribute
List iViewsList = ContainerData.getIviews();
wdContext.currentContextElement().setIViews(iViewsList);
// Render iViews
if(containerId.equals("ViewContainerUIElement")){
wdThis.wdGetCol1ComponentUsage()
.createComponent(containerClassName , containerDeployObject);
IExternalILayoutContainer container = wdThis.wdGetCol1Interface();
container.renderIviews(containerId , ContainerData);
}
12. Create an archive from the development component and deploy it.