具體的一個(gè)例子——使用IFrame這個(gè)框架的一個(gè)頁(yè)面的代碼如下:
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="AC_OETags.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden }
</style>
<script>
<!--
function moveIFrame(x,y,w,h) {
// alert("move to " + x + "," + y + ", " + w + "/" + h);
var frameRef=document.getElementById("myFrame");
frameRef.style.left=x;
frameRef.style.top=y;
frameRef.width=w;
frameRef.height=h;
}
function hideIFrame(){
// alert("hide");
document.getElementById("myFrame").style.visibility="hidden";
}
function showIFrame(){
// alert("show");
document.getElementById("myFrame").style.visibility="visible";
}
function navigateTo(url) {
// alert("nav to " + url);
// alert("from " + document.getElementById("myFrame").location);
document.getElementById("myFrame").src = url;
}
-->
</script>
<script language="VBScript">
<!--
// Catch FS Commands in IE, and pass them to the corresponding JavaScript function.
Sub flexapp_FSCommand(ByVal command, ByVal str)
call flexapp_DoFSCommand(command, str)
end sub
// -->
</script>
</head>
<body style="margin:0px">
<object onMouseDown="document.body.focus();"
classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,14
,0'
width='100%' height='100%'
id='flexapp' name='flexapp'>
<param name='flashvars' value=''>
<param name='src' value='EXPIframe.swf'>
<param name="wmode" value="opaque">
<embed pluginspage='http://www.macromedia.com/go/getflashplayer' width='100%'
height='100%'
flashvars=''
src='EXPIframe.swf'
name='flexapp'
wmode="opaque"
swLiveConnect="true"
/>
</object>
<iframe id="myFrame" name="myFrame"
frameborder="0"
style="position:absolute;background-
color:transparent;border:0px;visibility:hidden;"></iframe>
</body>
</html>
先用現(xiàn)成的組件玩一下,一會(huì)再去看看組件源碼研究一下。
http://code.google.com/p/flex-iframe/
下載了flexiframe.swc,引入工程。
flex代碼
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" layout="absolute"
xmlns:code=" <mx:Panel width="500"
height="400">
<code:IFrame id="googleIFrame"
label="Google"
source=" width="100%"
height="100%"/>
</mx:Panel>
</mx:Application>
運(yùn)行,發(fā)現(xiàn),可以了。
不過(guò),有個(gè)問(wèn)題,鼠標(biāo)點(diǎn)擊別處的時(shí)候,網(wǎng)頁(yè)消失了。
找了很多地方,找到了解決方法。設(shè)置wmode。
首先了解一下wmode是什么。
window mode(wmode)
wmode即窗口模式總共有三種:
window 模式
默認(rèn)情況下的顯示模式,在這種模式下flash player有自己的窗口句柄,這就意味著flash影片是存在于Windows中的一個(gè)顯示實(shí)例,并且是在瀏覽器核心顯示窗口之上的,所以flash只 是貌似顯示在瀏覽器中,但這也是flash最快最有效率的渲染模式。由于他是獨(dú)立于瀏覽器的HTML渲染表面,這就導(dǎo)致默認(rèn)顯示方式下flash總是會(huì)遮 住位置與他重合的所有DHTML層。
但是大多數(shù)蘋(píng)果電腦瀏覽器會(huì)允許DHTML層顯示在flash之上,但當(dāng)flash影片播放時(shí)會(huì)出現(xiàn)比較詭異的現(xiàn)象,比如DHTML層像被flash刮掉一塊一樣顯示異常。
Opaque 模式
這 是一種無(wú)窗口模式,在這種情況下flash player沒(méi)有自己的窗口句柄,這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪制的時(shí)間和位置。這時(shí)flash影片就不會(huì)在高于瀏覽器HTML渲染表面而是與其他元素一樣在同一個(gè)頁(yè)面上,因此你就可 以使用z-index值來(lái)控制DHTML元素是遮蓋flash或者被遮蓋。
Transparent 模式
透明模式, 在這種模式下flash player會(huì)將stage的背景色alpha值將為0并且只會(huì)繪制stage上真實(shí)可見(jiàn)的對(duì)象,同樣你也可以使用z-index來(lái)控制flash影片的 深度值,但是與Opaque模式不同的是這樣做會(huì)降低flash影片的回放效果,而且在9.0.115之前的flash player版本設(shè)置wmode=”opaque”或”transparent”會(huì)導(dǎo)致全屏模式失效。
這邊,我們將wmode設(shè)置為transparent。
我直接修改了工程的html模板,紅色字體部分為新增加的代碼。
if ( hasProductInstall && !hasRequestedVersion ) {
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;
AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", " "wmode","transparent"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", " "wmode","transparent"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
<embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
width="${width}" height="${height}" name="${application}" align="center"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage=" wmode="transparent">
</embed>
保存,運(yùn)行。問(wèn)題解決了。
下面羅列出了一些常用的正則表達(dá)式:
^/d+$ //匹配非負(fù)整數(shù)(正整數(shù) + 0)
^[0-9]*[1-9][0-9]*$ //匹配正整數(shù)
^((-/d+)|(0+))$ //匹配非正整數(shù)(負(fù)整數(shù) + 0)
^-[0-9]*[1-9][0-9]*$ //匹配負(fù)整數(shù)
^-?/d+$ //匹配整數(shù)
^/d+(/./d+)?$ //匹配非負(fù)浮點(diǎn)數(shù)(正浮點(diǎn)數(shù) + 0)
^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*))$ //匹配正浮點(diǎn)數(shù)
^((-/d+(/./d+)?)|(0+(/.0+)?))$ //匹配非正浮點(diǎn)數(shù)(負(fù)浮點(diǎn)數(shù) + 0)
^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$ //匹配負(fù)浮點(diǎn)數(shù)
^(-?/d+)(/./d+)?$ //匹配浮點(diǎn)數(shù)
^[A-Za-z]+$ //匹配由26個(gè)英文字母組成的字符串
^[A-Z]+$ //匹配由26個(gè)英文字母的大寫(xiě)組成的字符串
^[a-z]+$ //匹配由26個(gè)英文字母的小寫(xiě)組成的字符串
^[A-Za-z0-9]+$ //匹配由數(shù)字和26個(gè)英文字母組成的字符串
^/w+$ //匹配由數(shù)字、26個(gè)英文字母或者下劃線組成的字符串
^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$ //匹配email地址
^[a-zA-z]+://匹配(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$ //匹配url
匹配中文字符的正則表達(dá)式: [/u4e00-/u9fa5]
匹配雙字節(jié)字符(包括漢字在內(nèi)):[^/x00-/xff]
匹配空行的正則表達(dá)式:/n[/s| ]*/r
匹配HTML標(biāo)記的正則表達(dá)式:/<(.*)>.*<//>|<(.*) //>/
匹配首尾空格的正則表達(dá)式:(^/s*)|(/s*$)
匹配Email地址的正則表達(dá)式:/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*
匹配網(wǎng)址URL的正則表達(dá)式:^[a-zA-z]+://(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$
匹配帳號(hào)是否合法(字母開(kāi)頭,允許5-16字節(jié),允許字母數(shù)字下劃線):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
匹配國(guó)內(nèi)電話號(hào)碼:(/d{3}-|/d{4}-)?(/d{8}|/d{7})?
匹配騰訊QQ號(hào):^[1-9]*[1-9][0-9]*$
下表是元字符及其在正則表達(dá)式上下文中的行為的一個(gè)完整列表:
/ 將下一個(gè)字符標(biāo)記為一個(gè)特殊字符、或一個(gè)原義字符、或一個(gè)后向引用、或一個(gè)八進(jìn)制轉(zhuǎn)義符。
^ 匹配輸入字符串的開(kāi)始位置。如果設(shè)置了 RegExp 對(duì)象的Multiline 屬性,^ 也匹配 ’/n’ 或 ’/r’ 之后的位置。
$ 匹配輸入字符串的結(jié)束位置。如果設(shè)置了 RegExp 對(duì)象的Multiline 屬性,$ 也匹配 ’/n’ 或 ’/r’ 之前的位置。
* 匹配前面的子表達(dá)式零次或多次。
+ 匹配前面的子表達(dá)式一次或多次。+ 等價(jià)于 {1,}。
? 匹配前面的子表達(dá)式零次或一次。? 等價(jià)于 {0,1}。
{n} n 是一個(gè)非負(fù)整數(shù),匹配確定的n 次。
{n,} n 是一個(gè)非負(fù)整數(shù),至少匹配n 次。
{n,m} m 和 n 均為非負(fù)整數(shù),其中n <= m。最少匹配 n 次且最多匹配 m 次。在逗號(hào)和兩個(gè)數(shù)之間不能有空格。
? 當(dāng)該字符緊跟在任何一個(gè)其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面時(shí),匹配模式是非貪婪的。非貪婪模式盡可能少的匹配所搜索的字符串,而默認(rèn)的貪婪模式則盡可能多的匹配所搜索的字符串。
. 匹配除 “/n” 之外的任何單個(gè)字符。要匹配包括 ’/n’ 在內(nèi)的任何字符,請(qǐng)使用象 ’[./n]’ 的模式。
(pattern) 匹配pattern 并獲取這一匹配。
(?:pattern) 匹配pattern 但不獲取匹配結(jié)果,也就是說(shuō)這是一個(gè)非獲取匹配,不進(jìn)行存儲(chǔ)供以后使用。
x|y 匹配 x 或 y。
[xyz] 字符集合。
[^xyz] 負(fù)值字符集合。
[a-z] 字符范圍,匹配指定范圍內(nèi)的任意字符。
[^a-z] 負(fù)值字符范圍,匹配任何不在指定范圍內(nèi)的任意字符。
/b 匹配一個(gè)單詞邊界,也就是指單詞和空格間的位置。
/B 匹配非單詞邊界。
/cx 匹配由x指明的控制字符。
/d 匹配一個(gè)數(shù)字字符。等價(jià)于 [0-9]。
/D 匹配一個(gè)非數(shù)字字符。等價(jià)于 [^0-9]。
/f 匹配一個(gè)換頁(yè)符。等價(jià)于 /x0c 和 /cL。
/n 匹配一個(gè)換行符。等價(jià)于 /x0a 和 /cJ。
/r 匹配一個(gè)回車(chē)符。等價(jià)于 /x0d 和 /cM。
/s 匹配任何空白字符,包括空格、制表符、換頁(yè)符等等。等價(jià)于[ /f/n/r/t/v]。
/S 匹配任何非空白字符。等價(jià)于 [^ /f/n/r/t/v]。
/t 匹配一個(gè)制表符。等價(jià)于 /x09 和 /cI。
/v 匹配一個(gè)垂直制表符。等價(jià)于 /x0b 和 /cK。
/w 匹配包括下劃線的任何單詞字符。等價(jià)于’[A-Za-z0-9_]’。
/W 匹配任何非單詞字符。等價(jià)于 ’[^A-Za-z0-9_]’。
/xn 匹配 n,其中 n 為十六進(jìn)制轉(zhuǎn)義值。十六進(jìn)制轉(zhuǎn)義值必須為確定的兩個(gè)數(shù)字長(zhǎng)。
/num 匹配 num,其中num是一個(gè)正整數(shù)。對(duì)所獲取的匹配的引用。
/n 標(biāo)識(shí)一個(gè)八進(jìn)制轉(zhuǎn)義值或一個(gè)后向引用。如果 /n 之前至少 n 個(gè)獲取的子表達(dá)式,則 n 為后向引用。否則,如果 n 為八進(jìn)制數(shù)字 (0-7),則 n 為一個(gè)八進(jìn)制轉(zhuǎn)義值。
/nm 標(biāo)識(shí)一個(gè)八進(jìn)制轉(zhuǎn)義值或一個(gè)后向引用。如果 /nm 之前至少有is preceded by at least nm 個(gè)獲取得子表達(dá)式,則 nm 為后向引用。如果 /nm 之前至少有 n 個(gè)獲取,則 n 為一個(gè)后跟文字 m 的后向引用。如果前面的條件都不滿足,若 n 和 m 均為八進(jìn)制數(shù)字 (0-7),則 /nm 將匹配八進(jìn)制轉(zhuǎn)義值 nm。
眾所周知Flex主要用于B/S結(jié)構(gòu)程序的開(kāi)發(fā),凡是這類(lèi)型的開(kāi)發(fā)都存在頁(yè)面間的傳值的問(wèn)題,通常一般的B/S開(kāi)發(fā)主要不外乎使用地址修改法,隱藏表單域等方法,但是這些方法在Flex中確沒(méi)有用,原因是應(yīng)為Flex支持的模型和普通的B/S開(kāi)發(fā)語(yǔ)言不一樣,一般的B/S開(kāi)發(fā)語(yǔ)言使用的主要是請(qǐng)求/響應(yīng)模型,而Flex采用的是事件驅(qū)動(dòng)模型(這種模型主要見(jiàn)于C/S結(jié)構(gòu)程序),所以我們的Form表單等傳值方法就無(wú)效了,哪么我們?nèi)绾卧趦蓚€(gè)這樣模型的頁(yè)面中傳遞數(shù)據(jù)呢?下面我們講述下兩種常用的傳值方法:
一、 利用ExternalInterface調(diào)用Javascript
a) 該方法主要利用ExternalInterface的call方法調(diào)用Javascript函數(shù),進(jìn)而修改地址(有點(diǎn)類(lèi)似于地址修改法),在接受頁(yè)面上主要是靠BrowserManager獲取地址欄信息,并利用URLUtil截取參數(shù)。
b) 該方法雖然簡(jiǎn)單但是確調(diào)用了2種語(yǔ)言,給編寫(xiě)帶來(lái)一定的困難
發(fā)送頁(yè)面代碼(second.html):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
function kk():void{
var val:String = myparam.text;
ExternalInterface.call("function(){window.location.href='http://localhost:8080/send/page.html#param1="+val+"'}"); }
]]>
</mx:Script>
<mx:TextInput id="myparam"></mx:TextInput>
<mx:Button name="ok" click="kk()" x="185" label="提交"></mx:Button>
</mx:Application>
接收頁(yè)面代碼(page.html):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" >
<mx:Script>
<![CDATA[
import mx.managers.IBrowserManager;
import mx.managers.BrowserManager;
import mx.utils.URLUtil;
[Bindable]
var param:String;
function init():void
{
var bm:IBrowserManager = BrowserManager.getInstance();
bm.init();
var o:Object = URLUtil.stringToObject(bm.fragment,"&");
param = o.param1;
}
]]>
</mx:Script>
<mx:TextInput id="val" text="{param}">
</mx:TextInput>
</mx:Application>
二、 利用SharedObject(本地共享對(duì)象傳送)
a) 該對(duì)象類(lèi)似于Cookie,將需要傳送的數(shù)據(jù)放在SharedObject對(duì)象中,而實(shí)際上在本機(jī)大致在(win2k和 win xp中,默認(rèn)路徑為C:/Documents and Settings/username/Application Data/Macromedia/Flash Player/#SharedObjects (username為機(jī)器的用戶名))位置生成一個(gè)sol文件,該對(duì)象具有一個(gè)data屬性,只要將你要傳的數(shù)據(jù)按鍵值對(duì)放進(jìn)去就好了,下次讀取的時(shí)候就在本地直接讀取即可
b) 遺憾的是,該對(duì)象要求你自己創(chuàng)建還要自己清除,并且在寫(xiě)入數(shù)據(jù)時(shí)一定要強(qiáng)制刷新,否則數(shù)據(jù)無(wú)法希爾
發(fā)送頁(yè)面代碼(index.html):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
function s mit():void
{
var param:String = myparam.text;
//創(chuàng)建全局SharedObject,如果不用全局就去掉后面的"/",一旦去掉那么cookie只能被自己的Application使用,其他Applicaiton無(wú)法看見(jiàn)
//myparam是要求在本機(jī)創(chuàng)建一個(gè)叫cookie.sol的文件
var obj:SharedObject = SharedObject.getLocal("cookie","/");
obj.data.username=myparam.text;
obj.flush();
//調(diào)用URLReqst將跳轉(zhuǎn)到second.html頁(yè)面
var reqst:URLReqst =new URLReqst();
reqst.url="second.html";
navigateToURL(reqst);
}
]]>
</mx:Script>
<mx:TextInput id="myparam"></mx:TextInput>
<mx:Button label="提交" click="s mit()" x="177"></mx:Button>
</mx:Application>
接收頁(yè)面代碼(second.html):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
[Bindable]
var param:String;
function init():void
{
//在本地找到myparam.sol文件
var obj:SharedObject =SharedObject.getLocal("cookie","/");
//讀取前頁(yè)存入的數(shù)據(jù)
param = obj.data.username;
//用完了別忘了將myparam.sol文件刪除
obj.clear();
}
]]>
</mx:Script>
<mx:TextInput id="mypar" text="{param}"></mx:TextInput>
</mx:Application>