    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
        xmlns:bluefire="*"
        xmlns:view="com.bluefire.flexDemo.view.*"
        xmlns:control="com.bluefire.flexDemo.control.*"
        borderColor="#ffffff"
        creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">
        <mx:Style source="assets/style1.css" />
        <mx:Script>
            <![CDATA[

                import mx.core.UIComponent;
                import flash.events.MouseEvent;
                import mx.events.ListEvent;
                import mx.events.TreeEvent;
                import com.bluefire.flexDemo.events.MenuBtnClickEvent;
                import com.bluefire.flexDemo.events.TreeNavClickEvent;
                import com.bluefire.flexDemo.events.SlideshowNavClickEvent;
                import com.bluefire.flexDemo.model.DemoModelLocator;
                import com.adobe.cairngorm.control.CairngormEventDispatcher;

                public var treeXML:XML = new XML();
                public var loader:URLLoader;
                [Bindable]
                public var model:DemoModelLocator;
                private function onCreationComplete():void
                {
                    //get model locator instance
                    model = DemoModelLocator.getInstance();
                }

                private function xmlLoaded(evtObj:Event):void
                {
                    treeXML = XML(loader.data);
                    navTree.dataProvider = treeXML;
                    loader.removeEventListener("complete",xmlLoaded);
                }

                private function onMenuBtnClick(e:MouseEvent):void
                {
                    //dispatch event for user gesture
                    CairngormEventDispatcher.getInstance().dispatchEvent(new MenuBtnClickEvent(e.target.toString()));
                }

                //function bound to value, 'view', on the model
                private function onViewChange(view:String):UIComponent
                {

                       //load the xml tree data for this view
                       var XML_URL:String = "assets/" + view + ".xml";
                       var myXMLURL:URLRequest = new URLRequest(XML_URL);
                    loader = new URLLoader(myXMLURL);
                    try
                    {
                        loader.addEventListener("complete", xmlLoaded);
                    }
                    catch (err:Error)
                    {
                        trace(err.message + " Need an XML file named " + model.demo.view + ".xml");
                    }

                    //play menuBar animation
                    menuBar.gotoAndPlay(1);

                    //set the tree header text
                    treeHeader.text = view;

                       //return view container to display
                       switch (view) {
                           case "presentation":
                               iFrame.visible = false;
                               return presentationView;
                               break;
                           case "code":
                               iFrame.source = "srcview/index.html";
                               iFrame.visible = true;
                               return webView;
                               break;
                           case "blog":
                               iFrame.source = "http://blog.bluefire.tv";
                               iFrame.visible = true;
                               return webView;
                               break;
                           default:
                               throw new Error("Invalid View State");
                       }
                }

                private function onSlideshowNavClick(nav:String):void
                {
                    CairngormEventDispatcher.getInstance().dispatchEvent(new SlideshowNavClickEvent(nav));

                }

                private function onTreeChanged(e:Event):void
                {

                    CairngormEventDispatcher.getInstance().dispatchEvent(new TreeNavClickEvent(Tree(e.target).selectedItem as XML));
                }

                private function onChangeStyle()
                {

                }

            ]]>
        </mx:Script>
        <control:DemoFrontController id="controller"/>
        <view:MainViewHelper id="mainViewHelper"/>
        <mx:Box id="mainBox" styleName="mainBox"  height="100%" width="100%">
            <mx:VBox cornerRadius="4" height="100%" width="100%" verticalGap="0" >

                <mx:HBox id="headerBar" styleName="headerBar" height="30" width="100%" paddingLeft="0" >
                    <bluefire:Logo id="logo" styleName="logo" height="25" width="210" paddingLeft="0"/>
                </mx:HBox>

                <mx:HBox id="menuBarBox" styleName="menuBarBox" height="53" width="100%" paddingLeft="5" >
                    <bluefire:Menubar id="menuBar" click="onMenuBtnClick(event)" cornerRadius="4"/>
                </mx:HBox>

                <view:BluDividedBox cornerRadius="4" height="100%" width="100%" borderStyle="none">
                    <mx:VBox id="leftPanel" styleName="leftPanel" height="100%" width="200" horizontalScrollPolicy="off">
                        <mx:HBox height="25" width="100%" paddingLeft="10" verticalAlign="middle">
                            <mx:Label id="treeHeader" styleName="treeHeader" text="presentation" />
                        </mx:HBox>
                        <mx:Tree id="navTree"
                            styleName="navTree"
                            width="100%"
                            height="100%"
                            itemRenderer="com.bluefire.flexDemo.view.BluTreeItemRenderer"
                            labelField="@label"
                            showRoot="false"
                            change="onTreeChanged(event)" />
                    </mx:VBox>

                    <mx:VBox styleName="rightPanel" verticalAlign="middle" horizontalAlign="center" height="100%" width="100%">
                        <mx:ViewStack width="100%" height="100%" creationPolicy="all" selectedChild="{Container(onViewChange(model.demo.view))}">

                            <mx:VBox id="presentationView">
                                <bluefire:SlidePresentation id="slidePresentation" explicitMinHeight="450" explicitMinWidth="800" explicitMaxHeight="450" explicitMaxWidth="800" />
                                <mx:Spacer height="10"/>
                                <mx:HBox horizontalAlign="left" horizontalGap="30" height="29" width="100%" paddingLeft="700">
                                    <bluefire:LNavButton height="29" click="onSlideshowNavClick('back')"/>
                                    <bluefire:RNavButton height="29" click="onSlideshowNavClick('forward')" />
                                </mx:HBox>
                            </mx:VBox>

                            <mx:VBox id="webView">
                                <mx:Panel width="100%" height="100%" paddingTop="1" paddingBottom="1" paddingLeft="1" paddingRight="1" >
                                    <view:IFrame id="iFrame" source="srcview/index.html" width="100%" height="100%"  />
                                </mx:Panel>
                            </mx:VBox>

                        </mx:ViewStack>

                    </mx:VBox>
                </view:BluDividedBox>
            </mx:VBox>
        </mx:Box>
        <mx:Resize id="showPanelEffect" target="{leftPanel}" widthFrom="0" duration="333" />
    </mx:Application>