1. Add a af:commandButton or af:toolbarButton where you need to dropdown button. Now, in the 'popup' facet, drag and drop af:menu and add af:menu item(i.e., af:commandMenuItem)s to the af:menu. Sample code below:
<af:commandToolbarButton text="Options" id="commandToolbarButton1" disabled="#{bindings.EmpDeptVO.currentRow==null}" partialTriggers="t1" actionDelivery="none"> <f:facet name="popup"> <af:menu id="m1"> <af:commandMenuItem text="View" id="cmi1" action="view"/> <af:commandMenuItem text="Edit" id="cmi2" action="edit"/> <af:commandMenuItem text="Delete" id="cmi3" actionListener="#{bindings.Delete.execute}" partialTriggers="t1"/> </af:menu> </f:facet> </af:commandToolbarButton>
The above code in Structure window will look like this:
2. The above code will render the menu button as shown below:
3. There are two types of menu buttons:
i. Which will display dropdown list or menu items on clicking the 'dropdown' icon. This button will have a separator (vertical line '|') between the button text and the dropdown icon. It'll look like below. This is actually the default behavior. You can specify action and actionListener for this button and on clicking the button it'll cause navigation or fire actionListener based on the specified action and actionListener respectively.
ii. Which will display drowdown list on clicking the button itself. This button won't have a separator (vertical line '|') between the button text and the dropdown icon. It'll look like below. To get this behavior, you need to set actionDelivery="none" for the button. If you set this property, you can't specify either action or actionListener for the button as it won't fire either action or actionListener.
That's it. You can specify action and actionListener for the menu items in the dropdown menu and do whatever you want.
Just a quick remark for skinning this button.
ReplyDeleteWhen not hovering the text itself but the button around it, the text doesn't go into 'hover' state. To fix this just use:
af|commandToolbarButton:hover af|commandToolbarButton::text,
{
//Your style info
}
Where are we supposed to change it? In css file?
DeleteGreat tutorial on Dropdown menus, thanks! We just finished an updated step by step tutorial on creating dynamic navigation panes using a menu model - you can check it out here - https://www.fireboxtraining.com/blog/2014/11/17/create-navigation-panes-using-menu-model-oracle-adf
ReplyDeleteFirst time actionlistener of menu item isn't calling
ReplyDeletetrue religion outlet store
ReplyDeletelouboutin outlet
coach factory outlet online
cheap oakley sunglasses
adidas outlet online
michael kors outlet store
yeezy shoes
cheap oakley sunglasses
nike outlet store
moncler jackets
170511yueqin
This example is just good for nothing. Why we need this approach when we already have menu bar, menu item and we can easily have action for menu items.
ReplyDelete
ReplyDeleteI have read your blog and I gathered some needful information from your blog. Keep update your blog. Awaiting for your next update.
Ms excel training in chennai
lebron james shoes
ReplyDeleteoff white
kyrie irving shoes
yeezy boost 350 v2
off white
yeezy 350 v2
goyard
yeezys
paul george shoes
calvin klein underwear
golden goose sneakers
ReplyDeletejordan shoes
moncler outlet
offwhite
supreme
jordan 6
yeezy boost 350
kd shoes
off white
supreme clothing