今天公司要将一个三维地图的Applet小程序嵌入到Flex中。
思路：
1.在Flex Web工程的html-template的index.template.html文件中，放入Applet对象，新建一个js文件。
数据通讯的方式：flex 调用 JS，JS调用applet。实现Flex与Applet交互。
2.将Applet嵌入html文档中，在index.template.html文件中加入一个iFrame,iFram导入嵌入了applet程序的html文件。
数据通讯方式：flex 调用 JS，JS调用applet。实现Flex与Applet交互。
?
以下为思路2的原代码：
2.1嵌入Applet程序的html(sb.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
??? <p>
????? <font size = "5" >
??????? <applet id="wwjApplet"? mayscript code="org.jdesktop.applet.util.JNLPAppletLauncher" ARCHIVE ="applet-launcher.jar,worldwind.jar,WWJApplet.jar,jogl.jar,gluegen-rt.jar"
???????? width=400 height=400
??? style="background:#00CCFF"
??? codebase="http://localhost:8080/FlexTest"
???? alt="你的浏览器不允许运行Applet，请右击上面的黄色提示框，选择‘允许阻
??? 止内容’,然后点击确定">
?????? <param name="jnlp_href" value="WWJApplet.jnlp">
?????? <param name="codebase_lookup" value="false">
?????? <param name="subapplet.classname" value="gov.nasa.worldwind.examples.applet.WWJApplet">
?????? <param name="subapplet.displayname" value="WWJ Applet">
?????? <param name="noddraw.check" value="true">
?????? <param name="progressbar" value="true">
?????? <param name="jnlpNumExtensions" value="1">
?????? <param name="jnlpExtension1" value="http://192.168.1.164:8080/wwj/jogl.jnlp">
????????
?????????? </applet>
???????? <font>
????????? </p>
? </div>
</body>
</html>
2.2Flex index.template.html的原码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">?
??? <!--
??? Smart developers always View Source.
???
??? This application was built using Adobe Flex,an open source framework
??? for building rich Internet applications that get delivered via the
??? Flash Player or to desktops via Adobe AIR.
???
??? Learn more about Flex at http://flex.org
??? // -->
??? <head>
??????? <title>${title}</title>????????
??????? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??<!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
?????? the body element to 100%,because Firefox,or any Gecko based browser,interprets percentage as
??? the percentage of the height of its parent container,which has to be set explicitly.? Initially,
??? don't display flashContent div so it won't show if JavaScript disabled.
??-->
??????? <style type="text/css" media="screen">
???html,body?{ height:100%; }
???body { margin:0; padding:0; overflow:auto; text-align:center;
????????? background-color: ${bgcolor}; }??
???#flashContent { display:none; }
??????? </style>
??
??<!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
??????? <!-- BEGIN Browser History required section ${useBrowserHistory}>
??????? <link rel="stylesheet" type="text/css" href="history/history.css" />
??????? <script type="text/javascript" src="history/history.js"></script>
??????? <!${useBrowserHistory} END Browser History required section -->?
?????
??????? <script type="text/javascript" src="swfobject.js"></script>
??????? <script type="text/javascript" src="applet.js"></script>
??????? <script>?
???function moveIFrame(x,y,w,h) {
?????? var frameRef=document.getElementById("myFrame");
?????? frameRef.style.left=x;
?????? frameRef.style.top=y;
?????? var iFrameRef=document.getElementById("myIFrame");?
????iFrameRef.width=w;
????iFrameRef.height=h;
???}
???
???function hideIFrame(){
?????? document.getElementById("myFrame").style.visibility="hidden";
???}
????
???function showIFrame(){
?????? document.getElementById("myFrame").style.visibility="visible";
???}
???
???function loadIFrame(url){
????document.getElementById("myFrame").innerHTML = "<iframe id='myIFrame' src='" + url + "'frameborder='0'></iframe>";
???}??
??</script>
??????? <script type="text/javascript">
??????????? <!-- For version detection,set to min. required Flash Player version,or 0 (or 0.0.0),for no version detection. -->
??????????? var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
??????????? <!-- To use express install,set to playerProductInstall.swf,otherwise the empty string. -->
??????????? var xiSwfUrlStr = "${expressInstallSwf}";
??????????? var flashvars = {};
??????????? var params = {};
??????????? params.quality = "high";
??????????? params.bgcolor = "${bgcolor}";
??????????? params.allowscriptaccess = "sameDomain";
??????????? params.allowfullscreen = "true";
??????????? var attributes = {};
??????????? attributes.id = "${application}";
??????????? attributes.name = "${application}";
??????????? attributes.align = "middle";
??????????? swfobject.embedSWF(
??????????????? "${swf}.swf","flashContent",
??????????????? "${width}","${height}",
??????????????? swfVersionStr,xiSwfUrlStr,
??????????????? flashvars,params,attributes);
???<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
???swfobject.createCSS("#flashContent","display:block;text-align:left;");
??????? </script>
??? </head>
??? <body>
??????? <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
??? JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
??? when JavaScript is disabled.
??-->
??????? <div id="flashContent">
??????? ?<p>
???????? ?To view this page ensure that Adobe Flash Player version
????${version_major}.${version_minor}.${version_revision} or greater is installed.
???</p>
???<script type="text/javascript">
????var pageHost = ((document.location.protocol == "https:") ? "https://" :?"http://");
????document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
????????+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
???</script>
??????? </div>
??? ?
?????? ?<noscript>
??????????? <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}" id="${application}">
??????????????? <param name="movie" value="${swf}.swf" />
??????????????? <param name="quality" value="high" />
??????????????? <param name="bgcolor" value="${bgcolor}" />
??????????????? <param name="allowScriptAccess" value="sameDomain" />
??????????????? <param name="allowFullScreen" value="true" />
??????????????? <!--[if !IE]>-->
??????????????? <object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
??????????????????? <param name="quality" value="high" />
??????????????????? <param name="bgcolor" value="${bgcolor}" />
??????????????????? <param name="allowScriptAccess" value="sameDomain" />
??????????????????? <param name="allowFullScreen" value="true" />
??????????????? <!--<![endif]-->
??????????????? <!--[if gte IE 6]>-->
??????????????? ?<p>
??????????????? ??Either scripts and active content are not permitted to run or Adobe Flash Player version
??????????????? ??${version_major}.${version_minor}.${version_revision} or greater is not installed.
??????????????? ?</p>
??????????????? <!--<![endif]-->
??????????????????? <a href="http://www.adobe.com/go/getflashplayer">
??????????????????????? <img src="http://img.voidcn.com/vcimg/000/000/566/567_7f5_ace.gif" alt="Get Adobe Flash Player" />
??????????????????? </a>
??????????????? <!--[if !IE]>-->
??????????????? </object>
??????????????? <!--<![endif]-->
??????????? </object>
???? </noscript>??
???? <div id="myFrame" style="position:absolute;background-color:transparent;border:0px;visibility:visible;"></div>
?? </body>
</html>
2.3一个applet.js文件
//
function callApplet(name){
//?alert("aaa");
?//?var aa = document.applets[0].getWWJApplet().gotoLatLon(-33.8579,151.2135,30000,60);
//?alert(aa);
?var theApplet;
? if (theApplet == null) {
?? theApplet = document.frames['myIFrame'].document.getElementById("wwjApplet");
??? }
??? // See if we're using the old Java Plug-In and the JNLPAppletLauncher
??? try {
?????? theApplet = theApplet.getSubApplet();
??? } catch (e) {
?????? // Using new-style applet -- ignore
??? }
??? theApplet.gotoLatLon(43.705,7.28,45,80);
}
//放大
function zoom(zoomValue){
?var theApplet;
? if (theApplet == null) {
?? theApplet = document.frames['myIFrame'].document.getElementById("wwjApplet");
??? }
??? // See if we're using the old Java Plug-In and the JNLPAppletLauncher
??? try {
?????? theApplet = theApplet.getSubApplet();
??? } catch (e) {
?????? // Using new-style applet -- ignore
??? }
??? theApplet.setZoom(zoomValue);
}//
function callApplet(name){
//?alert("aaa");
?//?var aa = document.applets[0].getWWJApplet().gotoLatLon(-33.8579,80);
}
//放大
function zoom(zoomValue){
?var theApplet;
? if (theApplet == null) {
?? theApplet = document.frames['myIFrame'].document.getElementById("wwjApplet");
??? }
??? // See if we're using the old Java Plug-In and the JNLPAppletLauncher
??? try {
?????? theApplet = theApplet.getSubApplet();
??? } catch (e) {
?????? // Using new-style applet -- ignore
??? }
??? theApplet.setZoom(zoomValue);
}
?
2.4Flex前台IFrame.mxml文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
??? resize="callLater(moveIFrame)"a
??? move="callLater(moveIFrame)">
??? <mx:Script>
??? <![CDATA[
??????? import flash.external.ExternalInterface;
??????? import flash.geom.Point;
??????? import flash.net.navigateToURL;
??????? private var __source: String;
??????? /**
???????? * Move iframe through ExternalInterface.? The location is determined using localToGlobal()
???????? * on a Point in the Canvas.
???????? **/
??????? 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);
??????? }
??????? /**
???????? * The source URL for the IFrame.? When set,the URL is loaded through ExternalInterface.
???????? **/
??????? public function set source(source: String): void
??????? {
??????????? if (source)
??????????? {
??????????????? if (! ExternalInterface.available)
??????????????? {
??????????????????? throw new Error("ExternalInterface is not available in this container. Internet Explorer ActiveX,Firefox,Mozilla 1.7.5 and greater,or other browsers that support NPRuntime are required.");
??????????????? }
??????????????? __source = source;
??????????????? ExternalInterface.call("loadIFrame",source);
??????????????? moveIFrame();
??????????? }
??????? }
??????? public function get source(): String
??????? {
??????????? return __source;
??????? }
??????? /**
???????? * Whether the IFrame is visible.?
???????? **/
??????? override public function set visible(visible: Boolean): void
??????? {
??????????? super.visible=visible;
??????????? if (visible)
??????????? {
??????????????? ExternalInterface.call("showIFrame");
??????????? }
??????????? else
??????????? {
??????????????? ExternalInterface.call("hideIFrame");
??????????? }
??????? }
??? ]]>
??? </mx:Script>
</mx:Canvas>
2.5Flex前台主程序
<?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"
????? xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
????? creationComplete="init()" xmlns:local="*">
?<fx:Declarations>
??<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?</fx:Declarations>
?<fx:Script>
??<![CDATA[
???import flash.external.ExternalInterface;
???import flash.geom.Point;
???import flash.net.navigateToURL;?
???private var __source: String;?
??//flex调用JS
???private function clickMe(event:MouseEvent):void
???{
????ExternalInterface.call("callApplet",names.text);
????initState();
???}
???//放大
???private function zoom(event:MouseEvent):void
???{
????ExternalInterface.call("zoom",zoomValue.text);
????initState();
???}
???private function initState():void
???{
????viewstack.selectedChild = threeView;
????cbVisible.label = "三维";
????cbVisible.selected = true;
????if(iFrame)
?????iFrame.visible = true;
???}
???private function viewChange(event:MouseEvent):void
???{
????if(cbVisible.selected){
?????viewstack.selectedChild = threeView;
?????cbVisible.label = "三维"
?????if(iFrame)
??????iFrame.visible = true;
????}else{
?????viewstack.selectedChild = twoView;
?????cbVisible.label = "二维"
?????iFrame.visible = false;
????}
????
???}
??]]>
?</fx:Script>
?<s:layout>
??<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
?</s:layout>
?
?<s:HGroup horizontalAlign="left" width="100%">
??<s:CheckBox id="cbVisible" label="三维" selected="false" click="viewChange(event)"/>
?</s:HGroup>
?<mx:ViewStack id="viewstack" width="100%" height="100%" horizontalCenter="0" verticalCenter="0">
??<s:NavigatorContent id="twoView">
???<s:Panel width="400" height="400">
????<s:TextInput id="names" text="调用gotoLatLon(43.705,80)" x="10" y="30" width="268"/>
????<s:Button id="aa" label="定位" click="clickMe(event)" x="286" y="31"/>
????<s:TextInput id="zoomValue" text="" restrict="0-9" x="10" y="63" width="268"/>
????<s:Button id="zoomBtn" label="放大" click="zoom(event)" x="286" y="64"/>
???</s:Panel>
??</s:NavigatorContent>
??<s:NavigatorContent id="threeView">
???<local:IFrame id="iFrame" source="http://localhost:8080/FlexTest/sb.html" width="450" height="450"? />??</s:NavigatorContent>?</mx:ViewStack></s:Application>
