This is a continuation of Using a MenuBar in Flex 2.0 – Step 1 The difference between the posts, are that the first one uses inline xml in the mx:Script tag… this one will actually talk to a CFC and get the xml from a cfc generated from a query, this will IMMENSELY in created dynamic menu’s for different users with different security rights.

The steps i’m going to cover might look like the last post BUT THEY ARE DIFFERENT!:

View Example

Download Example

First things first,

1. Make your Script tag

2. import Classes

3. Create vars

4. Create 3 function —-One will be called when the menu item is clicked —-One will be called on the load of the app. —-One will be used to handle the remoting event

5. Create your RemoteObject

6. Create Your CFC that will return the xml object

7. Create Your and Bind it


1.
==================

<mx:Script>
<![CDATA[ ]]>
</mx:Script>

2. FROM WITHIN YOUR SCRIPT TAG, IMPORT CLASSES
==================

import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;
/*THE RPC EVENTS WAS NOT IN THE FIRST POST*/
import mx.rpc.events.*;

3. CREATE VARS
==================

/*this var used to be an XMLListCollection*/
[Bindable]
public var menuBarCollection:XML; /*
DELETE THE private var menuBarXML, this will be handled by the event.result that comes back from the cfc
*/

4. Create 3 function
==================

private function menuHandler(event:MenuEvent):void {
Alert.show(“Label: “ + event.item.@label + “\n” + “Data: “ + event.item.@data + “\n”, “Clicked menu item”);
} private function setUp():void{
//this sends the request to the cfc remoteObj.getScripts.send();
}
private function scriptsReceived(event:ResultEvent):void{
//this will be called from the remoteObj menuBarCollection = new XML(event.result);
}

5. Create Your Remote Object
==================

/*
make sure when doing this on your own, you know where your webroot is, it is needed for finding the cfc
*/

<mx:RemoteObject
id=“remoteObj”
destination=“ColdFusion”
source=“Examples.Using-the-MenuBar.CFMenuRemoting.CFMenu”
fault=“Alert.show(event.fault.faultString,’Error’);”>
<mx:method
name=“getScripts”
result=“scriptsReceived(event)”
/>

</mx:RemoteObject>

6. Create Your CFC IN THE current PROJECT FOLDER
==================
CFMenu.cfc – NOTE PLEASE REFER TO THE DOWNLOAD FOR THE FULL COMPONENT

<!—replace the following with a real query—>
<cfset menu = QueryNew(“id, name”,“integer,varchar”)> <!— make some rows in the query —>
<cfset newRow = QueryAddRow(menu, 2)>

<!— set the cells in the query —>
<cfset temp = QuerySetCell(menu, “id”, “1”, 1)>
<cfset temp = QuerySetCell(menu, “name”, “Menu 1″, 1)>
<cfset temp = QuerySetCell(menu, “id”, “2”, 2)>
<cfset temp = QuerySetCell(menu, “name”, “Menu 2″, 2)>
<!—CREATE XML DOC OBJECT —>
<cfxml variable=“mydoc”>
<menu>
<menuitem label=“File”>
<menuitem label=“Login” data=“mnuLogin”/>
<menuitem label=“Exit” data=“mnuExit”/>
</menuitem>
<menuitem label=“MoreData”>
<cfoutput query=“menu”>
<menuitem label=“#name#” data=“#id#”/>
</cfoutput>
</menuitem>
</menu>
</cfxml>

<cfreturn mydoc>

7. Create Your MenuBar and Bind it
==================

<mx:MenuBar
labelField=“@label”
itemClick=“menuHandler(event);”
dataProvider=“{menuBarCollection}”
/>

Hopefully this helps some people, i know i spent alot of time on it… but that may be because i think i’m a slow learner because i look into things too much, and tend to over analyze