Creating a Web Dynpro Page Layout

Show TOC

Creating a Web Dynpro Page Layout

To create a Web Dynpro page layout, create a Web Dynpro project with a component that defines the following:

Implemented Interfaces: IPageLayout, which is defined in pb_api.
Views: A single view defines the elements on the page, including the location of each layout container. A layout container is an area in the layout that can contain one or more iViews, and each container is indicated by a ViewContainerUIElement element.
Used Components: For each layout container, a component usage of type ILayoutContainer, which is defined in pb_api.
Windows: A window that contains the view.

The following shows the Web Dynpro Explorer for a Web Dynpro project (wdlayout) that defines a page layout (Tab):

In addition, the following are also defined in the component interface controller:

Context: LayoutData context attribute, which contains information about the page.
Public Methods: setContainer() method, which is called whenever the Page Builder needs to render one of the containers. You must implement this method.

Prerequisites

You have permission to the pb_api development component and the EP-WDC software component.

Procedure

Create a Web Dynpro development component.
Set a dependency to the pb_api development component (located in the EP-WDC software component).
Create a new component.
A view, window and interface view are automatically created. Delete the interface view.
Implement the IPageLayout component interface definition as follows:
1. Right-click Implemented Interfaces and select Add.
  The Implement Component Interfaces window is displayed.
2. Click Add, select the IPageLayout interface, and click OK.
  IPageLayout is now displayed as an implemented interface. The component interface view of IPageLayout is displayed, as well as the window implementing it (which is the window that was automatically created for the component).
3. 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:
4. Click OK.
Modify the component's view to create the desired layout by doing the following:
- Add a ViewContainerUIElement element for each container that you want to create in the layout.
- Include other elements that you want displayed on pages with this layout.
Add ILayoutContainer component usages, as follows:
1. Right-click Used Components and select Add Used Component. The New Web Dynpro Component Usage dialog is displayed.
2. In the Name textbox, enter a name for the used component.
3. Next to the Used Web Dynpro Component textbox, click Browse and select ILayoutContainer.
4. Click Finish.
Add a component usage for each ViewContainerUIElement element that you added to the view.
For each component usage added in the previous step, declare its component interface controller as a required controller in the component controller, as follows:
1. In the Required Controllers section of the Properties tab of the component controller, click Add.
2. Select the component interface controller of the component usages, and then click OK. The component usage is also selected.
Open the component's window. In each ViewContainerUIElement element in the view, do the following:
1. Right-click and select Embed view.
2. Select Embed Interface View of a Component Interface and click Next.
3. Select LayoutContainerInterfaceView from the ILayoutContainer component that you created for the current ViewContainerUIElement control (in the previous step).
4. Click Finish.

Implement the setContainer() method in the component controller. This method is called each time the Page Builder needs to render a container in the layout.

The following is the method signature:

Syntax Syntax

public void setContainer(
    java.lang.String containerClassName,
    java.lang.String containerDeployObject,
    java.lang.String containerId,
    com.sap.portal.pb.data.IPBContainerData ContainerData )

End of the code.

The following describes the parameters passed into the setContainer() method:

Parameter	Description
containerClassName	The name of the class that implements `ILayoutContainer` for rendering the iViews in a container.
containerDeployObject	The name of the development component that contains the `ILayoutContainer` class.
containerId	The ID of the `ViewContainerUIElement` control (layout container) to be rendered.
ContainerData	Information about the page, such as the iViews to be rendered.

The following is a typical implementation:

Syntax Syntax

// Check which container is being rendered
if(containerId.equals("ViewContainerUIElement")) {

    // Create the iView renderer for this container.
    wdThis.wdGetMyCol1ComponentUsage()
        .createComponent(containerClassName , containerDeployObject);

    // Get access to the used component methods
    IExternalILayoutContainer container  = wdThis.wdGetMyCol1Interface();

    // Render iViews in the container.
    container.renderIviews(containerId , ContainerData);
}
// Repeat the process for each container
else if(containerId.equals("ViewContainerUIElement2")) {
    wdThis.wdGetMyCol2ComponentUsage()
        .createComponent(containerClassName , containerDeployObject);
    IExternalILayoutContainer container  = wdThis.wdGetMyCol2Interface();
    container.renderIviews(containerId , ContainerData);
}
return;

End of the code.

The container ID (containerID) is the ID of the ViewContainerUIElement element.

The method wdGetMyCol1ComponentUsage() returns the ILayoutContainer used component called MyCol1.

The method wdGetMyCol2ComponentUsage() returns the ILayoutContainer used component called MyCol2.

Create an archive from the development component and deploy it.

Result

The new layout (full component name, including package name) is listed under the development component in the Web Dynpro Application Repository in the portal.