Flash Builder開発（画面遷移フレームワーク）

■新機能について

・画面遷移用の新しいコンポーネントは次の通り

spark.components.View：画面用コンポーネント

spark.components.ViewNavigator：画面遷移コンポーネント

 

・上記アプリケーションを定義するためのコンポーネントは次の通り

spark.components.ViewNavigatorApplication：ViewNavigatorコンポーネントを1つ保持

spark.components.TabbedViewNavigatorApplication：ViewNavigatorコンポーネントを複数保持

 

■VIEWNAVIGATORコンポーネント

ViewNavigatorコンポーネントとは：

画面遷移の履歴を保持して遷移できるようにしたコンポーネント

[構成]

部品名 用途

actionBar 画面の情報を表示するActionBarコンポーネント

contentGroup 画面を配置するGroupコンポーネント

 

■VIEWNAVIGATORコンポーネントの機能

1）画面表示機能

Viewコンポーネントで作成した画面を表示する機能

 

２）画面遷移機能

動的な画面遷移とその遷移を管理する機能

次の画面に進めると履歴し、履歴をもとに前の画面に戻せる

 

メソッド名 処理

pushView 指定した画面へ進めて、履歴を1つ追加します。

popView 画面を１つ戻して、履歴を1つ削除します。

popToFirstView 初期画面まで戻して、それまでの履歴を削除します。

popAll 全ての履歴を削除します。

replaceView 現状の画面と新しい画面を入れ替えます。

 

・画面遷移時のトランジション

また、画面遷移時のトランジション（動作）は、4種類が用意されている

 

メソッド名 処理

spark.transitions.SlideViewTransition 上下左右からスライドするエフェクト

（この内右からのスライドがデフォルト）

spark.transitions.FlipViewTransition 回転するエフェクト。

spark.transitions.CrossFadeViewTransition 透明度でフェードアウト・イン

spark.transitions.ZoomViewTransition ズームするエフェクト

 

[設定方法]

① ViewNavigatorのプロパティでデフォルトのトランジションを指定

メソッド名 処理

defaultPushTransition 次の画面に進む際のトランジションを指定します。

defaultPopTransition 前の画面へ戻る際のトランジションを指定します。

 

② 画面遷移する度にメソッドで指定する方法

pushViewやpopViewの引数にトランジションクラスを指定

 

■VIEWコンポーネント

Viewコンポーネントとは：

画面を作成するための基礎となるコンポーネント

Viewコンポーネントをルートタグにして、ボタンやラベルなどのコンポーネントを配置して画面を作成

 

ViewコンポーネントにはViewNavigatorコンポーネントと連携するためのプロパティがある。

そのプロパティでは表示・非表示の他、titleの文字を指定したり、右側のグループのレイアウトなどを指定できる。

 

-------------------

ViewNavigatorコンポーネントとViewコンポーネントを用いたアプリケーション

-------------------

■VIEWNAVIGATORAPPLICATIONコンポーネント

ViewコンポーネントとViewNavigatorコンポーネントを利用して画面遷移を行うようなアプリケーションを構築するための

アプリケーションコンポーネント。

 

ViewNavigatorApplicationコンポーネントには、ViewNavigatorコンポーネントを内部的に1つ保持。

よって、ViewNavigatorApplicationコンポーネントも画面履歴を管理可能。

 

また、保持しているViewNavigatorコンポーネントのfirstViewプロパティを設定するために、

ViewNavigatorApplicationコンポーネントにもfirstViewプロパティが用意す。

 

 

ソースコード：

<s:ViewNavigatorApplication firstView="views.ListView">

</s:ViewNavigatorApplication>

 

 

・　ハードウェアキーとの連携

ViewNavigatorApplicationコンポーネントでは、デバイスのハードウェアキーと連携。

 

キー 動作

Menu アプリケーションメニュー表示（Viewコンポーネントごと）。

Back ViewNavigatorコンポーネントのpopViewメソッドと同等。

 

ソースコード：

    <s:viewMenuItems>

        <s:ViewMenuItem label="再読み込み"/>

        <s:ViewMenuItem label="初期化"/>

    </s:viewMenuItems>

 

 

■TABBEDVIEWNAVIGATORAPPLICATIONコンポーネント

TabbedViewNavigatorApplicationコンポーネントは、ViewNavigatorコンポーネントを複数保持可。

複数のViewNavigatorコンポーネントを切り替えるために、下方にTabBarを表示。

TabBarは、ViewコンポーネントのtabVisibleプロパティで操作することも可。

 

また、ハードウェアキーに対しては、ViewNavigatorApplicationコンポーネントと同様に対応。

ただし、現在表示しているViewNavigatorコンポーネントに対してのみ処理。

 

ソースコード：

<?xml version="1.0" encoding="utf-8"?>

<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 

xmlns:s="library://ns.adobe.com/flex/spark">

<s:ViewNavigator label="Tab1" width="100%" height="100%" firstView="views.Tab1View"/>

<s:ViewNavigator label="Tab2" width="100%" height="100%" firstView="views.Tab2View"/>

</s:TabbedViewNavigatorApplication>

 

 

 

Posted via email from cohiro's posterous

Flash Builder4.5でやる少しデザイン寄りの事

■スキンについて

スキンを活用しないとみんな同じようなインターフェイスになります。

デザインをするためにはスキンを使いましょう（以上 flexbuilder4ガイドより）

 

■..でスキンって何か

MXMLで作成でき、読み書きが簡単であると共に、ツールによるアクセスも容易なもの

デザイン

 

■どうやってつくるのか？

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_02.html

FXGというマークアップ言語を使う

 

流れ的には（ボタンの場合）：

 ① 単純なボタンスキン作成

 ② ボタングラフィックスのボタンスキンへの変換

 ③ Buttonコンポーネントに関連付ける

 

① 単純なボタンスキン作成

Sample1.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">

    <s:Group verticalCenter="0" horizontalCenter="0">

        <s:Rect id="rect" radiusX="4" radiusY="4" top="0" 

           right="0" bottom="0" left="0">

           <s:fill>

               <s:SolidColor color="0x77CC22" />

           </s:fill>

           <s:stroke>

               <s:SolidColorStroke color="0x131313" weight="2"/>

           </s:stroke>

        </s:Rect>

 

        <s:SimpleText text="Button!" color="0x131313" 

                textAlign="center" verticalAlign="middle"

                horizontalCenter="0" verticalCenter="1"

                left="12" right="12" top="6" bottom="6"

        />

    </s:Group>

</s:Application>

 

② ボタングラフィックスのボタンスキンへの変換

ButtonSkin1.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">

 

    <!-- states -->

    <s:states>

        <s:State name="up" />

        <s:State name="over" />

        <s:State name="down" />

        <s:State name="disabled" />

    </s:states>

 

    <!-- border and fill -->

    <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">

        <s:fill>

           <s:SolidColor color="0x77CC22" />

        </s:fill>

        <s:stroke>

           <s:SolidColorStroke color="0x131313" weight="2"/>

        </s:stroke>

    </s:Rect>

 

    <!-- text -->

    <s:SimpleText text="Button!" color="0x131313" 

            textAlign="center" verticalAlign="middle"

            horizontalCenter="0" verticalCenter="1"

            left="12" right="12" top="6" bottom="6"

    />

</s:Skin>

 

 ③ Buttonコンポーネントに関連付ける

これは2つ方法あり。skinClassというCSSスタイルを指定するか mxmlでインラインに設定次の例は mxmlへのインライン指定

Sample2.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">

    <s:Button verticalCenter="0" horizontalCenter="0" skinClass="ButtonSkin1" 

             click="trace('I\'ve been clicked!')" focusIn="trace('focus...on me?')" />

</s:Application>

 

■スキンステート

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_03.html

 

例えば、Buttonコンポーネントには、up、over、down、disabledの4つの基本的スキンステートがあります。

各ステートごとに異なるデザインを設定できます。

 

ButtonSkin2.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">

 

    <!-- states -->

    <s:states>

        <s:State name="up" />

        <s:State name="over" />

        <s:State name="down" />

        <s:State name="disabled" />

    </s:states>

 

    <!-- dropshadow for the down state only -->

    <s:Rect radiusX="4" radiusY="4" top="0" right="0" bottom="0" 

        left="0" includeIn="down">

        <s:fill>

           <s:SolidColor color="0"/>

        </s:fill>

        <s:filters>

           <s:DropShadowFilter knockout="true" blurX="5" blurY="5" 

           alpha="0.32" distance="2" />   

        </s:filters>

    </s:Rect>

 

    <!-- border and fill -->

    <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" 

         bottom="0" left="0">

        <s:fill>

           <s:SolidColor color="0x77CC22" color.over="0x92D64E" 

           color.down="0x67A41D"/>

        </s:fill>

        <s:stroke>

           <s:SolidColorStroke color="0x131313" weight="2"/>

        </s:stroke>

    </s:Rect>

 

    <!-- highlight on top -->

    <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" 

        height="50%">

        <s:fill>

           <s:LinearGradient rotation="90">

               <s:GradientEntry color="0xFFFFFF" alpha=".5"/>

               <s:GradientEntry color="0xFFFFFF" alpha=".1"/>

           </s:LinearGradient>

        </s:fill>

    </s:Rect>

 

    <!-- text -->

    <s:SimpleText text="Button!" color="0x131313" 

            textAlign="center"

            verticalAlign="middle"

            horizontalCenter="0" verticalCenter="1"

            left="12" right="12" top="6" bottom="6" 

     />

</s:Skin>

 

■スキンパーツ

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_04.html

 

Sparkのスキン可能コンポーネントには、コンポーネントの定義に使用できるスキンパーツのセットがあります。スクロールバーの場合、加算ボタン、減算ボタン、トラック、サムの4つのスキンパーツがあります。ボタンの場合、スキンパーツはlabelElementの1つだけです。

 

■スキン可能コンポーネントの作成

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_05.html

 

------

ネタ元：Adobeのサイト↓

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning.html

 

Posted via email from cohiro's posterous

Flash Builder4.5でできる事を調べる

■できる事

Google AndroidとApple iOSの両方のデバイスをサポートするアプリ開発。

 

■Adobeの想定しているワークフロー

Flash Builder(開発）→　Flash Catalyst（インタラクションデザイナー）→　Photoshop/Illustrator（ビジュアルデザイナー）

 

手順：

①　Flash Builderでスキン適用可能なコンンポーネントの作成

②　Flash Catalystでスキンを変更してデザイン

 

開発とデザインを兼務する人向けには：

Flash Builderでプロジェクトを選択して「Edit in Flash Catalyst（Flash Catalystで編集）」を選択し、Flash Catalystで必要なデザインの変更できる。

 

■パッケージ、クラス、forループ、whileループ、switchブロックの定義など、すぐに使用できる100種類を超える組み込みテンプレートが提供。

カスタマイズもでき他のマシンにエクスポートもできるので、メンバー全員がプロジェクト用に統一されたテンプレートのセットを使って作業できる。

 

■サーバーサイド開発との連携

FlexとPHPを使ったWebアプリケーションやモバイルアプリケーションを構築する開発プロセスを合理化

------------------------------

元ネタはAdobeのサイトです↓

http://www.adobe.com/jp/devnet/flashbuilder/articles/whatsnew-flashbuilder-45...

Posted via email from cohiro's posterous