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).
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.
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", //1. Create
context elements for node "MonthsOfYear" IPrivateMainView.IMonthsOfYearElement month = wdContext.createMonthsOfYearElement(); month.setMonthName(monthNames[i]); } //2. Bind node to element list //3. Initialize selection //select summer months //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.
Each checkbox represents a month and the selection corresponds to the one of the context node:
//CheckBoxGroup IWDTransparentContainer container
= (IWDTransparentContainer) container.addChild(checkBoxGroup); |
Each entry represents a month and the selected entry corresponds to the lead selection of the context node:
//DropDownByIndex IWDTransparentContainer container
= (IWDTransparentContainer) IWDDropDownByIndex dropDownList =
(IWDDropDownByIndex) container.addChild(dropDownList); |
Each entry represents a month and the selected entry corresponds to the lead selection of the context node:
//RadioButtonGroup IWDTransparentContainer container
= (IWDTransparentContainer) IWDRadioButtonGroupByIndex
radioButtonGroup = (IWDRadioButtonGroupByIndex) container.addChild(radioButtonGroup); |
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) IWDTextView editor = (IWDTextView) IWDTableColumn column = (IWDTableColumn) column.setTableCellEditor(editor); IWDTable table = (IWDTable) table.bindDataSource("MonthsOfYear"); container.addChild(table); |