This blog deals with componentization of webdynpro applications in CE7.1.It explains the concepts like Component Usage, Managing the lifecycle of the used component manually, Reference Mode concept of component usage.It demonstrates with a working example how to share common component reference between all the components which declares the usage of that component.
1)Create a webdynpro project and name it Componentization.
2)Create four components say "RootComp","Consume1Comp","Consume2Comp" and "DataComp" with the default views and windows.
3) Create Application say "CompTutApp", which uses the existing component RootComp.
4)The scenario here is that the "DataComp" has some data which has to be shared between "Consume1Comp" and "Consume2Comp".Both the components should refer to the same instance of DataComp.i.e if the Data component has a variable named "count" and if "ConsumeComp1" increments the "count" variable then the change has to be reflected in "Consume2Comp". The "RootComp" takes the responsibility of providing the same "DataComp" reference to "Consume1Comp" and "Consume2Comp".
5) In the "RootComp" declare the usage of the three components "Consume1Comp", "Consume2Comp" and "DataComp".
6) Similarly in components "Consume1Comp" and "Consume2Comp" declare the usage of the "DataComp" with the usage names "DataCompForConsume1CompInst" and "DataCompForConsume2CompInst" respectively.
7) Now open the InterfaceController of the DataComp and create Value Node "DataSource" with cardinality 1:1.Under this create a value attribute "count" of type integer.
8)Now open the InterfaceController and create a method "getData()".The implementation of this method should be present in the ComponentController.We are declaring this method at the interface level so that it can be called from the component which declares the usage of this component.
Now paste the code inside the method.
public void getData() {
wdContext.currentDataSourceElement().setCount(1);
}
9) Now open the "RootComp" ComponentController and add a value node "DataConsume" with cardinality 1:1.Under that create a value attribute "count".Similarly create value node "DataConsume" in the component Controllers of "Consume1Comp","Consume2Comp" components. Now map the "DataConsume" node to the "DataSource" node of the Interface Controller of the component usage in all the three components "RootComp","Consume1Comp","Consume2Comp".The below figure shows the mapping for "RootComp".
10) In "Consume1Comp" Interface Controller create a method "referenceDataComp".The method should have parameter "referenceDataComp"of type com.sap.tc.webdynpro.progmodel.api.IWDComponentUsage.
Now add the following code in the method created.
11) In the Interface Controller of the "Comp2Comp" create two methods "createNewDataComp" and "referenceDataComp" with parameter "referenceDataComp" Of type com.sap.tc.webdynpro.progmodel.api.IWDComponentUsage.
13) In the "RootComp" Component Controller "wdDoInit ()" method add the below code.
"
14) Open the "RootCompView" of the "RootComp" Component Controller and create the layout as shown below
Mapping of "DataCosume" node from Component Controller to view Controller has to be done.
Action | Button with Text |
CreateConsume1Comp | Create Consume1 Comp |
DeleteConsume1Comp | Delete Consume1 Comp |
CreateConsume2CompInRefMode | Create Comsume2 Comp in ref mode |
CreateConsume2CompInNonRefMode | Create Comsume2 Comp in non ref mode |
In the "wdDoModifyView()" add the following code
if (firstTime){
wdThis.wdGetCreateConsume2CompInRefModeAction().setEnabled(true); wdThis.wdGetCreateConsume2CompInNonRefModeAction().setEnabled(true);
}
And add the following code in the methods created.
15) In the "Consume1CompView" of the "Consume1Comp" design the following layout
int count=0;
count=wdContext.nodeDataConsume().currentDataConsumeElement().getCount();
wdContext.nodeDataConsume ().currentDataConsumeElement ().setCount (count+1);
16) Now open the "RootCompWindow" of the "RootComp" and create a out bound plug "RootWindowViewsOut" of type Standard. Now create a view layout as shown in the below figure and embed "Consume1CompInterfaceView" and "Consume2CompInterfaceView" in the layout. Create the navigation links from the "RootWindowViewsOut" outbound plug to the Default in bound plugs of the embedded interface views.Paste the below code in the default plug event handler.
public void onPlugDefault (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ){
//@@begin onPlugDefault(ServerEvent)
wdThis.wdFirePlugRootWindowViewsOut();
//@@end
}
The below figures shows the expected output
Create "Consume1Comp" and "Consume2Comp" in reference mode.When you increment the count in one component, it increases in all the components, since they all refer to the same "DataComp".
But if you create Consume2Comp in non reference mode, then the count in the "Consume2Comp" is independent of the count in "Consume1Comp" and "RootComp" since Consume2Comp creates its own "DataComp" and it does not use the "DataComp" reference provided by the "RootComp".