Appendix:VLEを使って画面を簡単に作る!


Appendix:VLEを使って画面を簡単に作る!

より簡単に多くの画面を作成できる効率的な開発方法があります。それがCDEに付属されたビジュアルレイアウトエディタ(以下、VLE)を使用した開発です。今までの画面はVLEを使用しても開発することができます。


VLEプロジェクトの作成よびVLEの起動

VLEはマウス操作でオブジェクトの追加、サイズ変更、移動が可能なビジュアル開発環境です。Curlの基本的なコンテナ、コントロールがそろっており、ドラッグ&ドロップでコーディングをすることなく画面を作成できます。
CaedeではCDEからCaedeプロジェクトを作る際にVLE用のプロジェクトを選択することで簡単にVLEで画面をデザインするためのファイルが生成されたプロジェクトを作ることができます。
基本的な方法は以下の手順となります。

  1. CDEの「新規Caedeプロジェクト」を選択する。
    ※プロジェクトの作成手順は「1.CDEとCaedeのインストールからアプリ起動まで」を確認してください。
  2. プロジェクトの情報入力画面の「プロジェクトの型を選択」エリアで「ビジュアルレイアウトコンテナとそのコンテナ内に表示されるアプレットを含んだプロジェクト」を選択する。

    プロジェクト情報の入力
  3. テンプレートの選択画面ではテンプレートを選択してもしなくてもVLEで画面を作成することができます。ここでは本編のアプリケーションに良く似た、「ダイナミックレイアウト(VLE)-メニューあり分割なしパターン」を選択しています。

    テンプレートの選択
  4. ダイナミックレイアウトのテンプレートを選択するとブロックやスマートフォン画面、タブレット画面のファイルを自動的に作成します。ダイナミックレイアウト-コンテンツブロック画面ではファイル名を変更したり、またグラフィッククラスとスクリーンクラスを同じファイルにするなどの設定ができます。ここでは「1つのソースファイルにグラフィッククラスとスクリーンクラスを定義する」を選択しています。

    ダイナミックレイアウト-ヘッダーブロック ダイナミックレイアウト-スマートフォン画面 ダイナミックレイアウト-タブレット画面
  5. 最後に「finish」ボタンでプロジェクトの完成です。

  6. CDEのプロジェクトペインから対象のファイルをVLEで開き編集を行います。対象ファイルを右クリック→「アプリケーションから開く」→「ビジュアルレイアウトエディタ(VLE)」を選択します。

    メニュー選択-content
  7. 選択するとVLEが起動し、画面が表示され編集できるようになります。

    ビジュアルレイアウトエディタ1

    後はVLEで編集を行うだけで画面レイアウトが開発できます。
    なお、VLEの操作についてはCurl入門のAppendix:VLEを使って画面を簡単に作る!編を参考にしてください。

  8. 本編のアプリケーションのVLE用プロジェクトの画面レイアウトもすべてVLEで開発できます。「CaedeSample3.0_VLE」プロジェクトをインポートすると以下のようなプロジェクト構成となり、6と同じようにVLEを起動することで画面が見られるようになっています。

    メニュー選択-detail
  9. すべての画面を確認してプロパティを変更したり、レイアウトを変更したりして確認してください。

    ビジュアルレイアウトエディタ2

    以上が基本的なVLEの使用方法になります。各オブジェクトの詳細な情報、そのほかのVLE情報については「Curl IDEドキュメント」の「Curl VLEユーザーガイドを参照してください。」