FLEX 与 JSP 视图的结合开发

FLEX 与 JSP 视图的结合开发

虽然用了flex作了视图层，但实际开发中难免有用到jsp视图的时候，这个时候就需要考虑将二者结合开发了。

方式一 ：采用flex 到jsp的跳转方式
需要jsp视图的时候，可以采用在flex中加入页面跳转，跳转到jsp页面上去，从而达到两种视图的结合。

var faultid:int =  event.target.data.id;
urlRequest.url = encodeURI(_webRootURL + "/webpages/xx.jsp?faultid=" + faultid);
navigateToURL(urlRequest,"_blank");  

路径_webRootURL可用通过flex与js交互获得到。

//获取web根路径
_webRootURL = ExternalInterface.call("getWebRooURL");

function getWebRooURL(){
    var strFullPath=window.document.location.href;
    var strPath=window.document.location.pathname;
    var pos=strFullPath.indexOf(strPath);
    var prePath=strFullPath.substring(0,pos);
    var postPath=strPath.substring(0,strPath.substr(1).indexOf('/')+1);
    return(prePath+postPath);
}

方式二：采用flex第三方控件Google Iframe方式
采用Google Iframe（https://github.com/flex-users/flex-iframe），使jsp页面嵌入flex中，优点是视图形式上统一，且更协调。

<s:TitleWindow width="80%" height="70%" backgroundAlpha="0">
	<flexiframe:IFrame id="googleIFrame"
					   label="Google"
					   source="http://ynp.iteye.com"
					   width="100%"
					   height="100%" />
</s:TitleWindow>

[img]

[/img]

其中有几点要注意的是：
* iframe 外面的区域 iframe会消失
打开html模板

<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 = "10.0.0";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            var params = {};

            / /在嵌入flex的html页面中加入这个，
           //object里有个   wmode的属性,你把他设为透明就行了。
            params.wmode="transparent";

            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";

* flex-iFrame不随flex页面拖动而拖动
监听父容器的移动事件,在事件中添加iFrameID.invalidateDisplayList()

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
                           move="titlewindow1_moveHandler(event)"
                           >
    <fx:Script>
        <![CDATA[
                protected function titlewindow1_moveHandler(event:MoveEvent):void
                {
                    iFrameBySource.invalidateDisplayList();
                }
        ]]>
    </fx:Script>
<flexiframe:IFrame id="iFrameBySource" width="100%" height="100%"/>
</s:TitleWindow>

如果是父容器滚动条滚动后,页面不滚动,则监听Scroller组件的Event.CHANGE事件
或者VScrollBar组件的ScrollEvent.SCROLL事件

参考:
http://blog.163.com/han_cheng_jun/blog/static/95566860201011413327185/
http://hi.baidu.com/sipijingguo/item/c69e351cff45a6061994ec16