Skip to Content

           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.

image

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

image

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

image 

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

image

  • 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”.

image

10) In “Consume1Comp” Interface Controller create a method “referenceDataComp”.The method should have parameter “referenceDataComp”of type com.sap.tc.webdynpro.progmodel.api.IWDComponentUsage.

image

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

image

Now add the following code in the method created. 

image

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.

image

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

image

image

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

image

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

image

  • Add the following code in the methods created above

image

image

image

 14) Open the “RootCompView” of the “RootComp” Component Controller and create the layout as shown below

image

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. 

image

image

 image

image

 

15) In the “Consume1CompView” of the “Consume1Comp” design the following layout

image

 

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

image

public void onPlugDefault (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ){

    //@@begin onPlugDefault(ServerEvent)

        wdThis.wdFirePlugRootWindowViewsOut();

    //@@end

  }

The below figures shows the expected output

image

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

   image

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 

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

    1. Divya Devi
      Copy and paste the code below,
      public void createComp2InNonRefMode( )  {
          //@@begin createComp2InNonRefMode()
             wdThis.wdGetConsume2CompInstComponentUsage().deleteComponent();
            if(!wdThis.wdGetConsume2CompInstComponentUsage().hasActiveComponent()){
             wdThis.wdGetConsume2CompInstComponentUsage().createComponent();
            }
            wdThis.wdGetConsume2CompInstInterface().createNewDataComp(wdThis.wdGetDataCompforRootInstComponentUsage());
          //@@end
        }

      Thanks,
      Divya

      (0) 

Leave a Reply