The first thing that came to my mind, when I learned about the dynamic programming in Web Dynpro, was my first stint at blindfold chess. Playing chess is thrilling but playing it blindfold, is much more pleasure. That is the similarity I felt between dynamic UI programming and a session of blindfold chess.
I remember the day when I created my first dynamic table in Web Dynpro, when I tried to set a node attribute to a column to find that it was only the same element that kept repeating in the table column. The similarity just taught me how careful we should be while creating an element dynamically.
The first lessons of dynamic programming that I happened to go through taught me that it is not be much encouraged. Dynamic programming provides a lot of power to the programmer but to be used only when left with no other options. It is tough aligning the screen statically, then the difficulty doing it dynamically needs no mention.
After learning some more dynamic UI element creation, I went forward to create a table. It was then that I learned the difficulties in creating a table and that lead me to the notion that it might be worth sharing.
In order to create a table dynamically one needs a small understanding of the components of a table. The basic components of a table are as follows:-
1. the table column
2. the table cell editor(this can be any UI element).
So as a simple exercise we can try creating a simple table with two column – no and name.
1. First create a node ‘TableNode’ with attributes – no and name.
2. Set values for the attribute in the wdDoInit() part of the view in which the table has to be created.
3. Get the handler for the ‘RootUIElementContainer’.
(view.getElement( the root Container name))
4. Create a table.
IWDTable table=(IWDTable)view.createElement(IWDTable.class, name for the table );
5. Create a table column.( IWDTableColumn)
6. Create 2 textViews.(IWDTextView)
7. Bind the datasource property of the table to the node info of the context node table node.
8. Bind the text property of the textViews to the attribute info of the attributes in the TableNode.
Textview.bindText(Context node attribute info(no and name));
9. Add the table to the root container.
10. Add the table column to the table.
11. Type cast the textView to a table cell editor.
12. Set the table celleditor property of the columns.
