Flex導航設計與表單驗證

上傳人：7*** IP屬地：湖北上傳時間：2022-01-30 格式：DOC 頁數(shù)：16 大?。?21.50KB 積分：20 舉報 版權申訴

已閱讀5頁，還剩11頁未讀，繼續(xù)免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

1、Flex3界面導航設計教程博客分類：module可以延遲加載, 這樣在你的程序初始化的時候, 只需要加載MailFrame. FlexAdobeActionScriptXML一個導航容器可以通過一組子容器來監(jiān)控用戶的操作。比如，TabNavigator 這個容器就可以通過一組tabs 來讓用戶選擇可見的子容器。Flex3 提供了三種主要的導航容器：Ø ViewStackØ TabNavigatorØ Accordion接下來的時間逐個介紹每個容器的使用方法。1. ViewStack導航容器ViewStack 導航容器，以下簡稱VS 容器。是由很多子容器組合起來的

2、，這些子容器相互疊在彼此之上，并且在某一特定的時間內(nèi)只有一個容器是可見的或者說是Active 狀態(tài)的。VS 容器沒有定義 built-in 的機制來切換當前處于active 狀態(tài)的容器，所以用戶需要使用像LinkBar,TabBar 或者ToggleButtonBar 這些控件，或者使用ActionScript 來更改當前可見容器的狀態(tài)。比你可以定義一系列的按鈕來控制所有子容器的切換動作。圖中左邊的圖片顯示VS 容器中第一個子容器是激活的，可以用索引的方法來表示VS 容器里面的子容器。比如0- （n-1 ）.創(chuàng)建一個VS 容器使用標記就可以定義一個VS 容器，當然還可以設定很多屬性了：

3、16; selectedIndex表示如果VS 容器里里面有多余一個的子容器，那么selectedIndex 的值所對應的那個子容器就是active 的可見的。其取值范圍0 到n-1.n 代表子容器的個數(shù)。Ø selectedChild當前激活的容器當定義了一個或者多個子容器，如果沒有定義子容器，其值為null 。并且這個屬性必須是現(xiàn)在AS 當中指定你要激活的那個容器的id.Ø numChildren值VS 容器當中到底有多少個子容器。舉例：我們試圖增加一些特效。Xml代碼 1 2 > 3 id="myWU" duration="300&

4、quot; /> 4 id="myWD" duration="300" /> 5 id="myWR" duration="300" /> 6 7 dataProvider="myViewStack" 8 borderStyle="solid" 9 backgroundColor="#EEEEFF"/> 10 id="myViewStack" 11 borderStyle="solid" 12

5、width="100%" 13 creationCompleteEffect="myWR"> 14 id="search" 15 label="Search" 16 hideEffect="myWD" 17 showEffect="myWU"> 18 text="Search Screen" /> 19 20 id="custInfo" 21 label="Customer Info" 22 hid

6、eEffect="myWD" 23 showEffect="myWU"> 24 text="Customer Info" /> 25 26 id="accountInfo" 27 label="Account Info" 28 hideEffect="myWD" 29 showEffect="myWU"> 30 text="Account Info" /> 31 32 33 34 效果圖：2. TabNaviga

7、tor導航容器TabNavigator容器用來創(chuàng)建和管理一組tabs ，這些tabs 可以幫用戶導航選擇需要的子容器板塊。創(chuàng)建TabNavigator 容器你可以通過標記來定義個TabNavigator容器。用戶可以通過tab 選擇對應的板塊容器。當用戶改變當前容器時， TabNavigator 容器都會觸發(fā)一個change 事件。TabNavigator 容器會自動為每一個子容器創(chuàng)建一個tab, 并且通過label 屬性設定tab 里面的值。當然你可以指定圖片等。用戶還可以設定enable disable 屬性來決定那個容器可用與否。舉例：Xml代碼 35 version="1.

8、0"?> 36 > 38 id="myWL" /> 39 40 label="Accounts" 41 width="300" 42 height="150" 43 showEffect="myWL"> 44 45 text="This is a text control." /> 46 47 label="Stocks" 48 width="300" 49 height="150&qu

9、ot; 50 showEffect="myWL"> 51 52 text="This is a text control." /> 53 54 label="Futures" 55 width="300" 56 height="150" 57 showEffect="myWL"> 58 59 text="This is a text control." /> 60 61 62 效果如圖：TabNavigator 支持鍵盤導航功能，即

10、可以通過鍵盤來選擇tabs. 具體可以參考development guide.3. Accordion導航容器窗體是很常見的容器了，可是有時候組件很多一個窗體放不下，accordion 就提供了一個可以來回移動的窗體。這個容器可以包含一系列的子panels 。但是任意時刻都只有一個panel 是可見的。創(chuàng)建Accordion 容器你可以使用標記來創(chuàng)建這個容器。舉例說明：Xml代碼 63 version="1.0"?> 64 65 66 height="600" 67 creationComplete="setButtonStyles(;

11、"> 68 69 <span style="font-family:Symbo

12、l;TimesNewRoman;color:#2B91AF;font-size:14px;">70 public function setButtonStyles(:void &

13、lt;/span>71<span style="font-family:Symbol;Times

14、NewRoman;color:#2B91AF;font-size:14px;"> comp.getHeaderAt(0.setStyle('color', 0xAA0000; <p style="font-family:Monaco;margin-left:24px;border-left:1pxsolid#D

15、1D7DC;background:#auto;text-align:left;">72 <span style="font-family:Mon

16、aco;color:#000000;background:#FAFAFA;"> comp.getHeaderAt(1.setStyle('color', 0x00AA00; <span style="font-family:Symbol;TimesNewR

17、oman;color:#2B91AF;font-size:14px;">73 <p style="font-fami

18、ly:Monaco;margin-left:24px;border-left:1pxsolid#D1D7DC;background:#auto;text-align:left;">74

19、 75 76 id="comp" height="250" > 77 id="shippingAddress" label="1. Shipping Address" > 78 id="sfirstNameItem" label="First Name" > 79 id

20、="sfirstName" /> 80 81 82 id="billingAddress" label="2. Billing Address" > 83 id="backButton" label="Back" click="comp.selectedIndex=0;" /> 84 id="nextButton" label="Next" click="comp.selectedIndex=2;"

21、 /> 85 86 id="creditCardInfo" label="3. Credit Card Information" > 87 88 89 我們增加了一些效果。比如用戶通過按鈕可以選擇那個panel 是可見的。Xml代碼 90 id="lastButton" label="Last" click="accordion1.selectedIndex = accordion1.numChildren - 1;" /> 這段程序就可以打開最后一個 panel.同時還可以設

22、定每個 panels的外觀，包括字體、顏色等。ButtonBar和ToggerButtonBar和的效果圖一樣3. 動態(tài)控制對象的布局3.1 使用Tile 顯示多個按鈕Tile直接繼承Container，使用起來非常方便。適合重復排列的元素。direction 屬性值為 horizontal時，設置其子級對象的布局方向為水平方向。tileWidth 和 tileHeight 用來控制每個子級對象的長和寬。Xml代碼 1 version="1.0" encoding="utf-8"?> 2 > 3 4 5 18 19 id="hold

23、er" x="41" y="45" width="330" height="280" horizontalGap="2" 20 direction="horizontal" tileHeight="80" tileWidth="80"> 21 label="btn_1" height="50" width="75" /> 22 label="bt

24、n_2" height="50" width="75" /> 23 label="btn_3" height="50" width="75" /> 24 label="btn_4" height="50" width="75" /> 25 label="btn_5" height="50" width="75" /> 26 label=&quo

25、t;btn_6" height="50" width="75" /> 27 label="btn_7" height="50" width="75" /> 28 label="btn_8" height="50" width="75" /> 29 label="btn_9" height="50" width="75" /> 30 31 x=&

26、quot;266" y="340" label=" 增加一個按鈕 " fontSize="12" click="addItem(" /> 32 3.2 更強大的 Grid組件Grid 繼承自Box，類似于HTML中的表格，由行和單元格組成。單元格中可以包含其他元素。行必須為GridRow對象，每個單元格必須為GridItem對象。兩者繼承自HBox。colSpan 表示單元格所占的橫向格數(shù)，rowSpan 表示單元格所占的縱向行數(shù)。類似于HTML的Table。Xml代碼 33 version=&qu

27、ot;1.0" encoding="utf-8"?> 34 > 35 x="62" y="96" horizontalGap="2" > 36 width="100%" height="79" > 37 width="100%" height="100%" > 38 label="Button1" /> 39 40 width="100%" heigh

28、t="100%" colSpan = "2" > 41 label="Button2" height="60" /> 42 43 width="100%" height="100%" > 44 label="Button3" /> 45 label="Button4" /> 46 47 48 width="100%" height="79" > 49 width

29、="100%" height="100%" > 50 label="Button" /> 51 52 width="100%" height="100%" > 53 label="Button" height="60" width="98" /> 54 55 width="112" height="100%" > 56 label="Button"

30、 width="41" height="55" /> 57 label="Button" width="85" /> 58 59 60 61 4. 方便的導航容器導航類允許用戶在其子級元素之間卻換，但必須是容器類型，單我們可以在子級容器中圈套其他容器和組件。4.1 Accordion 組件Accordion 是一個可折疊的導航器，包含一個子面板列表，但一次僅顯示一個面板。selectedChild 和 selectedIndex 表示當前顯示的子元素和顯示元素的索引號，可以利用這兩個屬性來控制組件的顯示

31、內(nèi)容。如代碼中的tab_menu.selectedIndex = 1 表示卻換到第2個面板。Xml代碼 62 version="1.0" encoding="utf-8"?> 63 > 64 65 66 <p style="font-family:Monaco;margin-left:24p

32、x;border-left:1pxsolid#D1D7DC;background:#auto;">67 <span style="font-fa

33、mily:Monaco;color:#000000;background:#FAFAFA;"> internal function doSkip(:void <span style="font-family:Symbol;TimesNewRoman;color:#2B91AF;font-size:14p

34、x;">68 tab_menu.selectedIndex = 1; <p style="font-family:M

35、onaco;margin-left:24px;border-left:1pxsolid#D1D7DC;background:#auto;">69 <spa

36、n style="font-family:Monaco;color:#000000;background:#FAFAFA;"> <span style="font-family:Symbol;TimesNewRoman;color:#2B91AF;font-size:14px;"&g

37、t;70 71 72 73 id="tab_menu" x="57" y="67" width="194" hei

38、ght="270" fontSize="12" > 74 label="Item 1" width="100%" height="100%" > 75 text="Canvas1" /> 76 x="10" y="38" /> 77 78 79 label="Item 2" width="100%" height="100%" > 80 text=

39、" 這里插入內(nèi)容 " height="28" /> 81 82 83 label=" 請選擇性別 " /> 84 label=" 女 " /> 85 label=" 男 " /> 86 87 88 89 90 title=" 內(nèi)嵌的 Panel" label="Item 3" width="90%" height="90%" > 91 92 93 94 x="259"

40、 y="315" label=" 跳到第二個菜單 " fontSize="14" labelPlacement="right" click="doSkip(" /> 95 4.2 ViewStack 組件由若干重疊在一起的子容器組成，每次只有一個容器是可見或活動的。但它不為用戶提供卻換當前活動容器的界面接口，可以通過AS進行控制，或者和其他控制類容器聯(lián)合使用。如：LinkBar、TabBar、ButtonBar、ToggleButtonBar等。一般用來做向?qū)ь惖膽谩＞褪怯心欠N下一步下一

41、步的。selectedChild 表示當前處于激活狀態(tài)的子級對象。Xml代碼 96 version="1.0" encoding="utf-8"?> 97 > 98 99 &

42、lt;span style="font-family:Helvetica;color:#000000;background:#EFEFEF;">100 internal function doChange(:void

43、101 <span

44、 style="font-family:Monaco;font-size:12px;"> if(viewstack_1.selectedChild = child2 102<span sty

45、le="font-family:Helvetica;color:#000000;background:#EFEFEF;"> viewstack_1.selectedChild = child1; <span style="

46、;font-family:Helvetica;color:#000000;background:#EFEFEF;">103 else <p style="font-f

47、amily:Helvetica;background:#auto;">104 <span style="font-family:Monaco;font-size:12px;

48、"> viewstack_1.selectedChild = child2; 105<span style="font-family:Helvetica;color:#000000;back

49、ground:#EFEFEF;"> 106<

50、;span style="font-family:Helvetica;color:#000000;background:#EFEFEF;"> <span style="font-family:Helvetica;colo

51、r:#000000;background:#EFEFEF;">107 108 109 x="46" y="72" id="viewstack_1" width=&quo

52、t;200" height="200" > 110 id="child1" label="View 1" width="100%" height="100%" > 111 fontSize="12" > 112 113 label=" 請選擇您感興趣的技術： " /> 114 label="Flash" /> 115 label="Flex" /> 116 label=&

53、quot;Flash Media server" /> 117 label="Breeze" /> 118 119 120 121 id="child2" label="View 2" width="100%" height="100%" > 122 text=" 請輸入您的郵箱地址 " fontSize="12" /> 123 124 125 x="46" y="304" labe

54、l=" 切換按鈕 " fontSize=" 12" click="doChange(" /> 126 4.3 使用 TabNavigator 進行快速導航繼承自ViewStack，還提供了用戶卻換內(nèi)容的界面接口。類似標簽頁卻換面板。Xml代碼 127 version="1.0" encoding="utf-8"?> 128 > 129 x="70" y="91" width="200" height="200

55、" > 130 label="Tab 1" width="100%" height="100%" > 131 x="10" y="31" label=" 選中我 " fontSize="12" /> 132 133 134 label="Tab 2" width="100%" height="100%" > 135 x="20" y="

56、;41" text=" 第二個面板 " fontSize="12" /> 136 137 138 139 5. 表單布局Flex提供了一套表弟組件，讓我們可方便的構建復雜的表單程序。Form容器是表單功能組件中的主要成員，繼承自Container，相關的組件還有FormItem 和 FormHeading。5.1 簡單的用戶輸入表單FormHeading 表示表弟標題，這里也可以放置頂部的導航控制。FormItem 可以容納多個組件，且組件的布局方向有 horizontal 和 vertical。FormItem 還有一個屬性required 表示本欄的值是否為空。5.2 表單驗證最后添加了5個驗證對象，分別針對不同的組件，他們的source屬性表示目標對象：StringValidator 字符驗證，property="text " 為文本屬性，minLength 和 maxLength 表示字符最短長度和最長長度。tooShortError 提示信息。PhoneNumberValidator 電話號碼驗證DataValidator 日期驗證EmailValidator 郵箱驗證Xml代碼 140 version

人人文庫> 全部分類> 教育資料 > 輔導培訓

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

Flex導航設計與表單驗證

文檔簡介

溫馨提示

最新文檔

評論

Flex導航設計與表單驗證

文檔簡介

溫馨提示

最新文檔

評論

相關文檔