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).