Building dynamic UI using af:dynamicComponent
The ADF Faces 12C release comes with a dynamic component ( af:dynamicComponent ) that determines what components to display, and their values, at run time. So your model (created at run time) can have hints about the type of component as well as other UI related things, which would be picked up by af:dynamicComponent and render the UI at run time as appropriate. For example, if your UI model (AttributesModel) says that component is of LOV type, then af:dynamicComponent will render appropriate LOV for you at run time. Note that in earlier days your code were deciding the type of the component in such cases. This new component will considerably simplify the effort you need to put for building dynamic UI. You can learn more about this component in section 21 Determining Components at Runtime in Developing Web User Interfaces with Oracle ADF Faces. Its well documented, so nothing more to be detailed here :)
In this post I'm sharing a example that make use of af:dynamicComponent.
Download
You can download the sample workspace from here. [ Runs with Oracle JDeveloper 12C 12.1.2.0.0 + Oracle XE ].
This example uses af:dynamicComponent in two different scenarios - one uses ADF Faces model APIs for building model at run time for af:dynamicComponent and the other uses dynamic business components as model for af:dynamicComponent. These two variants are implemented using two separate pages in this example as described below:
1. dynamicFacesModelForm.jsf - This page uses ADF Faces model classes for building model for af:dynamicComponent. This is simplified version of af:dynamicComponent demo that you may find in the official ADF Faces demo site: http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/dynamicFaces/dynFormFlatten.jspx Take a look at the classes in demo.view package in the ViewController project to get a feel of the implementation and APIs. The demo.view.DynamicComponentBean is the managed bean used in the page for building dynamic UI, so you can start from this class.
2. dynamicBCModelForm.jsf - This page uses dynamic entity objects and view objects for building model for af:dynamicComponent. The approach used here is not quite new and same has been explained in one of my older posts - http://www.jobinesh.com/2011/08/long-living-dynamic-business-components.html. Please see this post if you are not familiar with dynamic business components. To get a feel of the APIs used, see methods buildDynamicBCforDept(), addLocAttributeToDept(), addLovToLocAttribute() defined in demo.model.DynamicHRServicesImpl class in the Model project. Note that, dynamicBCModelForm.jsf embeds dynamicBCModelTF task flow inside the region, which takes care of displaying dynamic UI. The method DynamicHRServicesImpl::buildDynamicBCforDept() is used as default activity in the task flow to build entity and view objects at run time which will be used as model for the dynamic UI. This example allow you to add Location attribute at run time to the UI. This action in fact adds the Location to the underlying EO and VO which would be automatically picked up by the UI and render as appropriate.
In this post I'm sharing a example that make use of af:dynamicComponent.
Download
You can download the sample workspace from here. [ Runs with Oracle JDeveloper 12C 12.1.2.0.0 + Oracle XE ].
This example uses af:dynamicComponent in two different scenarios - one uses ADF Faces model APIs for building model at run time for af:dynamicComponent and the other uses dynamic business components as model for af:dynamicComponent. These two variants are implemented using two separate pages in this example as described below:
1. dynamicFacesModelForm.jsf - This page uses ADF Faces model classes for building model for af:dynamicComponent. This is simplified version of af:dynamicComponent demo that you may find in the official ADF Faces demo site: http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/dynamicFaces/dynFormFlatten.jspx Take a look at the classes in demo.view package in the ViewController project to get a feel of the implementation and APIs. The demo.view.DynamicComponentBean is the managed bean used in the page for building dynamic UI, so you can start from this class.
2. dynamicBCModelForm.jsf - This page uses dynamic entity objects and view objects for building model for af:dynamicComponent. The approach used here is not quite new and same has been explained in one of my older posts - http://www.jobinesh.com/2011/08/long-living-dynamic-business-components.html. Please see this post if you are not familiar with dynamic business components. To get a feel of the APIs used, see methods buildDynamicBCforDept(), addLocAttributeToDept(), addLovToLocAttribute() defined in demo.model.DynamicHRServicesImpl class in the Model project. Note that, dynamicBCModelForm.jsf embeds dynamicBCModelTF task flow inside the region, which takes care of displaying dynamic UI. The method DynamicHRServicesImpl::buildDynamicBCforDept() is used as default activity in the task flow to build entity and view objects at run time which will be used as model for the dynamic UI. This example allow you to add Location attribute at run time to the UI. This action in fact adds the Location to the underlying EO and VO which would be automatically picked up by the UI and render as appropriate.
This comment has been removed by the author.
ReplyDeleteHi Jobinesh,
ReplyDeleteI have a similar use case to render components dynamically , but in my case each row in the view object has to be rendered as a separate UI component , and the type of component will be based on an attribute in the view object named say "datatype" .
So each page of mine will be rendered based on a rowset from the view object ? is this possible using dynamicComponent or is there any other component using which i can achieve this?
Nice write up.
ReplyDeleteIs there anything similar to af:dynamicComponent which is supported in the versions earlier to Jdeveloper 12c ? If I am storing the components to be created on the UI in a Hashmap, can you suggest a better way to create the components on the screen in runtime reading from the Hashmap?
Hi Jobinesh,
ReplyDeleteI would like to say thanks for useful posts.
I Have requirement to generate the dynamic UI based on webservice data and it should bind to manged bean .. can u plz suggest me hw to achieve this?
Feeling so good to read your information's in the blog. Good job!
ReplyDeleteDOT NET Training in Chennai
asp .net training in chennai
DOT NET Training Institute in Chennai
Dot Net Training in Tambaram
Html5 Training in Chennai
html course in chennai
QTP Training in Chennai
LoadRunner Training in Chennai