2 Replies Latest reply on Jul 22, 2011 3:42 AM by flexx0r

    How to put a fx:component(native window) in a separate file

    flexx0r

      Hi flex fans,

       

      I want to know how can I put the fx:component-tag in a separate file. Here is my code:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx">
           <fx:Script>
                <![CDATA[
                     import mx.controls.Alert;
                     import mx.events.FlexEvent;
                     
                     private var newWindow:MyNativeWindow;
                     public var house:String = "wooden house";
                     private static var _app:NativeWindow2;
           
                     private function openNewWindow():void {
                          if (newWindow != null) newWindow.close();
                          newWindow = new MyNativeWindow();
                          newWindow.width = 200;
                          newWindow.height = 200;                    
      
                          try 
                          {                         
                               newWindow.open();
                          } 
                          catch (err:Error) 
                          {               
                               trace(err.message);
                          }
                     }
      
                     
                ]]>
           </fx:Script>    
           
           <fx:Declarations>
                <fx:Component className="MyNativeWindow">
                     <mx:Window horizontalAlign="center" verticalAlign="middle" backgroundColor="blue">
                          <fx:Script>
                               <![CDATA[
                                    import mx.core.FlexGlobals;
                                    
                                    
                                    protected function button1_clickHandler(event:MouseEvent):void
                                    {
                                         import mx.core.FlexGlobals;
                                         
                                         trace(mx.core.FlexGlobals.topLevelApplication.house);
                                         
                                    }                              
                               ]]>
                          </fx:Script>
                          <mx:Button label="Yeah" click="button1_clickHandler(event)" />
                          <mx:Button label="close" click="this.close()"/>                    
                     </mx:Window>
                </fx:Component>    
           </fx:Declarations>     
           
           <s:VGroup horizontalCenter="0" top="10">
                <s:Button label="Open New Window" color="black" click="openNewWindow()"/>
           </s:VGroup>
      </s:WindowedApplication>
      

       

      king regards

      flexx0r

        • 1. Re: How to put a fx:component(native window) in a separate file
          _spoboyle Level 4

          create new MXML Component name it MyNativeWindow

           

          and paste in your code

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Window xmlns:mx="http://www.adobe.com/2006/mxml"
                       layout="absolute"
                       horizontalAlign="center" verticalAlign="middle"
                       backgroundColor="blue">
               
               <fx:Script>
                    <![CDATA[
                    import mx.core.FlexGlobals;
                    
                    
                    protected function button1_clickHandler(event:MouseEvent):void
                    {
                    import mx.core.FlexGlobals;
                    
                    trace(mx.core.FlexGlobals.topLevelApplication.house);
                    
                    }                              
                    ]]>
               </fx:Script>
               <mx:Button label="Yeah" click="button1_clickHandler(event)" />
               <mx:Button label="close" click="this.close()"/>
               
          </mx:Window>
          
          

           

          your application code then becomes

          <?xml version="1.0" encoding="utf-8"?>
          <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                      xmlns:s="library://ns.adobe.com/flex/spark" 
                                      xmlns:mx="library://ns.adobe.com/flex/mx">
               <fx:Script>
                    <![CDATA[
                         import mx.controls.Alert;
                         import mx.events.FlexEvent;
                         
                         private var newWindow:MyNativeWindow;
                         public var house:String = wooden house;
                         private static var _app:NativeWindow2;
               
                         private function openNewWindow():void {
                              if (newWindow != null) newWindow.close();
                              newWindow = new MyNativeWindow();
                              newWindow.width = 200;
                              newWindow.height = 200;                    
          
                              try 
                              {                         
                                   newWindow.open();
                              } 
                              catch (err:Error) 
                              {               
                                   trace(err.message);
                              }
                         }
          
                         
                    ]]>
               </fx:Script>    
               
               <fx:Declarations>
               </fx:Declarations>     
               
               <s:VGroup horizontalCenter="0" top="10">
                    <s:Button label="Open New Window" color="black" click="openNewWindow()"/>
               </s:VGroup>
          </s:WindowedApplication>
          
          • 2. Re: How to put a fx:component(native window) in a separate file
            flexx0r Level 1

            Hey! That worked great, I only had to change fx:Script to mx:Script...It also works with Sparks Components:

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Window xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx">
                <fx:Script>
                    <![CDATA[
                        import mx.core.FlexGlobals;
                        
                        
                        protected function button1_clickHandler(event:MouseEvent):void
                        {
                            import mx.core.FlexGlobals;
                            
                            trace(mx.core.FlexGlobals.topLevelApplication.house);
                        }                        
                    ]]>
                </fx:Script>    
                <s:Button label="Yeah" click="button1_clickHandler(event)" />
                <s:Button label="close" click="this.close()"/>
            </s:Window>

             

            Thanks!