Flex3 SDKの最近のブログ記事

1年以上たって思い出したのですが、
ブログを始めようと思って少しだけ書いてすっかり忘れていました。

さて前回はザックリとFlexが動くところまで確認したので今回からは自分で覚えやすいように書いてみようと思います。はっきりと解らない所も多々あるので間違っている所などがあれば指摘していただけるとありがたいです。

ではまず始めに「Applicationコンテナ」とはからです。
参考：Adobe Flex 3 ヘルプ「Applicationコンテナについて」を参照しました

Applicationコンテナとは
アプリケーションに追加した全ての内容を格納するデフォルトコンテナとしてApplicationコンテナが定義されます。Applicationコンテナは<mx:Application>タグから作成されます。このタグはMXMLアプリケーションファイルの最初のタグである必要があります。Applicationオブジェクトはファイル内のすべてのActionScriptコードのデフォルトスコープであり、<mx:Application>タグはアプリケーションの初期サイズを指定します。

ということで、「Applicationタグは一番最初に必ず必要なタグ」ということですな。

Applicationコンテナを、アプリケーション内で使用する唯一のコンテナにしたほうが好都合のようにも思われますが、通常は、アプリケーションにコントロールを追加する前に、少なくとももう1つのコンテナを明示的に定義することになります。
<mx:Application>タグに続く最初のコンテナとしては、Panelコンテナがよく使用されます。

書いてある事というと、Applicationコンテナを大きな枠として置いて、必要に応じてPanelコンテナなどを必要に応じて使い分け、Panelコンテナなどを切り替えてアプリケーションを作っていく感じですかね？？
まあ、いろいろと作っていくうちにちゃんと理解できそうです。

まずは基本的なApplicationコンテナを使ったソースはこれです。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>

実行結果はこれ↓

というわけで、何も無いFlexアプリケーションが出来上がりました。
実際はApplicationコンテナが入っているので何も無いわけではないのですが、どう見ても何も無いです。

さて空のFlexが出来上がったところでApplicationコンテナの詳細を見ていきたいと思います。
Applicationコンテナのデフォルトです。

デフォルトサイズ：ブラウザウィンドウのサイズ。
子の整列方法：垂直に整列。
子の水平方向の整列方法：中央揃え。
デフォルトパディング：top、bottom、leftおよびrightの各プロパティは24ピクセルに設定されています。

さて、Applicationコンテナのプロパティに何も指定しないと自動的にデフォルトになりますので、Applicationコンテナのデフォルトがどんな状態かを見ていきたいと思います。
初めの「デフォルトサイズ」はブラウザウィンドウのサイズに合わせて自動的に変化しますって事のようです。
次の「子の整列方法」は、縦に並べますということです。
次の「子の水平方向の整列方法」は、真ん中に配置しますということですね。
最後の「デフォルトパディング」は、上下左右どの場所も余白を24ピクセル開きますということです。
読んでいたら、「そうですか」と思ってしまったので、知らないよりは知っていたほうがいいぐらいのことだと勝手に思っておきます。

さて、これからはApplicationコンテナのプロパティを見ていくことにしますので、まずはプロパティの書く所ですが、赤字でプロパティと書いてあるところに追加していけばいいだけになります。HTMLやCSSなどを書いた事のある人には慣れた書き方ですね。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" プロパティ>
</mx:Application>

Applicationコンテナの幅と高さについてです。

Applicationコンテナのheightとwidthは、ピクセル値で明示的に設定する方法のほかに、
ブラウザウィンドウのサイズに対する相対的なパーセント値を使用する方法もあります。
デフォルトではApplicationコンテナの高さと幅は100%、つまりブラウザのウィンドウ全体を占めるように設定されています。

って書いてあるので、まずは幅と高さの指定方法を確認することにします。
幅の指定方法
    width="500" 幅を500ピクセルに設定します。
    width="80%" 幅をブラウザのウィンドウの80%の幅に設定します。
高さの指定方法
    height="500" 高さを500ピクセルに設定します。
    height="80%" 高さをブラウザのウィンドウサイズの80%の高さに設定します。

というわけで、数値を指定してあげれば指定したサイズでApplicationコンテナが作られ、パーセントで指定をすればウィンドウサイズに対して相対的なサイズを勝手に決めてApplicationコンテナが作られるということですので、用途により使い分ければいいわけですね。

   
背景の色
    backgroundColor="0x869CA7" 指定をしなければこの値が適応されます。
背景色を変える
    backgroundColor="0xFF8800" 背景色をオレンジ色に指定
    このプロパティで単色を指定すると、指定した色より少し暗い色と少し明るい色との間のグラデーションパタンが自動的に計算されます。
    グラデーションのない単色でページ背景を指定したい場合は、backgroundGradientColorsで明示的に同じ色を指定する必要があります。
    また、backgroundGradientColorsを指定する場合は必ずbackgroundColorプロパティを指定する必要があります。
背景のグラデーションの設定
backgroundGradientColors="[0x9CBOBA, 0x68808C]" 背景色のグラデーションの色を設定します。

背景の透明度
backgroundGradientAlphas="[1.0, 1.0]" 背景の透明度のグラデーションを指定します。

backgroundImage="" ???

backgroundSize="100%" 100%このプロパティを100%に設定すると、背景イメージがApplicationコンテナ全体を占めます。

水平方向の並びの指定
horizontalAlign="center" 明示的に指定をしなければ中央揃えになります。
horizontalAlign="left" 左揃えになります。
horizontalAlign="right" 右揃えになります。

Applicationコンテナの余白を指定します。
下余白の設定
paddingBottom="24"
左余白の設定
paddingLeft="24"
右余白の設定
paddingRight="24"
上余白の設定
paddintTop="24"

Applicationコンテナのプロパティ指定にはプレーンスタイル名が定義されています。
とはどういうことかというと、何も設定しないためのプロパティ指定方法が用意されているということみたい。
内容は背景は白色で、全てのパディングは0ピクセル、背景イメージなし、子は左揃えになります。
styleName="plain"
またプレーン設定の個々の値をオーバーライドすることもできると書いてあるのですが、
まず、オーバーライドって何って事で説明すると、プレーン設定で白紙にしたのだけれど、
このプロパティだけは指定したものを使ってねとです。例をあげると、
styleName="plain" horizontalAlign="center"
って事で、プレーン設定で白紙にはしたが、中央揃えだけはしてねっていう例でした。
styleName="plain"の後に変更したいプロパティを書いてしまえばいいみたいです。

Applicationコンテナのプロパティを一括して指定することもできるみたい。
<mx:Style>
    Application{
        paddingLeft: 10px;
        paddingRight: 10px;
        paddingTop: 10px;
        paddingButtom: 10px;
        horizontalAlign: "left";
        backgroundImage: "";
        backgroundColor: #AAAACC;
    }
</mx:Style>
ってな感じで指定するみたい。
Applicationへの指定は微妙ですが、いくつも配置したButtonなどへ一括して指定したい場合は便利そう。
にしてもスタイルシートを設定していしているみたな感じですが、ダブルコーテーションでどれをくくったらいいか慣れが必要そう。

付属
たまにサンプルアプリケーションを見ていると、右クリックしたときに「ソースの表示」というメニューアイテムが出るのですが、
それを表示させたい場合は以下のように書くらしい。
viewSourceURL="http://localhost/flexAppSourceURL.txt"
(http://localhost/flexAppSourceURL.txtの部分は用意したファイルへのパスを指定してください)
Flexが勝手にソースを表示するわけではなく、ソースを書いたテキストファイルかHTMLファイルを別に用意しておいて
見せているみたいです。ソースを公開している方々には大変お世話になっているので感謝です。


Applicationコンテナのオプション指定
「<mx:Application>タグのオプションを指定することにより、アプリケーションを制御できます。」
と書いてあるのですが、さて何でしょうか？

オプション名：franeReate    型：Number（整数型）
アプリケーションのフレームレートを1秒あたりのフレーム数で指定します。デフォルト値は24です。
と書いてありますが、これはFlashの概念が入っていますね。たぶんボタンアクションなどを付けたときに
モアっと出てくるとかの時のフレームレートを指定するのかな。まあ、デフォルトの24fpで十分きれいだからあまり気にする必要はなさそう。

オプション名：pageTitle    型：String（文字列）
ブラウザのタイトルバーに表示する文字を指定します。このプロパティはHTMLの<title></title>タグと同じ機能です。

オプション名：preloader 型：path（パス）
カスタムプログレスバーを定義すると書いてあります。
簡単に言うと、自分で作ったローディングバーを使えるらしい。が、今の段階でプログレスバーが必要なアプリケーションは作れないので必要になったら調べるか。

オプション：scriptRecursionLimit    型：Number（整数型）
Flash Player または AIR がスタックをコールする最大深度を指定します。この深度を超えると Flash Player または AIR が停止します。これは実質的にスタックオーバーフローの制限になります。
デフォルト値は 1000 です。
いまいち頭がついていかないので、今回は保留・・

オプション：ScriptTimerLimit 型：Number（整数型）
ActionScript イベントリスナーの最長実行時間を秒単位で指定します。この時間が過ぎると、このイベントリスナーは処理が停止しているものと見なされ、強制終了されます。
デフォルト値は 60秒で、この値は設定可能な最大値でもあります。
たぶんボタンを押したとか、何かのイベントが発生した時の最長実行時間の事かな？
ボタンを一回押した時とかはすぐに処理が終わるはずなので、ず～っとボタンを押しましたよって言ってられないので
何かの不具合でずっと残ったままのイベントリスナーは60秒立てば勝手に終了しますよってことです。
って書いておきながら合っているのかな？　間違っていたら指摘してください。

オプション：usePreloader 型：Boolean（ブーリアン型）
アプリケーションプリローダーを無効にするかどうかを指定します。無効にする場合はfalse、有効にする場合はtrueにします。
デフォルト値はtrueです。デフォルトプリローダーを使用するには、アプリケーションの幅を160ピクセル以上にする必要があります。
詳細については、アプリケーションのダウンロード状況の表示を参照してください。
と書いてあるのですが、プリローダーを出すか出さないかの設定みたいです。
またアプリケーションの幅を160ピクセル以上にする必要があると書いてあって、何だこれと思ったのですが、
プリローダーが出たときのプリローダーの幅が160ピクセルということですよね（たぶん）




バタバタとApplicationコンテナについて書いたのですが最終的にわかった事といえば、絶対に必要だから書いておいてねということでした。
書かずにコンパイルしようとするとエラーが出るので絶対書きますけどね～。

とりあえずFlexマニュアルを見ながら調べたのですが、勘違いして書いてる所もありそうですから鵜呑みにしないように注意してくださいね。

さて今回は「Flexって何」と言うことから始めてみようと思います。

まずは、AdobeのサイトのFlex 3のカテゴリでは「魅力あふれるクロスプラットフォーム対応リッチインターネットアプリケーションを開発」という見出しで始まっている。
よくわからないので基本的な書き方をメモしていく事にしてみます。

Flexの基本はXMLを書いていって何かを作るので最初にXMLを使っていることを言っておく必要があるので、まずは1行目に「<?xml version="1.0" encoding="UTF-8" ?>」と書く。
これはXML宣言と言うらしく、XMLを使いますよと言っているところです。
文字コードをUTF-8で書いているのなら「encoding="UTF-8"」は省略してもいいみたい。
「encoding="・・・"」を書かなければ「encoding="UTF-8"」と書いたのと一緒らしい。
また、「version="1.0"」を省略しても「version="1.0"」と書いたのと同じになります。

ということで、「<?xml ?>」が必ず要るがそれ以外は別に無くてもいいみたい。だけどAdobe Flexのリファレンスでは「<?xml version="1.0" ?>」と書いてあるからそれにしておく。
ちなみにversionは必ずencodingの前に書くのが決まりらしい。と言うことはencodingを書く場合はversionを必ず書かないといけないですな。
だから「<?xml version="1.0" ?>」と書いてあったのか～。納得

これでXMLを書く準備ができたので、今度はFlexを書く準備です。
まずはFlexの基本となる土台を書きます。
「<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml"></mx:Application>」
Flexでは<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml">から</mx:Application>の間にボタンなどの必要なものを書いていきます。
まあFlexで何か新しいものを作りたい場合は、
<?xml version="1.0" ?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <\mx:Application>
とかけばいいことになります。

また、「< mx:Application」など、空白があるとエラーになりました。
何か理由があるんだろうけどよくわからないので、とりあえず空白を作らないように書いてしまいます。
そして「Ctrl+F8」を押したら空のFlexアプリケーションが作られました。

こうなっていれば空のFlexアプリケーションの作成は成功です。

さてこれをベースに色々なものが作れるらしいのですが、まだ何を作るか考えていないので基本的なものを作ろうかな。

ということで前回の『「Adobe Flex 3 SDK」をインストールしてみる』と『「FlashDevelop」をインストールしてみる』で必要なものが用意できたので、連携して使える設定をしてみます。

まずは「FlashDevelop」を開いて、「F10」を押して「Settings」を開き、
「AS3Context」の「Flex SDK Location」が「Adobe Flex 3 SDK」をコピーした場所になっているかを確認します。もし違っていたら指定しなおしてやりましょう。

「Adobe Flex3 SDK」を試してみようと思いインストールしてみる。

まず始めにFlex SDKをダウンロードします。
・ Adobe Flex 3 SDK （ダウンロードサイト）

僕はここから「Adobe Flex 3 SDK（zipファイル）」をダウンロードしました。
開発バージョンごとにzipファイルが用意されているので安定版をダウンロードすることにします。（オレンジの線が引いてあるやつ）

バージョンごとは「Flex 3 SDK Downloads」 から

・ Adobe Flex3 SDK （Flex 3 SDK リリースノート）

ここは「Flex 3 SDK リリースノート」インストール時などの注意点なども書いてあります。

ダウンロードには少し時間がかかりますが、ダウンロードできたら「flex_sdk_バージョンナンバー.zip」と言うのができていますのでまずは解凍します。


そしてもう一つダウンロードしておかないといけないのが、「JRE （Java Runtime Environment）」です。
・ JRE （Java Runtime Environment） ダウンロードサイト

「Platform:」のところは使用する環境にあわせて選んでください。
「Language:」のところはそのままで、下のチェックボックスにチェックを入れて「Cuntinue」を押します。

するとダウンロード画面が出てくるので、「Windows Offline Installation」と書いてあるところにチェックを入れて下の「Download Selected with Sun Download Manager >>」を押します。

Sunのダウンロードマネージャー経由でのインストールが嫌な人は直接exeファイルをダウンロードすることもできるみたいです。
あ、ちなみにダウンロードマネージャーを使うとすぐにインストール作業に入っちゃいます。

JREはインストール済みとして、「Flex 3 SDK」をインストールするのですが、基本的には先ほどダウンロードした「flex_sdk_バージョンナンバー.zip」を解凍すれば終了です。

以上で「Flex 3 SDK」のインストールは終了です。　がっ！！
作っていくために都合のいいように設定する必要があるので、そのための作業を今からします。

まずは、先ほど解凍してできた「flex_sdk_バージョンナンバー」のフォルダ名を「flex_sdk_3」とリネームします。そして「flex_sdk_3」を「C:\」直下に配置しておきます。
なぜ「C:\」の直下に置くかというと、Flexを作っていくためのエディタを置いておくためです。

ここまでできたら「Flex 3 SDK」のインストール作業はひと段落です。
この後は「FlashDevelop」のインストールをします。

「FlashDevelop インストール方法」

という訳でタダで「Adobe Flex 3」を始めてみようと思う。

まあAdobeがオープンソースで「Flex 3 SDK」を公開しているので、
興味をそそられ触って見ようと思うのです。
その為に揃えないといけないのが、「Adobe Flex 3 SDK」まあ当然ですね、そしてテキストエディタを使うので「FlashDevelop」というのが使いやすいらしいので用意する。

まずはダウンロードできるサイトを紹介しておきます。
「Adobe Flex 3 SDK」
「FlashDevelop 3.0.0 Beta7 released 」

まずはこの二つがあればそれなりにできるらしい。
さて、インストールしてみるか。