Sunday, July 18, 2010

Display Data as Tree format using Popup in ADF

Step1: Setting up Database Objects

  • // CREATING TABLES
  • CREATE TABLE JAVATOPIC (
  • TOPICNAME VARCHAR2(150 BYTE) NOT NULL,
  • TOPICINDEX NUMBER(2)
  • )

  • CREATE TABLE JAVA_TOPIC_DETAILS (
  • TOPICINDEX NUMBER(2),
  • SUB1 VARCHAR2(50),
  • )
  • Figure 1: Datbase Details

    Step 2: Creating EntityObjects, ViewObjects, ViewLinks

    Step 2.1 Create Entity Objects (JavaTopicEntityObject, TopicDetailsEntityObject)



    Create Entity Objects for JAVATOPIC database table.

    Create Entity Objects for JAVA_TOPIC_DETAILS database table.


    Step 2.2: Create View Objects (JavaTopicEntityObjectView, TopicDetailsEntityObjectView)

    Create View object for JavaTopicEntityObject


    Figure 4: Create View for JavaTopicEntityObject

    Create view object for TopicDetailsEntityObject

    Figure 5: Create TopicDetailsEntityObjectView view object

    Step 2.3 Create ViewLink

    We can create a view link between two created views shown in step 2.2. Corresponding query will be



    Select b.sub1 from JAVATOPIC a, java_topic_details b where a.topicindex = b.topicindex and a.topicindex = :topicindex







    Step 3: Wrap ViewObjects and ViewLinks in ApplicationModule

    Step 4: Create a Popup and attach it with CommandLink

    //Step 4.1 Creating Empty Popup
    1. <af:popup id ="trainpopup"> //Add contents here </af:popup> //Step 4.2 Attach a Command Link with a PopUp
    2. <af:commandLink text ="Training Contents" binding ="#{TrainingFeedbackBean.showContent}">
    3. <af:showPopupBehavior popupId ="trainpopup" align ="afterStart"/>
    4. </af:commandLink>
    Step 5: Create Tree Binding:

    Tree Model for Source Data

    Figure 6: Create ADF Binding Tree

    Tree Model for Target Data





    1. <tree IterBinding ="JavaTopicEntityObjectView2Iterator" id ="JavaTopicEntityObjectView2"> //Parent Node Definition
    2. <nodeDefinition DefName ="com.emerson.javatraining.model.view.JavaTopicEntityObjectView" Name ="JavaTopicEntityObjectView20">
    3. <AttrNames>
    4. <Item Value ="Topicname"/>
    5. </AttrNames>
    6. <Accessors>
    7. <Item Value ="TopicDetailsEntityObjectView"/>
    8. </Accessors>
    9. </nodeDefinition> //Child Node Definition
    10. <nodeDefinition DefName = "com.emerson.javatraining.model.view.TopicDetailsEntityObjectView" Name ="JavaTopicEntityObjectView21">
    11. <AttrNames>
    12. <Item Value ="Sub1"/>
    13. </AttrNames>
    14. </nodeDefinition>
    15. </tree>


    Step 6: Use Tree Binding in Popup
    1. <af:popup id ="trainpopup">
    2. <af:dialog okVisible ="false" cancelVisible ="false">
    3. <af:panelHeader text ="Training Contents" inlineStyle ="height:379px;width:400px;">
    4. <af:tree value ="#{bindings.JavaTopicEntityObjectView2.treeModel}"
    5. var ="node" selectionListener ="#{bindings.JavaTopicEntityObjectView2.treeModel.makeCurrent}"
    6. rowSelection ="single" id ="t1" visible ="true">
    7. <f:facet name ="nodeStamp">
    8. <af:outputText value ="#{node}" id ="ot1"/>
    9. <f:facet>
    10. </af:tree>
    11. </af:panelHeader>
    12. </af:dialog>
    13. </af:popup>


    Step 7: Output:

    Figure 7: View Output



    Please try to find similarity between data displayed as child node with Java_topic_details and data displayed as Root node with javatopic database objects (refer figure 1).