1 Reply Latest reply: Aug 11, 2010 10:24 AM by joshgarnett RSS

    CSS in Flash Builder

    qslnetworks

      ok I am using the "mx: HTML location" tag to load my html5 application, but I have a few issues:

       

      1. CSS styles are not being used/loaded or at least it appears that way.

      2. window.resize and window.move will not execute.

       


      Can anyone kick me in the right on this? Any help would be great.

        • 1. Re: CSS in Flash Builder
          joshgarnett

          Hi qslnetworks,

          CSS styles should be working.  As for window.resize and window.move, you will need to fall back on using the AIR framework to resize your active window.  Below is an example html file that demonstrates how to do this.

           

          <html>
               <head>
               
               <title>HTML Air App</title>
               
               <script src="app:/assets/html/AIRAliases.js"></script>
               
               <link href="app:/assets/html/style.css" rel="stylesheet" type="text/css" />
               
               <script type="text/javascript" charset="utf-8">
                    function onBodyLoad() {
                         //execute trace on air runtime framework
                         air.trace('loaded');
                    }
              
                    function onWindowResize() {
                         //execute trace on air runtime framework
                         air.trace('resize');
                    }
              
                    function createAlert() {
                         //retrieve applicationID and display with a javascript Alert
                         alert('HTML Air App ID: '+air.NativeApplication.nativeApplication.applicationID);
                    }
              
                    function resizeWindow() {
                         air.NativeApplication.nativeApplication.activeWindow.width = 800;
                         air.NativeApplication.nativeApplication.activeWindow.height = 600;
                    }
              
                    function moveWindow() {
                         air.NativeApplication.nativeApplication.activeWindow.x = 100;
                         air.NativeApplication.nativeApplication.activeWindow.y = 100;
                    }
              
                    window.onload = onBodyLoad;
               </script>
          </head>
          
          <body onResize="onWindowResize();">
          
               <h1>HTML Air App</h1>
          
               <p>
                    <img src="app:/assets/images/AdobeLogo.gif" style="float:left;padding-right:10px">
                    This HTML Air application is running within a flex wrapper.<br /><br />
               </p>
          
               <p>
                    <a href="#" onClick="javascript:createAlert();return false;">Display HTML Air App ID</a>
               </p>
          
               <p>
                    <a href="#" onClick="javascript:resizeWindow();return false;">Resize Window</a>
               </p>
          
               <p>
                    <a href="#" onClick="javascript:moveWindow();return false;">Move Window</a>
               </p>
          
          </body>
          
          </html>