Caede入門 - Appendix：VLEを使って画面を簡単に作る！ [SCSK株式会社]

Appendix：VLEを使って画面を簡単に作る！

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

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

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

CDEの「新規Caedeプロジェクト」を選択する。
※プロジェクトの作成手順は「1．CDEとCaedeのインストールからアプリ起動まで」を確認してください。
プロジェクトの情報入力画面の「プロジェクトの型を選択」エリアで「ビジュアルレイアウトコンテナとそのコンテナ内に表示されるアプレットを含んだプロジェクト」を選択する。
テンプレートの選択画面ではテンプレートを選択してもしなくてもVLEで画面を作成することができます。ここでは本編のアプリケーションに良く似た、「ダイナミックレイアウト(VLE)－メニューあり分割なしパターン」を選択しています。
ダイナミックレイアウトのテンプレートを選択するとブロックやスマートフォン画面、タブレット画面のファイルを自動的に作成します。ダイナミックレイアウト－コンテンツブロック画面ではファイル名を変更したり、またグラフィッククラスとスクリーンクラスを同じファイルにするなどの設定ができます。ここでは「１つのソースファイルにグラフィッククラスとスクリーンクラスを定義する」を選択しています。
最後に「finish」ボタンでプロジェクトの完成です。
CDEのプロジェクトペインから対象のファイルをVLEで開き編集を行います。対象ファイルを右クリック→「アプリケーションから開く」→「ビジュアルレイアウトエディタ(VLE)」を選択します。
選択するとVLEが起動し、画面が表示され編集できるようになります。

後はVLEで編集を行うだけで画面レイアウトが開発できます。
なお、VLEの操作についてはCurl入門のAppendix：VLEを使って画面を簡単に作る！編を参考にしてください。
本編のアプリケーションのVLE用プロジェクトの画面レイアウトもすべてVLEで開発できます。「CaedeSample3.0_VLE」プロジェクトをインポートすると以下のようなプロジェクト構成となり、６と同じようにVLEを起動することで画面が見られるようになっています。
すべての画面を確認してプロパティを変更したり、レイアウトを変更したりして確認してください。

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

13. もっとCaedeを知ろう！