一个和jsp交互的flex框架实现

前些日子， 做了一个组态监控程序，考虑到图形化展示，最终选择了 flex做为前端显示，即在jsp中嵌入flash的形式实现。
大家都知道，目前有很多 java+flex 的系统，基本上都使用了开源的一些框架，remote等 ，网上例子很多。这次我们不用任何框架，用flex 和jsp以及 js脚本来实现相互通讯。
        注意，这次介绍只介绍flex部分，java服务器端部分留着下次来介绍。

    先介绍下使用的基本原理：
                     Flex中As调用Js的方法是：
          1、导入包 （import flash.external.ExternalInterface;）
          2、使用ExternalInterface.call("Js函数名称",参数)进行调用，其返回的值就是Js函数所返回的值

     Js调用As的方法是：
          1、导入包 （import flash.external.ExternalInterface;）
          2、在initApp中使用ExternalInterface.addCallback("用于Js调用的函数名",As中的函数名)进行注册下
          3、js中 就可以用document.getElementById("Flas在Html中的ID").注册时设置的函数名（参数）进行调用。

    然后介绍下这次实现的框架的基本功能：
            1、组件和服务器基本的实时通讯，信息交互。
            2、子组件之间的实时相互通讯，信息交互。
            3、加载不同子组件，构成预期的系统。
    接下来是实现的过程原理，以及相关源代码：

           1、声明基本的存储变量和 初始化 主组件
                private var graphId:String;
private var moduleMap:Map=new HashMap();
private var moduleInfo:Object=new Object(); // 所有的IModuleInfo


private function init():void//主组件加载方法
{
flash.system.Security.allowDomain("*");//权限设置
ExternalInterface.addCallback("showMsg", showMsg); // 允许javascript调用


ExternalInterface.addCallback("setGraphMsg", setGraphMsg); // 允许javascript调用
graphId=ExternalInterface.call("getGraphId");//获取图形id
handleStyle(ExternalInterface.call("getGraphStyle"));//获取图形样式
handleStruct(ExternalInterface.call("getGraphStruct"));//获取图形子组件，以及结构，构成
// fullScream();

}
                 2、获取对应图元,用于子组件之间的交互
                          /**
* 根据id获取对应图元
*/
public function getModule(id:String):Module
{
return moduleMap.get(id) as Module;
}

                  3、处理样式
/**
* 处理样式
*/
private function handleStyle(style:String):void
{


var styleXML:XML=new XML(style);
var classList:XMLList=styleXML.elements("class");
for (var i:int=0; i < classList.length(); i++)
{
var classXML:XML=classList[i];
var selector:String=classXML.attribute("name");
if (selector == null)
{
continue;
}
var css:CSSStyleDeclaration=StyleManager.getStyleDeclaration(selector);
var attrList:XMLList=classXML.attributes(); // 所有属性
for (var j:int=0; j < attrList.length(); j++)
{
var attrName:String=attrList[j].name(); // 属性名
var attrValue:String=classXML.attribute(attrName); // 属性值
// name属性为selector
if (attrName != "name")
{
if (attrValue.indexOf(",") > -1)
{
css.setStyle(attrName, attrValue.split(","));
}
else
{
css.setStyle(attrName, attrValue);
}


}
}
}


}
        4、结构处理
                        /**
* 处理图形构成
*/
private function handleStruct(struct:String):void
{


var structXML:XML=null;
var metaList:XMLList=null;
try
{
structXML=new XML(struct);
metaList=structXML.elements("meta");


}
catch (e:Error)
{
Alert.show("错误:" + e.message);
}




for (var i:int=0; i < metaList.length(); i++)
{
var metaXML:XML=metaList[i];


moduleInfo[metaXML.@id]=ModuleManager.getModule(metaXML.@url);
moduleInfo[metaXML.@id].addEventListener(ModuleEvent.READY, moduleLoadReady);
moduleInfo[metaXML.@id].addEventListener(ModuleEvent.ERROR, moduleLoadError);


// 将除url属性全部放到data上
var attributes:Object=new Object();
var attrList:XMLList=metaXML.attributes(); // 所有属性
for (var j:int=0; j < attrList.length(); j++)
{
var attrName:String=attrList[j].name(); // 属性名
var attrValue:String=metaXML.attribute(attrName); // 属性值
if (attrName != "url")
{
attributes[attrName]=attrValue;
}
}
moduleInfo[metaXML.@id].data=attributes;
moduleInfo[metaXML.@id].load();
}


}


/**
* 图元导入完成
*/
private function moduleLoadReady(event:ModuleEvent):void
{
var module:IModuleInfo=event.module;
var meta:Module=module.factory.create() as Module;
meta.data=module.data; // 将所有属性传递给图元
moduleMap.put(module.data.id, meta); // 将新增图元添加到map
// meta.addEventListener(MouseEvent.DOUBLE_CLICK, full);
this.addChild(meta);
}


private function moduleLoadError(event:ModuleEvent):void
{
Alert.show('加载错误，详细错误信息：' + event.errorText);
}



中
    5、      通讯方法
/ * 接收、设置服务器消息
* 格式：图元标识 + "$" + 消息
*/
public function setGraphMsg(msg:String):void
{
var id:String=msg.substr(0, msg.indexOf("$"));
var module:Module=getModule(id);//得到子组件
// Alert.show(id+":"+msg+":"+msg.substr(msg.indexOf("$") + 1));
module["setGraphMsg"](msg.substr(msg.indexOf("$") + 1));//发送给子组件消息相当于
//module.setGraphMsg(msg.substr(msg.indexOf("$") + 1));
}
6、         发送消息给所有客户端
/**
* 将消息发往所有客户端
*/
public function sendMsgToAllClient(msg:String):void
{
ExternalInterface.call("sendMsgToAllClient", msg);
}

7、jsp中实现，嵌入生成的swf文件 即可，然后相互发送消息
                <script type="text/javascript">
function getGraphId() {//get graph  key
  return document.forms[0].graphId.value;
}
function getGraphStyle() { //get graph style
  return document.forms[0].graphStyle.value;
}
function getGraphStruct() {//get graph struct
  return document.forms[0].graphStruct.value;
}
function setGraphMsg(msgType, msg) {//send message to graph
     document.getElementById("GraphViewer").setGraphMsg(msg);
}
function sendMsgToAllClient(msg){
//异步提交到服务器，服务器作出相应后发送给相应的客户端，
}
</script>

<!-嵌入jsp的flash--->
<table class="tableGrid">
<tr>
<td width="100%" height="100%">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="GraphViewer"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value='graph/swf/GraphViewer.swf?U=<%=U%>' />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="always" />
<embed src='graph/swf/GraphViewer.swf?U=<%=U%>' quality="high"
name="GraphViewer" play="true" loop="false" quality="high"
allowScriptAccess="always" type="application/x-shockwave-flash"
allowFullScreen="true"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</td>
</table>

 

另外，附上用此框架实现的系统截图：

 

 

 

立体库房

 

 

 

自动化流水线组态监控