Top > MyPage
 

Flexで、BlazeDSを使った簡単な例

4パネを作るためにコンテナの作成

少なくとも、Flexビルダーはインストールされ、現在すでにプロジェクトがあるという前提で話を進めます。

新規「MXMLアプリケーション」を作成

ファイル→MXMLアプリケーションで、staffControl.mxmlを作成します(レイアウト→absolute)。

コンテナを配置

コンポーネントタブ内のレイアウトというツリーから(下の図を参照---左下のタブ)コンテナを配置させます。

Flex

ちなみに、コンテナは色々ありますが、通常次の数個を使うことになるでしょう。

Canvas

Canvas レイアウトコンテナは、子コンテナや子コントロールを配置する矩形領域を定義します。他のすべてのコンポーネントとは異なり、子コントロールは \
    Flex によって自動配置することができません。

ということで、細かく座標や大きさを決めて配置させるもので、Flexが持っている自動配置---つまりWindowの大きさを(全体の大きさ)を変えたときに、自動で配置が換わるようには出来ないと言うことです。

つまり、細かいデザインを構築できますが、結構面倒だし、フレキシビリティは望めません。

Box, HBox, VBox

Box レイアウトコンテナでは、子が単一の垂直列または水平行にレイアウトされます。Box コンテナの direction \
    プロパティを使用し、垂直(デフォルト)レイアウトか水平レイアウトかを指定します。HBox および VBox コンテナは、horizontal \
    および vertical direction プロパティ値を持つ Box コンテナです。

ということで、BoxでDirectionをhorizontalを指定したものがHBoxであり、verticalを指定したものがVBoxということになります。もう少し具体的には

<mx:Box direction="horizontal">
..
</mx:Box>

<mx:HBox>
 ..
</mx:HBox>

であり、

<mx:Box direction="vertical">
..
</mx:Box>

<mx:VBox>
 ..
</mx:VBox>

ということになります。これらは、以下のように、ボタンなどのコンポーネントを自動で、横方向やら(HBox)、縦方向(VBox)に配置します。

HBoxとVBoxの例

Grid

Grid レイアウトコンテナを使用すると、セルで構成される行と列として子を配置できます。これは HTML テーブルとよく似ています。次の例に、9 \
    つのセルが 3 x 3 のパターンで構成されている Grid コンテナを示します。

のように、これはHTMLのテーブルとほぼ同じです。

Gridの例

のようなものを作成したければ、以下のようになります。ちなみに

  • table → Grid
  • tr   → GridRow
  • td   → GridItem

で、colSpanやhorizontalAlignなどが使えそうです。

<?xml version="1.0"?>
<!-- containers\layouts\GridSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Grid id="myGrid">

        <!-- Define Row 1. -->
        <mx:GridRow id="row1">
            <!-- Define the first cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 1"/>
            </mx:GridItem>
            <!-- Define the second cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="2"/>
            </mx:GridItem>
            <!-- Define the third cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 3"/>
            </mx:GridItem>
        </mx:GridRow>

        <!-- Define Row 2. -->
        <mx:GridRow id="row2">
            <!-- Define a single cell to span three columns of Row 2. -->
            <mx:GridItem colSpan="3" horizontalAlign="center">
                <mx:Button label="Long-Named Button 4"/>
            </mx:GridItem>
        </mx:GridRow>

        <!-- Define Row 3. -->
        <mx:GridRow id="row3">
            <!-- Define an empty first cell of Row 3. -->
            <mx:GridItem/>
            <!-- Define a cell to span columns 2 and 3 of Row 3. -->
            <mx:GridItem colSpan="2" horizontalAlign="center">
                <mx:Button label="Button 5"/>
            </mx:GridItem>
        </mx:GridRow>

    </mx:Grid>
</mx:Application>

Panel

Panel \
    レイアウトコンテナは、タイトルバー、タイトル、ステータスメッセージ領域(タイトルバー内)、境界線、および子のコンテンツ領域で構成されます。一般に、Panel \
    コンテナは、単体で使用可能なアプリケーションモジュールをラップする場合に使用します。例えば、アプリケーションに対して 3 つの Panel \
    コンテナを定義し、それぞれに、フォーム、ショッピングカート、カタログを表示させることが可能になります。

ということで、単純なBoxとは違い

  • タイトルバー
  • タイトル
  • ステータスメッセージ領域(タイトルバー内)
  • 境界線
  • および子のコンテンツ領域

などが、初めからすでに登録されているという感じでしょうか。

Panelの例

実際には

<?xml version="1.0"?>
<!-- containers\layouts\PanelCBar.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel title="My Application" 
        paddingTop="10" paddingBottom="10" 
        paddingLeft="10" paddingRight="10" 
        width="300">

        <mx:Script>
            <![CDATA[
                private function addToCart():void {
                    // Handle event.
                }
            ]]>
        </mx:Script>

        <mx:HBox width="100%">
            <!-- Area for your catalog. -->
        </mx:HBox>

        <mx:ControlBar width="100%">
            <mx:Label text="Quantity"/>
            <mx:NumericStepper id="myNS"/>
            <!-- Use Spacer to push Button control to the right. -->
            <mx:Spacer width="100%"/>
            <mx:Button label="Add to Cart" click="addToCart();"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

で、

Panelの例2

が表示できます。

実際に4パネを作成

記述したように、コンポーネントタブ内のレイアウトから、ドラッグ・アンド・ドロップで、ある程度マウスで形を整えながら作業します。作業は

  • 全体の枠として、HBox(黒枠)を作成。
  • 上記内(HBox)にVBox(青枠)を2つ作成(コンテナがHBoxなので、横に並ぶはずです)。
  • 作成した2つのVBox内にさらに、Panel(赤枠)を作成します。

さらに、これにtitleを以下のように付けます。付け方はソースに直接でも、右にある「Flexプロパティ」で入力してもOKです。

  • 左上→検索
  • 左下→検索結果一覧
  • 右上→詳細
  • 右下→捜査対象

実際には下のようなイメージです。

コンテナーの作成

ソース的には

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" \
    layout="absolute">
    <mx:HBox x="0" y="0" width="648" height="602">
        <mx:VBox width="229" height="100%">
<mx:Panel width="228" height="105" layout="absolute" id="search" \
    title="検索">
            </mx:Panel>
<mx:Panel width="229" height="481" layout="absolute" id="searchedList" \
    title="検索結果一覧">
            </mx:Panel>
        </mx:VBox>
        <mx:VBox width="65%" height="100%">
<mx:Panel width="411" height="443" layout="absolute" id="detailOrNewOrEdit" \
    title="詳細">
            </mx:Panel>
<mx:Panel width="410" height="140" layout="absolute" id="cart" \
    title="処理対象">
            </mx:Panel>
        </mx:VBox>
    </mx:HBox>
</mx:Application>

で、これを、実際コンパイルして、ブラウザーで見ると、次のようになっているはずです。

ブラウザーで実際に確認

コントロールの配置

  • 検索パネルには、テキストフィールドと検索ボタン
  • 一覧パネルには、DataGrid
  • 詳細パネルにはGridで、データの各項目(会社名や住所など)適当に配置
  • 操作対象は何もまだ入れない

という感じで、ほんの少しレイアウトを気にしながら、先ほどのコンテナなども修正を加えつつ、以下のようなものを作成する。

コントロール配置後

ソース的には現状以下のようになっている。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">
    <mx:HBox x="0" y="0" width="648" height="602">
        <mx:VBox width="229">
            <mx:Panel width="228" height="123" layout="vertical"
                id="search" title="検索" paddingTop="5" paddingBottom="5"
                paddingLeft="5" paddingRight="5">
                <mx:Form height="60" paddingTop="5" paddingBottom="5"
                    paddingLeft="5" paddingRight="5" width="195">
                    <mx:TextInput/>
                    <mx:FormItem>
                        <mx:HBox width="171" height="100%">
                            <mx:Spacer width="100%"/>
                            <mx:Button label="検索"/>
                        </mx:HBox>
                    </mx:FormItem>
                </mx:Form>
            </mx:Panel>
            <mx:Spacer height="100%"/>
            <mx:Panel width="229" height="457" layout="absolute"
                id="searchedList" title="検索結果一覧">
                <mx:DataGrid x="10" y="0" width="189">
                    <mx:columns>
                        <mx:DataGridColumn headerText="氏名"
                            dataField="name"/>
                        <mx:DataGridColumn headerText="ログイン名"
                            dataField="staffName"/>
                    </mx:columns>
                </mx:DataGrid>
            </mx:Panel>
        </mx:VBox>
        <mx:VBox width="65%">
            <mx:Panel width="410" height="498" layout="absolute"
                id="detailOrNewOrEdit" title="詳細">
                <mx:VBox width="380" height="438" x="10" y="10">
                    <mx:Grid width="371" height="396">
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="会社名" fontSize="12"/>
                            </mx:GridItem>
                            <mx:GridItem height="100%" width="238"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="地球に優しい廃棄物処理会社"
                                    fontSize="12"/>
                            </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="担当者" fontSize="12"/>
                            </mx:GridItem>
                            <mx:GridItem width="100%" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="うろずかいかさ" fontSize="12"/>
                            </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="郵便番号" fontSize="12"/>
                            </mx:GridItem>
                            <mx:GridItem width="100%" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="194-0004" fontSize="12"
                                />
                            </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="住所1" fontSize="12"/>
                            </mx:GridItem>
                            <mx:GridItem width="100%" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="千葉県香取市" fontSize="12"/>
                            </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="住所2" fontSize="12"/>
                            </mx:GridItem>
                            <mx:GridItem width="100%" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="大倉779-28" fontSize="12"
                                />
                            </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="住所3" fontSize="12"/>
                            </mx:GridItem>
                            <mx:GridItem width="100%" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle"> </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="電話" fontSize="12"/>
                            </mx:GridItem>
                            <mx:GridItem width="100%" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="0478-57-0808"
                                    fontSize="12"/>
                            </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="FAX" fontSize="12"/>
                            </mx:GridItem>
                            <mx:GridItem width="100%" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="0478-57-0808"
                                    fontSize="12"/>
                            </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="メールアドレス1" fontSize="12"
                                />
                            </mx:GridItem>
                            <mx:GridItem width="100%" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="chikkun@chikkun.com"
                                    fontSize="12"/>
                            </mx:GridItem>
                        </mx:GridRow>
                        <mx:GridRow width="100%" height="100%">
                            <mx:GridItem width="120" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="メールアドレス2" fontSize="12"
                                />
                            </mx:GridItem>
                            <mx:GridItem width="100%" height="100%"
                                horizontalAlign="left"
                                verticalAlign="middle">
                                <mx:Label text="chiku@und-meer.com"
                                    fontSize="12"/>
                            </mx:GridItem>
                        </mx:GridRow>
                    </mx:Grid>

                </mx:VBox>
            </mx:Panel>
            <mx:Panel width="410" height="89" layout="absolute"
                id="cart" title="処理対象"> </mx:Panel>
        </mx:VBox>
    </mx:HBox>
</mx:Application>

[2008-06-29 10:49]

  <html>
  </html>