探討Flex設(shè)計(jì)理念 如何為Flex應(yīng)用程序設(shè)計(jì)界面布局
本文和大家重點(diǎn)討論一下 FlashPlayer安全性方面的問題以及Flex設(shè)計(jì)中如何為Flex應(yīng)用程序設(shè)計(jì)界面布局兩大部分內(nèi)容,希望本文的介紹能讓你有所收獲。
一、關(guān)于FlashPlayer安全性方面的問題
出于安全方面的考慮,在客戶端的FlashPlayer中運(yùn)行的應(yīng)用程序,只有在滿足如下條件之一的情況時(shí)才能訪問遠(yuǎn)程的數(shù)據(jù)源:
1.應(yīng)用程序所編譯的SWF文件與遠(yuǎn)程數(shù)據(jù)源位于同一個(gè)域中。
2.使用代理(proxy),并且你的SWF文件位于和代理相同的服務(wù)器上。AdobeFlexDataServices為Flex應(yīng)用程序提供了一個(gè)完整的代理管理系統(tǒng)。同時(shí),你還可以通過使用一種web腳本語言,如ColdFusion、JSP、PHP或者ASP來創(chuàng)建一個(gè)簡單的代理服務(wù)。
3.安裝crossdomain.xml(跨域策略/cross-domainpolicy)文件在數(shù)據(jù)源的宿主Web服務(wù)器上。crossdomain.xml文件允許位于其它域中的SWF文件對(duì)數(shù)據(jù)源的訪問。
二、Flex設(shè)計(jì)為Flex應(yīng)用程序設(shè)計(jì)界面布局
讓我們來詳細(xì)分析一下前面那個(gè)“SayHellotoFlex“的簡單例子,你可以通過設(shè)置組件的屬性值來控制Flex應(yīng)用程序的界面布局,就象如下所示:
- <?xmlversionxmlversion="1.0"encoding="utf-8"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
- <mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%">
- <mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"left="10"
- right="30"/>
- <mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/>
- </mx:Panel>
- </mx:Application>
許多容器組件都允許以絕對(duì)坐標(biāo)的方式創(chuàng)建布局,這就意義著你可以使用精確的x和y的坐標(biāo)來放置組件。你還可以對(duì)應(yīng)其父容器的相對(duì)位置來放置組件并約束它們,使它們?cè)趹?yīng)用程序的界面放大或縮小時(shí)仍然保持其彼此的位置。
在這個(gè)例子中,面板/Panel組件的布局屬性被設(shè)置為絕對(duì)值方式,同時(shí)所有容器的大小都被設(shè)置為應(yīng)用程序的百分之八十。兩個(gè)組件(TextArea和Button)被放置到距離面板容器邊界的特定象素位置上。
使用風(fēng)格和主題增強(qiáng)視覺方面的Flex設(shè)計(jì)
如果樣式/style的屬性值沒有被指定,它們將由整個(gè)程序中運(yùn)行的主題/theme來進(jìn)行控制。在默認(rèn)情況下,F(xiàn)lex應(yīng)用程序使用Halo主題(就象上面那個(gè)例子那樣)。當(dāng)然,你可以修改默認(rèn)的主題或者干脆自己創(chuàng)建一個(gè)。你還可以簡單地指定新的樣式定義來改變默認(rèn)的主題樣式,就象這樣:
- <?xmlversionxmlversion="1.0"encoding="utf-8"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
- <mx:Style>
- TextArea{
- font-size:36px;
- font-weight:bold;
- }
- </mx:Style>
- <mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%"x="122"y="24">
- <mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"left="10"right="30"/>
- <mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/>
- </mx:Panel>
- </mx:Application>
通過明確地為TextArea組件定義一個(gè)樣式,應(yīng)用程序現(xiàn)在看起來就會(huì)象這樣了:
在這個(gè)例子中,一種新樣式在MXML文件中的<mx:Style>標(biāo)簽里進(jìn)行了定義。如同我們前面所提到過的,你還可以通過修改主題或應(yīng)用新主題、使用一個(gè)外部CSS文件、或者設(shè)置單獨(dú)的樣式屬性來達(dá)到設(shè)置新樣式的目的。
將一個(gè)樣式單導(dǎo)入到MXML文件中,你需要添加如下的代碼:
- <mx:Stylesourcemx:Stylesource="styles.css"/>
【編輯推薦】
- 解析Flexbuilder4十大新特性
- 從Flex Builder更名看Flash平臺(tái)戰(zhàn)略
- Flex及FlexBuilder2.0開發(fā)環(huán)境詳解
- FlexBuilder3.0與Eclipse3.4的完美結(jié)合
- 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件