(18)【View(MXML)の作成】

アドレス帳サンプルアプリの続きです。

では、今回はView及びViewHelperを作成します。

ViewStackを使用して、一覧画面と登録画面の2画面を切り替えられるようにします。

■１.一覧画面の作成
[新規]-[mxmlコンポーネント]で、一覧画面のコンポーネントを作成します。
ファイル名：AddressList.mxml
ベース：Panel
としました。

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
    title="アドレスリスト"
    xmlns:helper="view.*">
<helper:AddressListViewHelper id="addressListViewHelper" />
    <mx:DataGrid x="10" y="10" width="360" height="182"
        id="grdAddress"
        dataProvider="{addressListViewHelper.model.addressList}"
        initialize="addressListViewHelper.selectAll();"
        click="addressListViewHelper.onClickDataGrid();" >
        <mx:columns>
            <mx:DataGridColumn headerText="ID" dataField="addressid"/>
            <mx:DataGridColumn headerText="氏名" dataField="name"/>
            <mx:DataGridColumn headerText="住所" dataField="address"/>
            <mx:DataGridColumn headerText="電話番号" dataField="telno"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:Button id="btnInsert" x="110" y="200" label="登録" click="addressListViewHelper.onInsertBtn();" />
    <mx:Button id="btnUpdate" x="166" y="200" label="修正" click="addressListViewHelper.onUpdateBtn();" />
    <mx:Button id="btnRemove" x="222" y="200" label="削除" click="addressListViewHelper.onRemoveBtn();" />
    <mx:Label  id="lblMessage" x="5" y="230" width="370" text="{addressListViewHelper.model.message}" height="20"/>
</mx:Panel>

まずは一覧画面レイアウトの完成！

■２.登録画面の作成
一覧画面と同様に登録画面コンポーネントを新規作成します。
ファイル名：AddressForm.mxml
ベース：Panel
としました。

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
    title="アドレスフォーム"
    xmlns:helper="view.*" >
<helper:AddressFormViewHelper id="addressFormViewHelper" />
<!-- 入力チェック -->
<mx:StringValidator source="{txtName}" property="text" 
        tooShortError="必須です。" 
        tooLongError="20桁以内です。" 
        minLength="1" maxLength="20"  
        trigger="{btnRegist}" triggerEvent="click" 
        valid="addressFormViewHelper.onRegistBtn();"/>
    <mx:Form x="61.5" y="44" width="257" height="176">
        <mx:FormItem label="ID">
            <mx:Label id="lblId" text="ラベル"/>
        </mx:FormItem>
        <mx:FormItem label="氏名">
            <mx:TextInput id="txtName"/>
        </mx:FormItem>
        <mx:FormItem label="住所">
            <mx:TextInput id="txtAddress" />
        </mx:FormItem>
        <mx:FormItem label="電話番号">
            <mx:TextInput id="txtTelno"/>
        </mx:FormItem>
        <mx:FormItem label="ラベル">
            <mx:Button id="btnRegist" label="登録"/>
        </mx:FormItem>
    </mx:Form>
    <mx:Button id="btnRetn" label="一覧に戻る" click="addressFormViewHelper.onReturnBtn();" x="239.5" y="228"/>
</mx:Panel>

登録画面レイアウトの完成！

■３.メイン画面(親画面)
address.mxmlを開いてViewStackを配置します。ViewStackには先に作成した二つのコンポーネントを入れます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*"
    xmlns:control="control.*"
    xmlns:service="service.*">
<!-- controller,serviceの各インスタンスを取得します -->
<control:AddressController id="addressController"/>
<service:AddressService/>
    <mx:ViewStack x="10" y="10" id="viewstack1" width="655" height="415" creationPolicy="all">
        <mx:Canvas id="vsAddressList" label="vsAddressList" width="100%" height="100%">
            <ns1:AddressList x="127.5" y="50" id="addressList" >
            </ns1:AddressList>
        </mx:Canvas>
        <mx:Canvas id="vsAddressForm" label="vsAddressForm" width="100%" height="100%">
            <ns1:AddressForm x="127.5" y="50" id="addressForm">
            </ns1:AddressForm>
        </mx:Canvas>
    </mx:ViewStack>
</mx:Application>