MZ Platform注文票アプリケーション作成チュートリアル

文字を書き込むためのコンポーネントには［ラベル］や［テキストフィールド］があり、［ラベル］コンポーネントは「一行の文字列を表示する」時に使います。
［テキストフィールド］コンポーネントには「一行の文字列を入力する」ことができます。
数値の入力には「数値入力フィールド」や「数値入力カウンタ」を使用します。
「数値入力カウンタ」は指定する値単位で増減が可能です。

1.注文入力画面作成準備

コンポーネント追加

1. 以下のコンポーネントを追加します。
   数が多いので一 括追加で追加すると便利です。

コンポーネント名	必要数	カテゴリー	コンポーネントキー
フレーム	1	画面構成部品＞フレーム	注文票
ラベル	5	画面構成部品＞テキスト	画面図を参照
テキストフィールド	2	画面構成部品＞テキスト	氏名欄 品名欄
数値入力フィールド	2	画面構成部品＞テキスト	単価欄 合計欄
数値入力カウンター	1	画面構成部品＞テキスト	数量欄

2. コンポーネントキーを変更します。
   ビルダー編集画面でコンポーネントをダブルクリックすると、「属性設定画面」が表示されます。
   ［テキストフィールド］、［数値入力フィールド］、［数値入力カウンター］のコンポーネントキーを先に変更しておきます。
   ［ラベル］はテキストを変更すると自動的にコンポーネントキーにも反映されるので、後で実行しながら変更することも可能です。

2.画面編集

画面編集の方法を参考にフレーム画面を作成します。
画面編集

1. 右の注文入力画面図を参考にコンポーネントを画面配置します。
   「配置方法：縦方向整列」にし、フ レーム画面へ一括追加してから、「配置方法：手動配置」に変更して移動すると簡単です。
   参考：基本 操作2＞画面編 集の配置方法
   
   ※［数値入力カウンター（数量欄）］の配置位置は下から2番目です。
   ※※［数値入力フィールド（合計欄）］が一番下になるように注意してください。
2. フィールドの幅が大体同じになるように調整します。
   各画面構成コンポーネントの既定の幅はそれぞれ違います。
   コンポーネントの端にマウスを合わせるとポインターが両矢印⇔の形になります。
   幅を揃えて調整します。
3. 基本の接続処理を作成します。
   画面編集画面を閉じて、ビルダー編集画面で「アプリケーション開始時にフレームを表示する」処理と「フレームを閉じたときにアプリ ケーションを終了する」 処理を作成します。
   参考:基本操作１
4. ［ラベル］のテキストを変更します。
   ［実行（設定可）］ボタンで実行し、各ラベルの上で右クリック＞［テキスト...］を選択し、「テキストの入力」画面からラベル名 を、それぞれ「氏名」「品名」「単価」「数量」「合計」に変更します。

１.帳票コンポーネントの追加

［帳票］を印刷するとき、［印刷プレビュー］画面を表示し、［印刷プレビュー］内の「印刷」ボタンをクリックして印刷することができま す。
「印刷」ボタンをクリックすると［印刷設定］画面が表示され、プリンタの設定や印刷の設定を行った後、印刷が実行できます。

コンポーネント追加
ボタンを押したら印刷プレビューが表示されるようにします。

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

コンポーネント名	必要数	カテゴリー	テキスト
ボタン	１	画面構成部品＞ボタン	印刷
帳票	１	入出力＞帳票

画面編集

1. 画面編集画面で［フレーム］上の適当な位置に［ボタン］を配置します。
2. 「実行（設定可）」ボタンで実行し、ボタンのテキストを『印刷』に変更します。

接続処理の作成

1. 【接続4-1】ボタンを押して印刷プレビューを表示する
引数には表示位置の基準となる親コンポーネントを指定します。
固定値で何も入力しないと画面中央に表示されます。

1.帳票画面の編集

参考：基本のコンポーネント＞帳票

帳票画面編集
帳票の内容はツールボタン「帳票編集」を押して、「帳票レイアウト編集」画面を表示し、その中で設定します。
注文票作成チュートリアルでは全て［ラベル］要素で帳票を作成しています。
［ラベル］要素の必要数は「11」です。
一括追加はできないので一つずつ追加し、内容と属性を設定し配置していきます。

1. 要素の追加
1. ビルダー編集画面下部の「帳票編集」ボタンを押して、「帳票レイアウト編集」画面を表示します。
   まだ帳票要素が載っていない、グリッド線のある帳票用紙が表示されます。
2. 帳票編集画面の帳票用紙の上で右クリック＞［帳票要素追加］＞［ラベル要素］を選択します。
   ラベル要素が追加されます。
   ドラッグして適当な位置に配置します。
2. データの設定
［ラベル］要素のデータ設定方法には、キーボードからの「テキスト入力」とコンポーネントから値取得をする「データ取得設定」がありま す。
1. ［テキスト入力］の方法
1. 追加されたラベル要素の上で右クリック＞［データ設定］＞［テキスト入力...］を選択します。
   「テキスト入力」窓が表示されます。
2. テキストの内容を入力して「OK]ボタンを押します。
2. ［データ取得設定］の方法
1. 追加されたラベル要素の上で右クリック＞［データ設定］＞「データ取得設定...］を選択します。
   「データ取得設定」窓が表示されます。
2. 取得元コンポーネント欄の右にある「変更...]ボタンを押します。
   「コンポーネント選択」窓が表示されます。
   データを取得したいコンポーネント名を選択して、下部にある「選択」ボタンを押します。
3. データ取得メソッドを選択します。
   必要に応じて全メソッド対象にチェックを入れ、メソッド選択欄をクリックします。
   メソッドを選択します。
3. 属性の設定
1. 追加されたラベル要素の上で右クリック＞［データ設定］＞［ラベル描画属性設定...］を選択します。
   上記表の属性変更例を参考にフォントサイズなどを調整します。

１.帳票作成例　ラベル要素・テキスト入力

「テキスト入力」でテキストを設定するラベル要素は以下の６つです。
一つずつ要素を追加し属性を設定します が、同じ属性のものはコピー＆ペーストすると簡単です。

要素名	テキスト内容	属性変更例
ラベル	注文票	ﾌｫﾝﾄｻｲｽﾞ：36，文字位置：中央
ラベル	氏名	ﾌｫﾝﾄｻｲｽﾞ：14，文字位置：中央，罫線太さ：０
ラベル	品名
ラベル	単価
ラベル	数量
ラベル	合計

1. 要素の追加
1. 帳票編集画面の帳票用紙の上で右クリック＞［帳票要素追加］＞［ラベル要素］を選択します。
   ラベル要素が追加されます。
   ドラッグして適当な位置に配置します。
2. データの設定
1. ［テキスト入力］
   追加されたラベル要素の上で右クリック＞［データ設定］＞［テキスト入力...］を選択します。
   「テキスト入力」窓が表示されます。
   
   例）『注文票』と入力して「OK]ボタンを押します。
3. 属性の設定
1. 追加されたラベル要素の上で右クリック＞［データ設定］＞［ラベル描画属性設定...］を選択します。
   ラベル描画設定画面が表示されます。
   
   例）文字フォント「変更」ボタンを押して、文字フォント選択画面を表示します。
   サイズ「36」を選択します。
   文字位置のコンボボックスをクリックして、「中央」を選択します。
   最後に「適用」ボタンを押します。
4. 帳票要素のコピー
属性設定が同じものはコピーして使うと簡単です。
1. 帳票要素の上で右クリック＞［帳票要素コピー］を選択します。
2. 帳票要素の外に移動し、帳票用紙の上で右クリック＞［帳票要素貼り付け］を選択します。
   要素が貼り付けられるので、適当な位置に配置します。
   
   例）「氏名」と入力した［ラベル］要素の上で右クリック＞帳票要素コピーを選択します。
   ［ラベル］要素の外に移動し、帳票用紙の上で右クリック＞［帳票要素貼り付け］を選択します。
   複数回貼り付けることも可能です。
   貼り付けた［ラベル］要素を適当な位置に移動し、右クリック＞［データ設定］＞［テキスト入力］でテキストを変更します。
3. 帳票要素を選択すると、左上に番号が表示されます。
   この番号は帳票レイアウト編集画面左側のツリー図の並び順と一致しています。
   

２.帳票作成例　データ取得設定

「データ取得設定...」でテキストを設定するラベル要素は以下の5つです。

素名	取得元コンポーネント／ データ取得メソッド	属性変更例
ラベル	テキストフィールド（氏名欄） テキストを取得する	ﾌｫﾝﾄｻｲｽﾞ：14，文字位置：左中央
ラベル	テキストフィールド（品名欄） テキストを取得する
ラベル	テキストフィールド（単価欄） 表示されている文字列を取得する	ﾌｫﾝﾄｻｲｽﾞ：14，文字位置：右中央
ラベル	テキストフィールド（数量欄） 　数値を取得する
ラベル	テキストフィールド（合計欄） 表示されている文字列を取得する

1. ［ラベル］要素を追加します。
   要素をコピー＆ペーストしてもOKです。
2. 要素の上で右クリック＞［データ設定］＞「データ取得設定...］を選択します。
   「データ取得設定」窓が表示されます。
3. 取得元コンポーネントとデータ取得メソッドを選択します。
   
   例）
1. 「データ取得設定」窓で、取得元コンポーネントの「変更」ボタンを押します。
   表示された「コンポーネント選択」窓で［テキストフィールド］を選択します。
   「選択」ボタンを押します。
2. データ取得メソッド欄の▽をクリックし、「テキストを取得する（）」を選択します。
   「設定」ボタンを押します。
4. 属性を設定します。　

３.帳票プレビューの確認

1. 帳票レイアウト編集画面を閉じ、編集画面に戻ります。
   「実行」ボタンを押し、フレーム画面を表示します。フレーム画面上の「印刷」ボタンを押して、印刷プレビュー画面を表示します。
2. 印刷プレビュー画面内右上の「印刷」ボタンを押すと、印刷ダイアログが表示されます。
   ダイアログの「印刷」ボタンを押すと、印刷できます。

close

１.データクリア処理の設定

画面にクリアボタンを追加し、ボタンを押すと入力した「単価」、「数量」および「合計」がクリアされるようにします。
後でフレーム画面にメニューを追 加し、メニューからもクリア機能が呼び出せるように、［サブルーチン］を使って処理をまとめます。

1. サブルーチンの役割
   サブルーチンとは頻繁に利用する小さな処理を個別に作成し、必要に応じて呼び出すという手法です。
   一つのイベント処理で複数のメソッドを起動している場合、それらのメソッドを「サブルーチン」としてまとめておくと便利です。
   例えば［ボタン］からのクリアの処理も、［メニュー］からのクリアの処理も接続処理は同じです。
   2回同じ処理を設定するのではなく、［サブルーチン］を先頭にクリア処理をまとめ、［ボタン］や［メニュー］から［サブルーチン］を 呼び出し ます。

コ ンポーネント追加

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

コンポーネント名	必要数	カテゴリー	コンポーネントキー
ボタン	１	画面構成部品＞ボタン
サブルーチン	１	処理部品＞サブルーチン	クリア

画面編集

1. 画面編集画面で［フレーム］上の適当な位置に［ボタン］を配置します。
2. 「実行（設定可）」ボタンで実行し、ボタンのテキストを『クリア』に変更します。

接続処理の作成
クリアボタンを押した時に、［テキストフィールド］の内容をクリアします。
［数値入力フィールド］の数値と［数値入力カウンタ］の値も初期値「０」にします。

1. クリア機能の作成
   
サブルーチンを接続元コンポーネンとし、処理を作成します。
合計欄は自動的に「０」になります。
1. 【接続5-1】［テキストフィールド（氏名欄）］の入力内容をクリアします。
   ［テキストフィールド］に空白の値を設定します。
2. 【接続5-2】［テキストフィールド（品名欄）］の入力内容をクリアします。
   ［テキストフィールド］に空白の値を設定します。
3. 【接続5-3】［数値入力フィールド（単価欄）］の入力内容をクリアします。
   値「０」を設定します。
4. 【接続5-4】［数値入力カウンター（数量欄）］の入力内容をクリアします。
   数値を初期値に設定します。
   既定の初期値は「０」です。
2. ［ボタン］との接続
1. 【接続6-1】［ボタン（クリア）］を押すと、［サブルーチン（クリア）］を呼び出します。

［テーブル］コンポーネントにテーブルを作成して（カタログ）、そこからデータを取得して、注文票画面に反映させるようにします。

１.フレームを用意する

新しい［フレーム］を用意し、そこに「品名」と「単価」の［テーブル］を配置します。
ボタンを押すと選択した「品名」と「単価」が、元の［フレーム］の注文票に登録されるようにします。
また、既に「品名」などが入力されている場合には［確認ダイアログ］コンポーネントを使って、上書き確認のメッセージを表示させます 。
コ ンポーネント追加

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

コンポーネント名	必要数	カテゴリー	ｺﾝﾎﾟｰﾈﾝﾄｷｰ／テキスト
フレーム	1	画面構成部品＞ウィンドウ	カタログ
ボタン	１	画面構成部品＞ボタン	カタログ
テーブル	１	画面構成部品＞テーブル	カタログ

画面編集

1. 画面編集画面で、一つ目の［フレーム（注文票）］上の適当な位置に［ボタン］を配置します。
2. 「実行（設定可）」ボタンで実行し、ボタンのテキストを『カタログ』に変更します。
3. 新しい［フレーム（カタログ）］上に［テーブル］を配置します。

接続処理の作成
カタログボタンを押した時に、［フレーム（カタログ）］を表示します。
アプリケーション終了時に、［フレーム（カタログ）］を閉じます。

1. カタログの表示
   
1. 【接続7-1】「カタログ」ボタンを押したら［フレーム（カタログ）］を表示します。
2. 終了時の処理
1. 【接続0-2-1】［フレーム（注文票）］を閉じるとき「カタログ」も閉じます。
   ［フレーム（注文票）］のアクションイベントにはアプリケーション終了の処理が繋がっていますが、終了以前に処理が行われるよ う、順番を入れ替えます。
   接続先コンポーネントをドラッグして上下に移動すると、処理の順番を入れ替えることができます。

２.テーブルの作成

テーブル＞テーブル作 成の基本を 参考にカタログテーブルを 作成します。
画面編集

1. ［実行（設定可）］ボタンで実行し、「カタログ」ボタンを押して、［フレーム（カタログ）］を表示します。
   まだ行や列は設定していない状態です。
2. テーブルの上で右クリック＞［テーブル作成...］を選択します。
   2列4行のテーブルを作成します。
   複数列を追加するときは、列型は初め「java.lang.String」（文字列型）を選択します。
3. 単価列（右側）の列型を整数に変更します。
   ［テーブル］上で右クリック＞［列］＞［列型］＞［整数］を選択しま す。
4. 列名を入力します。
   テーブル列の上で右クリック＞［列］＞［列名…］を選びます。
   列名の入力窓で列名を入力します。
5. 右図「カタログ完成画面例」を参考に、セルに品名と単価を入力します。
6. テーブル幅や列幅を調整します。

１.注文票にカタログデータを登録する

カタログ画面の［テーブル］上で選択されたセルのデータを取得し、そのデータを注文票の「品名」、「単価」に設定します。
選択された行のインデックスと列インデックスを指定することによって、「品名」および「単価」のデータを取得し、それぞれの値を［テキスト フィール ド］と［数値入力フィールド］に設定できます。

コ ンポーネント追加

1. ［サブルーチン］を先頭に処理をまとめ、［ボタン］から［サブルーチン］を 呼び出し ます

コンポーネント名	必要数	カテゴリー	テキスト／コンポーネントキー
ボタン	１	画面構成部品＞ボタン	注文票へ登録
サブルーチン	１	処理部品＞サブルーチン	注文登録

画面編集

1. 画面編集画面で［フレーム（カタログ）］上の適当な位置に［ボタン］を配置します。
   配置方法を「縦方向整列」に変更するとコンポーネントが縦に並びます。
2. 「実行（設定可）」ボタンで実行し、ボタンのテキストを『注文票に登録』に変更します。

接続処理の作成
［テーブル（カタログ）］からメソッド「指定セルの値を取得する（int,int)」でセルの値を取得し、［テキストフィールド］や［数値入 力フィールド］に設定します。　

1. セルの値の取得
   
サブルーチンを接続元コンポーネンとし、処理を作成します。
1. 【接続8-1】カタログテーブルの選択行の品名の値を取得します。
   引数０（指定行）：選択行の位置を取得
   引数１（指定列）：固定値「０」
   ※列番号は「０」から始まります。
2. 【接続8-2】［テキストフィールド（品名欄）］に設定します。
   ［接続7-1］で取得した値を、引数「取得方法：メソッド戻り値」で取得します。
3. 【接続8-3】カタログテーブルの選択行の単価の値を取得します。
   
4. 【接続8-4】［数値入力フィールド（単価欄）］に設定します。
   このとき、「メソッド処理結果選択」窓には同じ名前のメソッ ド名が現れるので、注意して2つ目のメソッド名を選択します。
2. ［ボタン］との接続
1. 【接続9-1】［ボタン（注文票へ登録）］と、［サブルーチン（注文登録）］を接続します。

１.上書き確認のダイアログ表示

カタログから注文票へのデータ登録時に注文票の「品名」「単価」欄にデータが入っていないか確認し、データが既に入っている時には、 上書 き確 認のダイアログを出すようにします。
既入力データの確認には［文字列格納変数］コンポーネントと［比較演算（＞）］コンポーネントを使用します。
「品名」の［テキストフィールド］から文字列を取得し、その文字列の長さが「０」より大きければ、既にデータが入っていると判定しま す。

コンポーネント追加

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

コンポーネント名	必要数	カテゴリー	テキスト／コンポーネントキー
文字列格納変数	１	処理部品＞変数	既登録確認
比較演算（＞）	１	処理部品＞演算制御
確認ダイアログ	１	画面構成部品＞ダイアログ

属性の編集
［確認ダイアログ］をダブルクリックし、「コンポーネント属性情報」窓を表示します。「Message」欄に『注文内容が上書きされ ま す。よ ろしいですか？』と入力して、「設定」ボタンを押します。
接続処理の作成
「品名」の［テキストフィールド］から文字列を取得し［文字列格納変数］に設定します。
［文字列格納変数］の文字列の長さが「０」より大きいか［比較演算（＞）］コンポーネントで比較します。
文字列が入っていれば［比較演算（＞）］の結果は「true 」（真）、文字列が入っていなければ文字列の長さは「０」なので、 ［比較演算（＞）］の結果は「 false 」（偽）となります。
イベント番号を設定して、結果がtrueのとき上書きしてよいか［確認ダイアログ］を出します。

1. 既登録（文字列長さ）の確認
   
（【接続9-1】の［サブルーチン］の「処理を呼び出す（）」は切り取って【接続11-1】、【接続12-1】に変更となります。）
1. 【接続9-2】文字列格納変数に文字列を設定します。
   「ボタン（注文票へ登録）」を押したら［テキストフィールド（品名）］から文字列を取得します。
2. 【接続10-1】文字列が設定されたら、長さが「０」より大きいか演算します。
2. 品名が未登録のとき、データを登録する
1. 【接続11-1】［比較演算（＞）］の処理が完了し、結果がfalseのときデータを登録します。
   ［サブルーチン（注文登録）］を呼び出し ます。
   （※【接続9-1】をコピーして貼り付けると簡単です）　
   イベント番号「０」を設定します。
3. 品名が登録済みのとき、確認ダイアログを表示する
1. 【接続11-2】［比較演算（＞）］の処理が完了し、結果がtrueのとき確認ダイアログを表示します。
   イベント番号「1」を設定します。
2. 【接続12-1】『はい』ボタンが押されたとき、データを登録します。
   ［サブルーチン（注文登録）］を呼び出します。
   （※【接続8-1】を切り取って貼り付けると簡単です）
   イベント番号「１」を設定します。

１.確認メッセージを変化させる

ここまでは［確認ダイアログ］に表示するメッセージ は「コンポーネント属性情報」の「 Message 」欄に入力して設定していましたが、「品名」の［テキストフィールド］に入力した内容に合わせて、メッセージを変化させることができます。
メッセージを変化させるには、［文字列格納変数］をもう一つ新たに追加し、変数内でメッセージの一部を「品 名」の［テキストフィールド］コンポーネントから取得した文字列で置き換えます。

コンポーネント追加

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

コンポーネント名	必要数	カテゴリー	テキスト／コンポーネントキー
文字列格納変数	１	処理部品＞変数	確認メッセージ

接続処理の作成
『注文内容「 X 」が上書きされます。よろし いですか？』という文字列を［文字列格納変数（確認メッセージ）］に設定します。
登録済みデータがあるとき、「品名」の［テキストフィールド］から文字列を取得し「 X 」を置き換えます（例：「鉛筆」）。
メッセージは『注文内容「鉛筆」が上書きされます。よろしいですか？』となります。

1. 雛形文字列の設定・置換え
   
1. 【接続11-3】登録済みデータがあるとき、雛形文字列を［文字列格納変数］に設定します。
   『注文内容「 X 」が上書きされます。よろし いですか？』というメッセージを設定します。
   ［文字列格納変数］からデータ設定イベントが発生し、続いて【接続13】の処理が行われます。
   イベント番号１を設定します。
   
   ※【接続11-2】のダイアログ表示処理よりも先に行われるように、接続先コンポーネントを上にドラッグして順番を入れ替えま す。
2. 【接続13-1】文字列格納変数にメッセージが設定されたら、「 X 」を置き換えます。
   メソッド「replaceFirst(String,String)」で引数０で指定した文字列を引数1の文字列で置き換えた結 果を取得できます。
   但し該当文字列が複数ある場合、最初の文字列のみ置換わります。
2. 確認ダイアログにメッセージを設定
1. 【接続13-2】メッセージを［確認ダイアログ］に設定します。
   置換えた文字列をメッセージとして設定します。

１.上書き確認のダイアログ表示

［ボタン］を配置して機能を設定してきましたが、よく使う機能を［メニュー］に登録してまとめることができます。
メニューを配置するには、［メニュー］コンポーネントと［メニューアイテム］コンポーネン トを使います。

コンポーネント追加

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

コンポーネント名	必要数	カテゴリー	テキスト
メニュー	１	画面構成部品＞メニュー	ファイル
メニューアイテム	3	画面構成部品＞メニュー	印刷 クリア 終了

画面編集
画面編集画面に入り、メニューとメニューアイテムを配置します。
他の画面構成部品と違い、画面編集画面左側、配置メニューツリーのコンポーネント名の上で右クリックして配置します。

1. メニューを配置します。
   ［フレーム（注文票）］上で右クリック＞［コンポーネント追加］で［メニュー］を選択します。
2. メニューアイテムを追加します。
   配置メニューツリーの［フレーム（注文票）］上で右クリック＞［コンポーネント追加］または［コンポーネント一括追加］で追加しま す。
3. テキストを変更します。
   編集画面上でコンポーネントをダブルクリックし、表示される「属性情報設定」窓で「Text」の欄を変更します。
   それぞれ「ファイル」、「印刷」、「クリア」、「終了」とします。

接続処理の作成

1. メニューアイテムと処理を接続します。
   
1. 【接続14-1】「印刷」メニューを選択すると印刷プレビューを表示します。
   【接続4-1】をコピーし、［メニュー（印刷）］のアクションイベントに貼り付けます。
2. 【接続14-2】「クリア」メニューを選択すると注文票入力画面をクリアします。
   【接続6-1】をコピーし、［メニュー（クリア）］のアクションイベントに貼り付けます。
3. 【接続14-2】「終了」メニューを選択すると注文票アプリケーションを終了します。
   ［フレーム（注文票）］を閉じます。