Flex開発では、UI設計に気をつけて！

Flex

拝啓、Flexを始めて採用しようとしているWebアプリケーション開発者の方々へ。


ActionScriptが、他の言語と違う点として、後付で、UI系の言語実装を追加したのではなく、UI系ありきで、設計された言語といわれています。
そして、これを実感したのは、Flexを始めて採用したプロジェクトをやったときの話・・

画面設計時に、ButtonやCanvasなんかの配置としての画面構成は、概ね決まっていました。
ですが、コンポーネントの階層までは、意識しておらず、つまりは、平面１枚の画面構成だけが、決まっている形でした。

そして、イベントを拾うコンポーネントは、どの階層のコンポーネントで、やるかは深く考えずに、対象コンポーネントに登録して、実装していった結果。。。

といった具合に、メンテナンス性が抜群に悪いモノが出来てしまったのでした。
（加えていうなら、View部分以外にも、問題はあったんだけど、それはまた別のお話）


では、次に、以下のサンプルコードを試してみてください。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
        xmlns:mx="http://www.adobe.com/2006/mxml"
        creationComplete="init()" 
        layout="absolute">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            
            private function init():void {
                exeButton.addEventListener(MouseEvent.CLICK, buttonClick);
                msgLabel.addEventListener(MouseEvent.CLICK, labelClick);
                mainCanvas.addEventListener(MouseEvent.CLICK, canvasClick);
                mainPanel.addEventListener(MouseEvent.CLICK, panelClick);
            }
            
            private function buttonClick(event:MouseEvent):void {
                Alert.show("button");
            }
            
            private function labelClick(event:MouseEvent):void {
                Alert.show("label");
            }
            
            private function canvasClick(event:MouseEvent):void {
                Alert.show("canvas");
            }
            
            private function panelClick(event:MouseEvent):void {
                Alert.show("panel");
            }
            
        ]]>
    </mx:Script>
    
    <mx:Panel id="mainPanel" title="『ここはパネル』" width="100%" height="100%" layout="absolute">
        <mx:Canvas id="mainCanvas" width="80%" height="80%">
        
            <mx:VBox height="20%" borderColor="blue" borderThickness="2">
                <mx:Label text="階層構造は以下の通り" />
                <mx:Label text="＜panel　⇒　canvas　⇒　label　⇒　button＞" />
                
                <mx:Spacer height="100%" />
                
                <mx:Label id="msgLabel" text="『ここはラベル』" />
                <mx:Button id="exeButton" label="ボタン"/>
            </mx:VBox>
            
        </mx:Canvas>
    </mx:Panel>

</mx:Application>

Flexというか、ActionScript3では、イベントを発生させると、最上層のコンポーネントであるstageから順に最下層にあるコンポーネントまで、全てイベントを通知し、最下層に到達したら、さらに逆の順を辿って、最上層のstageまで通知が返っていく仕組みになっています。（上記のサンプルコードは、それが少し体感できるものじゃないかと思います）

では、想像してみてください。仕様上、このサンプルコードで書かれたコンポーネントの全てに、マウスのクリックイベントが必要だった時のことを。。

あなたなら、どうやって、それぞれのコンポーネントでクリックイベントを拾って実装しますか？ｗ


と、何か、変な話になってしまいましたが、私の経験からは、少なくとも以下の点を考慮した設計をやった方がよい気がします。

この辺、Webディレクターの方々には、当然のことなんでしょうけど、Webアプリケーション開発者の視点から伝えたかったのは、Flex（RIA）開発の際には『UI設計は、しっかりやろう』ということです。