WebDynpro for Java: Tutorial of the Basic Usage of RoadMap Component

We will create a local Development component project of the type Web Dynpro as follow

Our project will contain only 3 views with the purpose of show the basic usage of the roadMap object.

After, we create our component controller RoadMap and the RoadMapView view as follow

Now, we will create the 2 views more, the previous one will contain only the RoadMap Object (RoadMapView) used in all the project, the other ones show the flow between screens.

Here the list of the 3 views: RoadMapView,  InitView, and ConfirmView.

Now, we will add the component RoadMap object (it is on the Standar Complex Group) to the RoadMapView view, but first delete the default object added to the view, after we will need to add two steps (it could be more, depends of your logic) to our roadmap object. In order to do that we will use the Outline view of the NWDS. We add the two steps as follow

The type steps to add at the RoadMap object will be ot the "RoadMapStep" type. The name of the steps are: InitStep and ConfirmStep and the properties to change in these objects are: description and name. The values "Init" and "1" to InitStep, and "Confirm" and "2" to ConfirmStep. Please, see the next picture.

 Finally, we have the RoadMapView as the next picture:

We will modify the context of the Component Controller, we are going to add two "property values" named fullName and processStep to the current context, both of them are strings. And also, we bind these properties in the others views, with the exception in the RoadMapView, we only map the processStep property value. See the next picture.

Now, we are going to add the ViewContainerUIElement object at the top on the InitView and ConfirmView views (previously delete the default object added to the view). This is important because this object will contain the RoadMapView view.

Before, we are going to modify the RoadMap Window in the diagram View, first we delete the RoadMapView, and add the InitView and set up it as default view. See the next picture.

Second, we are going to embed the RoadView view on the InitView view.

 Also, add the ConfirmView view on the Window and do the same.

Next, we define in the views the inbound and outbound plugs on the RoadMap Window object.

In the  InitView:

• Inbound ---> fromConfirmView
• Outboud ---> toConfirmView

In the ConfirmView

• Inbound ---> fromInitView
• Outboud ---> toInitView

Finally, after you link the inbound with the respective outbounf you will have the next result:

Now, we are going to add functionality and design to our views.

The RoadMapView view, we select the RoadMap object and modify the selectedStep property, we put the property value on the context named processStep. See the next picture.

 After, the InitView view could look like the follow picture.

We need to add some lines of code in the next methods: wdDoInit, onActionNext, and  onPlugfromConfirmView as follow:

  public void wdDoInit()
  {
    //@@begin wdDoInit()
    wdContext.currentContextElement().setProcessStep(STEP_INIT);
    //@@end
  }

  public void onActionNext(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )
  {
    //@@begin onActionNext(ServerEvent)
    wdThis.wdFirePlugToConfirmView();
    //@@end
  }

   public void onPlugfromConfirmView(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )
  {
    //@@begin onPlugfromConfirmView(ServerEvent)
    wdContext.currentContextElement().setProcessStep(STEP_INIT);
    //@@end
  }

And, at the end of the view controller add the next line:

  //@@begin others
    private String STEP_INIT = "InitStep";
  //@@end

Also, the method onActionNext is used on the ClickOn event on the next button on the view InitView.

Finally, the ConfirmView view could look like the follow picture.

 

 We need to add some lines of code in the next methods: wdDoInit,onActionBack , and  onPlugfromInitView as follow:

  public void wdDoInit()
  {
   
//@@begin wdDoInit()
     wdContext.currentContextElement().setProcessStep(STEP_CONFIRM);
   
//@@end
  }

  public void onActionBack (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent
wdEvent )
  {
    //@@begin onActionNext(ServerEvent)
    wdThis.wdFirePlugToInitView();
    //@@end
  }

  
public void onPlugfromInitView(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent
wdEvent )
  {
    //@@begin onPlugfromConfirmView(ServerEvent)
    wdContext.currentContextElement().setProcessStep(STEP_CONFIRM);
   
//@@end
  }

And, at the end of the view controller add the
next line:

  //@@begin others
  private String STEP_CONFIRM = "ConfirmStep";
  //@@end

Also, the method onActionBack is
used on the ClickOn event on the back button on the view ConfirmView view.

Note: The private instance variables defined at the end of the view controllers must have the same value defined on the property "id" of every RoadMapStep of the RoadMap object in the RoadMapView view.

 Finally, we need to try our web dynpro application, we need to create an application object. It will look like the final picture.

You can find the source code here.