Code Example for Table Display 
Use
The following example shows how the different options for data binding of the user interface element attributes to the context affect the behavior of a table. In this example, two different tables are shown. Each of these tables uses a radio button as table cell editor. The most essential UI element attributes of the radio button are the keyToSelect and the selectedKey properties.
The keyToSelect attribute determines the internal key with which the radio button can be selected. Using the selectedKey attribute, you can choose which radio button is to be selected. These UI attributes are bound to the respective context attributes in accordance with the rules for Web Dynpro data binding.
The first table variant represents a table that contains three columns and uses the radio button as table cell editor. In contrast to the second variant, the selectedKey attribute is bound to a context attribute that is within the context node to which the table is bound. Here, the value of the keyToSelect attribute is the same within each column, but it varies from column to column. This value is assigned to the keyToSelect attribute (see data binding of UI element attributes further below). The value for the selectedKey attribute is different in each row so that radio button groups are created that work together only within a row.
The second table variant contains a column and has a radio button as table cell editor. If, as described in table data binding, you bind the selectedKey attribute to a root node attribute – that is, to an attribute outside the context node to which the table is bound, the value of the selectedKey attribute is the same for all lines. The reason for this is that only one radio button can be selected in the column of this table.
Procedure
Creating the Layout for the StartView View
For a detailed description of how to create the layout of a view, see Creating and Designing a View. Below, the most important parts of the view layout are listed:
|
1. Delete the UI element DefaultTextView that was automatically generated with the view. 2. Insert table UI element HorizontalGroupTable 3. Insert table column element Columns1. 4. Insert table cell editor RadioButton1. 5. Insert table column element Columns1. 6. Insert table cell editor RadioButton2. 7. Insert table column element Columns1. 8. Insert table cell editor RadioButton3. 9. Insert table UI element VerticalGroupTable. 10. Insert table column element VerticalGroupColumn. 11. Insert table cell editor VerticalRadioButton. |
The following screenshot shows the entire structure of the view.
|
...
Creating the Context Structure
For a detailed description of how to create a context structure at design time, see the tutorials for Context Programming and Data Binding and declaring the Controller Context of a View.
|
1. Create the context node HorizontalGroups. 2. Create context attribute selectedKey of type String. 3. Create the context node VerticalGroup. 4. Create context attribute keyToSelect of type String. 5. Create root node attribute selectedKeyOfVerticalGroup. |
|
Defining Data Binding of the User Interface Element Properties
Data binding of the UI element attributes for the most important UI elements in the horizontal group: |
|
The dataSource attribute of the UI element HorizontalGroupTable is bound to the context node HorizontalGroups. |
|
The keyToSelect attribute of the table cell editor RadioButton1 is assigned the value KEY_0. The selectedKey attribute of the table cell editor RadioButton1 is bound to the context attribute HorizontalGroups.selectedKey.
|
|
The keyToSelect attribute of the table cell editor RadioButton2 is assigned the value KEY_1. The selectedKey attribute of the table cell editor RadioButton2 is bound to the context attribute HorizontalGroups.selectedKey.
|
|
The keyToSelect attribute of the table cell editor RadioButton1 is assigned the value KEY_2. The selectedKey attribute of the table cell editor RadioButton2 is bound to the context attribute HorizontalGroups.selectedKey.
|
|
Data binding of the UI element attributes for the most important UI elements in the vertical group: |
|
The dataSource attribute of the UI element VerticalGroupTable is bound to the context node VerticalGroup. |
|
The keyToSelect attribute of the table cell editor VerticalRadioButton is bound to the context attribute VerticalGroup.keyToSelect. The selectedKey attribute of the table cell editor VerticalRadioButton is bound to the root node attribute selectedKeyOfVerticalGroup.
|
|
Implementing a Controller
In the first variant, the value for the keyToSelect attribute is assigned for each table column – that is, each column has a particular value, each radio button has the internal key KEY_0 in the first column, the key KEY_1 in the second, and the key KEY_1 in the third. In contrast to the second variant, the values for the selectedKey attribute are created in a loop and there 10 rows are created.
Using i Modulo 3 (source code: i% 3), the values KEY_0, KEY_1, and KEY_2 are created; in this way, the button i Modulo 3 is always chosen in the i-th line. Therefore, the first radio button in the first row is chosen, the second radio button in the second, and the third button in the third. In the fourth row, this sequence will be repeated. In this way, you can represent a radio button group that has an effect within a row. The most important parts of the source code for the controller implementation are listed further below.
In the second variant, the value of the selectedKeyattribute is set to the value KEY_0 during initialization of the view. The internal keys for the radio buttons are created by a loop in the supplyVerticalGroup method – that is, 10 node elements with the keys KEY_0 to KEY_9 are created. Since the context attribute selectedKeyOfVerticalGroup is outside the context node to which the table itself is bound, the value for selectedKeyOfVerticalGroup has the same value in each row. In this way only one radio button can be chosen in a column – exactly the radio button whose key matches the value for the context attribute selectedKeyOfVerticalGroup.
//@@begin javadoc:wdDoInit() /** Hook method called to initialize controller. */ //@@end public void wdDoInit() { //@@begin wdDoInit() wdContext.currentContextElement().setSelectedKeyOfVerticalGroup("KEY_0"); //@@end } public void supplyVerticalGroup(IPrivateRadioButtonTableView.IVerticalGroupNode node, IPrivateRadioButtonTableView.IContextElement parentElement) { //@@begin supplyVerticalGroup(IWDNode,IWDNodeElement) for (int i = 0; i < 10; ++i) { IPrivateRadioButtonTableView.IVerticalGroupElement element = node.createVerticalGroupElement(); node.addElement(element);
element.setKeyToSelect("KEY_" + i); // internal keys } //@@end }
//@@begin javadoc:supplyHorizontalGroups(IWDNode,IWDNodeElement) /** * Declared supply function for IPrivateRadioButtonTableView.IHorizontalGroupsNode. * This method is called when the node is invalid and the collection is * requested. This may occur during any phase, even at the beginning to * initialize the node. The method is expected to fill the node * collection using IWDNode.bind(Collection) or * IWDNode.addElement(IWDNodeElement). * * @param node the node that is to be filled * @param parentElement The element that this node is a child of. May be * <code>null</code> if there is none. * @see com.sap.tc.webdynpro.progmodel.api.IWDNode#bind(Collection) * @see com.sap.tc.webdynpro.progmodel.api.IWDNode#bind(IWDNodeElement) */ //@@end public void supplyHorizontalGroups(IPrivateRadioButtonTableView.IHorizontalGroupsNode node, IPrivateRadioButtonTableView.IContextElement parentElement) { //@@begin supplyHorizontalGroups(IWDNode,IWDNodeElement) for (int i = 0; i < 10; ++i) { IPrivateRadioButtonTableView.IHorizontalGroupsElement element = node.createHorizontalGroupsElement(); node.addElement(element);
element.setSelectedKey("KEY_" + (i % 3)); // internal keys } //@@end }
|
Result
Two tables are represented whose table cell editors behave in accordance with their different data binding. In the first table, the radio button group takes effect in a row, while in the second table the radio button group takes effect with a column.
