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:

1. Create a Web Dynpro development component.
2. Set a dependency to the pb_api development component.
3. Create a new component.

   A view, window, and interface view are automatically created. Delete the interface view.

4. 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.

   4. Click OK.
5. 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.
6. 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.

7. 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.
8. 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.
9. 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:

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

   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:

   // 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;
   
                        

   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.

10. Create an archive from the development component and deploy it.