Code Examples of Data Binding

Context definition at design time

Context example: Name list with the 12 months of a year.

The value node in the example below is defined as follows:

Value node "MonthsOfYear", collection type=list, cardinality=0..n, selection=0..n

and the attribute:

Value attribute "MonthName", type="String".

You can define this description in the Web Dynpro perspective of the SAP NetWeaver Developer Studio at design time, as shown in the following graphic.

Initializing the node elements

The node elements are initialized as view context of a Main View view within the wdDolnit method of the context.

At runtime, the context node is filled with values using the source code shown below.

In the example, a constant string array consisting of the 12 month names is declared. This array is used to create a list to which a monthOfYear element is added until the property value of the monthNames object (in this example: length) is greater than 12. In the next step (see 2. in the source code), this list is bound to the MonthsOfYear node. In addition, the selection is initialized and the lead selection is set. In this example, the lead selection is set to the month June.

Source code:

String[] monthNames = new String [] {





   "January", "February", "March", "April",    "May", "June", "July", "August",    "September", "October", "November", "December", };



//1. Create context elements for node "MonthsOfYear" List monthsOfYear = new ArrayList(); for (int i =  0; i < monthNames.length; ++i) {
IPrivateMainView.IMonthsOfYearElement month = wdContext.createMonthsOfYearElement();

month.setMonthName(monthNames[i]); monthsOfYear.add(month);
}



//2. Bind node to element list wdContext.nodeMonthsOfYear().bind(MonthsOfYear);


//3. Initialize selection for (int  i = 0;  i < wdContext.nodeMonthsOfYear().size(); ++i) {


  //select summer months   wdContext.nodeMonthOfYear().setSelected(i, i>=5 && i<=7 ); }
//set lead selection
  wdContext.nodeMonthsOfYear().setLeadSelection(5);

Since the context is initialized, you can bind the property of a UI element to this context by assigning the path of the context attribute to the property of the UI element. Example: checkBoxGroup.bindTexts("MonthsOfYear.MonthName");

You can already bind a UI element to this context at design time. The wdDoModifyView method for binding a UI element at runtime is provided.

Creating a checkbox group within the wdDolnitModifyView method

Each checkbox represents a month and the selection corresponds to the one of the context node:

//CheckBoxGroup




  IWDTransparentContainer container = (IWDTransparentContainer)      view.getElement(IWDTransparentContainer.class, "RootUIElementContainer");   IWDCheckBoxGroup checkBoxGroup = (IWDCheckBoxGroup)      view.createElement(IWDCheckBoxGroup.class, "MyCheckBoxGroup");      checkBoxGroup.bindTexts ("MonthsOfYear.MonthName");
     container.addChild(checkBoxGroup);

Creating a dropdown list box within the wdDoModifyView method

Each entry represents a month and the selected entry corresponds to the lead selection of the context node:

//DropDownByIndex

  IWDTransparentContainer container = (IWDTransparentContainer)      view.getElement(IWDTransparentContainer.class, "RootUIElementContainer");


  IWDDropDownByIndex dropDownList = (IWDDropDownByIndex)      view.createElement(IWDDropDownByIndex.class, "MyDropDownByIndex");       dropDownList.bindTexts ("MonthsOfYear.MonthName");
     container.addChild(dropDownList);

Creating a radio button group within the wdDolnitModifyView method

Each entry represents a month and the selected entry corresponds to the lead selection of the context node:

//RadioButtonGroup

  IWDTransparentContainer container = (IWDTransparentContainer)      view.getElement(IWDTransparentContainer.class, "RootUIElementContainer");



  IWDRadioButtonGroupByIndex radioButtonGroup = (IWDRadioButtonGroupByIndex)      view.createElement(IWDRadioButtonGroupByIndex.class, "MyRadioButtonGroup");       radioButtonGroup.bindTexts ("MonthsOfYear.MonthName");       radioButtonGroup.setColCount(12);
     container.addChild(radioButtonGroup);

Creating a single-column table within the wdDolnitModifyView method

For the data binding of a table, a table cell editor (in this example: a TextView UI element) is created and bound to the MonthOfYear node. The table column is defined and the table cell editor is set for it. The table is created and bound to the MonthOfYear node. A column is added to the table using the addColumn method. Each row represents a month and the selected rows correspond to the selection of the context node:

//Table

  IWDTransparentContainer container = (IWDTransparentContainer)      view.getElement(IWDTransparentContainer.class, "RootUIElementContainer");


IWDTextView editor = (IWDTextView)   view.createElement(IWDTextView.class, "monthNameColumnEditor");   editor.bindText("MonthOfYear.MonthName");

IWDTableColumn column = (IWDTableColumn)   view.createElement(IWDTableColumn.class, "monthNameColumn");
column.setTableCellEditor(editor);

IWDTable table = (IWDTable)   view.createElement(IWDTable.class, "MyTable");

  table.bindDataSource("MonthsOfYear"); table.addColumn(column);
  container.addChild(table);