MZ Platform開発チュートリアルL12（複合コンポーネントを使ってみよう）

このチュートリアルは『開発チュートリアル（実践編）』を基に説明しています。
サンプルアプリケーションはAP_DATA\Tutorial\Lesson12(イメージ表示).mzaxです

  1. 複合コンポーネントによる階層化

    2. 複合コンポーネントの使用

    複合コンポーネントとは、いくつかのコンポーネントとひとまとめに し た新たなコンポーネントです。
    以下のような場合に便利です。

    参考：基本のコンポー ネント＞複合コンポーネント

    1. 繰り返し使われる操作をまと めておく
    2. ビルダー上の記述が長くなってしまった場合に整理する
    3. 機能単位にまとめて おき 開発作業 の 効率 を上げたい
    4. 後のメンテナンス時に見やす くしたい
    複合コンポーネントは、違う階層にコンポーネントをまとめておく方法です。

    ここでは前章の『画像ファイルを表示する (L12)』で使用した［画像ファイル入力］、［フレーム］、［イ メージビューワー］を［複合コンポーネント］に入れます。

    複合コンポーネントの追加

    コンポーネント追加
    1. 追加するコンポーネントは以下の通りです。
      1. ビルダー編集画面上で右クリック＞［複合コンポーネント作成］＞［コンポーネント］を選択します。
      2. 緑色の複合コンポーネントが追加されます。
        3. ※複合コンポーネントには［複合コンポーネント］と青色の［GUI複合コンポーネント］とがあります。

        参考：基本のコンポー ネント＞複合コンポーネント

      2. コンポーネント名 必要数 カテゴリー コンポーネント名称
      複合コンポーネント 1 複合コンポーネント作成＞コンポーネント 画像表示コンポーネント

    複合コンポーネントの名称変更

    1. 複合コンポーネントをダブルクリックして、複合コンポーネント内に入ります。
      2. 緑色の階層に変わり、複合コンポーネント内に入ったことが分かります。
    2. 画面左上のコンポ―ネント名称：＜No Name＞となっているところを「画像表示コンポーネント」と変更します。
    3. 画面右上のアイコン「上へ」をクリックし、上の階層に戻ります。

      4. 参考：基本 のコンポー ネント＞複合コンポーネント＞複合コンポーネント内での設定

    複合コンポーネント階層内

  2. 接続の作成

    3. コンポーネントの追加

    複合コンポーネント内でも、上位階層と同じようにコンポーネントを追加することができます。

    コンポーネント追加
    1. 複合コンポーネント内に追加するコンポーネントは以下の通りです。
      2. ※ここでは上位階層のコンポーネントと接続をコピーして複合コンポーネント階層に貼り付けます。
      コンポーネント名 必要数 カテゴリー
      画像ファイル入力 1 入出力＞ファイル
      フレーム 1 画面構成部品＞ウィンドウ
      イメージビューワー 1 画面構成部品＞グラフィックス

    2. 上位の階層で3つのコンポーネントを選択してコピーします。
    3. ［複合コンポーネント］をダブルクリックして階層内に入ります。
      4. 複合コンポーネントの階層で右クリック＞貼り付けします。
    4. 1つの接続と共に、3つのコンポーネントが貼り付けられます。
    3つのコンポーネントを選択し、コピー
    複合コンポーネント階層内に貼り付け

    メソッドの公開

    起動メソッドの公開
    1. 起動メソッドの公開
      2. 何も設定しないままでは複合コンポーネント内のメソッドは上位階層では利用できません。
      上の階層から複合コンポーネント内のメソッドを呼び出すにはメソッドを「公開」して使えるようにする必要があります。
      メソッドは必要なものだけを公開します。

      参考：基本 のコンポーネント＞複合コンポーネント＞メソッドの公開 を参考にメソッドを公開してください。

      ここで必要なのは以下の 4 つのメソッドです。

      1. ［フレーム］
        1. 【接続2-2】フレームを表示する
        2. 【接続0-2-3】フレームを閉じる
      2. ［画像ファイル入力］
        1. 【接続2-1】ファイル名を指定して画像を読み込む
      3. ［イメージビューワー］
        1. 【接続0-2-2】イメージをクリアする
    2. 接続先処理の変更
      3. 上位の階層に戻り、［イメージビューワー］と［フレーム］が接続先処理となっている箇所を［複合コンポーネント］に変更します。
    3. 不要なコンポーネントの削除
      4. 上位の階層で［イメージビューワー］と［フレーム］、［画像ファイル入力］は不要になったので削除します。

    確認ここまで作成すると、前章まで で作成したのと同様の画像表示の機能が実現できます。

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

    公開メソッドの設定

  3. 機能の追加

    4. 画像をウィンドウの領域表示の大きさに合わせる

    新しく［ボタン］と［パネル］を配置し、［ボタン］を押すと、［イメージビューワー］の表示領域にフィットするようにします。

    コンポーネント追加
    1. 追加するコンポーネントは以下の通りです。
      2. コンポーネント名 必要数 カテゴリー テキスト
      パネル 1 画面構成部品＞パネル
      ボタン 1 画面構成部品＞ボタン フィット

    画面編集

    ［パネル］を配置して、その上に［ボタン］を載せます。

    1. 画面編集画面に入ります。
      2. 配置方法は「領域配置」になっています。
    2. 画面編集画面で右クリック＞［コンポーネント追加］＞［パネル］＞［South］を選択します。
      ［フレーム］の下部に［パネル］が配置されます。
    3. 左側ツリー領域の［パネル］の名前をクリックします。
      4. 右側の領域がパネルの領域になります。
    4. ［パネル］の上に［ボタン］を配置します。
      画面編集画面を閉じます。
    5. 「実行（設定可）」ボタンで実行しながら、または［属性情報の設定］から［ボタン］のテキストを「フィット」に変更し ます。
    接続処理設定

    複合コンポーネント階層内に接続を作成します。

    1. 【接続1-1】ボタンを押したらイメージをフィットします。［ボタン（フィット）］のアクションイベントの接続先に［イメージ ビューワー］を設定します。
      メソッド「イメージをフィットする（）」を選択します。

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

    ※【接続0】は上位階層でコンポーネントを接続ごと移動したときのものです。

    画面作成例
    ボタンを押すと表示領域にフィットする

    画像を拡大・縮小する

    画像を拡大・縮小する機能を設定します。
    10% ずつサイズが変更されるようにします。

    コンポーネント追加
    1. 追加するコンポーネントは以下の通りです。
      2. コンポーネント名 必要数 カテゴリー テキスト
      ボタン 2 画面構成部品＞ボタン －10％
      ＋10％
      加算（＋） １ 処理部品＞演算制御
      比較演算（＞） １ 処理部品＞条件制御

    画面編集

    ［パネル］の上に［ボタン］を配置します。

    1. 画面編集画面に入ります。
    2. 左側ツリー領域の［パネル］の名前をクリックします。
      3. 右側の領域がパネルの領域になります。
    3. ［パネル］の上に２つの［ボタン］を配置します。
      4. 配置方法は「横方向整列」です。
    4. 「実行（設定可）」ボタンで実行しながら、または［属性情報の設定］から［ボタン］のテキストを「－10％」と「＋10％」に変 更し ます。
    画面作成例
    ボタンを押すと表示領域にフィットする
    接続処理設定

    ［加算（+）］を使い、倍率を計算し設定します。

    1. ［加算（＋）］コンポーネントの左右オペランドに値を設定する
      1. 【接続2】［イメージビューワー］にデータが設定されたとき、値を設定します。
        ［イメージビューワー］のデータ設定イベントの接続先に［加算（+）］を設定します。
        メソッド「数値に変換後、左右オペランドに設定する（String,String)」を選択します。
        引数０：固定値、100
        引数１：固定値、０
        2. ［加算（+）］の左オペランドに「100」を設定することで、初期値の倍率100%に設定したことになります。
        イベント番号１を設定します。
      2. 【接続1-2】イメージをフィットしたときの値を設定します。
        3. ［イメージビューワー］のデータ設定イベントの接続先に［加算（+）］を設定します。
        メソッド「数値に変換後、左右オペランドに設定する（String,String)」を選択します。
        引数０：メソッド戻り値、イメージビューワー、垂直方向のイメージ表示比率を取得する
        引数１：固定値、０
    2. 画像の倍率の変更
      1. 【接続3】［ボタン（＋10%）］を押したら、現在の倍率を「10」増加させます。
        2. ［ボタン（＋10%）］のアクションイベントの接続先に［加算（+）］を設定します。
        メソッド「数値に変換後、左右オペランドに設定する（String,String)」を選択します。
        引数０：メソッド戻り値、加算（+）、演算結果（左オペランド+右オペランド）を取得する
        引数１：固定値、10
      2. 【接続4】［ボタン（-10%）］を押したら、現在の倍率から「10」減少させます。
        3. ［ボタン（＋10%）］のアクションイベントの接続先に［加算（+）］を設定します。
        メソッド「数値に変換後、左右オペランドに設定する（String,String)」を選択します。
        引数０：メソッド戻り値、加算（+）、演算結果（左オペランド+右オペランド）を取得する
        引数１：固定値、-10 
    3. 倍率がマイナスにならないかチェックする
      1. 【接続5】［加算（+）］の処理完了イベントの接続先に［比較演算（＞）］を選択します。
        引数０：イベント内包、処理結果データ
        引数１：０
        イベント番号「０」（演算結果が存在するとき）を設定します。
    4. ［イメージビューワー］に倍率を設定する
      1. 【接続6】倍率が0より大きければ、［イメージビューワ―］に倍率を設定します。
        ［比較演算（＞）］の接続先に［イメージビューワ―］を設定します。
        起動メソッド情報設定窓で、全メソッド対象にチェックを入れて「setScale(int)」を選択します。
        引数：メソッド戻り値、比較演算（＞）、左オペランドを取得する
        イベント番号「１」（演算結果がtrueのとき）を設定します。

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

    確認 実行して各ボタンを押して、画像の表示比率が変わるのを確認します。