8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
1/25
Use components in bigger Web Dynpro projects (componentization)
Attachments:32 Added by Rui Nogueira, last edited by Guest on Jun 05, 2008 (view change)
1. Goal2. Pre-Requisites
3. Step-by-Step Solution
4. References and Related Topics
5. 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
http://wiki.sdn.sap.com/wiki/display/WDJava/Use+components+in+bigger+Web+Dynpro+projects+%28componentization%29http://wiki.sdn.sap.com/wiki/display/WDJava/Use+components+in+bigger+Web+Dynpro+projects+%28componentization%29http://wiki.sdn.sap.com/wiki/pages/viewpageattachments.action?pageId=16435&metadataLink=truehttp://wiki.sdn.sap.com/wiki/display/~vhimuwshttp://wiki.sdn.sap.com/wiki/pages/diffpages.action?pageId=16435&originalId=26509446http://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-Goalhttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-Goalhttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-PreRequisiteshttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-PreRequisiteshttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-StepbyStepSolutionhttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-StepbyStepSolutionhttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-ReferencesandRelatedTopicshttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-ReferencesandRelatedTopicshttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-OpenIssuesandQuestionshttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-OpenIssuesandQuestionshttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-OpenIssuesandQuestionshttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-ReferencesandRelatedTopicshttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-StepbyStepSolutionhttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-PreRequisiteshttp://wiki.sdn.sap.com/wiki/display/wdjava/use%20components%20in%20bigger%20web%20dynpro%20projects%20(componentization)?bc=true#UsecomponentsinbiggerWebDynproprojects%28componentization%29-Goalhttp://wiki.sdn.sap.com/wiki/pages/diffpages.action?pageId=16435&originalId=26509446http://wiki.sdn.sap.com/wiki/display/~vhimuwshttp://wiki.sdn.sap.com/wiki/pages/viewpageattachments.action?pageId=16435&metadataLink=truehttp://wiki.sdn.sap.com/wiki/display/WDJava/Use+components+in+bigger+Web+Dynpro+projects+%28componentization%298/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
2/25
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 cross-
cutting 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 consultantcan 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).
http://help.sap.com/saphelp_nw04/helpdata/de/01/9c4940d1ba6913e10000000a1550b0/frameset.htm%5bhttp://help.sap.com/saphelp_nw04/helpdata/de/01/9c4940d1ba6913e10000000a1550b0/frameset.htm%5bhttp://help.sap.com/saphelp_nw04/helpdata/de/01/9c4940d1ba6913e10000000a1550b0/frameset.htm%5b8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
3/25
3. Step-by-Step Solution
If you want to switch to a component based architecture you'll have to solve these major issues:
1. Wisely bundle the views you have to components
2. Share the same context within multiple components
3. Bundle all you components again into one application4. 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:
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
4/25
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 anothercomponent
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
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
5/25
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
}
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
6/25
Picture 1: Double click the components' name
Picture 2: Double click the components' controller
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
7/25
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.
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
8/25
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"
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
9/25
Picture 3: Connect the interface controller with the component controller (no additional context elementsnecessary)
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
10/25
Picture 4: Double-click on the interface controller
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
11/25
Picture 5: Add a new method to the component interface controller
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
12/25
Picture 6: Add the methods' name
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
13/25
Picture 7: Select a "Java Native Type" by clicking on "Browse"
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
14/25
Picture 8: Select the type "IWDComponentUsage"
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
15/25
Picture 9: Click on "Finish"
Picture 10: The newly created method for the component interface controller
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
16/25
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.
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
17/25
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
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
18/25
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:
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
19/25
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"
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
20/25
Picture 16: Select all components and their interfaces and click on "OK"
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
21/25
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.
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
22/25
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
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
23/25
Picture 3: Add a new "Method"
Picture 4: Create a new method called "getData"
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
24/25
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.
8/2/2019 Use Components in Bigger Web Dynpro Projects Componentization
25/25
*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)
https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/webdynpro/WD%20Java/WD%20Tutorials/Web%20Dynpro%20Sample%20Applications%20and%20Tutorials.htm#61https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/webdynpro/WD%20Java/WD%20Tutorials/Web%20Dynpro%20Sample%20Applications%20and%20Tutorials.htm#61https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/5643https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/5643https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/5643https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/f727d100-0801-0010-4cbd-b0ad5c161945https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/f727d100-0801-0010-4cbd-b0ad5c161945https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/a048387a-0901-0010-13ac-87f9eb649381https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/a048387a-0901-0010-13ac-87f9eb649381https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/webcontent/uuid/f6eb8e9e-0901-0010-8abb-cba5279db9b6https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/webcontent/uuid/f6eb8e9e-0901-0010-8abb-cba5279db9b6https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/webcontent/uuid/f6eb8e9e-0901-0010-8abb-cba5279db9b6https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/a048387a-0901-0010-13ac-87f9eb649381https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/f727d100-0801-0010-4cbd-b0ad5c161945https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/5643https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/webdynpro/WD%20Java/WD%20Tutorials/Web%20Dynpro%20Sample%20Applications%20and%20Tutorials.htm#61