Start of Content Area

This graphic is explained in the accompanying text Code Examples of Data Binding  Locate the document in its SAP Library structure

The following code source is an example of the interaction between a UI element and a context. The hierarchical structure of the context is defined - that is, the value nodes and value attributes are created and their properties are described (see graphic below).

Describing and Initializing a Context

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.

 

This graphic is explained in the accompanying text
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");

Data Binding of the Context Example to Different UI Elements

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);

  

 

 

End of Content Area