Let's make it more modular (part 1)

We have build the first part of our *potentially* large application.

Before continuing, I think it's better to setup a more modular infrastructure. At first, let's build a little menu, like in this demo

create table menu(
    menuid int,
    parentid int,
    weight int,
    title varchar(50),
    mid int,
     
    primary key (menuid));

With this table we are able to build a tree-organized menu. Weight permits to order the items, and mid is the module id, you know, from the modules table.

Talking about the modules table, we'll have to add the target url of each module, and add our sample module :

Alter table modules add url varchar(255);
Update modules set url = 'modules/GroupAccess.swf' where mid = 2;

Now, let's create some items in our menu :

insert into menu (menuid, parentid, weight, title, mid) values (1, 0, 1, 'Content management', 0);
insert into menu (menuid, parentid, weight, title, mid) values (2, 0, 2, 'Users', 0);

insert into menu (menuid, parentid, weight, title, mid) values (3, 1, 1, 'Posts', 0);
insert into menu (menuid, parentid, weight, title, mid) values (4, 1, 2, 'Comments', 0);

insert into menu (menuid, parentid, weight, title, mid) values (5, 2, 1, 'Access management', 0);
insert into menu (menuid, parentid, weight, title, mid) values (6, 5, 1, 'Per group', 2);
insert into menu (menuid, parentid, weight, title, mid) values (7, 5, 1, 'Per user', 0);

That's a lot of menu items, but it makes testing easier during the development of the menu...

On the Flex side, we juste have to write a component derived from mx:MenuBar, with a few lines of code that will load the menu items :

            import mx.events.MenuEvent;
            
            import org.flexqueries2.components.ModuleWindow;
            import org.flexqueries2.components.messagebox.Message;
            import org.flexqueries2.core.SqlQuery;
            import org.flexqueries2.utils.logging.Logger;

            private var _menuXml:XML;
            
            override protected function createChildren():void
            {
                //What to display in menu items:
                this.labelField = "@label";
                
                _menuXml = <menu id="0"/>;
            
                //Load menu content
                loadChildren(_menuXml);
                
                //Assign this to the MenuBar's dataProvider
                this.dataProvider = _menuXml.children();
            }
            
            /**
             * Loads the child nodes recursively
             */ 
            private function loadChildren(parentXML:XML):void
            {
                var parentid:Number = Number(parentXML.@id.toString());
                
                //Loads the items from the table, synchronously (much easier to program!)
                var q:SqlQuery = new SqlQuery();
                q.sql = "Select me.menuid, me.parentid, me.weight, me.title, me.mid,"+
                        " mo.module_key, mo.module_name, mo.url"+
                        " from menu me left outer join modules mo on me.mid = mo.mid"+

                        " where me.parentid = ? order by me.weight";
                
                q.sqlParams = [parentid];
                q.selectSync();
                
                //builds the menu items
                while(q.read())
                {
                    var child:XML = <item/>;
                    child.@id = q.fieldByName("MENUID").asString;
                    child.@label = q.fieldByName("TITLE").asString;
                    child.@url = q.fieldByName("URL").asString;
                    parentXML.appendChild(child);
                    
                    //Recursive call
                    loadChildren(child);
                }
            }

            /**
             * When an item is clicked 
             */ 
            protected function menubar1_itemClickHandler(event:MenuEvent):void
            {
                //Retrieve the module URL :
                var url:String = event.item.@url.toString();
                if(url == "")
                {
                    Message.showStatic("No module associated to this menu item");
                    return;
                }
                
                //Open the module in a popup, non modal window
                ModuleWindow.open(event.item.@label.toString(), url, null, null, false);
            }

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <pre>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.