Skip to Content

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.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Former Member
    Let me please provide the omitted details and give
    some comments.

    Context node “Data”, cardinality 0:N
      Attributes:
        “No” : integer,
        “Name” : string

    In wdDoModifyView():

    if (firstTime)
    {
      // create table
      IWDTable table = (IWDTable)
        view.createElement(IWDTable.class, null);
     
      // bind table data source to context node “Data”
      table.bindDataSource(“Data”);

      // create and add first table column
      {
        IWDTableColumn colum = (IWDTableColumn)
          view.createElement(
            IWDTableColumn.class, null);
        table.addColumn(column);

        // use TextView for displaying
        // attribute “Data.No”
        IWDTextView editor = (IWDTextView)
          view.createElement(IWDTextView.class, null);
        editor.bindText(“Data.No”);
        column.setTableCellEditor(editor);
      }

      // create and add second table column
      {
        IWDTableColumn colum = (IWDTableColumn)
          view.createElement(
            IWDTableColumn.class, null);
        table.addColumn(column);

        // use TextView for displaying
        // attribute “Data.Name”
        IWDTextView editor = (IWDTextView)
          view.createElement(IWDTextView.class, null);
        editor.bindText(“Data.Name”);
        column.setTableCellEditor(editor);
      }

      // add table into view layout as child of
      // root container
      IWDUIElementContainer root =
        (IWDUIElementContainer) view.getRootElement();
      root.addChild(table);
    }

    How does the table’s data binding work? See Javadoc for IWDTable:

    Data binding: The table gets its data from a context node X.

    The number of table rows is given by the number of elements in X.
    The selected table rows are given by the selection of X.
    The editable row is determined by the lead selection of X.

    Table columns are defined by aggregating TableColumn objects.
    Each table column has a table cell editor.

    Every property of the table cell editor may be bound either

       1. to an attribute of the context node X, or
       2. to a context root attribute.

    In the first case, the property value in row i is determined by the attribute value of the ith node element.
    Otherwise, the property value is the same for all rows and given by the root attribute’s value.

    IMHO, the Web Dynpro API rather clearly reflects the steps to be done. The code comments above are more or less redundant.

    Concerning terminology:
    “Binding” means connecting UI element properties to context nodes or attributes. Adding UI elements to a parent element is something different and should not be called “binding”.

    Your comments about “a lot of static elements” are
    not clear to me.

    Armin

    (0) 
    1. Thanx Armin for pointing out the defects.

      Regarding the static elements; it was from your post in the forum from which I noticed that, as the variables being used in WDdoModify() are static and might lead to use of a lot of memory space. That was what I meant.

      Sorry for the terminologies. I shall correct them.

      (0) 

Leave a Reply