Creating UI Elements
You want the view of this application to display a tree and the name of a selected file. In this step, you integrate a tree into the view and bind it to the corresponding context attributes and actions. You also create a label and an input field.
Procedure
...
1. To open the TreeView, double-click TreeView in the project structure in the Web Dynpro Explorer.
2. Choose the Layout tab page.
3. Create the UI elements displayed in the table below and set the properties.
Property |
Value |
TheTree of type Tree |
|
Properties of Tree – dataSource |
|
Properties of Tree – rootVisible |
false |
Properties of Tree – title |
Filesystem |
TheNode of type TreeNodeType as child of TheTree |
|
Properties of TreeNodeType – dataSource |
|
Properties of TreeNodeType – expanded |
treeNode.isExpanded |
Properties of TreeNodeType – hasChildren |
treeNode.hasChildren |
Properties of TreeNodeType – iconSource |
treeNode.iconSource |
Properties of TreeNodeType – ignoreAction |
treeNode.ignoreAction |
Properties of TreeNodeType – text |
treeNode.text |
Event – onAction |
Select |
Event – onLoadChildren |
LoadChildren |
Label of type Label |
|
Properties of Label – labelFor |
Input
|
Properties of Label – text |
Selected File |
Input of type InputField |
|
Properties of InputField – readOnly |
true |
Properties of InputField – value |
|
Result
You have created a tree with a node of type TreeNodeType in the TreeView and bound it to the context attributes. You have also placed an input field in the view and bound it to a context attribute to enable the name of the selected file to be displayed later.
Next step:
Creating a Resource Bundle for the File Structure