Caedeアプリケーションを開発するには、Caedeフレームワークを利用します。ここでは、フレームワークの利用方法をご説明します。

事前に環境のセットアップはCaedeのページよりGettingStarted を参照して実施してください。

当ページでは、Caede Eclipse plug-inを利用せずに開発するための手順を示しています。

Caede Eclipse plug-in利用時のフレームワークの使い方は、こちらをご覧下さい。

フレームワーク作成の手順は以下の通りです。

① 新しいプロジェクトを作成します。（Curl） ② COM.CURL.CAEDE.FRAMEWORKをデリゲートします。 ③ manifest.mcurlを編集します。 ④ start.curlを編集します。 ⑤ 画面クラス、画面コントロールクラスを作成します。 ⑥ Curlソースコードをデプロイします。（Caedeアプリケーションに変換） ⑦ 各ターゲットプラットフォームで実行するためのパッケージング化を行います。

①新しいプロジェクトを作成します。

Eclipseのファイルメニューから New -> Curlプロジェクトを選択します。

②COM.CURL.CAEDEをデリゲートします。

Caedeフレームワークを利用できるように、COM.CURL.CAEDEを読み込みます。

１．Curlプロジェクトを右クリックし、「Properties」を選択。
２．Properties for XXX（Curlプロジェクト）ダイアログにて「Curl　->　ライブラリ」を選択。
３．「外部ライブラリを追加」ボタンをクリックし、ダウンロードしたCaedeディレクトリ配下のmanifest.mcurlを選択。
例 ： c:/caede-2.0.0/COM.CURL.CAEDE.2.0.0/manifest.mcurl
４．「OK」ボタンをクリックします。

③manifest.mcurlを編集します。

モバイル環境で稼動させるために、manifest.mcurl内の　start.curl部分に以下のコードを記述します。

caede-client-applet? = true

④start.curlを編集します。

start.curlにもmanifest.mcurlと同じコードを記述します。

caede-client-applet? = true

また、startupプロシージャに最初に起動するトップ画面のScreenクラスを記述します。

{startup 画面コントロールクラス名}

以下で作成する起動画面のクラス名はGamenAScreenなので

{startup GamenAScreen}

となります。

⑤ Graphicクラス、Screenクラスを作成します。

まず、Caedeフレームワークでは、GraphicクラスとScreenクラスを各画面ごとに作成します。GraphicクラスはUI部分で、Screenクラスはロジック部分となります。

ここでは画面Aとそこからの遷移先画面BのGraphicクラスとScreenクラスをそれぞれ別ファイルとして作成し、パッケージファイル（load.scurl）に集約（include）します。（includeせずに、パッケージファイルにすべてのクラスを直接記述しても問題ありません。）

パッケージファイル　（load.scurl）

{curl 8.0 package} {package MYPACKAGE, {compiler-directives careful? = true} } {import * from COM.CURL.CAEDE.FRAMEWORK.STANDARD} {import * from COM.CURL.CAEDE.GUI} {import * from CURL.GUI.BASE} ||　画面A {include “Ag.scurl”} ||　画面クラス {include “As.scurl”} ||　画面コントロールクラス ||　画面B {include “Bg.scurl”} ||　画面クラス {include “Bs.scurl”} ||　画面コントロールクラス {client ||　画面A {screen-graphic-reference “gamena”, GamenAGraphic}, ||　画面B {screen-graphic-reference “gamenb”, GamenBGraphic} }

clientプロシージャを使って、作成される画面とその任意の名前を定義します。

画面A

画面Aの完成イメージは下図のとおりです。（実際のものとは異なります）

画面AのGraphicクラス　（Ag.scurl）

Curlのコントロールやコンテナを使い、画面を作成します。このとき、必ずロジック（Sceenクラス）からアクセスしたいオブジェクトには、”name”プロパティを付与してください。

|| Graphicクラス {define-class public GamenAGraphic {inherits Frame} {constructor public {default} {construct-super {VBox width = 200px,  halign = “center” , {RadioFrame name = “rf1”, value = “Lizard”, {VBox width = 300px, {RadioButton name = “rb1”, radio-value = “Antelope”}, {RadioButton name = “rb2”, radio-value = “Lizard”}, {RadioButton name = “rb3”, radio-value = “Vulture”} } }, {Fill height = 10px}, {CheckButton name = “cb1”,  label = “CheckButton1”,  width = 300px }, {Fill height = 10px}, ||　遷移先へ渡すパラメータの値 {TextField  name = “atf1” , width = 100px, value = “この値を渡す” }, {Fill height = 10px}, ||　遷移先画面Bに遷移する {CommandButton name = “anextscreen”, width = 300pt, label = “次の画面に遷移” }, {Fill} } } } }

画面AのScreenクラス　（As.scurl）

Screenクラスでは、{Screen-of Graphicクラス名}を継承して作成してください。Screen-ofクラスのfind-graphic-by-nameメソッドを利用することで、Graphicクラスのオブジェクトを取得することができます。以下の例では、name=”atf1″というTextFieldをfind-graphic-by-nameにて取得し、自分のフィールドatf1:TextFieldにセットしています。

|| Screenクラス {define-class public GamenAScreen {inherits {Screen-of GamenAGraphic}} field atf1:TextField field anextscreen:CommandButton {constructor public {default} set self.atf1 = {self.find-graphic-by-name “atf1”} asa TextField set self.anextscreen = {self.find-graphic-by-name “anextscreen”} asa CommandButton {self.anextscreen.add-event-handler {on Action do || 遷移先画面Bに遷移し、その際に値を渡す。 {self.change-page GamenBScreen, data = self.atf1.value} } } } }

画面遷移には、Screen-ofのchange-pageメソッドを利用します。遷移後の画面に値を渡したい場合には、dataというキーワード引数を利用できます。

{change-page 遷移先Screenクラス名, data = 遷移先画面へ渡すデータ}

画面B

次に画面Bの完成イメージは下図のとおりです。

画面BのGraphicクラス （Bg.scurl）

Graphicクラスを画面Aと同様に、Curlのコントロール・コンテナを用いて作成します。

|| 画面クラス（遷移先） {define-class public GamenBGraphic {inherits Frame} {constructor public {default} {construct-super {VBox width = 600px, height = 500px, {TextDisplay  name = “td1” , width = 100px, value = “遷移しました” }, {Fill height = 10px}, {HBox {TextDisplay name = “td2” , width = 200px, value = “遷移元の値：” }, {Fill}, {TextDisplay name = “td3” , width = 200px, value = “this “ } }, {Fill} } } } }

画面BのScreenクラス （Bs.scurl）

こちらも同様に{Screen-of Graphicクラス名}を継承して、クラスを定義します。

|| 画面コントロールクラス（遷移先） {define-class public GamenBScreen {inherits {Screen-of GamenBGraphic}} field td1:TextDisplay field td2:TextDisplay field td3:TextDisplay {constructor public {default} set self.td1 = {self.find-graphic-by-name “td1”} asa TextDisplay set self.td2 = {self.find-graphic-by-name “td2”} asa TextDisplay set self.td3 = {self.find-graphic-by-name “td3”} asa TextDisplay } {method public {on-page-changed data:any}:void || 遷移元画面Aより渡されたパラメータを設定する。 set self.td3.value = data asa String } }

遷移元画面Aより渡されたデータを遷移先画面Bにて受取るには、on-page-changedメソッドをオーバーライドします。

また、画面遷移毎に処理を実行させたい場合は、on-page-changedに記述してください。

⑥Caedeトランスレータにて変換する方法

①ダウンロードしたcaedeのbin/graphical-deploy-tool.dcurlをダブルクリックしてトランスレータを起動します。

---

[ Client Project ] ： Caedeアプリケーションに変換したい対象のCurlプロジェクト（ manifest.mcurl） を指定します。
[ DeploymentSettings ] ：
・ [ DeploymentPath ] ： Caedeアプリケーションに変換した結果のファイルを配置する場所を指定します
・ [ TargetPlatforms ] ： 変換先のプラットフォームをAndroid／iOS／WinRTから選択します。
・ [ CompileOptions ] ： optimiz eを選択するとコードの最適化が行われます。debugを選択すると例外発生時スタックトレースを表示することができます。
[ Logging ] ： 表示するログレベルを指定します。
[ Deploy ] ボタン ： 押下すると、Caedeアプリケーションに変換されます。 変換時のログは画面上に表示されますが、Curlコントロールパネル－「Curl RTEコンソール」でも確認できます。

生成結果について

正常に生成された場合は、

このような画面が表示され、Console（Curlコンソール）上で[INFO]メッセージのみが出力されます。

DeploymentSettingsにて指定した場所にファイルが生成されていますので、このファイルをシミュレータ等で実行することになります。

生成ができない場合は、

このような画面が表示され、Console（Curlコンソール）上で[ERROR]メッセージが出力されます。

シンタックスエラーや、CurlでサポートしているがCaedeでサポートしていないAPIを利用している場合にエラーとなります。

エラーの内容は、Console（Curlコントロールパネルのコンソール）上で確認できます。

最適化モード

トランスレータによって生成されたJavaScriptファイルを、最適化（ミニマイズ）するためにには、node.jsをダウンロードし、Caedeディレクトリのexternal/optimizerディレクトリ配下にnode.exeを置いてください。

⑦各ターゲットでのパッケージング化と実行

Caedeがサポートするプラットフォームで実行させるためにパッケージング化します。

詳細な手順はこちらより確認できます。(Android,iOS,WinRT)