勉強会の内容 †

necoったーのデコレーションメーカーの構築を通じて、Flexアプリの作り方を学ぼう

↑

[edit]

ustream †

http://www.ustream.tv/channel/flex%E5%8B%89%E5%BC%B7%E4%BC%9A

↑

[edit]

デコレーションメーカーとは †

necoったーのnecoのサムネイルをユーザーが飾り付けするサービス

次のパーツからなる。
- ギャラリー
  過去に作った飾りつけ作品を選んで読み込むことができる
- アイテムリスト
  アイテムとはここではリボンやめがねなど。
  ここに並ぶアイテムを選んでキャンバスに配置することで作品を作ることができる。
- キャンバス
  このキャンバス上にnecoのサムネイルが表示され、この上にアイテムを重ねて配置したりできる
- レイヤリスト
  追加されたアイテムを削除したり、順番を入れ替えることができる
- ツールボックス
  ツールボックスないのツールを使って、選択したアイテムを移動したり、拡大縮小したり、色を変えたりできる。

↑

[edit]

MXMLで書いてみる †

http://okra.ark-web.jp/~shida/sandbox/flex/study3/decoration_maker1.mxml

↑

[edit]

MXMLとは †

MXML について
http://livedocs.adobe.com/flex/3_jp/html/mxml_2.html#92196

↑

[edit]

コンポーネントとは †

再利用可能な部品。
普通のクラスとの違い。 => mxmlで記述してインスタンスを生成可能。
次のような種類が。
- ビジュアルコンポーネント
  - ユーザーインターフェースコントロール
    ボタンなどのユーザーインターフェース。
  - コンテナ
    コントロールを配置・レイアウトする。コンテナを入れ子することも可。
- 非ビジュアルコンポーネント
  - エフェクト
  - バリデータ
  - フォーマッタ
詳しくはこのあたりで
http://livedocs.adobe.com/flex/3_jp/html/mxml_3.html#92447

↑

[edit]

タグの解説 †

VBoxは、縦レイアウトのコンテナ
Imageは、画像を表示するコントロール
- sourceに画像を指定。
- @Embed指定を使うと、コンパイル時にswf内に、その画像を静的に組み込み。

ビジュアルコンポーネント、非ビジュアルコンポーネント含めここでおさらい。
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

↑

[edit]

スタイルシート †

globalは、全タグに適用

global {
  paddingTop: 10;
  paddingRight: 10;
  paddingBottom: 10;
  paddingLeft: 10;
}

指定した名前のタグに適用。

VBox, Canvas {
  backgroundColor: #00ff00;
  borderColor: #000000;
  borderStyle: solid;
}

styleName属性で指定したクラスをもつタグに適用。
```
.layerList {
  backgroundColor: #00ffff;
}
```
マニュアルはここ。
http://livedocs.adobe.com/flex/3_jp/html/styles_01.html
各コンポーネントがどんなスタイルを指定可能かは、ざっくりここでわかる。
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
網羅的に知るならリファレンス
http://livedocs.adobe.com/flex/3_jp/langref/
- たとえばVBoxコンテナに指定可能なスタイルはここでわかる。
  http://livedocs.adobe.com/flex/3_jp/langref/mx/containers/VBox.html#styleSummary

↑

[edit]

コンパイル †

rasuct decoration_maker1.mxml

↑

[edit]

できたもの。 †

http://okra.ark-web.jp/~shida/sandbox/flex/study3/decoration_maker1.swf

↑

[edit]

コンポーネント化してみる †

↑

[edit]

カスタムコンポーネントとは? †

Flexのコアコンポーネントを継承し、独自コンポーネントを作ることができる
利点。作り方概要。
- http://livedocs.adobe.com/flex/3_jp/html/intro_2.html#556325
MXMLで作成したり、ActionScriptで作成したりできる。
MXML または ActionScript のどちらでコンポーネントを作成するかの決定
- カスタム ActionScript コンポーネントで実行できるほとんどのことは、カスタム MXML コンポーネントでも実行できます。ただし、既存のコンポーネントのビヘイビアを変更したり、基本機能を既存のコンポーネントに追加したりする単純なコンポーネントの場合は、MXML で作成した方が早くて簡単です。
- 新しいコンポーネントが他のコンポーネントを含む複合コンポーネントで、Flex レイアウトコンテナのいずれかを使用して他のコンポーネントの位置とサイズを表現できる場合は、MXML を使用してコンポーネントを定義します。
- コンテナが子をレイアウトする方法など、コンポーネントのビヘイビアを変更する場合は、ActionScript を使用します。
- UIComponent のサブクラスを作成して、ビジュアルコンポーネントを作成する場合は、ActionScript を使用します。
- フォーマッタ、バリデータ、エフェクトなどの非ビジュアルコンポーネントを作成する場合は、ActionScript を使用します。
- コントロールにログのサポートを追加する場合は、ActionScript を使用します。詳しくは、ログ機能を参照してください。

↑

[edit]

今回はMXMLでカスタムコンポーネントを作ってみる †

カスタムコンポーネントを作る場合は、まずパッケージを決める
```
jp.tter.neco.decorationMaker
```
それに対応したディレクトリを作る
```
jp/tter/neco/decorationMaker/
```
そこにカスタムコンポーネントのmxmlファイルを作る。
ファイル名はコンポーネント名
jp.tter.neco.docorationMaker.Galleryなら、
```
jp/tter/neco/decorationMaker/Gallery.mxml
```
カスタムコンポーネントは、継承するFlexコアのコンポーネントをルートタグに書く。

↑

[edit]

jp/tter/neco/decorationMaker/Gallery.mxmlの内容 †

/assets/gallery.pngとして、

を配置しておき、ファイルの中身はこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="@Embed(source='/assets/gallery.png')" />
</mx:VBox>

↑

[edit]

jp/tter/neco/decorationMaker/ItemList.mxmlの内容 †

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="@Embed(source='/assets/item_list.png')" />
</mx:HBox>

↑

[edit]

jp/tter/neco/decorationMaker/Canvas.mxmlの内容 †

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="@Embed(source='/assets/canvas.png')" />
</mx:Canvas>

↑

[edit]

jp/tter/neco/decorationMaker/LayerList.mxmlの内容 †

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="@Embed(source='/assets/layer_list.png')" />
</mx:VBox>

↑

[edit]

jp/tter/neco/decorationMaker/Toolbox.mxmlの内容 †

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="@Embed(source='/assets/toolbox.png')" />
</mx:VBox>

↑

[edit]

これらを使って全体をレイアウトするコンポーネントとしてMain.mxmlを用意 †

jp/tter/neco/decorationMaker/Toolbox.mxmlの内容

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
         xmlns:neco="jp.tter.neco.decorationMaker.*">
<neco:Gallery />
<mx:VBox>
<neco:ItemList />
<mx:HBox>
<neco:Canvas />
<neco:LayerList />
</mx:HBox>
</mx:VBox>
<neco:Toolbox />
</mx:HBox>

カスタムコンポーネントを読み込むためには、xmlnsで、名前空間を定義する。
読み込むパッケージのパスがxmlnsの値にURLになる。
定義した名前空間を接頭辞にして、カスタムコンポーネントを利用できる。

↑

[edit]

このMain.mxmlを読み込むトップレベルのmxmlを用意してこれをコンパイルするようにする。 †

FlexSpyをいれといた

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:neco="jp.tter.neco.decorationMaker.*"
                styleName="plain">
<mx:Script>
  <![CDATA[
    import com.flexspy.FlexSpy;
  ]]>
</mx:Script>
<neco:Main />
<mx:Button id="btnFlexSpy" label="出でよ!FlexSpy" click="FlexSpy.show()" />
</mx:Application>

次のようにコンパイル
```
rascut  decoration_maker.mxml 
```
できたswfはこんな感じ
decoration_maker.swf

↑

[edit]

まとめ †

デコレーションメーカーの概要を説明した
MXMLのコンパイルや、Image, VBox, HBoxとか基本的なコンポーネントについて思い出しをやった
mxmlを使ったカスタムコンポーネントの作り方をやった
次回は、アイテムをHTTPServiceから取得し、動的にActionScriptから生成して、それをキャンバスにドラッグする、というところまでやってみます(たぶん)。

投稿者志田 | パーマリンク | コメント(0)