0 Replies Latest reply on Dec 19, 2012 7:29 AM by akost01

    Strange behaviour when embedding HTML page in Air

    akost01

      Hi,

       

      I'm trying to embedd a HTML page to a Air application.

       

      The HTML page has a simple Flex application (TestFlex4Project.mxml) with a button that changes one HTML element on the web page (TestFlex4Project.html) using ExternalInterface. If I run the Flex application using the HTML page it works just fine and when I click the button the HTML ellement is changed and the mouseover- and onclick events works. If I embedd the HTML page in an Air application the mouseover- and onclick events does not work any more. Why?

       

      If I use Aternative 1 in the HTML code (instead of using Aternative 2 in the HTML code where I'm editing the innerHTML property) the mouseover- and onclick events works when the HTML page is embeded in Air. Why?

       

      Even more strange is that if I remove the line [<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />] from the HTML page the Flex application dose not show at all when embedded in Air. Why?

       

      You can try the online sample here and the files here.

       

      The application looks like this:

      TestFlex_1.JPG

      And if you click the button and click the upper most text you will recieve a message like this:

      TestFlex_2.JPG

       

      But not when I use innerHTML and embedd the HTML page in Air. Can anyone please help me with this issue. Is it a bug or what am I doing wrong? I need to change some HTML elements using innerHTML.

       

      Thanks!!

       

      The code for TestFlex4Project.mxml is like this

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
      width="100%"
      height="100%">

      <fx:Script>
        <![CDATA[
         function buttonClickHandler(event:Event):void{
         ExternalInterface.call(" function(){SetHTML();}")
                  }
        ]]>
      </fx:Script>

      <s:HGroup verticalAlign="middle">
        <s:Button label="Edit HTML Element" click="buttonClickHandler(event)"/> 
      </s:HGroup>
      </s:Application>

       

      The code for TestFlex4Project.html is like this

       

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8"/>
      <title>Test Flex 4 Project</title>
      <meta name="description" content="" />

      <script src="js/swfobject.js"></script>
      <script>
        var flashvars = {
        };
        var params = {
         menu: "false",
         scale: "noScale",
         allowFullscreen: "true",
         allowScriptAccess: "always",
         bgcolor: "",
         wmode: "direct" // can cause issues with FP settings & webcam
        };
        var attributes = {
         id:"TestFlex4Project"
        };
        swfobject.embedSWF(
         "TestFlex4Project.swf",
         "altContent", "100%", "100%", "10.0.0",
         "expressInstall.swf",
         flashvars, params, attributes);

       

         function Message(){
         alert("Message!")
        }

       

      function SetHTML(){
        
         //Start Alternative 1
         /*
         NewHTML.innerHTML = "Dynamically changed text"
         NewHTML.style.cursor = "pointer"
         NewHTML.style.color = "#ff0000"
         NewHTML.onclick = function(){
          Message();
         }
         NewHTML.onmouseover = function(){
          this.style.fontWeight = 700;
         }
         */
         //End Alternative 1
        
         //Start Alternative 2
         var HTMLStr='<p style="cursor:pointer; fontWeight:300; color:#ff0000" onClick = "Message()" onMouseOver = "this.style.fontWeight=700">Dynamically changed text</p>'
         NewHTML.outerHTML=HTMLStr
         //End Alternative 2
        }
      </script>
      <style>
        html, body { height:100%; overflow:hidden; }
        body { margin:0; }
      </style>
      </head>
      <body id="Body">
      <p id="NewHTML">This text will change when you click the button!</p>
      <p style="cursor:pointer; fontWeight:'300'; color:#ff0000" onClick = "Message()" onmouseover = "this.style.fontWeight='700'">Default text</p>
      <div id="altContent">
        <p><a href="http://www.adobe.com/go/getflashplayer">
         <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
         </a>
        </p>
      </div>
      </body>
      </html>

       

      The code for the Airapplication is like this

       

      <?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"

      width="800"

      height="566">

      <mx:HTML id="HTMLObject" location="TestFlex4Project.html" width="100%" height="100%"/>

      </s:WindowedApplication>