MZ Platform工程管理作成チュートリアルⅢ

『工程管理アプリケーション作成チュートリアルⅡ』まででガントチャートの表示は完成しました。
ガントチャートの帯を移動して表示を変更することができますが、実際にデータベースのデータが変更されているわけではありません。
ここではガントチャートの表示を変更したら、［データベースアクセス］コンポーネントで更新SQL文を実行して、データベースを更新 するよ うにしま す。

1.更新されたデータの取得

ガントチャートのタスクをマウスで変更するときには、必ず選択状態になります。
このとき、選択データの「作業項目インデックス」と「系列インデックス」をメソッドで取得できます。
このインデックスを使って、どのデータが選択されたかを特定します。

［グラフデータ作成］複合コンポーネントの中では［分類テーブル作成］コンポーネントを使用して、ガントチャートに設定するテーブルデータを 整理・分類しています。
この「ガントチャート用分類テーブル」は［グ ラフデータ作成］複合コンポーネントからメソッドで取得できます。
「ガントチャート用分類テーブル」には、検索したtaskテーブルの行データが入っているので、 各データの「ID」も知ることができ、このIDをキーに更新SQLを実行することにします。

参考：エクセル連 携導入チュートリアル＞分類テーブル作成コンポーネント　
コンポーネント追加

1. 以下のコンポーネントを追加します。

   コンポーネント名	必要数	カテゴリー	コンポーネントキー
   テーブル格納変数	１	処理部品＞変数	編集用テーブル
   リスト格納変数	１	処理部品＞変数	選択された受注データ

接続処理設定

1. 分類テーブルの格納
接続元は［サブルーチン（ガントチャートデータ設定）］です。
1. 【接続4-5】ガントチャート用に分類されたテーブルを変数に格納します。
2. 【接続4-6】第0列目を削除します。
   分類テーブルは第０列目が項目名列でデータ列ではないため、系列インデクスで指定したときに位置が合うように削除します。
2. ガントチャート更新時のデータ取得
1. 【接続12-1】ガントチャート用分類テーブルからセルの値を取得します。
   引数に現在選択されている系列と項目のインデックスを使用して、分類テーブルからデータを取得します。
   取得したデータはリスト型のデータです。
   （例［9,2023/6/2,2023/6/6,A02,切削］）
2. 【接続12-2】取得したデータをリスト格納変数に格納します。

ガントチャートのタスクが更新されたとき、そのタスクの開始日時、終了日時を取得しますが、取得した日付データはDate型のため、文字列として見ると「 Wed Sept 15 09: 00 00 JST 2023」といった表現になっています。
このままではUpdateSQL文で使用しにくいため、［カレンダー］コンポーネントを使い、書式を指定して日付型のデータを文字列型のデー タとして取得します。

ここでは［ファンクション］を先頭に文字列変換の機能を作成しておきます。

１.［カレンダー］コンポーネント　

［カレンダー］は日付や時刻の演算処理を行うコンポーネントです。
日時の加算、減算や経過時間の取得などができます。
設定するデータの型はCalenderまたはDate型ですが、日 付書式を指定して文字列で設定も可能です。

２.［ファンクション］コンポーネント

［ファンクション］には任意の数の引数を呼び出し時、または事前に設定することができます。
この引数は他のコンポーネントのメソッド実行の引数として利用することができ、処理の呼び出しとデータ（引数）の受け渡しを一連の処理にまと められます。

メソッド「ファンクションの呼び出し」を実行すると、［ファンクション］からは｢処理要求イベント｣が発生します。
処理要求イベントは最後に接続されているメソッドの戻り値を「ファンクションの呼び出し」の戻り値として取得できるようになっています。
ファンクションの処理要求イベントの接続先処理が実行された後で、ファンクションの処理の結果を戻り値として利用できます。

コンポーネント追加

1. 以下のコンポーネントを追加します。

   コンポーネント名	必要数	カテゴリー	ｺﾝﾎﾟｰﾈﾝﾄｷｰ
   ファンクション	１	処理部品＞サブルーチン	日付文字列取得
   カレンダー	１	処理部品＞システム　 またはユーティリティー

接続処理設定

1. 日付データの設定
1. 【接続13-1】日付データをカレンダーに設定します。
   引数にはファンクションの第1引数を指定します。
   （後でファンクション呼び出し時にガントチャートの選択されている開始日または終了日のデータを設定します。）
2. 【接続13-2】書式を指定して、日付文字列を取得します。
   引数（日付書式）は「yyyy-MM-dd HH:mm:ss」とします。
   ここで取得した日付文字列は、後でファンクションを呼び出したときの戻り値となります。

［文字列格納変数］に更新SQL文の雛形を設定し、［ガントチャート］の更新データの開始日、終 了日、ID番号で置換えます。

コンポーネント追加

1. 以下のコンポーネントを追加します。

コンポーネント名	必要数	カテゴリー	ｺﾝﾎﾟｰﾈﾝﾄｷｰ
サブルーチン	１	処理部品＞サブルーチン	エクセル更新と読込
文字列格納変数	１	処理部品＞変数	データ変更用SQL

接続処理設定

1. MySQLのUpdate文
基本の文は「update テーブル名 列名１＝データ１, 列名２＝データ２ where 列名＝データ」です。
作業時間（WorkingTime)の列は自動的には更新されないため、関数で開始日時と終了日時の差を分単位で取得して更新することに します。
関数は「TIMESTAMPDIFF(MINUTE,’時刻1’, ’時刻2’）」です。

2. 更新SQLの雛形設定
1. 【接続14-1】雛形文字列を変数に設定します。
「update task set  dateStart='KAISHI', dateEnd='SHURYO', workingTime=TIMESTAMPDIFF(MINUTE, 'KAISHI', 'SHURYO') where id=AIDII」を設定します。
3. 開始日を取得して雛形文更新
1. 【接続14-2】ガントチャートの選択データの開始日を取得します。
引数は選択されている項目インデックスと選択されている系列インデックスです。
2. 【接続14-3】日付を書式指定で文字列に変換します。
先に接続処理を設定しておいた［ファンクション（日付文字列取得）］を呼び出します。
3. 【接続14-4】雛形の文字列の「KAISHI」と日付データを置換えます。
4. 終了日を取得して雛形文更新
1. 【接続14-5】ガントチャートの選択データの終了日を取得します。
2. 【接続14-6】日付を書式指定で文字列に変換します。
3. 【接続14-7】雛形の文字列の「SHURYO」と日付データを置換えます。
引数の取得方法は「メソッド処理結果」です。
メソッド処理結果選択窓には同名の選択候補が現れますが、2番目の候補を選択します。
5. ID列のデータを取得して雛形文更新
1. 【接続14-8】ガントチャートの選択データのIDを取得します。
事前にリストに格納してあるリストデータ（例［9,2023/6/2,2023/6/6,A02,切削］）か ら0番目のID番号データを取得します
2. 【接続14-9】雛形の文字列の「AIDII」とID番号を置換えます。
6. ガントチャートを更新したら、雛形文を更新する
接続元コンポーネントは［ガントチャート］です。
1. 【接続12-3】ガントチャートが更新されたら、［サブルーチン］を呼び出します。

確認 ここで一度実行して、Update文が置換わっているか確認し ます。
実行した後［文字列格納変数（データ変更用SQL）］をダブルクリックして、コンポーネント属性情報の「String」の項を確認してくだ さい。
（例：update task set  dateStart='2023-06-28 14:00:00', dateEnd='2023-06-28 16:45:00', workingTime=TIMESTAMPDIFF(MINUTE, '2023-06-28 14:00:00', '2023-06-28 16:45:00') where id=2）

ここまでは［テーブル］と［ガントチャート］を1つの画面に配置していましたが、［タブ］コンポーネントを使って、画面を 切り替えて見られるように配置を変更します。
　
画面編集
上位階層（フレーム画面）に配置していた［ボタン］を複合コンポーネント内の配置に変更します。

1. ボタンの移動
1. ［ボタン（データベースに接続）］を［テーブル表示］複 合コンポーネント 内に移動します。
   ビルダー編集画面の上位階層にある［ボタン］コンポーネントをコピーし、［テーブル表示］複合コンポーネント内に入り、貼り付け ます。
   （コピー＆ペーストすると接続先処理も同時にコピーされますが、不要なため、新しく複合コンポーネント内に［ボタン］を新規追加 しても良いです。）
2. ［ボタン（データベースから切断）］は削除します。
   接続の都度、SQLの実行が終わったら切断することにします。
3. 同様に［ボタン（ガントチャート表示）］も［ガントチャート表示］複合コンポーネント内に移動します。
2. ボタンの配置
1. ［テーブル表示］複合コンポーネントの「画面編集」画面に入ります。
   画面配置例を参考に、適当な位置に［ボタン］を配置します。
   配置方法は「縦方向整列」から「手動配置」 に変更します。
2. ［ガントチャート表示］複合コンポーネントの「画面編集」画面に入ります。
   適当な位置に［ボタン］を配置します。
   画面編集画面で部品を移動するとき、［Shift］キーを押しながら 選択すると、一度に複数の 部品を選択することができます。

接続処理設定

複合コンポーネント内の［ボタン］を押したらデータベースに接続する処理を作成します。
1. ［テーブル表示］のアクションイベントの伝播
［テーブル表示］複合コンポーネント内
1. 【接続8-1】［ボタン］を押したらイベント番号を指定して、イベントを伝播させます。
   イベント番号1を指定します。
2. ［ガントチャート表示］のアクションイベントの伝播
［ガントチャート表示］複合コンポーネント内
1. 【接続16-1】［ボタン］を押したらイベント番号を指定して、イベントを伝播させます。
   イベント番号１を指定します。
3. ［テーブル表示］のデータベース接続
上位階層に移動します。
1. 上位階層【接続7-1】データベースに接続します。
2. 上位階層【接続7-2】検索SQLを実行します。
3. 上位階層【接続7-3】検索結果をプロジェクトテーブルに設定します。
以上３つの接続を上位階層【接続1】の接続をコピーして貼り付けると簡単です。
【接続1】のイベント赤丸の上で右クリック＞［コピー］を選択します。
【接続7-1】のアクションイベントの赤丸の上で右クリック＞［貼り付け］を選択します。
4. 上位階層【接続7-4】データベースから切断します。
【接続2】の接続をコピーして貼り付けます。
4. ［ガントチャート表示］のデータベース接続
1. 上位階層【接続8-1】データベースに接続します。
2. 上位階層【接続8-2】検索SQLを実行します。
3. 上位階層【接続8-3】テーブルを設定します。
4. 上位階層【接続8-4】データベースから切断します。
以上、4つの接続を【接続5】からコピーして、【接続8】へ貼り付けます。

※イベント番号を複合コンポーネント内で指定していますが、ここでは設定しません。
今後使用する可能性を考えて、イベント番号を指定しています。

コンポーネント追加

1. 以下のコンポーネントを追加します。

   コンポーネント名	必要数	カテゴリー
   タブ	１	画面構成部品＞パネル

画面編集

1. タブの追加
上位階層の画面編集画面の左側階層ツリー領域で［フレーム］名の上で右クリックし、［タブ］を追加します。
2. 複合コンポーネントの配置
左側階層ツリー領域で［テーブル表示部］と［ガントチャート表示部］の２つの名前をドラッグしてを［タブ］上に移動し、［タブ］の下 に複 合コンポーネントが配置される形にしてください。

※パネル類、GUI複合コンポーネント以外の画面構成部品は、［タブ］に直接配置できません。
GUI複合コンポーネントを用いない場合は、［パネル］等を配置して、その領域上に画面構成部品を配置します。

3. タブ名の変更　
   ［実行（設定可）］ボタンで実行し、タブ0、タブ1のタイトルをそれぞれ「工程表表示」、 「ガントチャート表示」に変更します。

確認ここまで設定すると、実行して［タブ］をクリックしたときに画面を 切り替えられるようになります。