AiSee Windows アプリ作成マニュアル

(応用編)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

               

 

 

               

 

1  この資料の目的

 

 この資料では、「日報アプリ」の制作例を通じて、一歩進んだアプリの作成方法を紹介いたします。

 

 今まで使用していなかったリレーションの活用や、新しいテクニックなどを記載しており

 実用的なものばかりですので、是非実際のアプリ制作にお役立てください。

 

 尚、この資料に記載する内容はAiSee Windows アプリ作成例」「 AiSee データベース使用の

 Windows アプリ作成マニュアル 」を読了いただき、既に AiSee で簡単な DB 使用 Windows アプリが制作

  できるようになった方を想定しています。

 

 

 

         

2 今回作成するアプリ

 

 

  Daily Report(日報)

 

【画面設計】

 

 

 

 

 

テーブルのカラム:日付社員番号 / 部署名 / 名前 / 業務内容 / 入力時刻

入力時刻は見える必要がないため、NetBeans で幅が 0 のカラムを作成します。

 

 

【機能のポイント】

・ログインができる

・新規登録ができる

・新規登録すると、社員番号が自動で割り当てられる

・ログイン後、所属部署の日報が 10 件表示される

・日報を入力すると、最新の日報がテーブルの一番上に追加される

・管理者でログインすると全ての部署の日報が 100 件表示される

・テーブルには日報タイトル(インデックス)のみが表示され、詳細表示ボタン押下で  内容が確認できる

・日付/社員番号/名前/業務内容から日報を検索することができる

・入力済の日報の削除、修正ができる

 

 

【使用するデータベース】

 ファイル名:DailyReport.db

              テーブル名:スタッフ情報 / 日報

 

  テーブル 1:スタッフ情報

 

カラムは「社員番号・社員名・部署・パスワード」の 4 つで、一意の値は社員番号です。

 

 

 

  テーブル 2:日報

 

カラムは「日報日付・社員番号・部署・名前・業務内容・詳細・入力時刻」の 4 つで、    一意の値は入力時刻です。

 

   

3 アプリ制作を始めよう

 

プロジェクトは事前に作成してください。

Jar ファイルと db ファイルはダウンロードしてください。 

 

3.1 DB関連事前準備

 

後にサブシナリオとして使用するので最初に作成をしておきます。

 

DB_接続 完成画面>

<DB_接続 リレーション>

手順 1:リソース定義フォルダパスを取得する

手順 2:リソース定義フォルダパスに DB ファイル名を結合して DB ファイルパスを作成する

手順 3:ファイルパスからデータベースコネクションを作成して返す

手順 4:コネクションを返す

 

手順 1:リソース定義フォルダパスを取得する

 

手順 2:リソース定義フォルダパスに DB ファイル名を結合して DB ファイルパスを作成する

 

手順 3:ファイルパスからデータベースコネクションを作成して返す

 

手順 4:コネクションを返す

 

 

 

 

 

         

DB_削除 完成画面>

DB_削除 リレーション>

手順 1:データベーステーブルのレコードを削除(Delete)する

手順 2:コミット

手順 3:コネクションを切断

 

 

手順 2:コミット

 

 

手順 3:コネクションを切断

 

 

 

         

 

3.2 新規登録

 

新規登録 完成画面>

 

画面の動き

 

<新規登録 リレーション>

手順1:社員番号・部署・名前・PASS・既存社員番号最終を変数に代入

手順2:DB 接続」を実行する

手順3:データベース検索

手順4:繰り返し処理を行う

レコード情報の社員番号を取得して変数に入れる

手順 5:分岐処理を行う

既存_社員番号既存_社員番号最終

既存_社員番号最終既存_社員番号を代入する

既存_社員番号最終1 を足す

手順6:挿入マップを作成

手順7:データベースへ挿入する

手順8:コミット

手順9:切断

手順 10:新規登録欄の初期化と発番された社員番号を代入

手順 11:新規登録メッセージを作成

手順 12:メッセージと社員番号を結合する

手順 13:結合したメッセージを表示する

手順 14:イベント割当定義を行う

 

<新規登録 リレーション>

 

手順1:社員番号・部署・名前・PASS・既存社員番号最終を変数に代入

新規登録_社員番号 1

新規登録_部署 新規登録画面内コンボボックス

新規登録_名前 新規登録画面内名前欄

新規登録_パスワード 新規登録画面内 PASS

既存_社員番号最終 0

 

 

手順2:DB 接続」を実行する

 

DB 接続」のシナリオを事前に作成してください。

それをサブシナリオとして使用します。

下図は「DB_接続」のシナリオです。

 

 

 

手順3:データベース検索

         

 

手順4:繰り返し処理を行う

 

 

レコード情報の社員番号を取得して変数に入れる

         

 

手順5:分岐処理を行う

既存_社員番号既存_社員番号最終

       

 

 

既存_社員番号最終既存_社員番号を代入する

 

 

既存_社員番号最終1 を足す

既存_社員番号最終1 を足すと新規発番の社員番号になります。

既存_社員番号最終14 であれば 14+1 社員番号発番に入る数字は 15 になります。

 

手順6:挿入マップを作成

 

 

手順7:データベースを挿入する

 

 

手順8:コミット

 

 

手順9:切断

 

 

手順 10:新規登録欄の初期化と発番された社員番号を代入 

ここで新規発番された社員番号が登録完了後自動的にログイン画面の「社員番号」に入力されます。

 

 

手順 11:新規登録メッセージを作成

 

 

手順 12:メッセージと社員番号を結合する

 

 

手順 13:結合したメッセージを表示する

 

 

手順 14:イベント割当定義を行う

イベント割当定義で「E_DailySignIn」を作成、画面 ID は「DailySignIn」を選択します。

newadd_btn」を選択して処理シナリオに「DailySignIn_新規登録」を選択しましょう。

 

 

 

新規登録シナリオとイベント割当定義の設定は以上です。

 

ここで起動設定を行い、テスト実行をしてみましょう。

 

 

         

3.3 ログインとログアウト

 

DailySignIn_初期化のシナリオ 完成画面>

 

 

DailySignIn_初期化 のリレーション>

手順 1:指定した部品が所属するウィンドウのサイズを変更する手順 2:複数の代入処理を行う

 

 

<ログインのシナリオ 完成画面>

 

 

<ログインのシナリオで社員番号・PASS 共に合っていた場合に発動するシナリオ>

 

 

<画面の動き>

 

通常時

 

社員番号エラー時

 

パスワードエラー時

 

 

<ログイン のリレーション>

手順 1:文字列の内容が NULL であるかどうかを判定する(名前)

手順 2:文字列の内容が NULL であるかどうかを判定する(PASS

手順 3:分岐処理を行う

     ‘名前空欄チェック EQ EMPTY

     ‘PASS 空欄チェック EQ EMPTY

手順 4:名前・PW を変数へ代入

手順 5DB 接続」を実行する

手順 6:条件マップを作成する

手順 7:データベースを検索する

手順 8:繰り返し処理を行う

    レコード情報から’DB 社員名を取得する

    レコード情報から’DB パスワードを取得する

手順 9:分岐処理を行う

ケース 1入力された名前 EQ ‘DB 社員名 の場合

分岐処理を行う

ケース 1入力された PW’ NE ‘DB パスワード

メッセージを表示

ケース 2入力された PW’ EQ ‘DB パスワード

指定したコンポーネントをクリックする

ケース 2入力された名前 NE ‘DB 社員名

メッセージを表示手順 10:コネクションを切断

手順 11:イベント割当定義を行う

 

他のシナリオで同じ実装をしているものは割愛します

 

DailySignIn_初期化 のリレーション>

 

手順 1:指定した部品が所属するウィンドウのサイズを変更する

 

 

手順 2:複数の代入処理を行う

 

         

<ログイン のリレーション>

 

手順 1:文字列の内容が NULL であるかどうかを判定する(名前)

 

 

手順 2:文字列の内容が NULL であるかどうかを判定する(PASS

 

 

手順 3:分岐処理を行う

                           ‘名前空欄チェック EQ EMPTY

                           ‘PASS 空欄チェック EQ EMPTY

 

分岐処理を行う

 

名前空欄チェック EQ EMPTY だった場合のメッセージ

 

‘PASS 空欄チェック EQ EMPTY だった場合のメッセージ

 

 

手順 4:名前・PW を変数へ代入

 

 

手順 6:条件マップを作成する

 

 

手順 7:データベースを検索する

 

 

手順 8:繰り返し処理を行う

レコード情報から’DB 社員名を取得する

レコード情報から’DB パスワードを取得する

 

レコード情報から DB 社員名を取得する

 

レコード情報から’DB パスワードを取得する

 

 

 

手順 9:分岐処理を行う        

ケース 1入力された名前 EQ ‘DB 社員名 の場合

分岐処理を行う

ケース 1入力された PW’ NE ‘DB パスワード

メッセージを表示

ケース 2入力された PW’ EQ ‘DB パスワード

指定したコンポーネントをクリックする

ケース 2入力された名前 NE ‘DB 社員名

メッセージを表示

 

分岐処理を行う

 

ケース 1入力された名前 EQ ‘DB 社員名 の場合

分岐処理を行う

 

ケース 1入力された PW’ NE ‘DB パスワード だった場合のメッセージ

 

ケース 2入力された PW’ EQ ‘DB パスワード だった場合のリレーション

 

ケース 2入力された名前 NE ‘DB 社員名の場合メッセージを表示

 

手順 11:イベント割当定義を行う

         

 

<ログイン成功 のリレーション>

手順1:DB_接続」を実行する

手順2:条件マップを作成する(特定の社員番号で検索)

手順3:データベースのを検索する(スタッフ情報)

手順4:繰り返し処理を行う

    スタッフ情報のレコード情報から、キーを元に’DB 社員番号を取得して返す

    スタッフ情報のレコード情報から、キーを元に’DB 社員名を取得して返す

    Detail に社員名を代入

手順5:データベースのコネクションを切断する

手順6:DailyDetail_初期化」を実行する

    (まずDailyDetail_初期化」を作成してください)

手順7:イベント割当定義を行う

 

他のシナリオで同じ実装をしているものは割愛します

         

手順3:データベースのを検索する(スタッフ情報)

 

手順4:繰り返し処理を行う

 

スタッフ情報のレコード情報から、キーを元に’DB 社員番号を取得して返す

 

スタッフ情報のレコード情報から、キーを元に’DB 社員名を取得して返す

 

Detail に社員名を代入

 

手順6:DailyDetail_初期化」を実行する

 

DailyDetail_初期化」の内容 

 

 

手順7:イベント割当定義を行う

         

<ログアウトの設定>

 

 

イベント割当定義で「E_DailyDetail」を作成、画面 ID は「DailyDetail」を選択します。

logout_btn」を選択して処理シナリオに「DailySignIn_初期化」を選択しましょう。

 

 

 

ログインのシナリオ作成とイベント割当定義の設定は以上です。

 

ここでテスト実行をしてみましょう。

 

 

DailySignIn」画面でのログインログアウトの設定終了後は、DailyDetail のメイン画面の作成が主となるため、起動設定で「DailyDetail」の画面と「DailyDetail_初期化シナリオ」が最初に起動するよう、設定変更をされることをおすすめします。

 

DailySignInDailyDetail」にまたがる一連の流れをテストしたい場合には、ログアウトボタンを押して、再度ログインからテストするとスムーズです。

 

 

         

3.4 日報表示

 

 

 【日報表示についてのアプリ動作説明】

 

  前画面でログインが成功すると、日報のメイン画面「DailyDetail」のパネルが展開します。

  初期表示では、ログインをした当人が所属する部署の日報一覧が、新しい順で 10 件表示されます。

  左側には日報一覧表示、右側には日報を入力する欄が空欄の状態で表示されます。

     この初期表示の動作を、以下の「DailyDetail_初期化」シナリオ内に作成していきます。

 

 

DailyDetail_初期化 完成画面>

 

 

DailyDetail_初期化 リレーション>

手順 1:指定した部品が所属するウィンドウのサイズを変更する

手順 2:テーブルのすべての行を削除する

手順 3:現在のシステム日付を取得して返す

手順 4:今日の日付、EMPTY 代入処理

手順 5:コンポーネントの有効、無効の状態を設定する(修正完了ボタン)

手順 6DB 接続」を実行する

手順 7:条件マップを作成する(特定の社員名で検索)

手順 8:データベースを検索する(スタッフ情報)

手順 9:繰り返し処理を行う

スタッフ情報のレコード情報から、キーをもとに’DB 社員番号を取得して返す

スタッフ情報のレコード情報から、キーをもとに’DB 部署を取得して返す

手順 10’DB 社員番号’DB 部署の代入処理を行う

手順 11:分岐処理を行う

ケース 1:テキストフィールド(name_txt)の文字 EQ 管理者

 管理者でのログイン」に記載したため割愛

 

ケース 2:テキストフィールド(name_txt)の文字 NE 管理者       

条件マップを作成する(特定の部署名で検索)

データベースを検索して、指定した範囲のデータを取得して返す(日報 10 )   繰返し処理を行う

・レコード情報から、キーをもとにバリューを取得して返す

(日報日付・社員番号・名前・部署・業務内容・入力時刻)

・テーブル行モデルを作成

・行モデルに内容をセットする

(日報日付・社員番号・名前・部署・業務内容・入力時刻)

・行モデルの内容をテーブルに追加する

 

手順 12:データベース切断手順 13:日付でソートする

 

他のシナリオで同じ実装をしているものは割愛します

 

         

手順 1:指定した部品が所属するウィンドウのサイズを変更する

 

手順 2:テーブルのすべての行を削除する

 

手順 3:現在のシステム日付を取得して返す

 

手順 4:今日の日付、EMPTY 代入処理

 

 

手順 5:コンポーネントの有効、無効の状態を設定する(修正完了ボタン)

 

手順 7:条件マップを作成する(特定の社員名で検索)

 

手順 8:データベースを検索する(スタッフ情報)

手順 9:繰り返し処理を行う

 

スタッフ情報のレコード情報から、キーをもとに’DB 社員番号を取得して返す

 

 

スタッフ情報のレコード情報から、キーをもとに’DB 部署を取得して返す

 

 

手順 10’DB 社員番号’DB 部署の代入処理を行う

 

 

手順 11:分岐処理を行う

 

ケース 2:テキストフィールド(name_txt)の文字 NE 管理者   条件マップを作成する(特定の部署名で検索)

 

 

 データベースを検索して、指定した範囲のデータを取得して返す(日報 10 )

パラメータの 910 番目を指定することにより、DB から取得するデータの件数を指定できます。

この例では、09 までの計 10 件を取得しています。

 

 

繰返し処理を行う

 

 

・レコード情報から、キーをもとにバリューを取得して返す

(日報日付・社員番号・名前・部署・業務内容・入力時刻)

 

下図は「日報日付」です。同じ要領で「社員番号」「名前」「部署」「業務内容」「入力時刻」のリレーションを作成しましょう。

 

 

・テーブル行モデルを作成

 

・行モデルに内容をセットする

 (日報日付・社員番号・名前・部署・業務内容・入力時刻)

 

 下図は「日報日付」です。同じ要領で「社員番号」「名前」「部署」「業務内容」

 「入力時刻」のリレーションを作成しましょう。

 

 

・行モデルの内容をテーブルに追加する

 

手順 13:日付でソートする

 

パラメータ定義 No4 について、日付は数値ではなく、文字としてソートします  

 

 

         

3.5 日報入力

 

【日報入力時のアプリ動作説明】

 

 日報入力の際、下図のように[社員番号・部署名・名前・日付」は既に入力済の状態になっています。

 

 日付はアプリを起動している今日の日付が表示されていますが、別日の日報を入力したい場合

 「カレンダー」ボタンを押して日付を選択することもできます。

 

 

 入力が必要な項目は 3 つです。

 

 @日付:入力済だが、カレンダーから選択も可

 A業務内容選択:プルダウンから選択し「追加」ボタンを押すと文のテンプレートが詳細欄に入る

 B詳細:テンプレートに沿って詳細欄に入力する

 

 この章では、「カレンダー」「追加」「入力」ボタンに紐づくシナリオ作成(とイベント割当定義)  について説明していきます。

 

 

 

3.5.1 「追加」ボタンを押すと起動するシナリオ

 

【「追加」ボタン押下時のアプリ動作説明】

 

日報を記入する際、事前にテンプレートを表示させるための機能です。

プルダウンで開発 / 事務作業 / 営業 3 つのタスクから今日の業務内容を選択し、「追加」を押すと、詳細欄に業務内容に応じた文章のテンプレートが入力されます。

 

タスクの種類をさらに増やしたい場合には、NetBeans でコンボボックスを作成する際に、コンボボックスのプロパティから別の選択肢を入力し、増やしてください。

 

 

 

DailyDetail_追加 完成画面>

 

 

手順 1:業務内容を変数(‘業務内容')へ代入手順 2:分岐処理を行う

ケース 1業務内容' EQ 開発

                                         開発のテンプレートの代入

 

ケース 2業務内容' EQ 事務作業

                事務作業のテンプレートの代入

 

ケース 3業務内容' EQ 営業

 営業のテンプレートの代入   手順 3:イベント割当定義を行う

 

 

 

手順 1:業務内容を変数(‘業務内容')へ代入

 

コンボボックスの値(Value)を変数へ代入します。

 

 

手順 2:分岐処理を行う

 

 

開発のテンプレートの代入

 

他の業務内容のテンプレート文章も同様に、定数を作成し入力してください。

 

 

手順 3:イベント割当定義を行う

 

 

 

3.5.2 「カレンダー」ボタンを押すと起動するシナリオ

 

【「カレンダー」ボタン押下時のアプリ動作説明】

 

「カレンダー」ボタンを押すと以下のようなカレンダーが表示され、そこから日付の取得が可能になります。

 

 

 

DailyDetail_カレンダーのシナリオ>

 

 

手順 1:日付選択できるボップアップウィンドウを表示する

カレンダーから取得した日付が入るテキストボックスと画面の名前を指定し、完了です。

 

手順 2:イベント割当を行う

 

 

 

3.5.3 「入力」ボタンを押すと起動するシナリオ

 

  【「入力」ボタン押下時のアプリ動作説明】    上記の「カレンダー」ボタン、業務内容「追加」ボタンを使用して日報の内容を記入後、

  「入力」ボタンを押すと、記入した内容が DB とテーブルへの書込まれます。

  書込まれる内容は[日報日付・社員番号・名前・部署・業務内容・詳細・入力時刻]7 項目です。

 

 

DailyDetail_入力 完成画面>  

 

 

 

DailyDetail_入力 リレーション>

手順 1:文字列の内容が NULL であるかどうかを判定する(日付)

手順 2:文字列の内容が NULL であるかどうかを判定する(詳細)

手順 3:分岐処理を行う

ケース 1空欄チェック EQ EMPTY

メッセージを表示する

ケース 2空欄チェック:日付 EQ EMPTY

メッセージを表示する

手順 4:ボタンのテキストを取得する

手順 5:分岐処理を行う

ケース 1ボタンテキスト EQ 修正完了

DailyDetail 修正完了」を実行する

ケース 2ボタンテキスト EQ 入力

手順 6:現在のシステム日時を取得して、文字列として返す

手順 7:行モデル作成

手順 8:社員番号・名前・部署・業務内容・詳細を変数に代入

手順 9:行モデルへ内容をセットする

(日報日付・社員番号・名前・部署・業務内容・詳細)

手順 10:行モデルの内容をテーブルに追加する

手順 11DB 接続」を実行する

手順 12:データベースを検索する

手順 13:挿入マップを作成する

手順 14:データベースを挿入する

手順 15:コミット

手順 16:コネクションを切断

手順 17:詳細に EMPTY を代入

手順 18:日付でソートする

手順 19:イベント割当定義を行う

 

他のシナリオで同じ実装をしているものは割愛します

 

         

手順 1:文字列の内容が NULL であるかどうかを判定する(日付)

 

手順 2:文字列の内容が NULL であるかどうかを判定する(詳細)

 

手順 3:分岐処理を行う

 

ケース 1空欄チェック EQ EMPTY

 

 

ケース2:空欄チェック:日付 EQ EMPTY  メッセージを表示する

 

 

手順 4:ボタンのテキストを取得する

 

手順 5:分岐処理を行う

 

ケース 2ボタンテキスト EQ 修正完了

DailyDetail 修正完了」を実行する

 

ケース 1ボタンテキスト EQ 入力

 手順 6:現在のシステム日時を取得して、文字列として返す

 

手順 7:行モデル作成

 

手順 8:社員番号・名前・部署・業務内容・詳細を変数に代入

 

 

手順 9:行モデルへ内容をセットする(日報日付・社員番号・名前・部署・業務内容・詳細)

 

下図は「日報日付」です。同じ要領で「社員番号」「名前」「部署」「業務内容「詳細」のリレーションを作成しましょう。

 

 

 

手順 10:行モデルの内容をテーブルに追加する

 

手順 12:データベースを検索する

 

手順 13:挿入マップを作成する

 

 

手順 14:データベースを挿入する

 

手順 17:詳細に EMPTY を代入

 

手順 18:日付でソートする

手順 19:イベント割当定義を行う

 

入力のシナリオ作成とイベント割当定義の設定は以上です。

 

ここでテスト実行をしてみましょう。

 

 

         

3.6 詳細表示

 

【詳細表示のアプリ動作説明】

 

左画面で日報の詳細を閲覧したい行を選択し、「詳細表示」ボタンを押すと右画面の「詳細」欄に、日報の詳細が表示されます。

閲覧が終わったら「クリア」ボタンを押すと、右画面の内容がクリアされます。

 

 

 

3.6.1 「詳細表示」ボタンを押すと起動するシナリオ

 

DailyDetail_詳細表示 完成画面>

 

 

 

DailyDetail_詳細表示 リレーション>

手順 1:選択中である行のテーブル行モデルを取得して返す

手順 2:行モデルのカラムから入力時刻を取得して返す

手順 3DB 接続する」を実行する

手順 4:「入力時刻」で検索する条件マップを作成

手順 5:条件マップでデータベースを検索

手順 6:繰り返し処理を行う

レコード情報から内容を取得する

(業務内容・詳細・日報日付・社員番号・部署・名前)

 手順 7:コンボボックスを選択状態にする

手順 8:画面へ代入処理を行う(5 項目)

手順 9:データベースコネクション切断

手順 10:コンポーネントの有効、無効の状態を設定する(入力ボタン)

手順 11:コンポーネントの有効、無効の状態を設定する(修正ボタン)

手順 12:コンポーネントの有効、無効の状態を設定する(修正完了ボタン)

手順 13:コンポーネントの有効、無効の状態を設定する(追加ボタン)

手順 14:コンポーネントの編集可不可をセットする(詳細)

手順 15:イベント割当定義を行う

 

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

 

 

手順 1:選択中である行のテーブル行モデルを取得して返す

 

 

手順 2:行モデルのカラムから入力時刻を取得して返す

 

入力時刻をテーブルから取得し、変数入力時刻に入れ、この値を元に DB から検索します。

 

画面上のテーブルの「入力時刻」のカラムは幅が 0 のため、データが入っていても表示は  されていません。

 

 

手順 3DB 接続する」を実行する

            戻り値に「コネクション」の変数を入れます。

 

 

手順 4:「入力時刻」で検索する条件マップを作成

一意の値である入力時刻DB 検索時の条件として指定します。

 

 

 

手順 5:条件マップでデータベースを検索

戻り値にローカル変数レコードセットを設定します。

 

 

手順 6:繰り返し処理を行う

 

 

 

            → レコード情報から内容を取得する

(業務内容・詳細・日報日付・社員番号・部署・名前)

 

レコードセットから取り出した一行のレコード情報から、各カラムの内容ごとに変数を作り情報をセットします。

日報日付・社員番号・部署・名前についても、同様に作成します。

 

 

手順 7:コンボボックスを選択状態にする

 

 

 

 

 

この手順は、DB から取得したデータ入った変数業務内容の値を、コンボボックスに適用させるためのものです。

 

 

手順 8:画面へ代入処理を行う(5 項目)

 

DB から取得変数を作成して入れたそれぞれの値を、画面にセットしています。

 

 

手順 9:データベースコネクション切断

 

 

 

手順 10:コンポーネントの有効、無効の状態を設定する(入力ボタン)

手順 11:コンポーネントの有効、無効の状態を設定する(修正ボタン)

手順 12:コンポーネントの有効、無効の状態を設定する(修正完了ボタン)

手順 13:コンポーネントの有効、無効の状態を設定する(追加ボタン)

 

ここでは各ボタンの有効・無効の切り替えを行っています。

上図は「入力」ボタンについてのリレーションです。

他ボタンについても同様にリレーションを作成してください。

 

 

<詳細表示前>

 

 

<詳細表示後>

詳細表示を行っている最中は、余計なボタンが押せないよう無効化しています。

 

 

手順 14:コンポーネントの編集可不可をセットする(詳細)

 

 

詳細表示を行っている最中は、詳細欄の文字の編集ができないよう、詳細欄を無効化しています。

 

手順 15:イベント割当定義を行う

 

 

 

3.6.2 「クリア」ボタンを押すと起動するシナリオ

 

DailyDetail_クリア 完成画面>

 

 

DailyDetail_クリア リレーション>

手順 1:複数の EMPTY を代入

手順 2:ボタンのテキストをセットする(入力ボタン)

手順 3:コンボボックスを開発に戻す

手順 4:コンポーネントの有効、無効の状態を取得する(入力ボタン)

手順 5:コンポーネントの有効、無効の状態を取得する(修正ボタン)

手順 6:コンポーネントの有効、無効の状態を取得する(追加ボタン)

手順 7:コンポーネントの有効、無効の状態を取得する(修正完了ボタン)

手順 8:コンポーネントの編集可不可をセットする(詳細)

手順 9:分岐処理を行う

ケース 1:入力:有効無効 EQ false

コンポーネントの有効、無効の状態を設定する  手順 10:分岐処理を行う

ケース 2:入力:修正:有効無効 EQ false

コンポーネントの有効、無効の状態を設定する    手順 11:分岐処理を行う

ケース 3:入力:追加:有効無効 EQ false

コンポーネントの有効、無効の状態を設定する

手順 12:分岐処理を行う

ケース 1:入力:修正完了:有効無効 EQ false

コンポーネントの有効、無効の状態を設定する

手順 13:イベント割当定義を行う

         

 

手順 1:複数の EMPTY を代入

 

 

手順 2:ボタンのテキストをセットする(入力ボタン)

 

 

手順 3:コンボボックスを開発に戻す

 

 

手順 4:コンポーネントの有効、無効の状態を取得する(入力ボタン)

 

 

手順 5:コンポーネントの有効、無効の状態を取得する(修正ボタン)

 

 

手順 6:コンポーネントの有効、無効の状態を取得する(追加ボタン)

 

 

手順 7:コンポーネントの有効、無効の状態を取得する(修正完了ボタン)

 

 

手順 8:コンポーネントの編集可不可をセットする(詳細)

 

 

手順 9:分岐処理を行う

 

ケース 1:入力:有効無効 EQ false

コンポーネントの有効、無効の状態を設定する

 

 

手順 10:分岐処理を行う

 

 

ケース 1:入力:修正:有効無効 EQ false

コンポーネントの有効、無効の状態を設定する

 

 

手順 11:分岐処理を行う

 

 

ケース 1:入力:追加:有効無効 EQ false

コンポーネントの有効、無効の状態を設定する

 

手順 12:分岐処理を行う

 

 

ケース 1:入力:修正完了:有効無効 EQ false コンポーネントの有効、無効の状態を設定する

 

 

手順 13:イベント割当定義を行う

  

 

 

 

 

         

 

3.7 管理者でのログイン

 

【アプリの動作説明】

ログイン情報を元に、社員名が「管理者」であった場合のみ、自部署の日報 10 件のみを表示

するのではなく、全ての部署の日報を直近 100 件表示する、という設定を行います。

 

社員名欄に入っている文字が「管理者」であった場合とそうでない場合に処理を分岐させ

「管理者」の場合には、部署の条件なしに DB 検索を行い 100 件を返す、という処理です。

 

 

DailyDetail_初期化のシナリオ内部で、管理者がログインした場合の分岐を作成>

 

 

DailyDetail_初期化 管理者 リレーション>

手順 1:指定した部品が所属するウィンドウのサイズを変更する

手順 2:テーブルのすべての行を削除する

手順 3:現在のシステム日付を取得して返す

手順 4:今日の日付、EMPTY 代入処理

手順 5:コンポーネントの有効、無効の状態を設定する(修正完了ボタン)

手順 6DB 接続」を実行する

手順 7:条件マップを作成する(特定の社員名で検索)

手順 8:データベースを検索する(スタッフ情報)

手順 9:繰り返し処理を行うスタッフ情報のレコード情報から、キーをもとに’DB 社員番号を取得して返すスタッフ情報のレコード情報から、キーをもとに’DB 部署を取得して返す

手順 10’DB 社員番号’DB 部署の代入処理を行う

手順 11:分岐処理を行う

ケース 1:テキストフィールド(name_txt)の文字 EQ 管理者

データベースを検索して、指定した範囲のデータを取得して返す(日報 100 )    繰返し処理を行う

・レコード情報から、キーをもとにバリューを取得して返す

(日報日付・社員番号・名前・部署・業務内容・入力時刻)

・テーブル行モデルを作成

・行モデルに内容をセットする

(日報日付・社員番号・名前・部署・業務内容・入力時刻)

・行モデルの内容をテーブルに追加する

 

ケース 2:テキストフィールド(name_txt)の文字 NE 管理者  

 日報表示」に記載したため割愛

 

手順 12:データベース切断手順 13:日付でソートする

 

 

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

 

 

他のシナリオで同じ実装をしているもの(手順 11 以外)は割愛します

 

手順 11:分岐処理を行う

ケース 1:テキストフィールド(name_txt)の文字 EQ 管理者

データベースを検索して、指定した範囲のデータを取得して返す(日報 100 )

 

パラメータ 910 を指定する事で、099 の計 100 件のレコードを取得しています。

 

 

         

3.8 検索

 

【「検索」ボタン押下時のアプリ動作説明】

 

 プルダウンで「日付・社員番号・名前・業務内容」のいずれかを選び、テキストボックスに

 探したいワードを入力し「検索」を押すと、そのワードと完全一致するレコードを検索できます。

 

 下図では、「業務内容:営業」のレコードのみを表示しています。

 

 「検索」ボタン押下後は、同じボタンが「戻す」というボタンに変わっています。

 「戻す」を押すと、テーブルが元の状態に戻ります。

 

 DailyDetail_検索 完成画面>

 

 

DailyDetail_検索 リレーション>

手順 1:ボタンのテキストを取得する(検索 or 戻す)

手順 2:分岐処理を行う

ケース 2ボタンテキスト EQ 戻すボタンにテキストをセットする

DailyDetail_初期化」を実行する

 

ケース 1ボタンテキスト EQ 検索手順 3:ボタンにテキストをセットする

手順 4:文字列の内容が NULL であるかどうかを判定する

手順 5:分岐処理を行う

ケース 1空欄チェック EQ EMPTY

メッセージを表示する

 

ケース 2空欄チェック NE EMPTY

 

手順 6:検索スイッチの代入を行う

手順 7:テーブルのすべての行を削除する

手順 8DB_接続」を実行する

手順 9:分岐処理を行う

ケース 1検索スイッチ EQ 業務内容

ケース 2検索スイッチ EQ 日付

ケース 3検索スイッチ EQ 社員番号

ケース 4検索スイッチ EQ 名前

手順 10:条件マップを作成する

手順 11:データベースを検索する

手順 12:レコードセットで繰返し処理を行う

 

以下、日報表示にも記載あるため割愛

 

・レコード情報から、キーをもとにバリューを取得して返す

(日報日付・社員番号・名前・部署・業務内容・入力時刻)

・テーブル行モデルを作成

・行モデルに内容をセットする

(日報日付・社員番号・名前・部署・業務内容・入力時刻)

・行モデルの内容をテーブルに追加する

手順 13:コネクションを切断

手順 14:イベント割当定義

 

 

 

手順 1:ボタンのテキストを取得する(検索 or 戻す)

 

 

手順 2:分岐処理を行う

 

 

ケース 2ボタンテキスト EQ 戻す  ボタンにテキストをセットする

 

 

DailyDetail_初期化」を実行する

 

「戻す」を押した場合の動作なので、サブシナリオで初期化シナリオを呼出しリセットします。

 

ケース 1ボタンテキスト EQ 検索  

手順 3:ボタンにテキストをセットする

 

コンポーネントの指定の部分は「_I_See_This_Instance_」の記載なしでも動作します。

検索ボタンを押した後、そのボタン内の文字を「戻す」に変える処理です。

 

手順 4:文字列の内容が NULL であるかどうかを判定する

 

 

手順 5:分岐処理を行う

 

 

ケース 1空欄チェック EQ EMPTY メッセージを表示する

 

 

ケース 2空欄チェック NE EMPTY  

手順 6:検索スイッチの代入を行う

 

 

手順 7:テーブルのすべての行を削除する

 

 

手順 8DB_接続」を実行する

 

 

手順 9:分岐処理を行う

 

 

手順 10:条件マップを作成する

 

分岐で「検索スイッチ EQ 名前」に合致した場合のリレーションです。

他の 3 パターンも同様に作成してください。

 

手順 11:データベースを検索する

 

 

手順 12:レコードセットで繰返し処理を行う

 

以下の内容をループに入れます。DB から情報を取得し、テーブルに表示させるための

ループです。日報表示セクションに記載があるため以下は割愛します。

 

・レコード情報から、キーをもとにバリューを取得して返す

         (日報日付・社員番号・名前・部署・業務内容・入力時刻)

・テーブル行モデルを作成

・行モデルに内容をセットする

                        (日報日付・社員番号・名前・部署・業務内容・入力時刻)

・行モデルの内容をテーブルに追加する

 

 この処理の終了後、DB 切断をして完了となります。

 

手順 14:イベント割当定義

 

         

3.9 削除

 

3.9.1 削除

 

<削除 完成画面>

 

 

 

<削除 のリレーション>

手順 1DB_接続」を実行する

手順 2:データベースを検索してデータを返す

手順 3:選択中である行のテーブル行モデルを取得して返す

手順 4:選択中の行モデルのカラムから内容を取得して返す

手順 5:テーブルのカレント行を削除する

手順 6:削除の条件マップを作成する

手順 7DB_削除」を実行する

手順 8:イベント割当定義を行う

 

他のシナリオで同じ実装をしているものは割愛します

 

 

 

DailyMsgBox_削除初期化 完成画面>

手順 1:指定した部品が所属するウィンドウのサイズを変更する

手順 2:イベント割当定義を行う

 

 

<削除 リレーション>

 

手順 2:データベースを検索してデータを返す

 

 

 

手順 3:選択中である行のテーブル行モデルを取得して返す

 

 

 

手順 4:選択中の行モデルのカラムから内容を取得して返す

 

 

 

手順 5:テーブルのカレント行を削除する

 

 

手順 6:削除の条件マップを作成する

 

 

手順 7DB_削除」を実行する

 

 

手順 8:イベント割当定義を行う

         

DailyMsgBox_削除初期化 リレーション>

 

手順 1:指定した部品が所属するウィンドウのサイズを変更する

 

 

手順 2:イベント割当定義を行う

 

 

         

 

3.9.2 削除しない

 

削除しないはイベント割当定義のみです。

 

 

 

 

3.10 修正

  

 

3.10.1 修正

 

DailyDetail_修正 完成画面>

 

DailyDetail_修正 のリレーション>

手順 1:選択中である行のテーブル行モデルを取得して返す

手順 2:行モデルのカラムから入力時刻を取得して返す

手順 3DB_接続する」を実行する

手順 4:「入力時刻」で検索する条件マップ

手順 5:条件マップでデータベースを検索

手順 6:繰返し処理を行う

手順 7:レコード情報から業務内容を取得する

手順 8:レコード情報から詳細を取得する

手順 9:レコード情報から日報日付を取得する

手順 10:レコード情報から社員番号を取得する

手順 11:レコード情報から名前を取得する

手順 12:コンボボックスを選択状態にする

手順 13:画面へ代入処理を行う(4 つ)

手順 14:データベースコネクション 切断

手順 15:コンポーネントの有効、無効の状態を設定する(入力ボタン)

手順 16:コンポーネントの有効、無効の状態を設定する(修正完了ボタン)

手順 17:イベント割当定義を行う

 

他のシナリオで同じ実装をしているものは割愛します

 

  

MsgBox2 確定確認初期化 の完成画面>

手順 1:指定した部品が所属するウィンドウのサイズを変更する手順 2:イベント割当定義を行う

 

 

 

         

DailyDetail_修正 のリレーション>

 

手順 1:選択中である行のテーブル行モデルを取得して返す

 

 

 

手順 2:行モデルのカラムから入力時刻を取得して返す

 

 

手順 4:「入力時刻」で検索する条件マップ

 

 

手順 5:条件マップでデータベースを検索

 

 

手順 6:繰返し処理を行う

 

 

手順 7:レコード情報から業務内容を取得する

 

 

手順 8:レコード情報から詳細を取得する

 

 

手順 9:レコード情報から日報日付を取得する

 

 

手順 10:レコード情報から社員番号を取得する

 

 

手順 11:レコード情報から名前を取得する

 

 

手順 12:コンボボックスを選択状態にする

 

 

手順 13:画面へ代入処理を行う(4 つ)

 

 

手順 11:コンポーネントの有効、無効の状態を設定する(入力ボタン)

 

 

手順 12:コンポーネントの有効、無効の状態を設定する(修正完了ボタン)

手順 13:イベント割当定義を行う

         

DailyMsgBox2 確定確認初期化 リレーション>

 

手順 1:指定した部品が所属するウィンドウのサイズを変更する

手順 2:イベント割当定義を行う

 

 

         

3.10.2 修正完了

 

 

DailyDetail_修正完了 のリレーション>

手順 1:現在の時間を更新時刻に入れる

手順 2:選択中であるテーブル行モデルを取得して edit 値へ返す

手順 3:行モデルのカラムから内容を取得して返す(入力時刻)

手順 4DB_接続する」を実行する

手順 5:「入力時刻」で検索する条件マップを作成

手順 6:条件マップでデータベースを検索手順 7:繰返し処理を行う

手順 8:レコード情報から DB 入力時刻を取得する

手順 9:行モデルへ内容をセットする(DB 入力時刻)

手順 10:更新マップを作成する

手順 11:データベーステーブルのレコードを更新(Update)する

手順 12:トランザクションをコミットする

手順 13:コネクションを切断

手順 14:複数の代入処理を行う(更新後の値を変数に入れる)

手順 15:更新済の日付を行モデルの列へセットする

手順 16:更新済の業務内容を行モデルの列へセットする

手順 17:社員番号を行モデルの列へセットする

手順 18:名前を行モデルの列へセットする

手順 19:更新時刻を行モデルの列へセットする

手順 20:選択中テーブルの行を、行モデルで上書きする

手順 21DailyDetail_クリア」を実行する

手順 22:イベント割当定義を行う(内容確定「はい」)

手順 22:イベント割当定義を行う(内容確定「いいえ」)

 

 

手順 1:現在の時間を更新時刻に入れる

 

 

手順 2:選択中であるテーブル行モデルを取得して edit 値へ返す

 

 

手順 3:行モデルのカラムから内容を取得して返す(入力時刻)

 

 

手順 5:「入力時刻」で検索する条件マップを作成

 

 

手順 6:条件マップでデータベースを検索

 

 

手順 7:繰返し処理を行う

 

 

手順 8:レコード情報から DB 入力時刻を取得する

 

 

手順 9:行モデルへ内容をセットする(DB 入力時刻)

 

 

手順 10:更新マップを作成する

 

              手順 11:データベーステーブルのレコードを更新(Update)する

 

 

手順 14:複数の代入処理を行う(更新後の値を変数に入れる)

 

 

手順 15:更新済の日付を行モデルの列へセットする

 

 

 

手順 16:更新済の業務内容を行モデルの列へセットする

 

 

手順 17:社員番号を行モデルの列へセットする

 

 

 

手順 18:名前を行モデルの列へセットする

 

 

手順 19:更新時刻を行モデルの列へセットする

 

 

手順 20:選択中テーブルの行を、行モデルで上書きする

 

 

手順 21DailyDetail_クリア」を実行する

 

 

手順 22:イベント割当定義を行う(内容確定「はい」)

手順 22:イベント割当定義を行う(内容確定「いいえ」)

 

 

 

 

4 サーバーデータベースを試してみよう

 

サーバーデータベースは事前に作成してください。

各種ファイルはダウンロードしてください。 

 

4.1 DB関連事前準備

 

4.1.1 XAMPP のインストール

サーバーデータベースとしてXAMPPMySQLを使用します。

XAMPPのサイトからダウンロードしてインストールします。

 

4.1.2 DB アクセス用のシナリオを作成

4.1.2.1 検索シナリオの作成

< 検索 リレーション >

手順1:パラメータマップを作成し、初期値に検索列テキスト、テーブル名、条件マップをセットする

手順2:分岐処理を行う

その他条件が存在する:

パラメータマップにその他条件を追加する

手順3:パラメータマップをJSON文字列に変換する

手順4:HTTPリクエストのPostメソッドを送信する

手順5:検索結果をチェックする

手順6:分岐処理を行う

チェック結果が空文字の場合:

空文字を戻り値にしてシナリオを終了する

それ以外の場合:

検索結果をJSON形式になるように編集する

検索結果のJSON文字列をマップに変換する

マップから検索結果のレコードリストを取得する

検索結果のレコードリストを戻り値にしてシナリオを終了する

 

< 検索 リレーション 詳細 >

 

手順1:パラメータマップを作成し、初期値に検索列テキスト、テーブル名、条件マップをセットする

 

手順2:分岐処理を行う

その他条件が存在する:

 

パラメータマップにその他条件を追加する

 

手順3:パラメータマップをJSON文字列に変換する

 

手順4:HTTPリクエストのPostメソッドを送信する

 

手順5:検索結果をチェックする

 

手順6:分岐処理を行う

チェック結果が空文字の場合:

 

空文字を戻り値にしてシナリオを終了する

 

それ以外の場合:

検索結果をJSON形式になるように編集する

 

検索結果のJSON文字列をマップに変換する

 

マップから検索結果のレコードリストを取得する

 

検索結果のレコードリストを戻り値にしてシナリオを終了する

 

 

4.1.2.2 登録シナリオの作成

< 登録 リレーション >

手順1:パラメータマップを作成し、初期値にテーブル名、登録マップをセットする

手順2:パラメータマップをJSON文字列に変換する

手順3:HTTPリクエストのPostメソッドを送信する

手順4:登録結果のレコードリストを戻り値にしてシナリオを終了する

 

< 登録 リレーション 詳細 >

 

手順1:パラメータマップを作成し、初期値にテーブル名、登録マップをセットする

 

手順2:パラメータマップをJSON文字列に変換する

 

手順3:HTTPリクエストのPostメソッドを送信する

 

手順4:登録結果のレコードリストを戻り値にしてシナリオを終了する

 

4.1.2.3 削除シナリオの作成

< 削除 リレーション >

手順1:パラメータマップを作成し、初期値にテーブル名、条件マップをセットする

手順2:パラメータマップをJSON文字列に変換する

手順3:HTTPリクエストのPostメソッドを送信する

手順4:削除結果のレコードリストを戻り値にしてシナリオを終了する

 

< 削除 リレーション 詳細 >

 

手順1:パラメータマップを作成し、初期値にテーブル名、条件マップをセットする

 

手順2:パラメータマップをJSON文字列に変換する

 

手順3:HTTPリクエストのPostメソッドを送信する

 

手順4:削除結果のレコードリストを戻り値にしてシナリオを終了する

 

4.2 PHPの場合

4.2.1 PHP ファイルの設置

事前にダウンロードしたPHPファイルをインストールしたXAMPPのフォルダに設置します。

(格納先フォルダの例)C:/xampp/htdocs/PHP

 

4.2.2 PHP ファイルの修正

PHPファイル「 DBConnect.php 」を編集して「4.1 DB関連事前準備」で作成した接続先のホスト名、ユーザー名、パスワード、テーブル名を指定します。

 

 

4.2.3 DB を使用するシナリオの修正

例としてシナリオ「新規登録」を修正します。同様にすべてのシナリオのデータベース使用箇所を修正します。

 

< 新規登録 リレーション >

手順1:社員番号・部署・名前・ PASS・既存社員番号最終を変数に代入

手順2 DB 接続」を実行する

手順3:データベース検索

手順4:繰り返し処理を行う

レコード情報の社員番号を取得して変数に入れる

手順 5:分岐処理を行う

既存 _社員番号 既存 _社員番号最終

既存 _社員番号最終 既存 _社員番号 を代入する

既存 _社員番号最終 1 を足す

手順:挿入マップを作成

手順7:データベースへ挿入する

手順8:コミット

手順9:切断

手順 10:新規登録欄の初期化と発番された社員番号を代入

手順 11:新規登録メッセージを作成

手順 12:メッセージと社員番号を結合する

手順 13:結合したメッセージを表示する

手順 14:イベント割当定義を行う

 

 

< 新規登録 リレーション 修正詳細 >

 

手順2 DB 接続」を実行する

コメントアウトする

 

手順3:データベース検索

元のリレーションを削除し、サブシナリオとしてPHPの検索シナリオを呼び出す。

 

手順7:データベースへ挿入する

元のリレーションを削除し、サブシナリオとしてPHPの登録シナリオを呼び出す。

 

手順8:コミット

手順9:切断

コメントアウトする

 

 

4.3 Pythonの場合

4.3.1 Python ファイルの設置

事前にダウンロードしたPythonファイルをインストールしたXAMPPのフォルダに設置します。

(格納先フォルダの例)C:/xampp/htdocs/python

 

4.3.2 Python ファイルの修正

Pythonファイル「 DBConnect.py 」を編集して「4.1 DB関連事前準備」で作成した接続先のホスト名、ユーザー名、パスワード、テーブル名を指定します。

 

 

4.3.3 Python の環境設定

Pythonをサイトからダウンロード、インストールします。

XAMPP上でPythonが動くように設定をします。


XAMPPコントロールパネルを開き、ApacheConfigをクリックします。

メニューの「Apache(httpd,conf)」を選択します。


開かれたメモ帳の先頭から「AddHandler cgi-script 」で検索して、見つかった行の末尾に「.py」を追加します。


また、以下のPythonライブラリを追加します。

MySQLライブラリ:pip install mysql-connector-python

暗号・復号ライブラリ:pip install pycryptodome

 

4.3.4 DB を使用するシナリオの修正

例としてシナリオ「新規登録」を修正します。同様にすべてのシナリオのデータベース使用箇所を修正します。

 

< 新規登録 リレーション >

手順1:社員番号・部署・名前・ PASS・既存社員番号最終を変数に代入

手順2 DB 接続」を実行する

手順3:データベース検索

手順4:繰り返し処理を行う

レコード情報の社員番号を取得して変数に入れる

手順 5:分岐処理を行う

既存 _社員番号 既存 _社員番号最終

既存 _社員番号最終 既存 _社員番号 を代入する

既存 _社員番号最終 1 を足す

手順:挿入マップを作成

手順7:データベースへ挿入する

手順8:コミット

手順9:切断

手順 10:新規登録欄の初期化と発番された社員番号を代入

手順 11:新規登録メッセージを作成

手順 12:メッセージと社員番号を結合する

手順 13:結合したメッセージを表示する

手順 14:イベント割当定義を行う

 

 

< 新規登録 リレーション 修正詳細 >

 

手順2 DB 接続」を実行する

コメントアウトする

 

手順3:データベース検索

元のリレーションを削除し、サブシナリオとしてPHPの検索シナリオを呼び出す。

 

手順7:データベースへ挿入する

元のリレーションを削除し、サブシナリオとしてPHPの登録シナリオを呼び出す。

 

手順8:コミット

手順9:切断

コメントアウトする