Use Components in Bigger Web Dynpro Projects Componentization

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%29


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%5b


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:


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


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

}


6/25

Picture 1: Double click the components' name

Picture 2: Double click the components' controller


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


9/25

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


10/25

Picture 4: Double-click on the interface controller


11/25

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


12/25

Picture 6: Add the methods' name


13/25

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


14/25

Picture 8: Select the type "IWDComponentUsage"


15/25

Picture 9: Click on "Finish"

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


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.


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


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:


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"


20/25

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


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.


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


23/25

Picture 3: Add a new "Method"

Picture 4: Create a new method called "getData"


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.


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

Date post:	05-Apr-2018
Category:	Documents
Upload:	shaqcl
View:	227 times
Download:	0 times

Use Components in Bigger Web Dynpro Projects Componentization

Documents