Flex全屏實(shí)現(xiàn)方法揭秘
本文和大家重點(diǎn)討論一下Flex全屏方法,通過showModalDialog來模擬Flex全屏模式,showModalDialog中去掉工具欄、菜單欄、地址欄,同時(shí)將寬度和高度設(shè)置成屏幕的寬度和高度。
Flex全屏方法介紹
最近在做工作流的流程設(shè)計(jì)工具相關(guān)的內(nèi)容,web應(yīng)用使用了比較標(biāo)準(zhǔn)的分布方式,即上、左、右的布局方式,這樣做的結(jié)果就是設(shè)計(jì)工具的設(shè)計(jì)界面相對(duì)較小,當(dāng)遇到比較復(fù)雜的流程時(shí)就感覺設(shè)計(jì)的流程比較緊湊,設(shè)計(jì)工具的易用性不夠好。為了解決這個(gè)問題,需要支持Flex全屏模式。
可以通過以下方式實(shí)現(xiàn)Flex全屏:
◆使用Flex的FullScreen模式,具體實(shí)現(xiàn)方式為:
1修改html-template文件夾下的index.template.html文件,在AC_FL_RunContent中增加:"allowFullScreen","true";在embed中增加:allowFullScreen="true"。
2通過設(shè)置stage.displayState的值為StageDisplayState.FULL_SCREEN來切換到全屏模式。
缺點(diǎn):
使用這種方式雖然能夠?qū)lex切換到全屏模式,但是Flex中的InputText等控件是無法編輯的,而且在Flex的中央會(huì)出現(xiàn)"PressEscToExistFullScreen"。因而這種方式無法滿足設(shè)計(jì)需求。
當(dāng)然,中央出現(xiàn)的字幕還是有辦法去掉的,雖然去掉之后并不能改變結(jié)果。去掉中央的"PressEscToExistFullScreen"字幕的方法請(qǐng)見:
http://stackoverflow.com/questions/1415436/flex-fullscreen-translate-edit-press-esc-to-exit-fullscreen-mode
該文章講解了去掉IE,F(xiàn)irefox中Flex全屏后字幕的方法。
◆通過showModalDialog來模擬Flex全屏模式,showModalDialog中去掉工具欄、菜單欄、地址欄,同時(shí)將寬度和高度設(shè)置成屏幕的寬度和高度。但是這種方式實(shí)現(xiàn)起來比較復(fù)雜,因?yàn)樯婕暗綌?shù)據(jù)同步的問題,同步的方式根據(jù)項(xiàng)目的復(fù)雜程度和需求要求不同而不同。比較簡(jiǎn)單的方式是在關(guān)閉showModalDialog時(shí)將數(shù)據(jù)同步主頁面。因?yàn)檫@種方式實(shí)現(xiàn)復(fù)雜,容易出錯(cuò),所以沒有進(jìn)行實(shí)現(xiàn),有興趣的朋友可以自己試試。
模擬IE的F11的全屏模式。當(dāng)用戶選擇Flex全屏模式的時(shí)候,模擬IE的F11PressDown事件,隱藏掉IE的地址欄、菜單欄、工具欄等,同時(shí)將上部和左部的Frame隱藏掉,讓右邊的Frame全屏顯示,達(dá)到預(yù)期的效果。
IE的F11PressDown事件模擬方式實(shí)現(xiàn)如下:
- varshell=newActiveXObject('WScript.Shell')
- shell.SendKeys('{F11}');
Frame的隱藏方法當(dāng)然有很多,就不詳細(xì)介紹了。
缺點(diǎn):
這種方式需要用戶修改IE的安全選項(xiàng),具體方法為:
- Tools>Internetoptions>Security>CustomLevel
- ActiveXcontrolsandplug-ins>InitializingandScriptActiveXcontrolsnotmarkedassafe>Enable
如果沒有將上面選項(xiàng)設(shè)置成Enable,那么會(huì)報(bào):automationservercan'tcreateobject錯(cuò)誤。
【編輯推薦】
- 解析Flex全屏模式設(shè)置方法
- Flex開發(fā)者必須知道的10件事
- 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
- 12個(gè)Flex常用功能代碼再現(xiàn)
- 學(xué)習(xí)筆記 Flex國際化如何支持其他語言