Getting
started
with
Genius
Framework

始める前に

Genius Framework を Spark project のリポジトリからチェックアウトしましょう。
http://www.libspark.org/browser/as3/GeniusFramework/

プロジェクトを作ろう

genius コマンドを使って、プロジェクトのスケルトンを作成します。

% ./genius -n プロジェクト名 -p パッケージ -o 出力先

例）「HelloGenius」というプロジェクトを「jp.seagirl.hello」というパッケージで「~/Desktop」に作成する場合

% ./genius -n HelloGenius -p jp.seagirl.hello -o ~/Desktop

作成されたスケルトンを使って、Flex Builder にプロジェクトを作します。

メニューバーから「ファイル」→「新規」→「Flex プロジェクト」をクリック
「プロジェクトの場所」に作成されたスケルトンの場所を指定して、「次へ」をクリック
そのまま「次へ」をクリック
メインアプリケーションファイルは「main.mxml」に変更し、「終了」をクリック

プロジェクトの構造を把握しよう

まだそれぞれ詳しく知る必要はありませんが、大まかなプロジェクトの全体像を見てみましょう。

jp/seagirl/hello/core … メインアプリケーションのベースクラスなど
jp/seagirl/hello/models … モデル
jp/seagirl/hello/threads … スレッド
jp/seagirl/hello/views … ビュー
main.css … CSSファイル
main.mxml … メインアプリケーション
main-config.mxml … コンパイルオプションを定義する設定ファイル

実行してみよう

まだ大まかなプロジェクトの構造を見ただけで、詳しいことは何もわかっていませんが、ともかくまずは実行してみて何が起こるのか確認してみましょう。

「Hello, Genius Framework!」と表示されましたね？　我々はまだ genius コマンドを打ち込んだだけですが、このように画面に文字列が表示することが出来ました。さて、これはいったい何が起こっているのでしょう？　いよいよ中を見ていくことにしましょう。これからアプリケーションを開発していくのに、我々は何をしなければならないのか、あるいは Genius は何をしてくれるのか、というところに注目してみてください。

ビューの構造を理解しよう

まずは、ある一つのビューの構造から見ていきましょう。
The Flex Code-Behind Pattern を採用しています。

次に、アプリケーション全体のビューの構造を見てみましょう。

このように、Genius はページを増やしていくことで、簡単にアプリケーションを拡張していくことが出来る仕組みになっています。さらに、状態を管理するクラスと、状態を復元するクラスが分かれているため、必要に応じて状態を復元するクラスを実装することで、ページという枠組みを越えた表現をすることも可能です。

ページを増やしてみよう

ビューの構造が理解出来たところで、ページを増やすことでさらなる理解を深めていきましょう。

generate コマンドを使って、Test.mxml と TestBase.as を作成
Main.mxml の ViewStackコンポーネントに Testコンポーネントを追加

以上の2ステップで、ページを追加することが出来ます。
generate コマンドは、プロジェクトディレクトリ以下の「script」ディレクトリにあります。

% ./generate -n クラス名  -p パッケージ -t クラスの種類（デフォルトは View）

例）「Test」という View クラスを「jp.seagirl.hello」というパッケージで作成する場合

% ./generate -n Test -p jp.seagirl.hello

ページを切り替えてみよう

ページを増やせるようになったので、ページを切り替えてみましょう。ページを切り替えるには、ChangeStateThread を使います。

private function linkClickHandler(event:MouseEvent):void
{
	new ChangeStateThread().startWithData({ page: 'Test' });
}

initializeView メソッドと updateView メソッド

initializeView メソッドは、ビューが生成される時にのみ実行されます。一方、updateView メソッドは、ビューが表示される毎に実行されます。通常、一度しか必要のない処理（例えばイベントリスナの登録やデータバインディングの設定など）は initializeView メソッドに記述し、表示される毎に必要とされる処理（例えばデータの再取得など）は updateView メソッドに記述します。実際に、どのような動作をするかをトレースしてみましょう。

override protected function initializeView():void
{
	trace('Initialize Intro');
	link.addEventListener(MouseEvent.CLICK, linkClickHandler);
}
		
override protected function updateView():void
{
	trace('Update Intro');
}

override protected function initializeView():void
{
	trace('Initialize Test');
	button.addEventListener(MouseEvent.CLICK, buttonClickHandler);
}
		
override protected function updateView():void
{
	trace('Update Test');
}

サンプルのソースコードなど

リリースビルド - samples/main.html
ソースコード - samples/srcview

参考資料

プロジェクトホーム - /http://www.libspark.org/wiki/seagirl/genius/
リポジトリ - http://www.libspark.org/browser/as3/GeniusFramework/
リファレンス - http://seagirl.jp/genius/docs/
サンプル - http://seagirl.jp/genius/sample/

Getting started with Genius Framework