前回まではActionScript 3.
Flashでアプリケーションを作る場合は,
Flexフレームワークには便利なコンポーネントが用意されています。また,
MXMLでコンポーネントを配置
早速サンプルを見てみましょう。MXMLでアプリケーションの見た目を記述してみます。
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="Hello Flex!!"
paddingTop="10" paddingLeft="10"
paddingRight="10" paddingBottom="10">
<mx:Label text="ラベル"/>
<mx:TextInput text="text"/>
<mx:Button label="OK"/>
</mx:Panel>
</mx:Application>
まず,
<mx:Application>タグの中には<mx:Panel>タグ,
このように,
コンパイルしてみよう
このファイルをFlexTest1.
コンパイルするには,
mxmlc FlexTest1.mxml
コンパイルに成功すると,
「Hello Flex!!」
それぞれのコンポーネントで指定できる属性については,
このように直感的にコンポーネントを配置できるのがMXMLの魅力です。もし,
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()">
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.controls.*;
private function init():void {
var panel:Panel = new Panel();
panel.title = "Hello Flex!!";
panel.setStyle("paddingTop", 10);
panel.setStyle("paddingLeft", 10);
panel.setStyle("paddingBottom", 10);
panel.setStyle("paddingRight", 10);
addChild(panel);
var label1:Label = new Label();
label1.text = "ラベル";
panel.addChild(label1);
var text1:TextInput = new TextInput();
text1.text = "text";
panel.addChild(text1);
var button1:Button = new Button();
button1.label = "OK";
panel.addChild(button1);
}
]]>
</mx:Script>
</mx:Application>
だいぶ冗長ですね。改めて,
イベントを登録してみよう
それでは,
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function clickHandler():void{
input1.text = "clicked!!";
}
]]>
</mx:Script>
<mx:Panel title="Hello Flex!!"
paddingTop="10" paddingLeft="10"
paddingRight="10" paddingBottom="10">
<mx:Label text="ラベル"/>
<mx:TextInput id="input1" text="text"/>
<mx:Button label="OK" click="clickHandler()"/>
</mx:Panel>
</mx:Application>
完成したのがこのようなFlashです。最初の例と見た目は同じですが,
イベント登録は,
<mx:Button label="OK" click="clickHandler()"/>
ActionScriptのコードは,
clickHandler()メソッドでは,