Flex/Âè2²óÊÙ¶¯²ñ Flex2³«È¯¥¬¥¤¥ÉÂè1Éô Âè2¾Ï MXML ¤Ç¤Î¥¢¥×¥ê¥±¡¼¥·¥ç¥ó³«È¯ http://www.ark-web.jp/sandbox/wiki/273.html
Flex/Âè2²óÊÙ¶¯²ñ Flex2³«È¯¥¬¥¤¥ÉÂè1Éô Âè2¾Ï MXML ¤Ç¤Î¥¢¥×¥ê¥±¡¼¥·¥ç¥ó³«È¯
¥Í¥¿ †
flex2_devguide.zip¤ÎÂè1Éô2¾Ï¤ÎÉôʬ¤ÎÊÙ¶¯²ñ¤ä¤ê¤Þ¤¹¡£
Æ°²è †
http://www.screencast.com/t/O59V9PAAfd
2¾Ï MXML ¤Ç¤Î¥¢¥×¥ê¥±¡¼¥·¥ç¥ó³«È¯ †
MXML¤È¤Ï †
- MXML¤ÏXML ¥Þ¡¼¥¯¥¢¥Ã¥×¸À¸ì
- ¥æ¡¼¥¶¡¼¥¤¥ó¥¿¡¼¥Õ¥§¥¤¥¹¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò¥ì¥¤¥¢¥¦¥È¤¹¤ë
- ¥µ¡¼¥Ð¡¼¾å¤Î¥Ç¡¼¥¿¥½¡¼¥¹¤Î´Ö¤Î¥Ç¡¼¥¿¥Ð¥¤¥ó¥Ç¥£¥ó¥°¤Ê¤É¡¢¥¢¥×¥ê¥±¡¼¥·¥ç¥ó¤ÎÈó¥Ó¥¸¥å¥¢¥ë¤Ê¦Ì̤òÀë¸ÀŪ¤ËÄêµÁ¤¹¤ë
- MXML ¤ÇÄêµÁ¤µ¤ì¤¿¥¢¥×¥ê¥±¡¼¥·¥ç¥ó¤Ï SWF ¥Õ¥¡¥¤¥ë¤Ë¥³¥ó¥Ñ¥¤¥ë¤µ¤ì¤Æ Adobe Flash Player ¤Ç¥ì¥ó¥À¥ê¥ó¥°¤µ¤ì¤ë
ñ½ã¤Ê¥¢¥×¥ê¥±¡¼¥·¥ç¥ó¤Îµ½Ò¡¢MXML ¤Î SWF ¥Õ¥¡¥¤¥ë¤Ø¤Î¥³¥ó¥Ñ¥¤¥ë †
"hello.mxml" <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application>
- ¥³¥ó¥Ñ¥¤¥ë
$ mxmlc --show-actionscript-warnings=true --strict=true hello.mxml ÀßÄê¥Õ¥¡¥¤¥ë "/usr/share/flex-sdk-2/frameworks/flex-config.xml" ¤ò¥í¡¼¥É¤·¤Æ¤¤¤Þ¤¹ /home/staff/shida/public_html/sandbox/flex2/2/hello.swf (131575 bytes)
- À¸À®¤µ¤ì¤ëswf
http://okra.ark-web.jp/~shida/sandbox/flex2/2/hello.swf
MXML ¥¿¥°¤È ActionScript ¥¯¥é¥¹¤Î´Ø·¸ †
- flex2¤Ï¡¢MXML¤ÈActionScript¸À¸ì¤ª¤è¤Ó¡¢ActionScript¤Ë¤è¤ë¥¯¥é¥¹¥é¥¤¥Ö¥é¥ê¤òÁȤ߹ç¤ï¤»¤Æ³«È¯¤¹¤ë
- MXML ¥¿¥°¤Ï ActionScript ¥¯¥é¥¹¤Þ¤¿¤Ï¥¯¥é¥¹¤Î¥×¥í¥Ñ¥Æ¥£¤ËÂбþ¤¹¤ë
- ActionScript Button ¥¯¥é¥¹ ==> <mx:Button label="Submit"/>
¥³¥ó¥Æ¥Ê¤ò»ÈÍѤ·¤¿¥æ¡¼¥¶¡¼¥¤¥ó¥¿¡¼¥Õ¥§¥¤¥¹¤Î¥ì¥¤¥¢¥¦¥È †
- ¥³¥ó¥È¥í¡¼¥ë
- ¥Ü¥¿¥ó¤ä¥Æ¥¥¹¥È¥Õ¥£¡¼¥ë¥É¡¢¥ê¥¹¥È¥Ü¥Ã¥¯¥¹¤Ê¤É¤Î¥Õ¥©¡¼¥à¥¨¥ì¥á¥ó¥È¤Ç¤¹¡£
- ¥³¥ó¥Æ¥Ê
- ¥³¥ó¥È¥í¡¼¥ë¤ä¾¤Î¥³¥ó¥Æ¥Ê¤ò¼ý¤á¤ë¤¿¤á¤Î¡¢²èÌ̾å¤Î¶ë·Á¤ÎÎΰè¤Ç¤¹¡£
- »Ò¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò¿åÊ¿¤Ë¥ì¥¤¥¢¥¦¥È¤¹¤ë¤¿¤á¤Î HBox ¥³¥ó¥Æ¥Ê
- »Ò¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò¿âľ¤Ë¥ì¥¤¥¢¥¦¥È¤¹¤ë¤¿¤á¤Î VBox¥³¥ó¥Æ¥Ê
- »Ò¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò¹Ô¤ÈÎó¤Ë¥ì¥¤¥¢¥¦¥È¤¹¤ë¤¿¤á¤Î Grid ¥³¥ó¥Æ¥Ê
- ¥Ê¥Ó¥²¡¼¥¿¥³¥ó¥Æ¥Ê¤ÎÎã
- ¥¿¥ÖÉÕ¤¥Ñ¥Í¥ë¤òºîÀ®¤¹¤ë¤¿¤á¤Î TabNavigator ¥³¥ó¥Æ¥Ê
- Àޤꤿ¤¿¤ß²Äǽ¤Ê¥Ñ¥Í¥ë¤òºîÀ®¤¹¤ë¤¿¤á¤Î Accordion ¥Ê¥Ó¥²¡¼¥¿¥³¥ó¥Æ¥Ê
- ¥Ñ¥Í¥ë¤ò½Å¤Í¤Æ¥ì¥¤¥¢¥¦¥È¤¹¤ë¤¿¤á¤ÎViewStack ¥Ê¥Ó¥²¡¼¥¿¥³¥ó¥Æ¥Ê
- Îã
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> <mx:HBox> <!-- 3 ¤Ä¤Î¥¢¥¤¥Æ¥à¤«¤é¤Ê¤ë¥ê¥¹¥È --> <mx:List> <mx:dataProvider> <mx:Array> <mx:String>Item 1</mx:String> <mx:String>Item 2</mx:String> <mx:String>Item 3</mx:String> </mx:Array> </mx:dataProvider> </mx:List> <!-- TabNavigator ¤Î 1 ÈÖÌܤΥڥ¤¥ó --> <mx:TabNavigator borderStyle="solid"> <mx:VBox label="Pane1" width="300" height="150"> <mx:TextArea text="Hello World"/> <mx:Button label="Submit"/> </mx:VBox> <!-- TabNavigator ¤Î 2 ÈÖÌܤΥڥ¤¥ó --> <mx:VBox label="Pane2" width="300" height="150"> <!-- ¥¹¥È¥Ã¥¯¥Ó¥å¡¼¤òÁÞÆþ¤¹¤ë --> </mx:VBox> </mx:TabNavigator> </mx:HBox> </mx:Panel> </mx:Application>
- ¤Ç¤¤ëswf
http://okra.ark-web.jp/~shida/sandbox/flex2/2/container_layout.swf
¥æ¡¼¥¶¡¼¥¤¥ó¥¿¡¼¥Õ¥§¥¤¥¹¥³¥ó¥È¥í¡¼¥ë¤ÎÄɲà †
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:HBox> <mx:TextInput id="myText"/> <mx:Button click="storeZipInDatabase(myText.text)"/> </mx:HBox> </mx:Application>
- TextInput¤¬¥³¥ó¥È¥í¡¼¥ë
- ¥×¥í¥Ñ¥Æ¥£
- id
- width
- height
- fontSize
- color¤Ê¤É
- ¥¤¥Ù¥ó¥È¥ê¥¹¥Ê¡¼
- click
- change ¤Ê¤É
- ¥¨¥Õ¥§¥¯¥È¥È¥ê¥¬
- showEffect
- rollOverEffect¤Ê¤É
- ¥×¥í¥Ñ¥Æ¥£
MXML ¥¿¥°¤Î id ¥×¥í¥Ñ¥Æ¥£¤Î»ÈÍÑ †
- id="myText"¤ÇÄêµÁ¤¹¤ë¤È¡¢ myText.text¤Î¤è¤¦¤Ë»²¾È¤Ç¤¤ë
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> ... <mx:VBox> <mx:TextInput id="myText" text="Hello World!" /> <mx:Button id="mybutton" label="Get Weather" click="writeToLog();"/> </mx:VBox> <mx:Script> <![CDATA[ private function writeToLog():void { trace(myText.text); } ]]> </mx:Script> </mx:Application>
XML ̾Á°¶õ´Ö¤Î»ÈÍÑ †
- ¼«ºî¤·¤¿¥«¥¹¥¿¥à¥³¥ó¥Ý¡¼¥Í¥ó¥È(mxml¥¿¥°¤Ç¤¢¤é¤ï¤µ¤ì¤ë¥¯¥é¥¹¤Î¤³¤È?)¤òmxml¤Ëµ½Ò¤¹¤ë¾ì¹ç¤Ï¡¢Ì¾Á°¶õ´Ö¤òÄɲÃÆɤ߹þ¤ß¤¹¤ë¡£
- containers/boxes/CustomBox.as ¤È¤·¤Æ¿·¤·¤¯CustomBox¥³¥ó¥Ý¡¼¥Í¥ó¥È¤òÄɲä·¤¿¾ì¹ç
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComps="containers.boxes.*"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> <MyComps:CustomBox/> </mx:Panel> </mx:Application>
MXML ¤ò»ÈÍѤ·¤¿¥é¥ó¥¿¥¤¥à¥³¡¼¥É¤Î¥È¥ê¥¬ †
- Button¤Îclick¥¤¥Ù¥ó¥È¤Ç¡¢textarea1¤Îtext¥×¥í¥Ñ¥Æ¥£¤Ë¡ÖHello World¡×¤òÀßÄꤹ¤ëÎã
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> <mx:TextArea id="textarea1"/> <mx:Button label="Submit" click="textarea1.text='Hello World';"/> </mx:Panel> </mx:Application>
- <mx:Script> ¥¿¥°Æâ¤Î ActionScript ´Ø¿ô¤Ç¥¤¥Ù¥ó¥È¥ê¥¹¥Ê¡¼¤ò»ØÄꤷ¤¿¥¢¥×¥ê¥±¡¼¥·¥ç¥ó¤Î¥³¡¼¥É¡£
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ private function hello():void { textarea1.text="Hello World"; } ]]> </mx:Script> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:TextArea id="textarea1"/> <mx:Button label="Submit" click="hello();"/> </mx:Panel> </mx:Application>
¥³¥ó¥Ý¡¼¥Í¥ó¥È´Ö¤Ç¤Î¥Ç¡¼¥¿¤Î¥Ð¥¤¥ó¥Ç¥£¥ó¥° †
- ¥³¥ó¥Ý¡¼¥Í¥ó¥È´Ö¤Î¥×¥í¥Ñ¥Æ¥£Ãͤ¬¥ê¥ó¥¯¤¹¤ë
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:TextInput id="textinput1" text="Hello"/> <mx:TextArea id="textarea1" text="{textinput1.text}"/> <mx:Button label="Submit" click="textinput1.text='Goodbye';"/> </mx:Panel> </mx:Application>
RPC ¥µ¡¼¥Ó¥¹¤Î»ÈÍÑ †
- WebService ¤Ï¡¢SOAP ¥Ù¡¼¥¹¤Î Web ¥µ¡¼¥Ó¥¹¤Ø¤Î¥¢¥¯¥»¥¹¤òÄ󶡤·¤Þ¤¹¡£
- HTTPService ¤Ï¡¢¥Ç¡¼¥¿¤òÊÖ¤¹ HTTP URL ¤Ø¤Î¥¢¥¯¥»¥¹¤òÄ󶡤·¤Þ¤¹¡£
- RemoteObject ¤Ï¡¢AMF ¥×¥í¥È¥³¥ë¤ò»ÈÍѤ·¤Æ Java ¥ª¥Ö¥¸¥§¥¯¥È¤Ø¤Î¥¢¥¯¥»¥¹¤òÄ󶡤·¤Þ¤¹
- Web¥µ¡¼¥Ó¥¹(SOAP)¤ËZIP¥³¡¼¥É¤òÅϤ·¡¢·ë²Ì¤¬¥Æ¥¥¹¥È¥¨¥ê¥¢¤Ëɽ¼¨¤µ¤ì¤ëÎã
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <!-- Web ¥µ¡¼¥Ó¥¹¤Ø¤ÎÀܳ¤òÄêµÁ¤¹¤ë ( »ØÄꤵ¤ì¤Æ¤¤¤ë WSDL URL ¤Ï²Í¶õ¤Î¤â¤Î) --> <mx:WebService id="WeatherService" wsdl="http:/example.com/ws/WeatherService?wsdl" useProxy="false"> <!-- TextInput ¥³¥ó¥È¥í¡¼¥ë¤ËÆþÎϤµ¤ì¤¿ ZIP ¥³¡¼¥É¤ÎÃͤò GetWeather ½èÍý¤Î ZipCode ¥Ñ¥é¥á¡¼¥¿¤Ë¥Ð¥¤¥ó¥É¤¹¤ë --> <mx:operation name="GetWeather"> <mx:request> <ZipCode>{zip.text}</ZipCode> </mx:request> </mx:operation> </mx:WebService> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <!-- ZIP ¥³¡¼¥É¤ò TextInput ¥³¥ó¥È¥í¡¼¥ë¤ËÆþÎϤ¹¤ë --> <mx:TextInput id="zip" width="200" text="Zipcode please?"/> <!-- Button ¤Î¥¯¥ê¥Ã¥¯¤Ë¤è¤ê¡¢Web ¥µ¡¼¥Ó¥¹½èÍý¤ò¸Æ¤Ó½Ð¤¹ --> <mx:Button width="60" label="Get Weather" click="WeatherService.GetWeather.send();"/> <!-- »ØÄꤵ¤ì¤¿ ZIP ¥³¡¼¥É¤ËÂбþ¤¹¤ëÃÏ°è¤òɽ¼¨¤¹¤ë --> <mx:Label text="Location:"/> <mx:TextArea text="{WeatherService.GetWeather.lastResult.Location}"/> <!-- »ØÄꤵ¤ì¤¿ ZIP ¥³¡¼¥É¤ËÂбþ¤¹¤ëÃÏ°è¤Î¸½ºß¤Îµ¤²¹¤òɽ¼¨¤¹¤ë --> <mx:Label text="Temperature:"/> <mx:TextArea text="{WeatherService.GetWeather.lastResult.CurrentTemp}"/> </mx:Panel> </mx:Application>
¥Ç¡¼¥¿¥â¥Ç¥ë¤Ø¤Î¥Ç¡¼¥¿¤Î³ÊǼ †
- ¥Ç¡¼¥¿¥â¥Ç¥ë¤ò»ÈÍѤ¹¤ë¤È¡¢¥¢¥×¥ê¥±¡¼¥·¥ç¥ó¸ÇͤΥǡ¼¥¿¤ò³ÊǼ¤Ç¤¤ë
- ¥á¥½¥Ã¥É¤òɬÍפȤ·¤Ê¤¤Ã±½ã¤Ê¥Ç¡¼¥¿¥â¥Ç¥ë
- <mx:Model> ¥¿¥°
- <mx:XML> ¥¿¥°
- <mx:XMLList> ¥¿¥°
- ÅÅÏÃÈÖ¹æ¤Ê¤É¤¬Model¥Ç¡¼¥¿¥â¥Ç¥ë¤Ë³ÊǼ¤µ¤ì¤ëÎã
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <!-- ¥Ç¡¼¥¿¥â¥Ç¥ë "contact" ¤ËÏ¢ÍíÀè¾ðÊó¤ò³ÊǼ¤·¤Þ¤¹¡£ ¾åµ¤Î³Æ TextInput ¥³¥ó¥È¥í¡¼¥ë¤Î text ¥×¥í¥Ñ¥Æ¥£¤¬ ¥Ç¡¼¥¿¥â¥Ç¥ë¤Î¥Õ¥£¡¼¥ë¥É¤ËÅϤµ¤ì¤ë --> <mx:Model id="contact"> <info> <homePhone>{homePhoneInput.text}</homePhone> <cellPhone>{cellPhoneInput.text}</cellPhone> <email>{emailInput.text}</email> </info> </mx:Model> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <!-- ¥æ¡¼¥¶¡¼¤¬ TextInput ¥³¥ó¥È¥í¡¼¥ë¤ËÏ¢ÍíÀè¾ðÊó¤òÆþÎϤ¹¤ë --> <mx:TextInput id="homePhoneInput" text="This isn't a valid phone number."/> <mx:TextInput id="cellPhoneInput" text="(999)999-999"/> <mx:TextInput id="emailInput" text="me@somewhere.net"/> </mx:Panel> </mx:Application>
¥Ç¡¼¥¿¸¡¾Ú †
- ¥Ð¥ê¥Ç¡¼¥¿¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò»ÈÍѤ¹¤ë¤È¡¢¥Ç¡¼¥¿¥â¥Ç¥ë¤Þ¤¿¤Ï Flex ¥æ¡¼¥¶¡¼¥¤¥ó¥¿¡¼¥Õ¥§¥¤¥¹¥³¥ó¥Ý¡¼¥Í¥ó¥È¤Ë³ÊǼ¤µ¤ì¤Æ¤¤¤ë¥Ç¡¼¥¿¤ò¸¡¾Ú¤Ç¤¤ë
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <!-- ¥Ç¡¼¥¿¥â¥Ç¥ë "contact" ¤ËÏ¢ÍíÀè¾ðÊó¤ò³ÊǼ¤¹¤ë ¾åµ¤Î³Æ TextInput ¥³¥ó¥È¥í¡¼¥ë¤Î text ¥×¥í¥Ñ¥Æ¥£¤¬ ¥Ç¡¼¥¿¥â¥Ç¥ë¤Î¥Õ¥£¡¼¥ë¥É¤ËÅϤµ¤ì¤ë --> <mx:Model id="contact"> <info> <homePhone>{homePhoneInput.text}</homePhone> <cellPhone>{cellPhoneInput.text}</cellPhone> <email>{emailInput.text}</email> </info> </mx:Model> <!-- TextInput ¥³¥ó¥È¥í¡¼¥ë¤ËÆþÎϤµ¤ì¤¿¥Ç¡¼¥¿¤ò¥Ð¥ê¥Ç¡¼¥¿¥³¥ó¥Ý¡¼¥Í¥ó¥È¤Ç¸¡¾Ú¤¹¤ë --> <mx:PhoneNumberValidator id="pnV" source="{homePhoneInput}" property="text"/> <mx:PhoneNumberValidator id="pnV2" source="{cellPhoneInput}" property="text"/> <mx:EmailValidator id="emV" source="{emailInput}" property="text" /> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <!-- ¥æ¡¼¥¶¡¼¤¬ TextInput ¥³¥ó¥È¥í¡¼¥ë¤ËÏ¢ÍíÀè¾ðÊó¤òÆþÎϤ¹¤ë --> <mx:TextInput id="homePhoneInput" text="This isn't a valid phone number."/> <mx:TextInput id="cellPhoneInput" text="(999)999-999"/> <mx:TextInput id="emailInput" text="me@somewhere.net"/> </mx:Panel> </mx:Application>
- À¸À®¤µ¤ì¤¿swf
http://okra.ark-web.jp/~shida/sandbox/flex2/2/validator_component.swf
¥Ç¡¼¥¿¤Î¥Õ¥©¡¼¥Þ¥Ã¥È †
- ¥Õ¥©¡¼¥Þ¥Ã¥¿¥³¥ó¥Ý¡¼¥Í¥ó¥È¤Ï¡¢À¸¤Î¥Ç¡¼¥¿¤ò°ìÊý¸þ¤ËÊÑ´¹¤·¤Æ¥Õ¥©¡¼¥Þ¥Ã¥È¤µ¤ì¤¿¥¹¥È¥ê¥ó¥°¤òÀ¸À®¤¹¤ë ActionScript ¥³¥ó¥Ý¡¼¥Í¥ó¥È
- 123456789¤¬12345-6789¤Èɽ¼¨¤µ¤ì¤ëÎã
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <!-- ZipCodeFormatter ¤òÀë¸À¤·¡¢¥Ñ¥é¥á¡¼¥¿¤òÄêµÁ¤¹¤ë --> <mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####" /> <mx:Script> <![CDATA[ private var storedZipCode:Number=123456789; ]]> </mx:Script> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <!-- ¥Õ¥©¡¼¥Þ¥Ã¥¿¤ò¥È¥ê¥¬¤·¡¢¥¹¥È¥ê¥ó¥°¤Ë¥Ç¡¼¥¿¤òÆɤ߹þ¤à --> <mx:TextInput text="{ZipCodeDisplay.format(storedZipCode)}" /> </mx:Panel> </mx:Application>
CSS ( ¥«¥¹¥±¡¼¥Ç¥£¥ó¥°¥¹¥¿¥¤¥ë¥·¡¼¥È) ¤Î»ÈÍÑ †
- CSS¤ò»ÈÍѤ·¤Æ¡¢¥³¥ó¥Ý¡¼¥Í¥ó¥È¤Ë¥¹¥¿¥¤¥ë¤òÀë¸À¤Ç¤¤Þ¤¹¡£
- MXML ¤Î <mx:Style> ¥¿¥°¤Ë¡¢
- ¥¤¥ó¥é¥¤¥ó¥¹¥¿¥¤¥ëÄêµÁ
- ¥¹¥¿¥¤¥ëÄêµÁ¤¬³ÊǼ¤µ¤ì¤Æ¤¤¤ë³°Éô¥Õ¥¡¥¤¥ë¤Ø¤Î»²¾È¤òµ½Ò
- class̾¡ÖmyClass¡×¤Ë¡¢¿§¡ÖÀ֡פòÀßÄê¡¢¡ÖButton¡×¥¿¥°¤Ë¡Ö¥Õ¥©¥ó¥È¥µ¥¤¥º: 18pt¡×¤òÀßÄꤹ¤ëÎã
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style> .myClass { color: Red } /* ¥¯¥é¥¹¥»¥ì¥¯¥¿ */ Button { font-size: 18pt} /* ¥¿¥¤¥×¥»¥ì¥¯¥¿ */ </mx:Style> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Button styleName="myClass" label="This is red 18 point text."/> </mx:Panel> </mx:Application>
- À¸À®¤µ¤ì¤¿swf
http://okra.ark-web.jp/~shida/sandbox/flex2/2/css.swf
¥¹¥¥ó¤Î»ÈÍÑ †
- ¥¹¥¥Ë¥ó¥°
- ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤Î¥°¥é¥Õ¥£¥Ã¥¯¥¨¥ì¥á¥ó¥È¤ò½¤Àµ¤Þ¤¿¤ÏÃÖ´¹¤¹¤ë¤³¤È¤Ç³°´Ñ¤òÊѹ¹¤¹¤ë½èÍý¤Ç¤¹¡£
- ¥°¥é¥Õ¥£¥Ã¥¯¥¨¥ì¥á¥ó¥È
- ¥·¥ó¥Ü¥ë¤Ç¹½À®¤µ¤ì¤ë
- ¥·¥ó¥Ü¥ë
- ¥¤¥á¡¼¥¸
- ÉÁ²è API ¥á¥½¥Ã¥É¤Î½ÐÎÏ
- ¥¹¥¥ó¤Ï¡¢Flex ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤Îµ¡Ç½¤ËÊѹ¹¤ò²Ã¤¨¤ë¤³¤È¤Ê¤¯¸ò´¹¤Ç¤¤Þ¤¹¡£
- ¥¹¥¥ó¤ò³ÊǼ¤¹¤ë¥Õ¥¡¥¤¥ë¤ò" ¥Æ¡¼¥Þ" ¤È¸Æ¤Ó¤Þ¤¹¡£
- ¥¹¥¥ó
- ¥°¥é¥Õ¥£¥«¥ë¥¹¥¥ó
- ¥×¥í¥°¥é¥à¥¹¥¥ó
- ¥°¥é¥Õ¥£¥«¥ë¥¹¥¥ó
- Adobe ¥ª¡¼¥µ¥ê¥ó¥°´Ä¶¤«¤é Adobe Flash Professional 8 ¤ÇľÀÜÊѹ¹¤Ç¤¤ë Adobe Flash ¥·¥ó¥Ü¥ë (= ¥¤¥á¡¼¥¸?)
- ¥×¥í¥°¥é¥à¥¹¥¥ó
- ActionScript ¥¹¥Æ¡¼¥È¥á¥ó¥È¤ò»ÈÍѤ·¤ÆÉÁ²è¤¹¤ë¥¹¥¥ó¤Ç¡¢¥¯¥é¥¹¥Õ¥¡¥¤¥ë¤ÎÃæ¤ËÄêµÁ¤·¤Þ¤¹( = ÉÁ²è API ¥á¥½¥Ã¥É¤Î½ÐÎÏ?)
¥¨¥Õ¥§¥¯¥È¤Î»ÈÍÑ †
- ¥¨¥Õ¥§¥¯¥È
- û¤¤»þ´ÖÆâ¤Ë¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ËÊѲ½¤òÍ¿¤¨¤ë¤³¤È
- ¥Õ¥§¡¼¥Ç¥£¥ó¥°
- ¥µ¥¤¥ºÊѹ¹
- °ÜÆ°
- ¥È¥ê¥¬
- ¥³¥ó¥Ý¡¼¥Í¥ó¥È¾å¤Ç¥Þ¥¦¥¹¤¬¥¯¥ê¥Ã¥¯¤µ¤ì¤¿
- ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤¬¥Õ¥©¡¼¥«¥¹¤ò¼õ¤±¼è¤Ã¤¿
- ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤¬²Ä»ë¾õÂ֤ˤʤä¿
- ¥Ó¥Ø¥¤¥Ó¥¢
- ¥¨¥Õ¥§¥¯¥È¤È¥È¥ê¥¬¤òÁȤ߹ç¤ï¤»¤ë¤³¤È¤ÇȯÀ¸
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <!-- ¥¨¥Õ¥§¥¯¥È¤òÄêµÁ¤¹¤ë --> <mx:WipeLeft id="myWL" duration="1000"/> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <!-- ¥¨¥Õ¥§¥¯¥È¤ò¥¿¡¼¥²¥Ã¥È¤Ë³ä¤êÅö¤Æ¤ë --> <mx:Button id="myButton" rollOverEffect="{myWL}"/> </mx:Panel> </mx:Application>
- ¥¨¥Õ¥§¥¯¥È¤È¥È¥ê¥¬¤òÁȤ߹ç¤ï¤»¤ë¤³¤È¤ÇȯÀ¸
¥«¥¹¥¿¥à MXML ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ÎÄêµÁ †
- ¥«¥¹¥¿¥àMXML¥³¥ó¥Ý¡¼¥Í¥ó¥È
- ´û¸¤Î¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò¥«¥×¥»¥ë²½¤ª¤è¤Ó³ÈÄ¥
- MXML¥³¥ó¥Ý¡¼¥Í¥ó¥È¥Õ¥¡¥¤¥ë
- ¥«¥¹¥¿¥à MXML ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò»ÈÍѤ¹¤ë¤¿¤á¤Ë¥æ¡¼¥¶¡¼¤¬ºîÀ®¤¹¤ë MXML ¥Õ¥¡¥¤¥ë
- - MXML ¥¿¥°¤È ActionScript ¥³¡¼¥É¤ÎÁȤ߹ç¤ï¤»¤òµ½Ò¤Ç¤¤ë
- MXML ¥Õ¥¡¥¤¥ë¤Î̾Á°¤¬¥¯¥é¥¹Ì¾¤È¤Ê¤ë
- ¤³¤Î̾Á°¤Ç¾¤Î MXML ¥Õ¥¡¥¤¥ëÆ⤫¤é¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò»²¾È¤¹¤ë¡£
- containers/boxes/MyComboBox.mxml¤ÇºîÀ®¤·¤¿¥«¥¹¥¿¥à¥³¥ó¥Ý¡¼¥Í¥ó¥È¤òcustom_component.mxml¤«¤é»²¾È¤¹¤ëÎã
- ¥«¥¹¥¿¥à¥³¥ó¥Ý¡¼¥Í¥ó¥È¥Õ¥¡¥¤¥ë containers/boxes/MyComboBox.mxml
<?xml version="1.0"?> <!-- MyComboBox.mxml --> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:ComboBox > <mx:dataProvider> <mx:String>Dogs</mx:String> <mx:String>Cats</mx:String> <mx:String>Mice</mx:String> </mx:dataProvider> </mx:ComboBox> </mx:VBox>
- ¥«¥¹¥¿¥à¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò»È¤¦Îã custom_component.mxml
<?xml version="1.0"?> <!-- MyApplication.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComps="containers.boxes.*"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <MyComps:MyComboBox/> </mx:Panel> </mx:Application>
- ¥«¥¹¥¿¥à¥³¥ó¥Ý¡¼¥Í¥ó¥È¥Õ¥¡¥¤¥ë containers/boxes/MyComboBox.mxml
- À¸À®¤µ¤ì¤¿SWF
http://okra.ark-web.jp/~shida/sandbox/flex2/2/custom_component.swf
tag: Flex