Additional Blogs by Members
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member
0 Kudos

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

  • Go to RootComp->Used Components->Add Used Component

  • Give the Reference name as "DataCompForRootInst".Browse and choose "DataComp".Change the LifeCycle to "Manual". Choose Finish. 

 

  • Similarly declare the usage of the components  "Consume1Comp","Comsume2Comp",with usage names "Consume1CompInst" and "Consume2CompInst".

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.

  • Since the ComponentController implements the InterfaceController, you will get a build error "The context node 'DataCompInterface.DataSource' is missing in the interface implementation. Hint: You can copy the corresponding node from the interface definition". So, as stated you can copy the "DataSource" in the ComponentController of the "DataComp".

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.

  • Since Component Controller implements Interface Controller, add the method with the same name and signature in the Component Controller .This can be done easily using the quickfix option provided in the problems tab. Add the required controllers.

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.

  • Since Component Controller implements Interface Controller, add the methods with the same name and signature in the Component Controller  .This can be done using the quickfix option provided. Add the required controllers.Now add the below code in the methods created.

13) In the "RootComp" Component Controller "wdDoInit ()" method add the below code.

  • Create the four Methods "createComp1InRefMode", "createComp2InNonRefMode", "createComp2InRefMode", "deleteComponent1" in the Component Controller of the "RootComp".
  • Add the required controllers in the “RootComp” Component Controller by going to the properties tab.

  • Add the following code in the methods created above

"

 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.

  • Now create following actions and bind them to the corresponding Actions.
 

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

 

  • Mapping of "DataCosume" node from Component Controller to view Controller has to be done.
  • Create a Action called "IncreamentCount" and in the event handler "onActionIncreamentCount ()" add the following code

int count=0;

count=wdContext.nodeDataConsume().currentDataConsumeElement().getCount();

wdContext.nodeDataConsume ().currentDataConsumeElement ().setCount (count+1);

  • Bind the "onAction" Attribute of the "Increament Count" button to "IncreamentCount" action.
  • Repeat the this procedure (15) for the "Consumer2CompView" of the "Consumer2Comp".

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

image 

4 Comments