[Flex] Resizable Window Layout

最近研究起『使用者經驗』特別對非固定式 layout 有濃厚的興趣，雖然這類的教學已經被大家寫到爛了，在這邊還是與大家分享一下在 Flex 中實作網頁上 Resizable Swf Window Layout 的 很簡單作法...



<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*"
frameRate="30" horizontalScrollPolicy="off"
verticalScrollPolicy="off"
layout="absolute" width="400" height="430">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
private function updateStageSize() : void
{
width = testWin.width;
height = testWin.height;
//Call 網頁上的 javascript 做 resize
ExternalInterface.call("doResize", width, height);
}
]]>
</mx:Script>
<mx:Resize id="stageResize" duration="600"/>
<mx:TabNavigator id="testWin" resizeToContent="true"
resizeEffect ="stageResize"
resize="callLater(updateStageSize)" >
<!-- 測試用 container-->
<mx:VBox label="Tag1"
width="400"
height="400">
</mx:VBox>

<mx:VBox label="Tag2"
width="300"
height="300">
</mx:VBox>

<mx:VBox label="Tag3"
width="200"
height="200">
</mx:VBox>
</mx:TabNavigator>
</mx:Application>

callLater(function) 的使用在這邊很重要...你可以試著將這個 Function 拿掉重新輸出就會知道有啥咪狀況了...=P

網頁上的 Java Script:
請愛用 swfObject 來 崁入 Swf，真情推薦!!

function doResize(w, h){
document.getElementById( 放置SWF的DIV id ).style.height=h+"px";
document.getElementById( 放置SWF的DIV id ).style.width=w+"px";
}


因為 google page 已經開始停止服務，雖然舊用戶還是可以使用，但是不知道哪天會掛掉，所以再找到下一個好用又可以放置 javascript 的網站空間前，範例原始檔先暫停提供囉！