First Sample - tomoTaka’s blog

初めてFlexを使ってみたので、ちょっとメモ。
OSは、MAC OS X 10.9です。

Javaのバージョンは8です。

まず開発環境のAdobe FlashBuilder4.7をダウンロード（60日間の体験版）
アドビの製品とサービスの一覧 | 詳細はこち
 AdobeのユーザーIDを作成して、creative cloudをまずdownloadして、そこからFlashBuilderをdownload

FlashBuilderで、新規Flexプロジェクトを作成

プロジェクト名とフォルダを指定

とりあえずは「アプリケーションサーバーはなし」で作成

これでプロジェクトが作成できます。
「FirstSample」プロジェクトを作成して、とりあえず試してみたいことを実装

フォルダ構成

ここでは、2つ「FirstSample.mxml」と「Sample1.as」のみ

code 1(FirstSample.mxml)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="init()"  // ***1.ページ表示時のメソッドをここで指定
			   >
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
		.myStyleRed {
			color:red
		}
		.myStyleBlue {
			color:blue
		}
        s|Button {
            font-size: 18pt
        }
    </fx:Style>
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
                        // *** Button1 click 時の処理
			private function method1(val:String):void {
				l1.text=val;
				l2.text=val;
				trace(val);
			}
		]]>
	</fx:Script>
	<fx:Script source="includes/Sample1.as"/>
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<s:VGroup paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
		<s:HGroup>
			<s:Label id='l1' styleName='myStyleRed' text="label1" />
			<s:Label id='l2' styleName='myStyleBlue' text="label2" />
		</s:HGroup>	
		<s:HGroup>
			<s:Button id="b1" label="Button1" click="method1('Button1 clicked!');" />
			<s:Button id="b2" label="Button2" click="method2('Button2 clicked!');" />
			<s:Button id="b3" label="Button3" />
		</s:HGroup>
	</s:VGroup>
</s:Application>

code 2(Sample1.as)

import flash.events.MouseEvent;

import mx.controls.Alert;

import spark.components.Label;

// ***1.ページ表示時の処理
public function init():void{
	this.l1.text="creation completed!";
	this.l2.text="";
	this.b3.addEventListener(MouseEvent.CLICK, method3);  // ***Button3 click時の処理をここで設定
}
// ***Button2 click時の処理
public function method2(val:String):String{
	Alert.show(val);
	this.l1.text=val;
	this.l2.text=val;
	return val;
}
// ***Button3 click時の処理
private function method3(event:MouseEvent):void {
	var ls:Array = [this.l1, this.l2];
	for each(var l:Label in ls){
		l.text = "Button3 clicked!";
	}
}

実行

FirstSample.mxmlで右クリックで、実行->webアプリケーションをクリック

実行結果(初期表示)

１つ目のラベルに「Sample1.as』の#initで実装している「creation completed」が表示される

Button1をクリック後

FirstSample.mxmlで実装しているScriptのmethod1がcallされてラベルに「Button1 clicked!」が表示される
ラベル１、ラベル２にはそれぞれ、で指定しているスタイルが適用されて、文字の色が赤と青になる。
またすべてのボタンのフォントサイズもスタイル指定。

Button2をクリック後

Sample1.asで実装しているmethod2がcallされて、アラート表示されて、ラベルに「Button2 clicked!」が表示される

Button3をクリック後

Sample1.asのinitメソッドで、「Button3」にclick時のメソッド「method3」を登録、method3がcallされてラベルに「Button3 clicked!」が表示される

一応、githubにcommittomoTaka01/FlexFirstSample · GitHub
まだまだ始めたばかりですが、少しずつでも実装したことをブログに記載できれば、、、

Flex デベロッパーセンター | Adobe Developer Connection [ADC]とhttp://flex.apache.org/index.htmlを参考にしました。
traceでlogが出力できるのですが、debugモードで実行できない？ようでログが出力されていないようです^^;;;