FLEX 与 JSP 视图的结合开发
虽然用了flex作了视图层,但实际开发中难免有用到jsp视图的时候,这个时候就需要考虑将二者结合开发了。
方式一 :采用flex 到jsp的跳转方式
需要jsp视图的时候,可以采用在flex中加入页面跳转,跳转到jsp页面上去,从而达到两种视图的结合。
路径_webRootURL可用通过flex与js交互获得到。
//获取web根路径
_webRootURL = ExternalInterface.call("getWebRooURL");
方式二:采用flex第三方控件Google Iframe方式
采用Google Iframe(https://github.com/flex-users/flex-iframe),使jsp页面嵌入flex中,优点是视图形式上统一,且更协调。
[img]
[img]http://dl2.iteye.com/upload/attachment/0095/3656/99c87619-bc16-3821-806b-2a18fc22970c.png[/img]
[/img]
其中有几点要注意的是:
* iframe 外面的区域 iframe会消失
打开html模板
* flex-iFrame不随flex页面拖动而拖动
监听父容器的移动事件,在事件中添加iFrameID.invalidateDisplayList()
如果是父容器滚动条滚动后,页面不滚动,则监听Scroller组件的Event.CHANGE事件
或者VScrollBar组件的ScrollEvent.SCROLL事件
参考:
http://blog.163.com/han_cheng_jun/blog/static/95566860201011413327185/
http://hi.baidu.com/sipijingguo/item/c69e351cff45a6061994ec16
虽然用了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]http://dl2.iteye.com/upload/attachment/0095/3656/99c87619-bc16-3821-806b-2a18fc22970c.png[/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