Use components in bigger Web Dynpro projects (componentization)

1. 2. 3. 4. 5. Attachments:32 Added by Rui Nogueira, last edited by Guest on Jun 05, 2008 (view change) Goal Pre-Requisites Step-by-Step Solution References and Related Topics Open Issues and Questions

1. Goal
Once you start developing with Web Dynpro you'll get excited about its functionality. Additionally it supports you a lot in quickly developing web-based user interfaces. Normally you start with one component and start adding more and more views to it. At a certain point you'll have so many views in a component that it starts getting difficult to add new functionality to your Web Dynpro application. At this point you start thinking if the Web Dynpro Components could help here. But normally you suppress this idea. Supported by the rule "Never touch a running system!" you go ahead until it really starts hurting you to maintain all these views in one component (see picture below).

Picture 1: Web Dynpro Explorer showing one component with many views

Picture 2: Diagram View of the default window This section wants to give you some hints on how to migrate from a "one-component-only" application to an application that uses components. Componentization itself is not very easy to understand. So please don't understand this step-by-step solution as the only way to do it or as a comprehensive description. Nevertheless it should help you over the first hurdles. Note: The example shown here is based on a simple Web Dynpro project. This is suitable for little developments. If you are working in a team you should use the NWDI and the component concept that consists of products, software components and development components. Have a look at the following link for more details: http://help.sap.com/saphelp_nw04/helpdata/de/01/9c4940d1ba6913e10000000a1550b0/frameset.htm[\] Furthermore you should keep the following issues in mind when starting Web Dynpro development:

Dont do any business logic in view controllers. All business logic should be done in the model. If you have UI logic try to implement it in custom or component controllers, if possible in a separate DC. From there it can be reused.

Use a middleware Web Dynpro DC for the communication with your backend systems. So the UI developer does not have to know anything about connecting backend systems, you can unify error handling, logging and other crosscutting issues. Furthermore in the Java world it is a common way to separate responsibilities into several development entities.

Always realize your first Web Dynpro project together with an experienced Web Dynpro consultant. The consultant can show you best practices and prevents you from failing into a trap.

2. Pre-Requisites
SAP NetWeaver: 7.0 (formerly 2004s). User: Already familiar with Web Dynpro Views and the context-concept. Project: A Web Dynpro project with multiple views. These views might have 1:n relationships in the context they display (e.g. a table with a list of projects and below a table with a list of comments that are related to a project).

3. Step-by-Step Solution
If you want to switch to a component based architecture you'll have to solve these major issues: 1. 2. 3. 4. Wisely bundle the views you have to components Share the same context within multiple components Bundle all you components again into one application Be able to update one component depending on an event triggered by another component

3.1. Bundling Views To One Component

This is maybe the most important part of what you need to think about. At the beginning you should try bundle the views depending on their relationship to the context they handle. Let's assume you have an application like the one described in chapter 1. This means you have a list of projects that you administrate. Each project has a list of details and can have multiple comments. Therefore we initially should create the following components:

CompPrjList (the component handling the project list and all related views to add/edit/delete a project) CompPrjDetails (the component handling the project's details and all related views to edit) CompComments (handling the project's comments and all related views to add/edit/delete a comment) To create them you need to simply copy your initial component and paste it into your project. As we need to create three additional components we do it exactly three times. These are the steps you need to go through: TBD

3.2 Share the same context within multiple components

To have only one instance of your data inside your component you should create a "data" component. This component will be used in all other components whenever you need to read/write data of you application (e.g., project names, comments, other project details). To create it copy again your initial component and paste it as a new component with the name "CompData" into your project. TBD

3.2.1 Connecting the data component with the other components

To make each component aware of the data component you need to assign the data component as "Used Web Dynpro Component" to all other components. These are the steps you need to follow: TBD In this use-case we need to apply this change for the following components:

CompRoot CompPrjList CompPrjDetails CompComments

3.3 Create a "root" component

For a better separation of "functional" components and their bundling you should create a separate "root" component that will bundle all your components into one application. Therefore you need to create the following component:

CompRoot To create it copy again your initial component and paste it as a new component into your project.

3.4 Update one component depending on an event triggered by another component

Now that you have tieded-up all your components we come to the most important point. We need to ensure that the data is shared with all components. Additionally we need to take care that each component uses the same instance of the data component. If we deploy our application without taking care of this issue, we will wonder that each component doesn't seem to know the other components current context.

3.4.1 Change the data components' lifecycle

To make all components aware of the same context we need to change the lifecycle of all components that are using the data component to "manual" instead of "create on demand". Therefore just walk through the following steps:

Picture 1: select the data component usage

Picture 2: Set the lifecycle to "manual" In this use-case we need apply this change for the following components:

CompRoot CompPrjList CompPrjDetails CompComments Please be aware that the data component is part of the "Used Web Dynpro Components" of these four components. If this isn't the case please refer to section 3.2.1 that describes how you do it.

3.4.2 Initialize the usage of the data component

As we have set the data components' lifecycle to manual in all other components we firstly have to initialize it. We need to do this in our root component as this is the first one that our application "knows". To do that, simply call the root components' controller and jump to the wdDoInit method. Here you need to add some code:
public void wdDoInit(){ //@@begin wdDoInit() wdThis.wdGetCompDataComponentUsage().createComponent(); IWDComponentUsage dataCompUsage = wdThis.wdGetCompDataComponentUsage(); //@@end }

Picture 1: Double click the components' name

Picture 2: Double click the components' controller

Picture 3: Open the component controllers' implementation tab and insert the code The first code line creates an instance of the data component. The second line assigns the the data components' reference to a variable. This variable can now be used to tell the other components where they find the data component that they use.

3.4.3 Provide the data components' reference to all other components

To provide the data components' reference to the other components we firstly need to create a way to provide that reference. We need to do that for the following components:

CompPrjList CompPrjDetails CompComments The easiest way to provide the reference is to create a dedicated method in all of the components' interface controllers. From each components' interface controller we need to forward the reference to the components controller. Once the reference has reached the components' controller we use the "referencing" mode to provide the controller with the instance for the data component. The picture below explains the principle how this is handled.

Picture 1: Principle of "referencing mode" So what needs to be done? Let's go on step-by-step and use the component CompComments as example:

We need to connect the interface controller with the component controller We create a method called "referenceDataComp" in the interface controller This method will forward the reference it'll get from the root component to the component controller of CompComments We create a method called "referenceDataComp" in the component controller This method will be used to connect to the data component through the "referencing mode"

Picture 2: Open the component "CompComments" and click on "create a data link"

Picture 3: Connect the interface controller with the component controller (no additional context elements necessary)

Picture 4: Double-click on the interface controller

Picture 5: Add a new method to the component interface controller

Picture 6: Add the methods' name

Picture 7: Select a "Java Native Type" by clicking on "Browse"

Picture 8: Select the type "IWDComponentUsage"

Picture 9: Click on "Finish"

Picture 10: The newly created method for the component interface controller

Picture 11: Add the code line in the newly created method "referenceDataComp" Now you have properly setup the components' interface controller. Next you need to double-click to the component controller and do exactly the same steps as shown from picture 5 to picture 10.

Picture 12: To the same for the component controller now (see picture 5 to picture 10) At then end you should have a method in the components' controller as shown below

Picture 13: The newly created method referenceDataComp for the components' controller

Picture 14: Switch to the implementation tab, search for the newly created method and enter the code shown above We accomplished our tasks for the component CompComments. We need to follow the same steps for the components CompPrjList and CompPrjDetails now. Simply follow the instructions from picture 2 to picture 14. Once all component interfaces are available we can now open our root component again and provide the CompData-reference to all other components. Beforehand we firstly have to "tell" our root component where to get the other components' referenceCompData-methods. So we will:

Open the root component again Provide the root component with the other components' referenceCompData method Provide the reference to the data component to the other components through their referenceCompData method

Picture 15: Open the root component, click on "properties" tab and click on "Add"

Picture 16: Select all components and their interfaces and click on "OK"

Picture 17: That's how it should look like after adding the components

Picture 18: Switch to the "Implementation" tab and add the code as shown in picture The three additional code lines in the root components' component controller call the other components' interface controller and provide them with the reference to the data component.

From this point on every component is using the same instance of the data component.

3.4.4 Get the initial data from the data component

Up to here we haven't requested any data from the data component. That's something we need to do now. To be able to get the data from the data component we need to request it. Therefore we'll have to:

Create a new method "getData" in the data components' interface controller Forward the request to the components' controller Request the data in the component controller Use the data component method "getData" in the root components component controller method "wdDoInit"

Picture 1: Double-click on the data components' interface controller

Picture 2: Add a new method by clicking on "New" in the "Methods" tab

Picture 3: Add a new "Method"

Picture 4: Create a new method called "getData"

Picture 5: Once created it should be visible as new method in the component interface controller of CompData

Picture 6: Switch to the "Implementation" tab and add the request to fill the context (in this case the list of projects) At this point we have now created a new method that can be called by the root components' controller. Therefore we just add it to our code in "wdDoInit" of the root components' controller.

*Picture 7: * That's it. Now your application should be working properly. Of course you need to adapt to the application that you have. But these are the basic things you need to do.

4. References and Related Topics

Using Web Dynpro component interface definitions - WebLog promoting this learning material TechEd 05: Presentation slides explaining componentization The Structural Concepts of Web Dynpro Components The SAP NetWeaver Development Infrastructure (NWDI)