Model driven approach for building Dynamic UI

One of the great feature of ADF Rich Client is that support for building User Interfaces on the fly. These dynamic components are smart enough to read the binding metadata and render themselves on the fly. Please read this topic 22.7 Using a Dynamic Form to Determine Data to Display at Runtime, to learn more about this feature. When we talk about the dynamism provided by the ADF Rich Client, story is incomplete without referring support from the ADF BC (business service) layer. You can create dynamic EntityObject, ViewObject and wire them to UI components declaratively, without much effort. In this post, I'm discussing some common 'dynamic UI' based use case requirements and their solutions using ADF.

Case 1: Dynamic UI Table built using dynamic ViewObject(database table and attribute definitions change for each invocation)

Use case requirement: UI needs to be populated from different database tables, based on various business conditions. Number of displayed attributes may vary based on source database table.

Solution : Solution is pretty straight forward. Let us start from the business service layer and then move towards UI layer.

Business Service Layer

You can make use of ApplicationModule::createViewObjectFromQueryStmt(java.lang.String voName, java.lang.String sqlStatement) to define dynamic ViewObjects using the query supplied by the run time.

Binding Layer

Next step is to wire this dynamic ViewObject with UI. Define the necessary binding in your page definition file. You may need to do it manually as we are creating the ViewObject dynamically.

Sample page definition is shown below.

 <executables>
    <variableIterator id="variables"/>
    <iterator Binds="DynamicQueryVO" DataControl="AppModuleDataControl"
              id="DynamicVOIterator"/>
  </executables>
  <bindings>
    <tree IterBinding="DynamicVOIterator" id="DynamicVO">
      <nodeDefinition Name="Dummy"></nodeDefinition>
    </tree>
  </bindings>

UI Layer

For building dynamic UI, either you can use <af:table> along with <af:foreach> to populate table on the fly, or simply leave the job to <dynamic:table> component. Let the component do the job for you. If you need to display the data in a dynamic parameter form, you can use <dynamic:form>

Dynamic components differ from standard components in that all the binding metadata is created at run time. This dynamic building of the bindings allows you set display information using control hints on a view object instead of configuring the information in the Edit Form Fields dialog as you drop the control onto the page

Table populated using <af:foreach> is shown below

 <af:table rows="#{bindings.DynamicVO.rangeSize}"
    fetchSize="#{bindings.DynamicVO.rangeSize}"
    emptyText="#{bindings.DynamicVO.viewable ? 'No data to display.' : 'Access Denied.'}"
    var="row" rowBandingInterval="0"
    value="#{bindings.DynamicVO.collectionModel}"
    selectedRowKeys="#{bindings.DynamicVO.collectionModel.selectedRow}"
    selectionListener="#{bindings.DynamicVO.collectionModel.makeCurrent}"
    rowSelection="single" id="t1">
    <af:forEach items="#{bindings.DynamicVOIterator.attributeDefs}"
        var="def">
      <af:column headerText="#{def.name}" sortable="true"
         sortProperty="#{def.name}" id="c1">
    <af:outputText value="#{row[def.name]}" id="ot1"/>
      </af:column>
    </af:forEach>
  </af:table>
 

Using dynamic:table to display dynamic contents is shown below.

<dynamic:table value="#{bindings.DynamicVOIterator}" id="t3"/>

Case 2: Dynamic UI Table built using ViewObject with dynamic query(Only database table changes, attribute definitions/column types may remain same)

Use case requirement: UI needs to be populated from different database tables, but attribute definition remains same. In other words, only the table changes, number of columns and types remain same.

Solution :

Business Service Layer

Here you just need to swap only the query part of the ViewObject. The attribute definitions remains same for all cases. You can use ViewObject::setQuery(java.lang.String query) to set Sets the user-defined query.

Building UI and the binding this with ViewObject remains same as for the normal implementation.

Case 3: Updatable Dynamic UI Table built using Dynamic EntityObject and ViewObject

Use case requirement: Needs to build an updatable UI based on the database table and attributes which are decided at run time.

Solution : This is a bit tricky situation. As the table is updatable, there should be an EntityObject to post the changes back to database.

Business Service Layer

Solution is to build EntityObject and corresponding ViewObject dynamically based on the metadata supplied by the run time.(Thanks to Steve who shared a sample on similar topic)

Below given sample code builds EntityObjects and corresponding ViewObject on the fly.

EntityDefImpl newEntity = new EntityDefImpl(DYNAMIC_EO);
newEntity.setSource("EMPLOYEES");
AttributeDefImpl newAttrDef1 =
newEntity.addAttribute("EmployeeId", "EMPLOYEE_ID", Number.class,
true, false, true);
ViewDefImpl newView = new ViewDefImpl(DYNAMIC_VO);
newView.addEntityUsage("e", DYNAMIC_EO, false, false);
newView.addAllEntityAttributes("e");
newView.setFetchSize((short)30);
newView.setSelectClauseFlags(ViewDefImpl.CLAUSE_GENERATE_RT);
newView.setWhereClauseFlags(ViewDefImpl.CLAUSE_GENERATE_RT);
newView.setFromClauseFlags(ViewDefImpl.CLAUSE_GENERATE_RT);
newView.resolveDefObject();
newView.registerDefObject();

Binding Layer

'UI Wiring' part is same as discussed under Case 1.

UI Layer

Same as discussed under Case 1.

Conclusion

ADF offers a library of dynamic components which may help you to build dynamic UI without much effort. You may need to choose the right implementation strategy based on your use case requirement.

You can download the sample workspace from here.
[Runs with Oracle JDeveloper 11g R1 PS2 + HR Schema]

How to run this sample?

Run the main.jspx. Main page display menu(link) for each case that we discussed here. You can select Department/Employee from the drop down list and then opt for one of the three cases by clicking the corresponding links. This takes you to a result page where data is rendered in a tabular form. This UI is generated on the fly based on the item selected from the drop down.

Learn More ...
There are a lot more points like this. If  you are curious to learn the internals of the ADF Business Components and ADF Binding Layer,  the following book is for you - Oracle ADF Real World Developer’s Guide.
More details about this book can be found in this post- http://jobinesh.blogspot.in/2012/07/pre-order-your-copy-of-oracle-adf-real.html