Top > SAStrutsあれこれ > Flexで従業員情報を登録しましょう(確認画面付き)


  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate Form layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()">
 
    <!-- 
         ActionScriptは外部からインクルードします。
    -->
    <mx:Script source="as/AddEmployee2.as" />
        
    <!-- 
         フォームのデータをバインディングしてデータモデルとしてまとめます
         タグ名はPOSTデータのデータ名になりアクションフォームのプロパティ
         名と対応します。
    -->
    <mx:Model id="checkModel">
      <root>
        <add>method</add>
        <name>{ename.text}</name>
        <jobType>{jobType.value}</jobType>
        <salary>{salary.text}</salary>
        <departmentId>{departmentId.selectedItem.id}</departmentId>
        <addressId>{addressId.selectedItem.id}</addressId>
      </root>
    </mx:Model> 
    
    <!-- 全件検索用POSTデータ -->
    <mx:Model id="findAll">
      <root>
        <findAll>method</findAll>
      </root>
    </mx:Model>
  
    <!--  
         ViewStackで入力画面と確認画面を管理します。
    -->
    <mx:ViewStack id="enterEmployee" selectedIndex="0" width="50%" height="350" backgroundColor="0xFFFFFF">
      
        <mx:Panel id="enter" title="ViewStack Container Example" height="350" width="50%" 
            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
     
            <mx:Form width="100%" height="100%" defaultButton="{btn_confirm}">
                <mx:FormHeading label="Enter values into the form."/>
     
                <mx:FormItem label="Name" required="true">
                    <mx:TextInput id="ename" width="200"/>
                </mx:FormItem>
     
                <mx:FormItem label="JobType" required="true">
                    <mx:ComboBox id="jobType" width="200">
                      <mx:dataProvider>
                        <mx:Array>
                          <mx:Object label="CLERK" data="CLERK" />
                          <mx:Object label="SALESMAN" data="SALESMAN" />
                          <mx:Object label="MANAGER" data="MANAGER" />
                        </mx:Array>
                      </mx:dataProvider>
                   </mx:ComboBox>
                </mx:FormItem>
     
                <mx:FormItem label="Salary" required="true">
                    <mx:TextInput id="salary" width="200"/>
                </mx:FormItem>
     
                <mx:FormItem label="Department" required="true">
                    <mx:ComboBox id="departmentId" width="200" labelField="name">
                    </mx:ComboBox> 
                </mx:FormItem>
                 
                <mx:FormItem label="Address" required="true">
                    <mx:ComboBox id="addressId" width="200" labelField="name">
                    </mx:ComboBox> 
                </mx:FormItem> 
                    
                <mx:FormItem>
                    <mx:Button label="登録内容を確認する" id="btn_confirm" width="150" click="confirmEnteredData();"/>
                </mx:FormItem>
            </mx:Form>
     
        </mx:Panel> 
    
        <mx:Panel id="confirm" title="ViewStack Container Example" height="350" width="50%" 
            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
     
            <mx:Form width="100%" height="100%" defaultButton="{submit}" borderStyle="solid">
                <mx:FormHeading label="Confirm your entered data." textAlign="left"/>
     
                <mx:FormItem label="Name">
                    <mx:Text text="{ename.text}" width="200"/>
                </mx:FormItem>
                
                <mx:FormItem label="JobType">
                    <mx:Text text="{jobType.text}" width="200"/>
                </mx:FormItem>
     
                <mx:FormItem label="Salary">
                    <mx:Text text="{salary.text}" width="200"/>
                </mx:FormItem>
                
                <mx:FormItem label="Department">
                    <mx:Text text="{departmentId.text}" width="200"/>
                </mx:FormItem>
     
                <mx:FormItem label="Address">
                    <mx:Text text="{addressId.text}" width="200"/>
                </mx:FormItem>
                
                <mx:FormItem>
                    <mx:HBox>
                        <mx:Button label="戻る" id="back" width="50" click="back2enter();"/>
                        <mx:Button label="登録" id="submit" width="50" click="regist();"/>
                    </mx:HBox>
                </mx:FormItem>
            </mx:Form>
        </mx:Panel>
  
    </mx:ViewStack>
 
    <!-- 
         フォームデータのバリデーションチェック
         まとめてチェックできるように配列化しておきます。
     -->
    <mx:Array id="validatorArray">
        <mx:StringValidator source="{ename}" property="text" minLength="1" maxLength="32"/>
        <mx:StringValidator source="{jobType}" property="text" />
        <mx:StringValidator source="{departmentId}" property="text" />
        <mx:StringValidator source="{addressId}" property="text" />
        <mx:NumberValidator source="{salary}" property="text" integerError="Enter Integer value"
            minValue="0" domain="int"/>
    </mx:Array>
</mx:Application>

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
-
|
|
|
|
!
 
 
-
|
-
|
|
-
|
|
|
-
|
|
|
|
!
-
|
-
|
|
|
-
|
!
!
!
!
 
 
-
|
!
 
 
-
|
!
 
 
-
|
|
!
 
 
-
|
|
!
 
-
|
-
|
-
|
!
!
 
 
-
|
!
// ActionScript file
import mx.core.UIComponent;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
import mx.rpc.http.mxml.HTTPService;
import mx.utils.ObjectUtil;
import mx.controls.Alert;
import mx.utils.URLUtil;
import mx.rpc.AsyncToken;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.collections.XMLListCollection;
import mx.collections.ArrayCollection;
 
import util.SAStrutsUtils;
 
//入力フォームの初期表示処理
public function init():void {
    System.useCodePage = true;
    jobType.selectedIndex = -1;
    SAStrutsUtils.post2sastruts("department", SAStrutsUtils.REQ_FINDALL, setDepartment, faultHandler);
    SAStrutsUtils.post2sastruts("address", SAStrutsUtils.REQ_FINDALL, setAddress, faultHandler);
}
 
//「確認」ボタンクリック時処理
public function confirmEnteredData():void {
    var errors:Array = Validator.validateAll(this.validatorArray);
    if(errors.length  * 0){
        //データが正常なので登録処理を行います。
        enterEmployee.selectedChild = confirm;
    } else {
        //バリデーションエラー時の処理
        var errorFields:Array = [];
        var errorMessages:Array = [];
        for each (var e:ValidationResultEvent in errors) {
            //エラー対象のプロパティ名格納
            errorFields.push(e.target.source);
            //エラーメッセージ格納
            errorMessages.push(e.message);
        }
        for each (var c:UIComponent in [ ename, jobType, salary, departmentId, addressId ]) {
            var n:int = errorFields.indexOf(c);
            if (n >= 0) {
                //エラープロパティを強調(太枠)表示します。
                c.setStyle("borderStyle", "solid");
                c.setStyle("borderThickness", 3);
            } else {
                c.setStyle("borderStyle", "inset");
            }
        }
    }
}
 
//「登録」ボタンクリック時処理
private function regist():void {
    SAStrutsUtils.post2sastruts("employee", checkModel, registResultHandler, faultHandler);
} 
 
//「戻る」ボタンクリック時処理
public function back2enter():void {
    enterEmployee.selectedChild = enter;
}
   
// サーバーから受信した部署データをコンボボックスにセット
private function setDepartment(e:ResultEvent):void {
    departmentId.dataProvider = e.result.Content.Department as XMLList;
    departmentId.selectedIndex = -1;
}
 
// サーバーから受信した住所データをコンボボックスにセット
private function setAddress(e:ResultEvent):void {
    addressId.dataProvider = e.result.Content.Address as XMLList;
    addressId.selectedIndex = -1;
}
           
private function registResultHandler(e:ResultEvent):void {
    //サーバー側の処理結果をチェックします。
    if( e.result.result  * "success" ) {
        Alert.show("登録成功です");
    } else {
        Alert.show("サーバー処理失敗\n\n理由 : " + e.result.message);
    }
}
 
// HTTPServiceでエラーが発生した
private function faultHandler(e:FaultEvent):void {
    Alert.show("HTTPService失敗\n\n理由 : " + e.fault.message);
}

添付ファイル: fileflex_emp_add2_3.jpg 204件 [詳細] fileflex_emp_add2_2.jpg 221件 [詳細] fileflex_emp_add2_1.jpg 214件 [詳細]

リロード   新規 編集 凍結解除 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2012-08-08 (水) 23:26:03 (2923d)