Thursday, October 3, 2019

Dynamic Menus in ADF

Hi everyone this tutorial is about, how we can create menus dynamically in ADF


For this post i am using jdeveloper 11.1.2.3.0

1 ) First you need to create a table in database and insert data


2) Create two Query Base VO in ADF Application
after that create view link between Main_menu VO and Sub_menu VO
For creating view link select MId from Main_menu and select ParentId from Sub_menu





3 ) Then create a Home.jsf page and then drag and drop Menu bar on it from components then af:iterator drop on Menu bar , then  drop Menu on  the iterator then again drop af:iterator on Menu and then MenuItem on the second af:iterator , the structure of the jsf page shows in the next pic , try to create the same jsf page like the following structure



4 ) Now go to the Bindings of jsf page
click on green + icon of Bindings part ..
From the InsertItem window select tree and hit ok

After clicking the ok a new window will appear name as "Create Tree Binding"
click on Add button


Then from the "Add Data Source " window select Main_menu1 and click ok

Then click on the green + icon and click on AddRule


Then Select MId and MName as Display as Display Attributes
Again Click on green + icon and then click on AddRule and select select sub_menu, and select all the attributes as Display Attributes


After adding tree item your jsf page Bindings will be looks like this

Now go to Structure window select first af:iterator and set its value
to set the iterator value
clikc on Expression Builder of Value attribute , then open Bindings , then open Main_menu1 and select collectionModel

then set the value 'M' of var attribute  (properties of first iterator)


Then select the af:menu from Structure window and set Text property with the following value

#{M.MName}


until now if you Run your Home.jsf page , the Main Menu will print on screen

To set the value of second iterator , first we need to get the accessor name of Sub_menu
to get the accessor name open the view link 'Main_sub_VL' that we have created between Main_menu and Sub_menu , click on Relationship tab , click on Edit accessor and copy the name of the accessor

and write the following expression in the value property of second af:iterator
also write 'S' for var property


Select the af:commandMenuItem from the Structure window and write the following expression int 'Text' property  #{S.MName}

Now Run your Home.jsf page and see the Results , it will be

Second Part

Now to get the path of jsff or jsf pages by clicking on Menu item

Select the af:commandMenuItem from structure window and  drop a attribute from component palette on it.

write the name of attribute 'P'
and write the following expression in value  #{S.MPath}

Then select af:commandMenuItem from structure window and create a ActionListener binding with a request scope been (in this example the been name is MenuBeen)

Edit your data base table and save the path in M_Path attribute , for this example i just saving a string


Open your MenuBeen and write the following code

Run your Home.jsf page click on SALE RTN menu and see the result on console


No comments:

Post a Comment