2 Replies Latest reply on Dec 27, 2010 4:41 AM by Ponvel007

    Html component problem

    Avier5

      this is my simple AIR demo application 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">

       

      <mx:HTML width="100%" height="100%" location="http://www.yahoo.com" />

      </s:WindowedApplication>

       

      I am using the latest SDK 4.5 and AIR is v2.0.2.

       

      The problem with it is that the link inside the html page that was loaded with the HTML component don't work with the mouse clicks on them.

       

      Any idea why this happen?

       

      Thanks in advance,

      Avier

        • 1. Re: Html component problem
          Avier5 Level 1

          Anyone? please need help here ASAP.....

           

          Thanks ,

          Avier

          • 2. Re: Html component problem
            Ponvel007

             

            This is sample code.

             

            /***************************************************************/

            <?xml version="1.0" encoding="utf-8"?>

            <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="*"

            height="600" width="1000" viewSourceURL="srcview/index.html"

            xmlns:groe_org="org.groe.html.*" >

             

            <!--

            This is a demonstration of the iframe demo found at http://www.deitte.com/archives/2006/08/finally_updated.htm

            as an AIR application.

             

            What needed to change from the iframe demo:

            - The IFrame component has been removed and is simply replaced with mx:HTML.  The 'source' attribute changed to 'location'.

            - No HTML wrapper file is needed, since this is an AIR application.  But an AIR badge, not included in these source files,

            is used to launch the AIR app from a web page.  You can find the source to the badge that was used here:

            http://labs.adobe.com/wiki/index.php/AIR_Badge

            - Application changed to WindowedApplication, as is needed for all AIR applications.     

            - HTMLDemo-app.xml was added, the AIR configuration file.

             

            Additional enchancements:     

            - Cleaned up the MXML, moving code into functions.

            - Used the HTML events to show a busy cursor when a page is loading.

            - Added back some sites that didn't work in the Flex version.    

            - Added Wacky HTML mode for the fun of it, to show how easy it is to change the display of HTML in an AIR app.   

            -->

             

            <mx:HBox width="100%" height="100%">

            <mx:Panel title="Tree" width="200" height="100%" roundedBottomCorners="true">

            <mx:Tree id="tree" width="100%" height="100%" dataProvider="{treeData}"

            labelField="@label" showRoot="false"

            change="treeChange(event)"  />

            </mx:Panel>

            <mx:Panel id="stagePanel" width="100%" height="100%" title="Content" paddingTop="1" paddingBottom="1" paddingLeft="1" paddingRight="1" >

            <mx:HTML id="html" location="http://www.adobe.com/devnet/flex/"

            locationChange="htmlLocationChange()" htmlRender="htmlLocationComplete()"

            width="100%" height="100%" />

            <!-- <groe_org:HtmlContainer id="htmlRenderer" renderComplete="renderComplete();"/> -->

            <mx:ControlBar>

            <mx:CheckBox id="cbVisible" label="HTML Visible" selected="true" click="visibleClick(event)"/>

            <mx:CheckBox id="cbWacky" label="Wacky HTML" selected="false" click="wackyClick(event)"/>

            </mx:ControlBar>

            </mx:Panel>

             

            </mx:HBox>

             

            <mx:XMLList id="treeData">

            <node label="Flex Resources">

            <node label="Flex Developer Center" path="http://www.adobe.com/devnet/flex/" />

            <node label="Flex Team Blog" path="http://weblogs.macromedia.com/flexteam/" />

            <node label="Flex Blogs on MXNA" path="http://weblogs.macromedia.com/mxna/FeedList.cfm#Flex" />

            <node label="Deitte.com" path="http://deitte.com" />

            <!-- These sites pop themselves out of a frame, so they weren't included in the original demo.  They work just fine

            for the AIR app though -->

            <node label="flex.org" path="http://www.flex.org" />

            <node label="Adobe Labs" path="http://labs.adobe.com/wiki/index.php/Main_Page" />

            </node>

            <node label="Search">

            <node label="Google" path="http://www.google.com" />

            <node label="Yahoo" path="http://www.yahoo.com" />

             

            </node>

            </mx:XMLList>

             

            <mx:Script>

            <![CDATA[

            import flash.net.navigateToURL;

             

            import mx.controls.Alert;

            import mx.managers.CursorManager;

             

            /**

            * Timer for Wacky HTML

            */

            private var timer:Timer;       

             

            /**

            * Changes the HTML location when the tree's selection changes

            **/

            public function treeChange(event:Event):void

            {

            html.location = (Tree(event.target).selectedItem.attribute('path').toString());

            }

             

            /**

            * Sets a busy cursor when a new page is loading

            **/

            public function htmlLocationChange():void

            {

            CursorManager.setBusyCursor();

            }

             

            /**

            * Removes a busy cursor when a page is done loading

            */

            public function htmlLocationComplete():void

            {

            CursorManager.removeBusyCursor();

             

            }

             

            /**

            * Makes HTML visible when there's a click on the visible CheckBox

            */       

            public function visibleClick(event:MouseEvent):void

            {

            html.visible =  cbVisible.selected;

            }

             

            /**

            * Creates a timer for wackiness when there's a click on the wacky CheckBox

            */

            public function wackyClick(event:MouseEvent):void

            {

            if (cbWacky.selected)

            {

            timer = new Timer(250);

            timer.addEventListener(TimerEvent.TIMER, wackyTimer);

            timer.start();

            }

            else

            {

            timer.stop();

            timer.removeEventListener(TimerEvent.TIMER, wackyTimer);

            html.filters = null;               

            }

            }

             

            /**

            * Called on a Timer for Wacky HTML, setting a random ColorMatrixFilter on HTML

            */

            public function wackyTimer(event:TimerEvent):void

            {

            // create a matrix for a random color which still allows the page to be seen

            var matrix:Array = new Array();

            matrix = matrix.concat([Math.random(), 0, 0, 0, 0]);

            matrix = matrix.concat([0, Math.random(), 0, 0, 0]);

            matrix = matrix.concat([0, 0, Math.random(), 0, 0]);

            matrix = matrix.concat([0, 0, 0, Math.max(1, Math.random() + .5), 0]);

             

            var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);

            html.filters = [filter];

            }

            /***************************/

            /* protected var time1:Number;

                protected var time2:Number;

            protected var time3:Number;

            protected var time4:Number; */

             

            /*public function creationComplete():void

            {

            time1 = getTimer();

            // var htmlString:String = Application.application.parameters["htmlString"];

            time2 = getTimer();

             

            time3 = getTimer();

            // htmlRenderer.htmlString = htmlString;

                                   

            //                      Alert.show("here!");

            }

                           

            public function renderComplete():void

            {

            time4 = getTimer();

            //                      Alert.show("A: " + (time2 - time1) + "ms " + "B: " + (time4 - time3) + "ms");

            //                      Alert.show("renderComplete");

            }*/

            ]]>

            </mx:Script>

             

            </mx:WindowedApplication>

             

            /****************************************************************/

             

            Thanks,

            Mani