FlexʹÓÃ×é¼þ´¦ÀíÊý¾ÝºÍ½»»¥µ¼º½Àà×é¼þ(2)

1.9 Tree Ò»¸öʹÓÃXML×÷ΪTree×é¼þÊý¾ÝÔ´µÄСÀý×Ó

Ê÷ÐÍ×é¼þ£¬ÊÇList ±äÒìºóµÄ²úÎï¡£ÔÚÏÔʾÊý¾Ýʱ±£ÁôÁ˲㼶½á¹¹£¬Ã¿¸öÔªËض¼ÊÇÒ»¸ö·ÖÖ§»òÕßÒ¶×Ó£¬·ÖÖ§°üº¬ÆäËû·ÖÖ§»òÒ¶×Ó£¬Ò¶×Ó²»¿ÉÔÙ·Ö¡£

½á¹¹ºÍXMLÒ»Ñù£¬ËùÒÔÓÃXML ×÷ΪTreeµÄÊý¾ÝÔ´ÔÙÊʺϲ»¹ýÁË¡£

?

treeµÄʼþ£º

change ÔÚÑ¡ÖÐÁиıäʱ´¥·¢¡£

itemClick µã»÷ijһÁÐʱ±»´¥·¢¡£

itemOpen ¡¢itemClose ÔÚ½ÚµãÕ¹¿ªºÍ¹Ø±Õʱ´¥·¢¡£

?

ÊôÐÔ£º

labeField ±íʾÏÔʾµÄÎı¾Ëù¶ÔÓ¦µÄXML×ֶΣ¬ÕâÀïµÄֵΪ@label £¬

@ ·ûºÅ±íʾºóÃæµÄÃû×ÖÊÇXML½ÚµãµÄÊôÐÔÃû£¬ÊÇAS3 ÖеÄXMLÊý¾ÝµÄרÓñí´ï·½Ê½¡£

@label Ö¸µÃÊÇfolder ½ÚµãÖеÄlabel ÊôÐÔ¡£

?

change="treeChanged(event) ½Úµã¸Ä±äʼþ

ÔÚtreeChanged ¼àÌýº¯ÊýÖУ¬Í¨¹ýTree µÄselectedItem ÊôÐԵõ½µ±Ç°±»Ñ¡ÖнڵãµÄXML Êý¾Ý¡£

Tree(event.target) Ç¿Öƽ« event.target ת»»³É Tree ÀàÐÍ¡£event.target ´ú±íµÄ¾ÍÊÇTree¡£

as ²Ù×÷·û ÊÇÀàÐÍת»»·û£¬ÓÃÀ´½«selectedItem µÄֵת»»ÎªXML ÀàÐÍ¡£Èç¹ûÀàÐÍÆ¥Åä·µ»Ø¸ÃÀàÐ͵ÄÖµ£¬·ñÔò·µ»Ønull ¡£

?

itemClick="clickItem(event)" µ¥»÷½Úµãʼþ

ÆäʵitemClick ʼþ°üÀ¨ÁËchange ʼþ£¬Òò´ËtreeChanged ²¢²»»á±»Ö´ÐС£

Xml´úÂë

1. ??
2. <mx:application?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?layout="absolute" ?fontsize="12">????<mx:script>??
3. ????????
4. ????????????import?mx.events.TreeEvent; ?
5. ????????????import?mx.events.ListEvent ?
6. ???????????? ?
7. ????????????public?var?selectedNode:XML; ?
8. ????????????// ?
9. ????????????public?function?treeChanged(event:Event):void?{ ?
10. ????????????????selectedNode=Tree(event.target).selectedItem?as?XML;???????????????? ?
11. ????????????????//res_txt.text?=?"Ñ¡ÔñµÄÎļþ¼Ð£º"+selectedNode.@label ?
12. ????????????} ?
13. ????????????internal?function?clickItem(evt:ListEvent):void{ ?
14. ????????????????res_txt.text?=?"µã»÷µÄ½Úµã£º"+evt.rowIndex ?
15. ????????????} ?
16. ????????????internal?function?openItem(evt:TreeEvent):void{ ?
17. ????????????????res_txt.text?=?"´ø¿ªµÄ½Úµã£º"+evt.item ?
18. ????????????} ?
19. ????????????internal?function?closeItem(evt:TreeEvent):void{ ?
20. ????????????????res_txt.text?=?"¹Ø±ÕµÄ½Úµã£º"+evt.item ?
21. ????????????} ?
22. ????????]]>??
23. ????</mx:script>??
24. ????<mx:xmllist?id="files">??
25. ????????<folder?label="c:">??
26. ????????????<folder?label="my?documents">??
27. ????????????????<folder?label="adobe">??
28. ????????????</folder>??
29. ????????????<folder?label="windows">??
30. ????????????????<folder?label="soft">??
31. ????????????????<folder?label="drive">??
32. ????????????</folder>??
33. ????????????<folder?label="image">??
34. ????????????<folder?label="music">??
35. ????????</folder>???? ??
36. ????</mx:xmllist>??
37. ????<mx:tree?id="mytree"?width="165"?height="265"?labelfield="@label"?itemrenderer="nodeitem"??< li="">
38. ????????????????showRoot="true"?dataProvider="{files}"?itemClick="clickItem(event)"?itemOpen="openItem(event)"?itemClose="closeItem(event)"?change="treeChanged(event)"?x="38"?y="40"/>??
39. ????<mx:textarea?id="res_txt"?x="211"?y="40"?height="197">? ??
40. </mx:application>??

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontsize="12"> <mx:script> </mx:script> <mx:xmllist id="files"> <folder label="C:"> <folder label="My Documents"> <folder label="Adobe"> </folder> <folder label="Windows"> <folder label="soft"> <folder label="drive"> </folder> <folder label="Image"> <folder label="Music"> </folder> </mx:xmllist> <mx:tree id="myTree" width="165" height="265" labelfield="@label" itemrenderer="nodeItem" showroot="true" dataprovider="{files}" itemclick="clickItem(event)" itemopen="openItem(event)" itemclose="closeItem(event)" change="treeChanged(event)" x="38" y="40"> <mx:textarea id="res_txt" x="211" y="40" height="197"> </mx:application>?

Tree ĬÈϲÉÓõÄitemRendererÊÇ mx.controls.treeClasses °üÖеÄTreeItemRenderer Àà¡£½Ó×ÅÎÒÃÇÀ´À©Õ¹Ê¹ÓÃËü¡£

data ·½·¨ÊÇ itemRenderer »ñµÃÊý¾ÝµÄºËÐÄ·½·¨£¬ÖØдÕâ¸ö·½·¨£¬²¢¼òµ¥ÐÞ¸ÄÁ˽ڵãÎÄ×ÖµÄÑÕÉ«¡£

Xml´úÂë

1. package ??
2. { ??
3. ????import?mx.controls.treeClasses.*; ??
4. ????import?mx.collections.*; ??
5. ???? ??
6. ??
7. ????public?class?nodeItem?extends?TreeItemRenderer ??
8. ????{ ??
9. ????????//??????? ??
10. ????????public?function?nodeItem()?{ ??
11. ????????????super(); ??
12. ????????} ??
13. ????????//ÕâÊǽÓÊÕÍⲿÊý¾ÝµÄºËÐÄ·½·¨??????? ??
14. ????????override?public?function?set?data(value:Object):void?{ ??
15. ????????????super.data?=?value; ??
16. ????????????//ÅжÏÊÇ·ñ»¹ÓÐ×ӽڵ㣬²ÉÓò»Í¬µÄÑÕÉ«ºÍ×ÖÑù ??
17. ????????????if(TreeListData(super.listData).hasChildren) ??
18. ????????????{ ??
19. ????????????????setStyle("color",?0x006699); ??
20. ????????????????setStyle("fontWeight",?'bold'); ??
21. ????????????} ??
22. ????????????else ??
23. ????????????{ ??
24. ????????????????setStyle("color",?0x000000); ??
25. ????????????????setStyle("fontWeight",?'normal'); ??
26. ????????????}?? ??
27. ????????} ??
28. ????} ??
29. }??

package{ import mx.controls.treeClasses.*; import mx.collections.*; public class nodeItem extends TreeItemRenderer { // public function nodeItem() { super(); } //ÕâÊǽÓÊÕÍⲿÊý¾ÝµÄºËÐÄ·½·¨ override public function set data(value:Object):void { super.data = value; //ÅжÏÊÇ·ñ»¹ÓÐ×ӽڵ㣬²ÉÓò»Í¬µÄÑÕÉ«ºÍ×ÖÑù if(TreeListData(super.listData).hasChildren) { setStyle("color", 0x006699); setStyle("fontWeight", 'bold'); } else { setStyle("color", 0x000000); setStyle("fontWeight", 'normal'); } } }}?

1.10 TileList ºÍ HorizontalList

TileList ºÍ ÈÝÆ÷Tile ûÓÐÁªÏµ£¬²»¹ýÁ½ÕßʵÏÖµÄЧ¹û»ù±¾ÏàËÆ£¬¶¼ÊDzÉÓÿéµÄÐÎʽ²¼¾Ö¡£TileList = Tile + List

columnCount ÊôÐÔÓÃÀ´É趨ÿÐÐÏÔʾµÄÔªËظöÊý£¬×é¼þ¸ù¾ÝÿÐеĸöÊý×Ô¶¯¼ÆËã³öÔªËصÄλÖá£

Xml´úÂë

1. ??
2. <mx:application?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?layout="absolute">??
3. ????<mx:style?source?="style.css">??
4. ????<mx:model?id="images">??
5. ??????<image>??
6. ????????<item?label="ͼƬ1"?data="images baby01.gif"=""/>??
7. ????????<item?label="ͼƬ2"?data="images baby02.gif"=""/>??
8. ????????<item?label="ͼƬ3"?data="images baby03.gif"=""/>??
9. ????????<item?label="ͼƬ4"?data="images baby04.gif"=""/>??
10. ????????<item?label="ͼƬ5"?data="images baby01.gif"=""/>??
11. ????????<item?label="ͼƬ6"?data="images baby02.gif"=""/>??
12. ????????<item?label="ͼƬ7"?data="images baby03.gif"=""/>??
13. ????????<item?label="ͼƬ8"?data="images baby04.gif"=""/>??
14. ??????</image>??
15. ????</mx:model>??
16. ????<mx:tilelist?itemrenderer="imageitem"?x="29"?y="49"?height="196"?columncount="3"?dataprovider="{images.item}">??
17. ????</mx:tilelist>???? ??
18. </mx:application>??

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:style source="style.css"> <mx:model id="images"> <image> <item label="ͼƬ1" data="images/Baby01.gif"> <item label="ͼƬ2" data="images/Baby02.gif"> <item label="ͼƬ3" data="images/Baby03.gif"> <item label="ͼƬ4" data="images/Baby04.gif"> <item label="ͼƬ5" data="images/Baby01.gif"> <item label="ͼƬ6" data="images/Baby02.gif"> <item label="ͼƬ7" data="images/Baby03.gif"> <item label="ͼƬ8" data="images/Baby04.gif"> </image> </mx:model> <mx:tilelist itemrenderer="ImageItem" x="29" y="49" height="196" columncount="3" dataprovider="{images.item}"> </mx:tilelist> </mx:application>

?

´´½¨itemRenderer À´¶¨Òåÿ¸öÔªËصĽçÃæ¡£

data.data¶ÔÓ¦Êý¾ÝÔ´ÖÐitem.data

data.label¶ÔÓ¦Êý¾ÝÔ´ÖÐitem.label

Xml´úÂë

1. ??
2. <mx:vbox?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?width="98" ?height="64" ?horizontalalign="center">??
3. ????<mx:image?width="32"?height="32"?source="{data.data}">??
4. ????<mx:button?x="38"?y="40"?label="{data.label}">??? ??
5. </mx:vbox>??

<mx:vbox xmlns:mx="http://www.adobe.com/2006/mxml" width="98" height="64" horizontalalign="center"> <mx:image width="32" height="32" source="{data.data}"> <mx:button x="38" y="40" label="{data.label}"> </mx:vbox>?

1.11 Îı¾´¦Àí

Îı¾´¦Àí×é¼þ£º

Text£º ¿ÉÒÔʹÓÃHTML²»¹ýÒª½èÖúhtmlText ±êÇ©»ò htmlText ÊôÐÔ¡£²åÈëHTML´úÂëʱÐèҪʹÓÃCDATA±êÇ©¡£

TextArea£º editableÊôÐÔΪtrueʱ£¬Ï൱ÓÚÒ»¸öÖ§³Ö¶àÐеÄTextInput¡£Ö§³ÖHTMLºÍÄÚÖùö¶¯Ìõ¡£

TextInput ºÍ RichTextEditor ÒÔ¼° Label

?

Xml´úÂë

1. ??
2. <mx:application?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?layout="absolute">??
3. ???? ??
4. ????<mx:style>??
5. ????????Application{ ??
6. ????????????fontSize:12;???? ??
7. ????????????backgroundGradientColors:?#c0c0c0,?#c0c0c0; ??
8. ????????} ??
9. ????</mx:style>??
10. ??
11. ????<mx:text?x="51"?y="56"?width="253"?height="23"?text="¼òµ¥Îı¾">??
12. ???? ??
13. ????<mx:textarea?x="51"?y="96"?text="Îı¾Çø"?editable="false"?width="172"?height="48">??
14. ????<mx:textinput?x="51"?y="171"?text="ÊäÈë¿ò"?displayaspassword="true">??
15. ??
16. ????<mx:text?width="253"?height="96"?x="51"?y="226">??
17. ????????<mx:htmltext>??
18. ????????????HTMLÎı¾?Ö§³Öhtml±êÇ©<img?src="images baby01.gif"=""/>...??]]>??
19. ????????</mx:htmltext>??
20. ????</mx:text>??
21. </mx:application>??

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:style> Application{ fontSize:12; backgroundGradientColors: #c0c0c0, #c0c0c0; } </mx:style> <mx:text x="51" y="56" width="253" height="23" text="¼òµ¥Îı¾"> <mx:textarea x="51" y="96" text="Îı¾Çø" editable="false" width="172" height="48"> <mx:textinput x="51" y="171" text="ÊäÈë¿ò" displayaspassword="true"> <mx:text width="253" height="96" x="51" y="226"> <mx:htmltext> HTMLÎı¾ Ö§³Öhtml±êÇ©... ]]> </mx:htmltext> </mx:text></mx:application>?

1.12 Ò»¸öÇ¿ÓÐÁ¦µÄ×é¼þ -- RichTextEditor

ËüʵÏÖÁËHTMLËùÓй¦ÄÜ¡£

ÊÇÒ»¸ö¼¯³ÉÁËÎı¾´¦Àí¹¦ÄܵÄPanel×é¼þ£¬Ö÷Òª°üÀ¨£ºTextArea Îı¾Çø ºÍ ¿ØÖÆÎÄ×Ö¸ñʽµÄÈÝÆ÷¡£

ÔÚÈÝÆ÷ÖаüÀ¨ÁËÆäËûµÄ×é¼þ£¬Èç ×ÖÌåÑ¡ÔñµÄComboBox ¡¢Ñ¡ÔñÎı¾ÑÕÉ«µÄ ColorPicker ¡¢Ñ¡ÔñÎı¾¶ÔÆ뷽ʽµÄToggleButtonBar µÈµÈ¡£

Xml´úÂë

1. ??
2. <mx:application?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?layout="absolute" ?width="442" ?height="420">??
3. ????<mx:richtexteditor?x="10"?y="10"?width="403"?height="281"?id="myrich">??
4. ????</mx:richtexteditor>??
5. ????<mx:textarea?id="output_txt"?x="10"?y="309"?width="330"?height="101">??
6. ???? ??
7. ????<mx:button?x="348"?y="308"?label="²é¿´Îı¾"?click="output_txt.text=?myrich.text">??
8. ????<mx:button?x="348"?y="388"?label="html´úÂë"?width="70"?click="output_txt.text=?myrich.htmltext">??
9. ???? ??
10. </mx:application>??

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="442" height="420"> <mx:richtexteditor x="10" y="10" width="403" height="281" id="myRich"> </mx:richtexteditor> <mx:textarea id="output_txt" x="10" y="309" width="330" height="101"> <mx:button x="348" y="308" label="²é¿´Îı¾" click="output_txt.text= myRich.text"> <mx:button x="348" y="388" label="HTML´úÂë" width="70" click="output_txt.text= myRich.htmlText"> </mx:application>?

1.13 É豸×ÖÌåºÍǶÈë×ÖÌåµÄÓ¦ÓÃʵÀý

É豸×ÖÌ壺Óû§»úÆ÷ÉÏËùÓÐ×ÖÌ嶼×î´ó¿ÉÄܵØÄ£ÄâÆäÍâ¹Û£¬±£³ÖÎı¾µÄÑùʽ²»»á³öÏֽϴó±ä»¯¡£Ö§³ÖÈýÖÖÉ豸×ÖÌ壺_sans, _serif, _typewriter¡£

É豸×ÖÌå±ØÐëʹÓÃÒýºÅ""°üº¬¡£

?

ǶÈë×ÖÌ壺½«×ÖÌåÎļþ±àÒë½øSWFÎļþÖлòÕßÔËÐÐʱ¼ÓÔص½SWFÎļþÖУ¬¹©SWFÎļþʹÓᣲ¢Ê¹Îı¾¾ßÓп¹¾â³ÝÌØÐÔ£¬±ßÔµ¸üƽ»¬£¬Í¬Ê±Îı¾¿ÉÒÔÉèÖÃ͸Ã÷¶È£¬»¹¿ÉÒÔÐýת¡£È±µã¾ÍÊÇÔö¼Ó³ÌÐòµÄÎļþ´óС£¬×ÖÌåСÓÚ10ʱ¾ÍºÜÄѱæÈÏ¡£

Xml´úÂë

1. <mx:style>??
2. ????????@font-face?{ ??
3. ????????????src:local("Arial");?//ǶÈë×ÖÌålocal,±íʾ±¾»úϵͳÖеÄ×ÖÌå ??
4. ????????????src:url("./Arial.swf");?//Ö¸¶¨µÄ×ÖÌåÎļþµØÖ·£¬½«×ÖÌå·¿×ÓSWFÎļþÖУ¬È»ºó¼ÓÔØËü¡£ ??
5. ????????????fontFamily:?myFont;?//×ÖÌåµÄ±ðÃû£¬±ØÐ붨Òå ??
6. ????????????fontStyle:?normal;??//¿ÉÑ¡ÏĬÈÏnormal?Õý³££¬italic?бÌå?oblique?Çãб ??
7. ????????????fontWeight:?normal;?//¿ÉÑ¡ÏĬÈÏnormal?Õý³££¬bold?´ÖÌå?heavy?¼Ó±¶´ÖÌå ??
8. ????????????flashType:?true;??//¿ÉÑ¡ÏĬÈÏtrue£¬Ìí¼ÓÎı¾µÄ¶îÍâÐÅÏ¢£¬Ê¹µÃÎı¾¿¹¾â³Ý£¬Æ½»¬ÏÔʾ ??
9. ??
10. ???????????????????????//ÏÞÖÆǶÈëµÄ×Ö·û¡£×Ö·û±àÂë±ØÐë²ÉÓÃUnicode±ê×¼¡£ ??
11. ???????????????????????unicodeRange: ??
12. ????????????????U+0041-U+005A,?//´óд×ÖĸA-Z ??
13. ????????????????U+0061-U+007A,?//Сд×Öĸa-z ??
14. ????????????????U+0030-U+0039,?//Êý×Ö0-9 ??
15. ????????????????U+002E-U+002E,?//µã. ??
16. ????????} ??
17. ??
18. </mx:style>??

<mx:style> @font-face { src:local("Arial"); //ǶÈë×ÖÌålocal,±íʾ±¾»úϵͳÖеÄ×ÖÌå src:url("./Arial.swf"); //Ö¸¶¨µÄ×ÖÌåÎļþµØÖ·£¬½«×ÖÌå·¿×ÓSWFÎļþÖУ¬È»ºó¼ÓÔØËü¡£ fontFamily: myFont; //×ÖÌåµÄ±ðÃû£¬±ØÐ붨Òå fontStyle: normal; //¿ÉÑ¡ÏĬÈÏnormal Õý³££¬italic бÌå oblique Çãб fontWeight: normal; //¿ÉÑ¡ÏĬÈÏnormal Õý³££¬bold ´ÖÌå heavy ¼Ó±¶´ÖÌå flashType: true; //¿ÉÑ¡ÏĬÈÏtrue£¬Ìí¼ÓÎı¾µÄ¶îÍâÐÅÏ¢£¬Ê¹µÃÎı¾¿¹¾â³Ý£¬Æ½»¬ÏÔʾ //ÏÞÖÆǶÈëµÄ×Ö·û¡£×Ö·û±àÂë±ØÐë²ÉÓÃUnicode±ê×¼¡£ unicodeRange: U+0041-U+005A, //´óд×ÖĸA-Z U+0061-U+007A, //Сд×Öĸa-z U+0030-U+0039, //Êý×Ö0-9 U+002E-U+002E, //µã. }</mx:style>?

¶¨Òå×Ö·ûµÄ·½·¨Ò²¿ÉÒÔÔÚFlex SDK 2\frameworks\flex-config.xmlÖÐÌí¼ÓÏà¹ØÐÅÏ¢¡£

ÔÚ@font-faceÖоͿÉÒÔÕâÑùʹÓãºunicodeRange:"englishRange"

Xml´úÂë

1. <fonts>??
2. ????????<languages>??
3. ??????????<language-range>??
4. ????????????<lang>englishRange</lang>??
5. ????????????<range>U+0020-U+007E</range>??
6. ??????????</language-range>??
7. ????????</languages>??
8. </fonts>????

2. µ¼º½Àà×é¼þ

?

2.1 ToggleButtonBar µ¼º½°´Å¥×é

ToggleButtonBar ÊÇButtonBar µÄ×ÓÀ࣬ÔöÇ¿À´µ¼º½¹¦ÄÜ£¬¿ÉÒÔ³ÖÐø±£³Ö¿Í»§¶Ë״̬¡£

ͬʱÔÚ½çÃæÉ϶Ե±Ç°µÄÑ¡ÖÐ״̬×öÃ÷È·µÄ±êʶ¡£

?

toggleOnClick ÊôÐÔÖ¸Ã÷ÊÇ·ñ¿ÉÒÔͨ¹ýµ¥»÷È¡ÏûÑ¡ÖеÄ״̬¡£true£ºµ±Êó±êµ¥»÷ÒѾ­Ñ¡Öеݴťʱ£¬¸Ã°´Å¥»Ö¸´µ½Õý³£×´Ì¬¡£false£ºÔò²»»á»Ö¸´¡£

?

itemClick="btn_click_handler(event);" ¼àÌýÓû§µÄµ¥»÷¶¯×÷¡£

?

Xml´úÂë

1. ??
2. <mx:application?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?layout="absolute" ??<="" li="">
3. ?creationComplete="initUI()">??
4. ????<mx:style?source="style.css">??
5. ????<mx:script>??
6. ????????
7. ????????????//µ¼Èëµã»÷ʼþ¶ÔÏó ?
8. ????????????import?mx.events.ItemClickEvent;???????? ?
9. ????????????internal?function?initUI():void{ ?
10. ????????????????var?data_arr:Array?=?new?Array(); ?
11. ????????????????data_arr.push("<span?class=hilite1>Flex"); ?
12. ????????????????data_arr.push("Flash"); ?
13. ????????????????data_arr.push("Flash?Media?Server"); ?
14. ????????????????data_arr.push("<span?class=hilite1>Flex?Data?Server"); ?
15. ????????????????//Ìí¼ÓÊý¾ÝÔ´ ?
16. ????????????????btns.dataProvider?=?data_arr; ?
17. ????????????} ?
18. ????????????//´¦ÀíitemClickµã»÷ʼþ ?
19. ????????????internal?function?btn_click_handler(evt:ItemClickEvent):void{ ?
20. ????????????????tip_txt.text?=?"µã»÷µÄ°´Å¥£º"+evt.index+":"+evt.label; ?
21. ????????????} ?
22. ????????]]>??
23. ????</mx:script>??
24. ????<mx:togglebuttonbar?toggleοnclick="true"?id="btns"?itemclick="btn_click_handler(event);"? ??<="" li="">
25. horizontalGap="5"?x="22"?y="82">??
26. ????</mx:togglebuttonbar>??
27. ???? ??
28. ????<mx:label?id="tip_txt"?text="»¹Ã»Óеã»÷ÄØ"?x="22"?y="126"?width="266">??
29. ???? ??
30. </mx:application>??

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" ?creationcomplete="initUI()"> <mx:style source="style.css"> <mx:script> </mx:script> <mx:togglebuttonbar toggleοnclick="true" id="btns" itemclick="btn_click_handler(event);" horizontalgap="5" x="22" y="82"> </mx:togglebuttonbar> <mx:label id="tip_txt" text="»¹Ã»Óеã»÷ÄØ" x="22" y="126" width="266"> </mx:application>

?

2.2? TabBar ±êÇ©×é

TabBar ÔÚToggleButtonBar µÄ»ù´¡ÉϼÌÐøÀ©Õ¹£¬¸Ä±äÁ˶ÔÑ¡ÖÐ״̬µÄ±íÏÖÐÎʽ£¬½«Ñ¡ÖÐÏîÒÔ±êÇ©µÄÐÎʽͻ³öÏÔʾ£¬Õâµã¸úTabNavigator Ïàͬ£¬²»¹ýËü²»°üÀ¨ÆäËû×Ó¼¶ÈÝÆ÷¡£

¿ÉºÍÈκÎ×é¼þ½áºÏʹÓ㬶ø²»½ö½öÏÞÓÚÈÝÆ÷¡£

TabBar ±¾ÉíÖ»°üÀ¨ÁËÒ»×é±êÇ©£¬Ã»ÓÐÆäËûÄÚÈÝ¡£

myViewstack.selectedIndex = evt.index;

½«TabBar µÄ°´Å¥Ë÷ÒýºÍViewStack µÄ±»Ñ¡ÖÐÔªËصÄλÖùØÁªÆðÀ´¡£

Xml´úÂë

1. ??
2. <mx:application?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?layout="absolute">??
3. ???? ??
4. ????<mx:style?source="style.css">??
5. ????<mx:script>??
6. ????????
7. ???????? ?
8. ????????????import?mx.events.ItemClickEvent;???????? ?
9. ???????? ?
10. ????????????internal?function?btn_click_handler(evt:ItemClickEvent):void{ ?
11. ????????????????myViewstack.selectedIndex?=?evt.index; ?
12. ????????????} ?
13. ????????]]>??
14. ????</mx:script>??
15. ???? ??
16. ????<mx:panel?x="43"?y="10"?width="366"?height="310"?layout="absolute"?horizontalgap="0"?verticalgap="0"?title="tabbarʵÀý"?borderstyle="solid">??
17. ????<mx:tabbar?id="btns"?x="10"?y="10"?width="308"?itemclick="btn_click_handler(event)">??
18. ????????<mx:dataprovider>??
19. ????????????<mx:array>??
20. ????????????????<mx:string><span?class=hilite1>Flex</mx:string>??
21. ????????????????<mx:string>Flash</mx:string>??
22. ????????????????<mx:string>FMS</mx:string>??
23. ????????????????<mx:string>FDS</mx:string>??
24. ????????????</mx:array>??
25. ????????</mx:dataprovider>??
26. ????</mx:tabbar>??
27. ????<mx:viewstack?x="10"?y="40"?id="myviewstack"?width="308"?height="200">??
28. ????????<mx:canvas?id="child1"?label="view?1"?width="100%"?height="100%">??
29. ????????????<mx:list>??
30. ????????????????<mx:array>??
31. ????????????????????<mx:object?label="ÇëÑ¡ÔñÄú¸ÐÐËȤµÄ¼¼Êõ£º">?????????????????? ??
32. ????????????????????<mx:object?label="flash">??
33. ????????????????????<mx:object?label="<span?class=hilite1>Flex"/>??
34. ????????????????????<mx:object?label="flash?media?server">??
35. ????????????????????<mx:object?label="breeze">??
36. ????????????????</mx:array>??
37. ????????????</mx:list>??
38. ????????</mx:canvas>??
39. ????????<mx:canvas?id="child2"?label="view?2"?width="100%"?height="100%">??
40. ????????????<mx:textinput?text="ÇëÊäÈëÄúµÄÓÊÏäµØÖ·"?>??
41. ????????????<mx:button?x="168"?y="1"?label="¶©ÔÄflash?rss">??
42. ????????</mx:canvas>??
43. ????????<mx:canvas?id="child3"?label="view?3"?width="100%"?height="100%">??
44. ????????????<mx:label?text="fms?2.0.4·¢²¼ÁË"?>??
45. ????????</mx:canvas>??
46. ????????<mx:canvas?id="child4"?label="view?4"?width="100%"?height="100%">??
47. ????????????<mx:label?text="breeze"?>??
48. ????????</mx:canvas>??
49. ????</mx:viewstack>??
50. ????</mx:panel>??
51. ???? ??
52. </mx:application>??

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:style source="style.css"> <mx:script> </mx:script> <mx:panel x="43" y="10" width="366" height="310" layout="absolute" horizontalgap="0" verticalgap="0" title="TabBarʵÀý" borderstyle="solid"> <mx:tabbar id="btns" x="10" y="10" width="308" itemclick="btn_click_handler(event)"> <mx:dataprovider> <mx:array> <mx:string>Flex</mx:string> <mx:string>Flash</mx:string> <mx:string>FMS</mx:string> <mx:string>FDS</mx:string> </mx:array> </mx:dataprovider> </mx:tabbar> <mx:viewstack x="10" y="40" id="myViewstack" width="308" height="200"> <mx:canvas id="child1" label="View 1" width="100%" height="100%"> <mx:list> <mx:array> <mx:object label="ÇëÑ¡ÔñÄú¸ÐÐËȤµÄ¼¼Êõ£º"> <mx:object label="Flash"> <mx:object label="Flex"> <mx:object label="Flash Media server"> <mx:object label="Breeze"> </mx:array> </mx:list> </mx:canvas> <mx:canvas id="child2" label="View 2" width="100%" height="100%"> <mx:textinput text="ÇëÊäÈëÄúµÄÓÊÏäµØÖ·"> <mx:button x="168" y="1" label="¶©ÔÄFlash Rss"> </mx:canvas> <mx:canvas id="child3" label="View 3" width="100%" height="100%"> <mx:label text="FMS 2.0.4·¢²¼ÁË"> </mx:canvas> <mx:canvas id="child4" label="View 4" width="100%" height="100%"> <mx:label text="Breeze"> </mx:canvas> </mx:viewstack> </mx:panel> </mx:application>?

5.3 ʹÓò˵¥µ¼º½ -- ´´½¨Ò»¸ö¼òµ¥µÄ¶à¾Ã²Ëµ¥

ʹÓÃMenuBar ²Ëµ¥Ìõ×÷È«¾Öµ¼º½¡£

ÔÚʹÓÃAS ¶¨ÒåXML Êý¾Ýʱ£¬¿ÉÒÔʹÓû»Ðзû±£³ÖXMLÊý¾ÝµÄ¸ñʽ£¬Ö»ÒªXML µÄ±êÇ©ÕýÈ·£¬±àÒëÆ÷×Ô¶¯»áʶ±ð¡£

ÔÚnode ÔªËØÖÐµÄ enabled ÊôÐÔ ´ú±íÊÇ·ñ¿ÉÓã¬Ä¬ÈÏtrueΪ¿ÉÓã¬falseΪ²»¿ÉÓò˵¥Ïî±ä³É»ÒÉ«¡£

type ÊôÐÔ Îª separator ´ú±íÒ»¸ö·Ö¸îÏß¡£

?

XML ºÍ XMLList ¶¼ÊÇÓÃÀ´¶¨ÒåXML Êý¾Ý£¬²»Í¬µÄÊÇ£¬XMLList ÊǶà¸öXML Êý¾ÝµÄ¼¯ºÏ¡£

ÔÚÕâ¸öÀý×ÓÖУ¬mXMLÊÇXMLListÀàÐÍ£¬¸ù½Úµã±»ºöÂÔ£¬item ½Úµã±»½âÎöΪ¶ÀÁ¢µÄ XML Êý¾Ý¡£ item ½Úµã±ØÐëÓÐÒ»¸ö¸ù½Úµã£¬²»¿ÉºöÂÔ¡£

Xml´úÂë

1. ??
2. <mx:application?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?layout="absolute" ?creationcomplete="initApp()">??
3. ???? ??
4. ????<mx:style?source="style.css">???????????? ??
5. ????<mx:script>??
6. ????????
7. ????????????import?mx.controls.Alert;??????? ?
8. ????????????import?mx.events.MenuEvent; ?
9. ???????????? ?
10. ????????????private?var?mXML:XML?= ?
11. ????????????????<menu?label?=?"ϵͳ²Ëµ¥"> ?
12. ????????????????????<item?label="Îļþ"> ?
13. ????????????????????????<node?label="н¨»­°å"?data="new"> ?
14. ????????????????????????<node?label="Çå³ý»­°å"?data="clear"?enabled="false"> ?
15. ????????????????????????<node?type="separator"?> ?
16. ????????????????????????<node?label="Í˳öϵͳ"?data="logout"> ?
17. ????????????????????</item> ?
18. ????????????????????<item?label="°ïÖú"> ?
19. ????????????????????????<node?label="°ïÖú"?data="help"> ?
20. ????????????????????????<node?label="¹ØÓÚ×÷Õß"?data="about"> ?
21. ?????????????????????</item> ?
22. ????????????????; ?
23. ???????????? ?
24. ????????????internal?function?initApp():void{ ?
25. ????????????????//ΪMenuBarÌí¼ÓÊý¾ÝÔ´ ?
26. ????????????????myMenu.dataProvider?=?mXML; ?
27. ????????????????//¼àÌýMenuµÄµã»÷ʵ¼ù ?
28. ????????????????myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler); ?
29. ????????????} ?
30. ???????????? ?
31. ????????????internal?function?menuClickHandler(evt:MenuEvent):void{ ?
32. ????????????????Alert.show("Ñ¡Ôñ²Ëµ¥£º"+evt.item.@data,"ÌáʾÐÅÏ¢"); ?
33. ????????????} ?
34. ????????]]>??
35. ????</mx:script>??
36. ????<mx:vbox?width="100%"?height="100%">??
37. ????????<mx:canvas?stylename="windowbar"?width="100%">??
38. ????????????<mx:menubar?labelfield="@label"??height="30"?id="mymenu"?width="100%"></mx:menubar>? ??
39. ????????</mx:canvas>??
40. ????????<mx:canvas?width="100%"?height="100%"?id="paper">??
41. ???????????? ??
42. ????????</mx:canvas>?????????? ??
43. ????</mx:vbox>??
44. ???? ??
45. </mx:application>??

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationcomplete="initApp()"> <mx:style source="style.css"> <mx:script> <item label="Îļþ"> <node label="н¨»­°å" data="new"> <node label="Çå³ý»­°å" data="clear" enabled="false"> <node type="separator"> <node label="Í˳öϵͳ" data="logout"> </item> <item label="°ïÖú"> <node label="°ïÖú" data="help"> <node label="¹ØÓÚ×÷Õß" data="about"> </item> ; internal function initApp():void{ //ΪMenuBarÌí¼ÓÊý¾ÝÔ´ myMenu.dataProvider = mXML; //¼àÌýMenuµÄµã»÷ʵ¼ù myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler); } internal function menuClickHandler(evt:MenuEvent):void{ Alert.show("Ñ¡Ôñ²Ëµ¥£º"+evt.item.@data,"ÌáʾÐÅÏ¢"); } ]]> </mx:script> <mx:vbox width="100%" height="100%"> <mx:canvas stylename="windowBar" width="100%"> <mx:menubar labelfield="@label" height="30" id="myMenu" width="100%"></mx:menubar> </mx:canvas> <mx:canvas width="100%" height="100%" id="paper"> </mx:canvas> </mx:vbox> </mx:application>?

2.4 PopUpButton ÏÂÀ­µ¯³ö´°¿Ú¿Ø¼þ

PopUpButton ÊÇÒ»¸öÌØÊâµÄButton£¬ ±¾ÉíÓÉÁ½¸öButton×é³É£ºÖ÷°´Å¥ºÍ×Ó°´Å¥¡£µã»÷×Ó°´Å¥¿ÉÒÔ½«ÈκÎ×é¼þ×÷Ϊ´°¿Úµ¯³ö£¬ÖÃÓÚ×îÉϲ㡣Õâ¸öµ¯³ö¶¯×÷ÓÉ PopUpMenuButton Íê³É¡£

PopUpButton µÄopen ʼþºÍ close ʼþ£ºµ¯³öºÍµ¯³ö´°¿Ú¹Ø±Õʱ´¥·¢¡£

popUp ÊôÐÔ£º½«Òªµ¯³öµÄ¶ÔÏó¡£

DropdownEvent.CLOSE ºÍ DropdownEvent.OPEN ʼþרÃÅÕë¶Ôµ¯³ö´°¿Ú¡£µã»÷Ö÷°´Å¥£¬´¥·¢µÄʼþºÍButton ÊÇÒ»ÑùµÄ£¬±ÈÈçclick¡£

?

Xml´úÂë

1. ??
2. <mx:application?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?creationcomplete="initApp()" ?layout="absolute">??
3. ????<mx:style>??
4. ????????Application{ ??
5. ????????????fontSize:12; ??
6. ????????????backgroundGradientColors:?#c0c0c0,?#c0c0c0; ??
7. ????????} ??
8. ????</mx:style>??
9. ????<mx:script>??
10. ????????
11. ????????????import?mx.containers.Panel;????? ?
12. ????????????import?mx.controls.Alert;??? ?
13. ????????????import?mx.events.DropdownEvent; ?
14. ?
15. ????????????private?var?panel:Panel; ?
16. ?
17. ????????????private?function?initApp():void?{ ?
18. ????????????????panel?=?new?Panel();??//ÉùÃ÷еÄPanel ?
19. ????????????????panel.title?=?"panel"; ?
20. ????????????????panel.width?=?200; ?
21. ????????????????panel.height?=?200; ?
22. ????????????????popBtn.popUp?=?panel;???????????//Ö¸¶¨popUpÄ¿±ê¶ÔÏó??????? ?
23. ????????????????popBtn.addEventListener(DropdownEvent.CLOSE,closeHandler);??//?????????? ?
24. ????????????????popBtn.open();??????//½«´°¿Úµ¯³ö ?
25. ????????????}??????????? ?
26. ?
27. ???????????? ?
28. ????????????private?function?closeHandler(evt:DropdownEvent):void{ ?
29. ????????????????Alert.show("¹Ø±Õ´°¿Ú"); ?
30. ????????????} ?
31. ????????]]>??
32. ????</mx:script>??
33. ????<mx:popupbutton?id="popbtn"?label="µ¯³ö"?width="135"??x="23"?y="23">??
34. ???? ??
35. </mx:application>??

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" creationcomplete="initApp()" layout="absolute"> <mx:style> Application{ fontSize:12; backgroundGradientColors: #c0c0c0, #c0c0c0; } </mx:style> <mx:script> </mx:script> <mx:popupbutton id="popBtn" label="µ¯³ö" width="135" x="23" y="23"> </mx:application>?

2.5 PopUpMenuButton

¼Ì³Ð×ÔPopUpButton£¬ÊÇ PopUpButtonµÄÒ»¸öÌØÊâʵÀý¡£Ö»ÄÜ°ÑMenu µ±×÷µ¯³ö´°¿Ú£¬ÇÒMenu Ö»ÄÜÓÐ1¸ø²ã¼¶¡£

Menu ÓÃÀ´´´½¨²Ëµ¥£¬²»¹ýºÍ MenuÏà±È£¬ËüÉÙÁ˲˵¥Ìõ¡£ÇÒûÓжÔÓ¦µÄMXML±êÇ©£¬Ö»ÄÜÓÉ´úÂë´´½¨¡£

PopUpMenuButton ÖÐÄÚÖÃÁËÒ»¸öMenu ¡£

¶¨ÒåXML Êý¾Ý£¬½«Ëü´«¸ø PopUpMenuButton µÄ dataProvider £¬×÷ΪÄÚÖõÄMenu µÄÊý¾ÝÔ´¡£

MenuEvent.ITEM_CLICK ʼþ£ºµ±²Ëµ¥ÏѡÖÐʱ£¬Ê¼þ±»´¥·¢£¬Í¬Ê±²Ëµ¥¹Ø±Õ¡£

Xml´úÂë

1. ??
2. <mx:application?xmlns:mx="http: www.adobe.com="" 2006="" mxml"?creationcomplete="initApp()" ?layout="absolute">??
3. ????<mx:style>??
4. ????????Application{ ??
5. ????????????fontSize:12; ??
6. ????????????backgroundGradientColors:?#c0c0c0,?#c0c0c0; ??
7. ????????} ??
8. ????</mx:style>??
9. ????<mx:script>??
10. ????????
11. ????????????import?mx.controls.Alert;??? ?
12. ????????????import?mx.events.MenuEvent; ?
13. ???????????? ?
14. ????????????private?var?mXML:XMLList?= ?
15. ????????????????<> ?
16. ????????????????????<node?label="Îļþ"> ?
17. ????????????????????????<node?label="н¨»­°å"?data="new"> ?
18. ????????????????????????<node?label="Çå³ý»­°å"?data="clear"?enabled="false"> ?
19. ????????????????????????<node?label="Í˳öϵͳ"?data="logout"> ?
20. ????????????????????</node> ?
21. ????????????????????<node?label="¹¤¾ß">???????????????????????? ?
22. ????????????????????<node?label="°ïÖú"> ?
23. ????????????????????????<node?label="°ïÖú"?data="help"> ?
24. ????????????????????????<node?label="¹ØÓÚ×÷Õß"?data="about"> ?
25. ?????????????????????</node> ?
26. ????????????????; ?
27. ????????????private?function?initApp():void?{ ?
28. ????????????????popBtn.dataProvider?=?mXML;?//µ¯³ö²Ëµ¥µÄÊý¾ÝÔ´ ?
29. ????????????????popBtn.addEventListener(MenuEvent.ITEM_CLICK,clickHandler);? ?
30. ????????????}??????????? ?
31. ????????????private?function?clickHandler(evt:MenuEvent):void{ ?
32. ????????????????Alert.show("Ñ¡Ôñ²Ëµ¥£º"+evt.label+":²Ëµ¥ÐòºÅ£º"+evt.index); ?
33. ????????????} ?
34. ????????]]>??
35. ????</mx:script>??
36. ????<mx:popupmenubutton?id="popbtn"?labelfield="@label"?width="135"??x="23"?y="23">??
37. ???? ??
38. </mx:application>??