Dynamic Generation of a User Interface Element 

Use

The following example shows how you can generate a UI element dynamically at runtime. In the example, pressing a pushbutton triggers an action that displays an input field. You will see the necessary controller implementation, whose source text dynamically generates the UI element and the context attribute required for data binding.

In the example, pressing the pushbutton with ID Button1 executes the action InsertNewElement, which in turn sets context attribute Visibility to “true”. As a result, the condition:

if (wdContext.currentContextElement().getVisibility())

of the wdDoModifiyView method is satisfied and an input field is created with the ID InputField1.

In addition, the context attribute with ID AttributeA is created dynamically at runtime and bound to the value property of the input field. The data binding of this property is required.

For more information on hook method wdDoModifyView, see Dynamic Programming of User Interface Elements.

Prerequisites

You have created a Web Dynpro application and, within the Web Dynpro component (DynCreatingInputField in the example), you have created a view (DemoView in the example) within which you want to insert input field InputField1. For a detailed description of the procedure for creating Web Dynpro projects, Web Dynpro components, the context structure, and the layout of the view, see Creating Your First Web Dynpro Application.

Procedure

Creating the View Layout

...

       1.      Determine the value of property text of the TextView UI element.
The TextView UI element with ID DefaultTextView is used to label the input field. This UI element is generated automatically whenever a view is created. In this example, the value Insert a new input field is assigned to the text property of this UI element.

       2.      Insert the pushbutton with ID Button1 in view DemoView.
To do so, choose Insert Child in the context menu (right mouse button) for RootUI ElementContainerin the outline window or drag the UI element over the corresponding UI element icon  in the View Designer.

Creating the Context Structure

       3.      Create the context attribute as root node attribute with ID Visibility. This context attribute must be of the type boolean.

Context structure
Properties of context attribute Visibility

If you define first the context structure after creating the view, you can bind the UI element properties to the corresponding context elements directly after the insertion of the UI element into the view.

Creating Action InsertNewElement

Data Binding

Define data binding of the UI element properties (see the following screenshot).

    4.      Define the data binding of pushbutton UI element Button1 – binding for action InsertNewElement.

Controller Implementation: Supplying Data

The action InsertNewElement, which is executed when pushbutton Button1 is pressed and sets context attribute Visibility to true, dynamically generates an input field and binds its value property to a context attribute with ID AttributeA, which is also generated at runtime.

The following source code only contains the most important parts of the controller implementation for view DemoView:

... ... ...   //@@begin javadoc:wdDoModifyView   /**    * Hook method called to modify a view just before rendering.    * This method conceptually belongs to the view itself, not to the    * controller (cf. MVC pattern).    * It is made static to discourage a way of programming that    * routinely stores references to UI elements in instance fields    * for access by the view controller's event handlers, and so on.    * The Web Dynpro programming model recommends that UI elements can    * only be accessed by code executed within the call to this hook method.    *    * @param wdThis Generated private interface of the view's controller, as    *        provided by Web Dynpro. Provides access to the view controller's    *        outgoing controller usages, etc.    * @param wdContext Generated interface of the view's context, as provided    *        by Web Dynpro. Provides access to the view's data.    * @param view The view's generic API, as provided by Web Dynpro.    *        Provides access to UI elements.    * @param firstTime Indicates whether the hook is called for the first time    *        during the lifetime of the view.    */   //@@end   public static void wdDoModifyView(IPrivateDemoView wdThis, IPrivateDemoView.IContextNode wdContext, com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime)   {     //@@begin wdDoModifyView     if (wdContext.currentContextElement().getVisibility())       {          if (view.getElement("InputField1) == null)          IWDTransparentContainer container =(IWDTransparentContainer)view.getElement("RootUIElementContainer");          IWDInputField inputfield = (IWDInputField)view.createElement(IWDInputField.class, "InputField1");          inputfield.bindValue("AttriubteA");          inputfield.setVisible(WDVisibility.VISIBLE);          container.addChild(inputfield);       }      //@@end   }     //@@begin javadoc:onActionInsertNewElement(ServerEvent)   /** Declared validating event handler. */   //@@end   public void onActionInsertNewElement(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )   {     //@@begin onActionInsertNewElement(ServerEvent)    wdContext.currentContextElement().setVisibility(true);    IWDAttributeInfo test = wdContext.wdGetAPI().getRootNodeInfo().addAttribute("AttriubteA", "ddic:com.sap.dictionary.string");          wdContext.currentContextElement().setAttributeValue("AttriubteA", null);       //@@end   } ... ... ...

Result

Before you can call the Web Dynpro application, you must build the Web Dynpro project and deploy the Web Dynpro application on the J2EE Engine.

The Web Dynpro application is called in the browser using a URL. It contains a TextView UI element with the label Insert a new input field and the pushbutton with the label “Click here to insert a new UI element”.

When the pushbutton is pressed, an input field appears in the browser window and its value can be saved in context attribute AttributeA.