(25)S2Flex2画像パレット 画面の作成2

s2flex2

前回の続きです。
サンプルにしては規模がおおきすぎたと、
今思いましたが途中でやめれないので突っ走ります。

■ChildImageListItems.mxml(ポップアップの子画面の要素コンポーネント)

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        autoLayout="true" height="100%" width="100%" horizontalAlign="center">
    <mx:Image source="{data.myUrl}" width="50" height="50"/>
</mx:VBox>

前回の要素コンポーネントと同じです。TileListの要素コンポーネント。

■ImagePickerSearch.mxml(ポップアップの子画面１)

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
    xmlns:helper="imagepicker.imagemanage.helper.*">
    <helper:ImagePickerSearchHelper id="imagePickerSearchHelper" />
    <mx:VBox width="100%" height="100%">
        <mx:HBox width="100%">
            <mx:TextInput id="txtSearch" width="103"/>
            <mx:Button id="btnSearch" click="imagePickerSearchHelper.onSelectBtn();" label="検索"/>
            <mx:Button id="btnUpload" label="アップロード"/>
        </mx:HBox>
        <mx:TileList id="tllChildImageList" width="100%" height="100%"
            dataProvider="{imagePickerSearchHelper.model.imageList}"
            itemRenderer="jp.co.genephics.imagepicker.imagemanage.view.ChildImageListItems"
            initialize="imagePickerSearchHelper.selectAll();"
            doubleClickEnabled="true"
            doubleClick="imagePickerSearchHelper.onTileList();" />
    </mx:VBox>
</mx:Box>

画像パレット(ポップアップ)の中の子画面。
検索フォームと画像一覧を持ちます。

■ImagePickerUrl.mxml(ポップアップの子画面２)

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
    xmlns:helper="imagepicker.imagemanage.helper.*">
    <helper:ImagePickerUrlHelper id="imagePickerUrlHelper" />
    <mx:VBox width="100%" height="100%">
        <mx:Text text="画像のURLを指定してください。"/>
        <mx:Form width="250" height="141">
            <mx:FormItem label="URL">
                <mx:TextInput id="txtUrl" text="http://" width="130" />
            </mx:FormItem>
            <mx:FormItem >
                <mx:Button click="imagePickerUrlHelper.onOkBtn();" id="btnOk" label="OK"/>
            </mx:FormItem>
        </mx:Form>
    </mx:VBox>
</mx:Box>

画像URLでも指定できるようにしました。

■ImagePicker.mxml(ポップアップ)

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="300" height="300"
    xmlns:helper="imagepicker.imagemanage.helper.*"
    xmlns:components="imagepicker.imagemanage.view.*"
    x="287" y="116"
    title="ImagePicker"
    showCloseButton="true"
    close="imagePickerHelper.closeWindow()"
    mouseDownOutside="imagePickerHelper.mouseDownOutside();">
    <helper:ImagePickerHelper id="imagePickerHelper" />
    <mx:Object id="mainApp" />
    <mx:TabNavigator paddingRight="10" paddingLeft="10" paddingTop="10" paddingBottom="10" width="100%" height="100%">
        <mx:Canvas id="vsImagePickerSearch" label="検索" width="100%" height="100%">
            <components:ImagePickerSearch id="imagePickerSearch" x="0" y="0" />
        </mx:Canvas>
        <mx:Canvas id="vsImagePickerUrl" label="URL" width="100%" height="100%">
            <components:ImagePickerUrl id="imagePickerUrl" x="0" y="0" />
        </mx:Canvas>
    </mx:TabNavigator>
</mx:TitleWindow>

画像パレット本体。タブナビゲータで、先に作成したImagePickerSearchとImagePickerUrlを切り替えるようにします。

■SampleApp.mxml(サンプルのフォーム)

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
    xmlns:helper="imagepicker.imagemanage.helper.*">
    <helper:SampleAppHelper id="sampleAppHelper" />
    <mx:Label x="76" y="41" text="例えば、フォームなんかで。"/>
    <mx:Label x="76" y="98" text="画像"/>
    <mx:TextInput id="txtForm" x="119" y="96" width="160"/>
    <mx:Button id="btnRef" click="sampleAppHelper.onBtnRef();" x="287" y="96" label="参照"/>
    <mx:Image id="imgThmb" x="119" y="126"/>
</mx:Canvas>

使用例のページです。

■Application.mxml(アプリケーションMXML)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
    xmlns:view="imagepicker.imagemanage.view.*"
    xmlns:control="imagepicker.common.control.*"
    xmlns:service="imagepicker.common.service.*"
   layout="absolute"
    width="100%" height="100%" backgroundSize="100%"
    viewSourceURL="srcview/index.html"
    creationComplete="init();"
    backgroundColor="#ffffff"
    pageTitle="ImagePicker">
    <control:ImagePickerController />
    <service:ImagePickerService />
    <mx:VBox width="90%" height="90%">
        <mx:HBox x="0" y="0" width="100%" height="80%">
            <view:SampleApp width="50%" height="100%"/>
            <mx:Panel  paddingRight="10" paddingLeft="10" paddingTop="10" paddingBottom="10" width="50%" height="100%" title="ImageMagaer *管理画面*">
                <view:ImageManage />
            </mx:Panel>
        </mx:HBox>
    </mx:VBox>
</mx:Application>

アプリケーションMXMLです。
Cairngormを使用しているのでFrontControllerとサービスクラスのインスタンスを取得しています。


画面は全部終わりました。

次回は、AS側のファイルアップロード部分を作成します。