Page
Sometimes we need to embed HTML code in flex applications, and there are two different ways to embed HTML requirements:
1. The HTMLText properties of the Flex text component (Label, text, TextArea) support some basic HTML code, such as:
<mx:TextArea>
<mx:htmlText>
<! [cdata[
<p align= "center" ><font size= "color=" #3399ff ">this is a HTML code</font></p>
]]>
</mx:htmlText>
</mx:TextArea>
2, we can embed the flex application into the HTML page, and then through the Flex2 externalinterface (Flex1.5 use Geturl ("Javascript:javascriptmethod"))
To enable the interaction of Flex with HTML JavaScript, and further, if you want to embed complete HTML in flex applications?
In fact, the implementation of the method is very simple, only need to use the HTML IFRAME tag to import the HTML page that needs to embed,
Then use Externalinterface to invoke the corresponding javasript to move the IFRAME to our Flex page need to embed the part of the HTML page on the above, the sketch is as follows:
In other words, the HTML page that contains the Flex SWF file has three main parts:
1, Flex SWF plug-in container, Flexbuilder automatic generation part
<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
Id= "Iframedemo" width= "100%" height= "100%"
codebase= "Http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" >
<param name= "movie" value= "http://www.webjx.com/htmldata/2006-02-10/IFrameDemo.swf"/>
<param name= "Quality" value= "High"/>
<param name= "bgcolor" value= "#869ca7"/>
<embed src= "http://www.webjx.com/htmldata/2006-02-10/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, HTML iframe tag, absolute positioning, used to import HTML pages
<iframe id= "MyFrame" name= "MyFrame" frameborder= "0"
Style= "Position:absolute;background-color:transparent;border:0px;visibility:hidden;"/>
3, moving the IFRAME and in the IFRAME to import the need to embed flex in the HTML page script
<script>
function Moveiframe (x,y,w,h) {
var Frameref=document.getelementbyid ("MyFrame");
Frameref.style.left=x;
Frameref.style.top=y;
Frameref.width=w;
Frameref.height=h;
}
function Loadiframe (URL) {
top.frames["MyFrame"].LOCATION.HREF=URL;
}
</script>
The code for importing an IFRAME page and moving an IFRAME in Flex is as follows:
Import Flash.external.ExternalInterface;
Import Flash.geom.Point;
Import Flash.net.navigateToURL;
private Var __source:string;
Private Function Moveiframe (): void {
var localpt:point = new Point (0, 0);
var globalpt:point = This.localtoglobal (LOCALPT);
Externalinterface.call ("Moveiframe", Globalpt.x, Globalpt.y, This.width, this.height);
}
Public function set Source (source:string): void {
if (source) {
if (! externalinterface.available)
{
Todo:determine If this Error is actually needed. The debugger
Build gives the error below. Assuming that this error won't show
Up on the release build but haven ' t checked.
throw new Error ("The externalinterface isn't available in this container. Internet Explorer ActiveX,
Firefox, Mozilla 1.7.5 and greater, or other browsers that support Npruntime are. ");
}
__source = source;
Externalinterface.call ("Loadiframe", source);
}
}
The two methods directly invoke the two JavaScript methods on the HTML page we mentioned earlier, using the Externalinterface.call call, respectively. Another thing to note is the <Canvas/>
Inherits the use of the Localtoglobal method from the Flash.display.DisplayObject class, which converts the coordinates based on the flash scene to global local coordinates, which is the browser page coordinates:
Flash scene 0, 0 coordinate var localpt:point = new Point (0, 0); Convert to browser page coordinates var globalpt:point = This.localtoglobal (LOCALPT);
This allows you to embed any HTML page in the Flex page, and for convenience, Brian writes a proxy IFRAME component that embeds an HTML page that encapsulates all of the required flex-side code:
<?xml version= "1.0" encoding= "Utf-8"?>
<mx:canvas xmlns:mx= "Http://www.macromedia.com/2005/mxml"
Resize= "Calllater (moveiframe)"
Move= "Calllater (moveiframe)" >
<mx:Script>
<! [cdata[
Import Flash.external.ExternalInterface;
Import Flash.geom.Point;
Import Flash.net.navigateToURL;
private Var __source:string;
Private Function Moveiframe (): void {
var localpt:point = new Point (0, 0);
var globalpt:point = This.localtoglobal (LOCALPT);
Externalinterface.call ("Moveiframe", Globalpt.x, Globalpt.y, This.width, this.height);
}
Public function set Source (source:string): void {
if (source) {
if (! externalinterface.available)
{
Todo:determine If this Error is actually needed. The debugger
Build gives the error below. Assuming that this error won't show
Up on the release build but haven ' t checked.
throw new Error ("The externalinterface isn't available in this container. Internet Explorer ActiveX, Firefox,
Mozilla 1.7.5 and greater, or other browsers that support Npruntime are. ");
}
__source = source;
Externalinterface.call ("Loadiframe", source);
}
}
Public function Get Source (): String {
return __source;
}
Override public function set visible (Visible:boolean): void {
super.visible=visible;
if (visible)
{
Externalinterface.call ("Showiframe");
}
Else
{
Externalinterface.call ("Hideiframe");
}
}
]]>
</mx:Script>
</mx:Canvas>
The IFRAME component has a source property that records the address of the embedded HTML page that needs to be loaded, and calls Externalinterface.call ("Loadiframe", source) each time the Source property is updated.
Invoke the JavaScript method Loadiframe method to load an HTML page to embed in an IFRAME in an HTML page.
In addition, the canvas Visible property is overloaded to hide an iframe in an HTML page in canvas.
Use this component to embed HTML page methods in Flex applications as follows:
<iframe id= "IFrame" source= "http://blog.eshangrao.com" width= "," height= ""/>
The above code will be embedded in our Flex application home site.
Click here to download the source file
