MZ Platform開発チュートリアルL5（電卓を作ってみよう）

このチュートリアルは『開発チュートリアル（基礎編）』を基に説明しています。
サンプルアプリケーションはLesson05(電卓).mzaxです。

  1. 画面を作成する

    2. コンポーネント追加

    ここでは１桁の数値が扱える電卓にします。
    また、計算（演算）は足し算（加算）のみとします。

    コ ンポーネント追加
    1. 以下のコンポーネントを追加します。
      数が多いので一 括追加で追加すると便利です。
      2. コンポーネント名 必要数 カテゴリー コンポーネントキー
      フレーム 1 画面構成部品＞ウィンドウ 電卓
      数値入力フィールド 1 画面構成部品＞テキスト
      ボタン 12 画面構成部品＞ボタン

    2. 一括追加の例
      1. ビルダー編集画面上で右クリック＞コンポーネント一括追加を選択します。
        コンポーネント追加画面が表示されます。
      2. コンポーネント追加画面の中央の「フレーム」の追加数に「１」と入力します。
      3. 追加画面の右側の「テキスト」タブをクリックし、画面中央の「数値入力フィールド」の追加数を「１」と入力します。
      4. 追加画面の右側の「ボタン」タブをクリックし、画面中央の「ボタン」の追加数を「12」と入力します。
      5. 追加画面下の「追加数」が「14」になっているのを確認して［追加］ボタンを押します。
        コンポーネントが追加されます。
    完成画面例
    コンポーネント一括追加例

    画面編集

    フレーム画面を作成します。
    画面編集
    1. ツールボタン［画面編集］を押し、画面編集画面を表示します。
    2. コンポーネントを画面へ一括追加します。
      3. 画面編集画面上で右クリック＞［コンポーネント一括追加...］を選択します。

      参考：基 本操作＞画面編集＞一括追加

      ※フレーム画面へ一括追加してから、「配置方法：手動配置」に変更して部品を移動します。

    3. 基本の接続を作成します。
      4. 画面編集画面を閉じて、ビルダー編集画面で「アプリケーション開始時にフレームを表示する」処理と「フレームを閉じたときにアプリ ケーションを終了する」処理を作成します。

      参考：接 続処理の作成＞基本の接続処理

    4. ボタン名を変更します。
      5. ツールボタン［実行（設定可）］を押して、実行画面を表示します。
      各ボタンを右クリックしてボタン名をそれぞれ「1」～「9」、「C」、「＋」、「＝」に変更します。

      参考：画 面編集＞実行時の画面編集

    5. 部品の配置を変更します
      6. 画面編集画面に入り、「配置方法」を「横方向整列」から「手動配置」に変更します。
      完成画面図を参考に［ボタン］をマウスでドラッグして移動して配置します。
    画面編集　一括追加直後

    実行してボタン名を変更

    手動配置で画面の編集

  2. 内部処理を設定する

    3. 内部処理（ここでは計算処理）の部分を設定します。
    電卓の数字ボタンをクリックしたら、そのボタンの数字が数値入力フィールドに出力される。

    数値を表示する

    接続処理の作成
    1. 数値ボタンをクリックしたら数値入力フィールドにボタンの数値を表示する
      1. 【接続1-1】［ボタン（1）］のアクションイベントの接続先を［数値入力フィールド］に設定します。
        メソッド「表示したい文字列を設定する（String)」を選択します。
        引数を固定値で「1」と設定します。
      2. 【接続2-1】［ボタン（2）］の発生イベントにアクションイベントを選択します。
        【接続1-1】の接続先処理をコピーします。
        アクションイベントを示す赤丸の上で右クリックして、貼り付けを選択します。
        引数は固定値「2」に変更します。
      3. 【接続3-1】～【接続9-1】同様に【接続1-1】の接続先処理を［ボタン（3）］～［ボタン（9）］のアクションイベン トに貼り付けます。
        引数をそれぞれ、固定値「3」～「9」に変更します。

    ［編集画面図1］ 右 側接続先クリックすると起動メソッド図別窓表示　　

    入力したデータを計算する

    加算は「○×△＝□」の ような式で表すこ とがで きます。
    演算をするコンポーネントの中で、演算子（この場合は「+」）の左側”○”に 当たる部分を「左オペランド」、右側”△”に 当たる 部分を「右オペランド」と呼びます。

    ＋ボタンや＝ボタンが押されたとき、次のように○と△に数値を入力します。

    1. ＋ボタンが押された時、その時に数値入力フィールドに表示されている数字を○（左オペランド）へ設定する。
    2. ＝ボタンが押された時、その時に数値入力フィールドに表示されている数字を△（右オペランド）へ設定する。
    3. 最後に加算して、その結果を数値入力フィールドに表示して終了する。

    コンポーネント追加

    1. 以下のコンポーネントを追加します。
      2. コンポーネント名 必要数 カテゴリー
      加算（＋） １ 処理部品＞演算制御
    接続処理の作成
    1. 加算をする
      1. 【接続10-1】［ボタン（+）］のアクションイベントの接続先を［加算（+）］に設定します。
        メソッド「数値に変換後、左オペランドを設定する（String)」を選択します。
        引数：メソッド戻り値、数値入力フィールド、表示されている文字列を取得する
      2. 【接続11-1】［ボタン（＝）］のアクションイベントの接続先を［加算（+）］に設定します。
        メソッド「数値に変換後、右オペランドを設定する（String)」を選択します。
        引数：メソッド戻り値、数値入力フィールド、表示されている文字列を取得する
      3. 【接続11-2】演算を行います。
        ［ボタン（＝）］のアクションイベントの2番目の接続先として［加算（+）］を設定し、メソッド「演算を行う（）」を選択しま す。
    2. 加算結果を表示する
      1. 演算の処理が完了したら、［数値入力フィールド］に演算結果を表示します。
        ［加算（＋）］の処理完了イベントの接続先に［数値入力フィールド］を設定します。
        メソッド「表示したい文字列を設定する（String)」を選択します。
        引数：イベント内包、処理結果データ
    確認　実行して、一桁の足し算が行えることを確認します。

    ［編集画面図２］ 右 側接続先クリックすると起動メソッド図別窓表示　　

  3. 機能を拡張する

    4. 以下の機能を追加して使いやすくします。

    1. クリアボタン：「Ｃ」のボタンを押すと画面表示を「０」にするようにします。
    2. 連続計算：この状態では、「１＋２＋３＋４＋５」と入力すると「４＋５」だけが有効なので、連続して計算できるようにします。
    3. 計算終了：計算が終了したら、次の計算のために左右のオペランドをクリアします。

    クリアボタン

    「Ｃ」のボタンが押されたら、加算コンポーネントの内容をクリアし、画面表示を「０」に戻します。

    1. ［Ｃボタン］が押されたら［加算］コンポーネント内の左右オペランドに０を入れる。
    2. ０＋０を計算させて、結果の０を画面上に表示する。

    接続処理の作成
    1. ［Ｃ（クリア）ボタン］をクリックしたら表示を０にする
      1. 【接続13-1】左右オペランドに「０」を設定して演算を行います。
        ［ボタン（C）］のアクションイベントの接続先に［加算（+）］を設定します。
        メソッド「左右オペランド設定後、演算を行う （String,String)」を選択します。
        引数０：固定値、「0」
        引数１：固定値、「1」

    ［編集画面図３］ 右側接続先クリックする と起動メソッド図別窓表示　　

    連続計算

    これまでの設定では「１＋２＋３＋４＋５」と入力すると「４＋５」だけが有効になり、結果は「９」になります。
    これを「１＋２＋３＋４＋５」は「１５」と計算できるようにします。

    1. ［＋］ボタンが押されたら［＝］と同じ処理をするように設定します。
      途中でも計算が行われ、計算結果が正しく なります。
    接続処理の作成
    1. 連続計算機能を設定する
      1. 【接続10-2】［ボタン（＋）］の接続先に［加算（+）］を設定し、右オペランドを設定しま す。
      2. 【接続10-3】［ボタン（＋）］の接続先処理に［加算（+）］を設定し、演算を行います。
      3. 左オペランドを設定する処理【接続10-1】が、3つの処理の一番最後になるようにします。
      4. 以上１~３の接続設定を簡単に行うには
        1. ［Sift］キーを押しながら、【接続11-1】と【接続11-2】をコピーします。
        2. 【接続10-1】［ボタン（+）］の接続先処理［加算（＋）］の上で右クリック＞［貼り付け］＞［上］を選択し、貼り付 けます。
        3. 編集画面図４のような接続処理になります。

    接続処理をコピーし、貼り付け
    ［編集画面図４］ 右 側接続先クリックすると起動メソッド図別窓表示　

    計算終了

    計算が終了したら、次の計算のために左右のオペランドをクリアしておきます。

    1. 加算コンポーネントが計算を完了した時点で、左右のオペランドを「０」にクリアする。
    接続処理の作成
    1. 計算終了時のオペランドのクリア
      1. 【接続12-2】［加算（+）］の左右オペランドを０にクリアする。
        ［加算（＋）］の処理完了イベントに［加算（＋）］を設定します。
        メソッド「数値に変換後、左右オペランドに設定する（String,String)」を選択します。
        引数０：固定値、「０」
        引数１：固定値、「０」

    ［編集画面図５］
    （【接続12－1】のメソッド情報は省略） 右側接続先クリックすると起動メ ソッド図別窓表示　

    確認 ここまで作成すると、連続した一桁の数字の足し算ができるようになります。

    アプリケーションの名称を付ける

    作成したアプリケーションに名前を付けます。

    1. アプリケーションビルダー編集画面上部の［アプリケーション名称］の欄に「電卓アプリケーション」と入力します。
      自動的に［アプリケーション］コンポーネントの［Key］にも名前が入力されます。

    参考：知って いると便利＞コンポーネントキーの変更