Flexアプリケーションのスクロールバーを抑制＆小オブジェクトのはみ出し禁止

Flexでブログパーツを作ろうと思い色々いじっていたが、クライアント領域にコンポーネントが収まらないと勝手にスクロールバーが出てしまい具合が悪かった。スクロールバーを出さないためにはコンテナのhorizontalScrollPolicy, verticalScrollPolicyにoffを指定すればよいようだ。

また、コンテナ内のオブジェクト（たとえばロードした画像）が親コンテナからはみ出すようなケースもあるが、はみ出し部分を非表示にするにはclipContentにtrueを指定すればよい。

<mx:Canvas id="borderCanvas" width="180" height="300" x="0" y="0"
    clipContent="true" horizontalScrollPolicy="off"
    verticalScrollPolicy="off">
...
</mx:Canvas>

Flexアプリケーションのロード直後に関数を呼び出す

Flexアプリケーションはイベントドリブンプログラミングの方式なので、Flash Playerによりロードされると事前に定義されたオブジェクトが配置された状態で、ブラウザ内に表示されます。

もちろんこれで初期化が十分ならいいのですが、アプリケーション開始後に実際のコンテンツをほかのURLからXMLデータとしてダウンロードしたい場合など、アプリケーションの開始直後に初期化ルーチンを呼び出したいケースがあります。

このような場合にはApplicationクラスにinitializeイベントがありますので、このイベントハンドラをトリガに初期化ルーチンを起動できます。


Application.initializeイベントのハンドラとしてOnInitialize()を指定する例を以下に示します。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

    horizontalAlign="center" verticalAlign="center" initialize="OnInitialize()">

OnInitialize()内では、そのアプリケーションの初期化処理を行います。ここではUItimer(Timerクラス)を初期化する例を示します。

private function OnInitialize(): void {

    UItimer = new Timer(100, 0);

    UItimer.addEventListener("timer", OnTimerEvent);

    UItimer.start();

}

MacOS XにFlex SDKを導入

最近ホットなAdobe Flexをいじってみたくなったので、MacOS X 10.4 (Tiger) 環境に Adobe Flex 3 SDK を導入してみました。

FlexとはAdobeのFlashベースの技術で、リッチクライアントの実装などの用途に利用できるプログラミング言語です。Flexで記述したソースコードはコンパイルするとFlashと同じswf形式になり、Flash Playerで再生できます。作る側としてはJava appletに限りなく近いのですが、Java VM上ではなくFlash Player上で動作するため、Java appletより動作が軽快でFlashの特徴を合わせ持ったプログラムを作ることができます。

まずAdobeのサイトからflex_3_sdk.zip (約78MB) をダウンロードしてきます。このアーカイブを展開すると、以下のような構造になっています。

drwx------    8 hasegaw  hasegaw    272 Apr  3 16:57 ant
drwx------    3 hasegaw  hasegaw    102 Apr  3 16:57 asdoc
drwx------   29 hasegaw  hasegaw    986 Apr  3 16:57 bin
-rwx------    1 hasegaw  hasegaw    138 Apr  3 16:57 flex-sdk-description.xml
drwx------   16 hasegaw  hasegaw    544 Mar 31 18:08 frameworks
drwx------   52 hasegaw  hasegaw   1768 Mar 31 18:08 lib
-rwx------    1 hasegaw  hasegaw  33774 Apr  3 16:57 license-adobesdk.htm
-rwx------    1 hasegaw  hasegaw  27786 Apr  3 16:57 license-mpl.htm
-rwx------    1 hasegaw  hasegaw  15261 Apr  3 16:57 readme.htm
drwx------    4 hasegaw  hasegaw    136 Mar 31 18:08 runtimes
drwx------    8 hasegaw  hasegaw    272 Mar 31 18:08 samples
drwx------    9 hasegaw  hasegaw    306 Mar 31 18:08 templates

今回はこれらを/opt/local/flex_sdk_3/に展開し、/opt/local/flex_sdkにシンボリックリンクをはりました。

% sudo mv flex_sdk_3 /opt/local/
% sudo ln -s flex_sdk_3 /opt/local/flex_sdk
% sudo chown -R root:admin /opt/local/flex_sdk_3/
% sudo chmod -R go+rx /opt/local/flex_sdk_3/
% ls -l /opt/local/
(中略)
lrwxr-xr-x     1 root  admin    11 May  3 13:59 flex_sdk -> flex_sdk_3/
drwxr-xr-x    15 root  admin   510 May  3 13:53 flex_sdk_3
(中略)

これでファイルの展開は完了です。あとはFlex SDKのコマンドであるmxmlcコマンド等を実行できるようにパスを通します。とりあえず私の場合は ~/.profile に以下の通り書いてみました。

export PATH=$PATH:/opt/local/flex_sdk/bin

mxmlcコマンドで以下の表示がなされれば、とりあえず利用できます。

mb:~/work/flex hasegaw$ mxmlc
Loading configuration file /opt/local/flex_sdk_3/frameworks/flex-config.xml
Error: a target file must be specified
Use 'mxmlc -help' for information about using the command line.
mb:~/work/flex hasegaw$