探索Flex和CSS的強(qiáng)大功能
本文和大家重點(diǎn)討論一下Flex和CSS的強(qiáng)大功能,本文提供了在Flex內(nèi)開始使用CSS所需的信息,也提供了在使用Flex設(shè)計(jì)和開發(fā)用戶界面時加速工作流的提示和技巧。
探索Flex和CSS的強(qiáng)大功能
利用已經(jīng)構(gòu)建到Adobe®Flex™框架內(nèi)的CSS的強(qiáng)大功能。本文提供了在Flex內(nèi)開始使用CSS所需的信息,也提供了在使用Flex設(shè)計(jì)和開發(fā)用戶界面時加速工作流的提示和技巧。
◆Flex最為強(qiáng)大的特性之一是其包含的極大的設(shè)計(jì)靈活性。這些靈活性大部分可歸功于Adobe用Flex實(shí)現(xiàn)CSS。以我為例,我最近為一個新的AdobeAIR™應(yīng)用程序擔(dān)任高級UI設(shè)計(jì)員,在我向全球160,000個用戶正式發(fā)布***個公開發(fā)布版的若干天前,我收到了大量設(shè)計(jì)更改請求。雖然很多開發(fā)人員都會將這些***一分鐘的請求看作是讓人頭痛的事,我卻能在不足20分鐘內(nèi)完成這些更改并將其放入版本控制,而這完全得益于Flex和CSS的強(qiáng)大功能。
我將CSS與Flex的使用看作是UI開發(fā)內(nèi)的一種利用形式。通過我在UI開發(fā)中積累的經(jīng)驗(yàn),我已經(jīng)學(xué)會了為一些必然性做預(yù)期和準(zhǔn)備。其中一個必然性是不管您在之前做了什么樣的計(jì)劃,項(xiàng)目的設(shè)計(jì)與功能需求都會在整個開發(fā)周期內(nèi)隨時發(fā)生變化。這是基于團(tuán)隊(duì)環(huán)境做大規(guī)模應(yīng)用程序開發(fā)時的游戲規(guī)則,要在游戲中取勝,***的方法就是預(yù)先判斷出所有玩家的動向,然后再提前相應(yīng)做好自己的定位。學(xué)會了靈活使用這個開發(fā)技巧后,您就可以立于不敗之地,那時再去擊打一個移動目標(biāo)就變得輕松多了。Flex的性能,比如與CSS的集成,恰巧可以讓您這么做,正是因?yàn)檫@一點(diǎn),我才迷上了用Flex進(jìn)行開發(fā)。
我的目標(biāo)是在您讀完本文后,您也能夠通過Flex去充分利用CSS的強(qiáng)大功能,并能作為一名精通FlexUI的開發(fā)者戰(zhàn)無不勝。如果您已經(jīng)是一個Flex愛好者,那么我希望您能通過本文學(xué)會新的通過Flex使用CSS的技巧—特別是對于企業(yè)級應(yīng)用程序。
為何要使用CSS?
大多數(shù)面向?qū)ο蟮脑O(shè)計(jì)模式都將設(shè)計(jì)邏輯與行為功能分離開來。由于AdobeActionScript™是一種面向?qū)ο蟮恼Z言,因此它也就自然而然地要遵守這些面向?qū)ο蟮木幊蹋∣OP)約定。這么做的好處包括靈活性、保持應(yīng)用程序易于維護(hù)、代碼重用和更好的性能。
在Web設(shè)計(jì)界,CSS是一種標(biāo)準(zhǔn),用來封裝組成Web站點(diǎn)的代碼??紤]到CSS的功能和成熟性,很多有經(jīng)驗(yàn)的Web設(shè)計(jì)人員都力求用CSS實(shí)現(xiàn)Web站點(diǎn)的設(shè)計(jì)和布局屬性。其結(jié)果是可以獲得對站點(diǎn)觀感的更多的控制和更好的靈活性。CSS在三、四年前就已經(jīng)十分流行,那時候Web開發(fā)人員開始意識到如果Web站點(diǎn)的設(shè)計(jì)能夠獨(dú)立于該站點(diǎn)的行為功能,那么站點(diǎn)的設(shè)計(jì)在不破壞或者不會對該站點(diǎn)的行為代碼產(chǎn)生負(fù)面影響的同時,可以很容易地被修改。這也推動了模板的迅速發(fā)展、對相同代碼庫的皮膚設(shè)置以及重新進(jìn)行皮膚設(shè)置。比如,我熱衷于為我的博客網(wǎng)站使用WordPress。有成千上萬的人都在使用相同的開源代碼庫來支撐其博客站點(diǎn),而很多時候,您遇到的站點(diǎn)都是構(gòu)建在WordPress之上的,而您卻往往察覺不到這一點(diǎn),這完全得益于其通過使用CSS對代碼和設(shè)計(jì)進(jìn)行的成功分離。
Flex內(nèi)的CSS
首先,對于具有Web設(shè)計(jì)背景的人,最為重要的是要理解FlexCSS并不遵循與W3CCSS規(guī)定相同的約定。在W3CCSS版本2.0中被用來分離單詞的連字符(-)并未用作Flex實(shí)現(xiàn)內(nèi)的代碼約定的一部分。相反,CSS的Flex實(shí)現(xiàn)使用了駝峰式大小寫。比如,W3CCSS2規(guī)范內(nèi)的vertical-center對等于FlexCSS內(nèi)的verticalCenter。如果您已經(jīng)在使用了駝峰式大小寫的編程語言內(nèi)進(jìn)行過編程,那么,這非常容易習(xí)慣。好的消息是CSS2.0規(guī)范內(nèi)可用的大部分內(nèi)容在FlexCSS實(shí)現(xiàn)內(nèi)也可用。并且,CSS的Flex實(shí)現(xiàn)是在CSS2.0W3C標(biāo)準(zhǔn)上的顯著擴(kuò)展,提供了額外的、對Flex組件惟一的樣式屬性。
【編輯推薦】
- 學(xué)習(xí)筆記 在Flex中如何使用CSS文件
- FlexBuilder4十大新特性閃亮登場
- Flex框架中Cairngorm和Mate的優(yōu)點(diǎn)大比拼
- FlexBuilder3.0與Eclipse3.4的***結(jié)合
- 解析Flex應(yīng)用開發(fā)步驟 新特性和技術(shù)框架