flex DBのデータの修正

2011/07/11

FlexでDBにデータを新規追加できたので、今度は修正する。
教えてもらってなんとかできた。
なんとかできたけど、半分以上理解できないし、何が理解できないかが分からない。

とりあえず新しいファイルで一からやり直す。
※新規追加は正直なトコロ、不要なので今回は放置する。（必要なら「flex データの新規追加」を見る）

私の場合

Flexプロジェクト名が「test_db」。
DBはWinでXAMPPにあったMySQL。
「test」って名前のデータベースを作成して「test」って名前のテーブルを作成ずみ。
カラムはid(int),name(text),comment(text)

ファイルの追加

  1. プロジェクトの上で右クリック
  2. 新規：MXML アプリケーション
  3. 名前は任意。
  4. 「終了」ボタンを押す。

DBの内容を表示

DataGridをいれて、DBとバインドする。

  1. 「デザイン」モードにする
  2. パネルの「コンポーネント」にある「コントロール：DataGrid」をドラッグAndドロップ。
    ※適当にサイズを修正
  3. パネルの「データとサービス」の中にある「getALLTest():Test[]」を「DataGrid」へドラッグAndドロップ。
    ※とりあえず何も気にせず「OK」しておく。
    ※「戻り値の型のフォーム」は不要なのでチェックを外している。
  4. データグリッドを選択しパネルの「プロパティ」の「id」を変更する。
    ※変更しなくてもいいけど、あとで分かりづらくなるので「targetDataGrid」としておく

修正用フォームの作成

  1. 「デザイン」モードにする
  2. パネルの「データとサービス」の中にある「updateTest(item: Test):void」の上で右クリック。
  3. 「フォームを作成」を選択
  4. 何も気にせずに「終了」ボタンを押す。
    ※「フォームを生成する対象：サービスの呼び出し」「新規サービスの呼び出し：サービス（TestService）、操作（updateTest(item: Test):void）、（作成：入力パラメーターのフォームにチェック）」

※「次へ」ボタンは押してもいいし押さなくてもいい。でも、項目は全部必要。PHPの方で全部の項目を上書きするってあるため。PHP側でクエリを修正するならいらないかも。

IDの値を書き換え不可にする

きっと方法はあるんだろうけど、見える必要がないので隠す。

  1. 「ソース」モードに切り替える
  2. 「<s:FormItem label="Id">」を「<s:FormItem label="Id" visible="false" includeInLayout="false">」に変換

選択したデータをフォーム内に表示するように修正

データグリッドのデータを選択したときに修正用フォームに値を表示する

表示完了したときに関数（？）を実行

<s:Application>に「creationComplete="application1_creationCompleteHandler(event)"」を追加。

「データグリッドのデータを選択したとき」の処理を追加

<fx:Script>内に下記を追加

  1. protected function application1_creationCompleteHandler(event:FlexEvent):void
  2. {
  3.   targetDataGrid.addEventListener(GridSelectionEvent.SELECTION_CHANGE,onSelectedItem);
  4. }

意味合いとしては下記。

dataGridのIDが「targetDataGrid」ってヤツにイベントを追加（dataGrid.addEventListener）。
内容は「ID：targetDataGrid」で適当な行が選択されたたとき（GridSelectionEvent.SELECTION_CHANGE）、onSelectedItemを実行する

onSelectedItemの設定

onSelectedItemで実行するのは「dataGridの各値をフォームにセット」。
項目が３つしかないので下記のような感じ。

  1. private function onSelectedItem(e:GridSelectionEvent):void{
  2.   idTextInput.text = targetDataGrid.selectedItem.id;
  3.   nameTextInput.text = targetDataGrid.selectedItem.name;
  4.   commentTextInput.text = targetDataGrid.selectedItem.comment;
  5. }

フォームの中の「UpdateTest」ボタンを押したときの処理

内容を修正したあとにDBに反映させる。そのための処理。

<fx:Script>内にbutton_clickHandler()が勝手に追加してくれているはずだけど、追加されていなければ追加。以下、記載済みの部分は飛ばし読みする。

button_clickHandler()の追加

  1. protected function button_clickHandler(event:MouseEvent):void
  2. {
  3. }

オブジェクトのTest()を追加して、各項目をセット

オブジェクトのTest()はDataGridでデータにバインドした際に作成されたPHPのClass。

前回の分に追加記載したもの。

  1. protected function button_clickHandler(event:MouseEvent):void
  2. {
  3.   // 各項目をセット
  4.   var test:Test = new Test();
  5.   test.id = parseInt(idTextInput.text);
  6.   test.name = nameTextInput.text;
  7.   test.comment = commentTextInput.text;
  8. }

updateのクエリ実行

前回の分に追加記載したもの。

  1. protected function button_clickHandler(event:MouseEvent):void
  2. {
  3.   // 各項目をセット
  4.   var test:Test = new Test();
  5.   test.id = parseInt(idTextInput.text);
  6.   test.name = nameTextInput.text;
  7.   test.comment = commentTextInput.text;
  8.  
  9.   // updateの実行をする
  10.   updateTestResult.token = testService.updateTest(test);
  11.   testService.commit();
  12. }

修正後、dataGridの表示を更新

前回の分に追加記載したもの。

  1. protected function button_clickHandler(event:MouseEvent):void
  2. {
  3.   // 各項目をセット
  4.   var test:Test = new Test();
  5.   test.id = parseInt(idTextInput.text);
  6.   test.name = nameTextInput.text;
  7.   test.comment = commentTextInput.text;
  8.  
  9.   // updateの実行をする
  10.   updateTestResult.token = testService.updateTest(test);
  11.   testService.commit();
  12.   
  13.   // 修正後、dataGridの表示を更新
  14.   getAllTestResult.token = testService.getAllTest();
  15. }

これで、終了。

全ソース

あれこれ調査したけどほとんど役に立たない情報が多すぎる。
知ってる人にとっては役立つかもしれないけど…。
ソースを全部載せてくれていたら、何が違うのかとかも検証できたよかったのに。
ということで全ソース。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.          xmlns:s="library://ns.adobe.com/flex/spark"
  4.          xmlns:mx="library://ns.adobe.com/flex/mx"
  5.          xmlns:testservice="services.testservice.*"
  6.          xmlns:valueObjects="valueObjects.*"
  7.          creationComplete="application1_creationCompleteHandler(event)"
  8.          minWidth="955" minHeight="600">
  9.   <fx:Script>
  10.     <![CDATA[
  11.       import mx.controls.Alert;
  12.       import mx.events.FlexEvent;
  13.       
  14.       import spark.events.GridSelectionEvent;
  15.       
  16.       // テーブルにデータを表示
  17.       protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
  18.       {
  19.         getAllTestResult.token = testService.getAllTest();
  20.       }
  21.       
  22.       // テーブルのデータを修正
  23.       protected function button_clickHandler(event:MouseEvent):void
  24.       {
  25.         var test:Test = new Test();
  26.         test.id = parseInt(idTextInput.text);
  27.         test.name = nameTextInput.text;
  28.         test.comment = commentTextInput.text;
  29.         
  30.         updateTestResult.token = testService.updateTest(test);
  31.         testService.commit();
  32.         getAllTestResult.token = testService.getAllTest();
  33.         
  34.       }
  35.       
  36.       // データグリッドが選択されたときの処理
  37.       protected function application1_creationCompleteHandler(event:FlexEvent):void
  38.       {
  39.         targetDataGrid.addEventListener(GridSelectionEvent.SELECTION_CHANGE,onSelectedItem);
  40.       }
  41.       
  42.       // データグリッドが選択せれたら、修正用フォームに値を表示する
  43.       private function onSelectedItem(e:GridSelectionEvent):void{
  44.         idTextInput.text = targetDataGrid.selectedItem.id;
  45.         nameTextInput.text = targetDataGrid.selectedItem.name;
  46.         commentTextInput.text = targetDataGrid.selectedItem.comment;
  47.         
  48.       }
  49.     
  50.     ]]>
  51.   </fx:Script>
  52.   <fx:Declarations>
  53.     <s:CallResponder id="getAllTestResult"/>
  54.     <testservice:TestService id="testService"
  55.                  fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
  56.                  showBusyCursor="true"/>
  57.     <valueObjects:Test id="test"/>
  58.     <s:CallResponder id="updateTestResult"/>
  59.     <!– 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 –>
  60.   </fx:Declarations>
  61.   
  62.   <s:DataGrid id="targetDataGrid" x="7" y="5" width="677" height="163"
  63.         creationComplete="dataGrid_creationCompleteHandler(event)" requestedRowCount="4">
  64.     <s:columns>
  65.       <s:ArrayList>
  66.         <s:GridColumn dataField="id" headerText="id"></s:GridColumn>
  67.         <s:GridColumn dataField="name" headerText="name"></s:GridColumn>
  68.         <s:GridColumn dataField="comment" headerText="comment"></s:GridColumn>
  69.       </s:ArrayList>
  70.     </s:columns>
  71.     <s:typicalItem>
  72.       <fx:Object id="id1" comment="comment1" name="name1"></fx:Object>
  73.     </s:typicalItem>
  74.     <s:AsyncListView list="{getAllTestResult.lastResult}"/>
  75.   </s:DataGrid>
  76.   
  77.   
  78.   <s:Form x="10" y="180" defaultButton="{button}">
  79.     <s:FormItem width="241" label="Id" visible="false" includeInLayout="false">
  80.       <s:TextInput id="idTextInput" text="{test.id}"/>
  81.     </s:FormItem>
  82.     <s:FormItem label="Name">
  83.       <s:TextInput id="nameTextInput" text="{test.name}"/>
  84.     </s:FormItem>
  85.     <s:FormItem label="Comment">
  86.       <s:TextInput id="commentTextInput" text="{test.comment}"/>
  87.     </s:FormItem>
  88.     <s:Button id="button" label="UpdateTest" click="button_clickHandler(event)"/>
  89.   </s:Form>
  90. </s:Application>

新着（ニュース関連以外）

2018-07-26
冬真っただ中の年賀状の「新春」
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHP 画像の回転とヘッダ情報の関連：Orientationとimagerotate()とimagejpeg()
PHPで画像のヘッダ情報（？）の「Orientation」を元に画像回転させたい。
2018-03-05
WinPCにAndroid Studioをインストールする
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
ServiceWorkerについてのメモ
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryでdomを配列で受け取るためのメモ
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい

ニュース関連の新着

各種記事（昨日：2021/10/26）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/25）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/22）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/21）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/20）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/19）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/18）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/16）盛り合わせ：SEOとか。

Copyright© 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.