在Flex中嵌入完整HTML页面.doc

在Flex中嵌入完整HTML页面
作者：hyfeiy类型:转载来源:HYPERLINK"http://blog.eshangrao.com/index.php/2006/02/08/195-flex2-flexhtml"eshangraoblog
在实际开发中，我们常常会要PopUp一些组件到另一个组件旁，比如点击一个TextInput时在其旁边PopUp出一个特殊符号的选择框。然而PopUp出来的组件使用的绝对定位坐标x,y是全局（最外层舞台）的坐标，但是我们能得到的坐标一般是事件源的局部坐标，比如一个TextInput的局部坐标x,y，所以就要使用xxx.localToGlobal(newPoint(x,y)):Point方法来将局部坐标转换成全局坐标。问题出来了，用谁来调用localToGlobal方法才能得到正确的全局坐标呢？
如果有一个如下层次关系的TextInput，要在点击它的时候在其旁边PopUp出一个选择框：
<Application><Groupid="g1"><Groupid="g2"><TextInputid="self"/></Group></Group></Application>
我们可以在TextInput的click事件的event中得到TextInput的局部x,y，但是我们是使用g1,g2,self还是this(Application)来调用localToGlobal方法才能得到正确的全局坐标呢？让我们来看上面的DEMO，其层次关系和上述的一样，只是把TextInput换成了BitmapImage，当点击不同按钮时会使用按钮label上所写的组件去调用localToGlobal方法（局部x,y都是使用中间图片的x,y）。快试一下吧！！
HYPERLINK"http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/local_global_0.swf"local_global.swf
最后得到的结果是：
g1,self,this(Application)调用localToGlobal方法都没有得到正确的全局坐标,而g2得到了。
也就是说调用localToGlobal方法必须是局部坐标提供者的直接父组件，这样才能得到正确的全局坐标。

我们可以将Flex应用嵌入到HTML页面中，然后通过Flex2中的ExternalInterface()来实现Flex与HTMLjavascript的相互交互，进一步的，如果要在Flex应用中嵌入完整的HTML呢？其实实现的方法很简单，只需要使用HTML的Iframe标签来导入需嵌入的HTML页面，然后使用ExternalInterface调用相应的javasript将该Iframe移动到我们Flex页面需要嵌入HTML页面的部分之上就可以了，示意图如下：也就是说，我们包含FlexSWF文件的HTML页面主要有三个部分：1、Flexswf插件容器，FlexBuilder自动生成部分
<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"id="IFrameDemo"width="100%"height="100%"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"><paramname="movie"value="IFrameDemo.swf"/><paramname="quality"value="high"/><paramname="bgcolor"value="#869ca7"/><embedsrc="IFrameDemo.swf"quality="high"bgcolor="#869ca7"width="100%"height="100%"name="detectiontest"aligh="middle"play="true"loop="false"quality="high"allowScriptAccess="sameDomain"type="application/x-shockwave-flash"wmode="opaque"swLiveConnect="true"pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object>
2、HTMLIframe标签,绝对定位，用来导入HTML页面
<iframeid="myFrame"name="myFrame"frameborder="0"style="position:ab