|
Caedeアプリケーションを開発するには、Caedeフレームワークを利用します。ここでは、フレームワークの利用方法をご説明します。
事前に環境のセットアップはCaede Getting Startedを参照して実施してください。
なお、以下のリンクからCaede Getting Started!で作成したサンプルがダウンロードできます。
HelloCurl.zip
では、フレームワーク作成の手順は以下の通りです。
① 新しいプロジェクトを作成します。（Curl）
② COM.CURL.CAEDE.FRAMEWORKをデリゲートします。
③ manifest.mcurlを編集します。
④ start.curlを編集します。
⑤ 画面クラス、画面コントロールクラスを作成します。
⑥ Curlソースコードをデプロイします。
⑦ モバイル環境で実行します。 |
①新しいプロジェクトを作成します。
Eclipseのファイルメニューから New -> Curlプロジェクトを選択します。
②COM.CURL.CAEDE.FRAMEWORKをデリゲートします。
Caedeフレームワークを利用できるように、COM.CURL.CAEDE.FRAMEWORKを読み込みます。
１．Curlプロジェクトを右クリックし、「Properties」を選択。
２．Properties for XXX（Curlプロジェクト）ダイアログにて「Curl -> ライブラリ」を選択。
３．「外部ライブラリを追加」ボタンをクリックし、ダウンロードしたCaedeディレクトリ配下の
lib/common/curl/framework/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クラスを記述します。
以下で作成する起動画面のクラス名は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 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
{HBox
width = 200px,
|| 遷移先へ渡すパラメータの値
{TextField
name = "atf1" ,
width = 100px,
value = "遷移元の値"
},
{Fill},
|| 遷移先画面Bに遷移する
{CommandButton
name = "anextscreen",
width = 50pt,
label = "遷移"
}
}
}
}
}
|
画面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のコントロール・コンテナを用いて作成します。また、モバイル特有のコントロールCaedeListViewなども利用できます。
| {import * from COM.CURL.CAEDE.TRANSLATOR.HTML.CLIENT} |
CaedeListViewを使用するときは上のようなCOM.CURL.CAEDE.TRANSLATOR.HTML.CLIENTパッケージをimportする記述をload.scurlなどに追加してください。
|
|| 画面クラス（遷移先）
{define-class public GamenBGraphic
{inherits Frame}
{constructor public {default}
{construct-super
{VBox
width = 600px,
height = 500px,
{TextField
name = "btf1" ,
width = 100px,
value = "遷移しました"
},
{Fill},
{TextDisplay
name = "btd1" ,
width = 100px,
value = "this "
},
{Fill},
{CaedeListView
width = 300px,
name = "b-list-view",
{CaedeListViewItemDivider "商品名"},
{CaedeListViewItemData "aaa", "名称1"},
{CaedeListViewItemData "bbb", "名称2"},
{CaedeListViewItemData "ccc", "名称3"},
{CaedeListViewItemData "ddd", "名称4"},
{CaedeListViewItemData "eee", "名称5"},
{CaedeListViewItemData "fff", "名称6"}
}
}
}
}
}
|
画面BのScreenクラス （Bs.scurl）
こちらも同様に{Screen-of Graphicクラス名}を継承して、クラスを定義します。
|
|| 画面コントロールクラス（遷移先）
{define-class public GamenBScreen
{inherits {Screen-of GamenBGraphic}}
field btf1:TextField
field btd1:TextDisplay
field b-list-view:CaedeListView
{constructor public {default}
set self.btf1 = {self.find-graphic-by-name "btf1"} asa TextField
set self.btd1 = {self.find-graphic-by-name "btd1"} asa TextDisplay
set self.b-list-view = {self.find-graphic-by-name "b-list-view"} asa CaedeListView
}
{method public {on-page-changed data:any}:void
|| 遷移元画面Aより渡されたパラメータを設定する。
set self.btd1.value = data asa String
{self.b-list-view.set-action-handler-for-index
{on Action do
{popup-message "1行目がクリックされました。前の画面に戻ります"}
{self.change-page GamenAScreen}
},
1 || インデックス
}
}
}
|
遷移元画面Aより渡されたデータを遷移先画面Bにて受取るには、on-page-changedメソッドをオーバーライドします。また、CaedeListViewの各行をクリックされたときのイベントハンドラ―は以下のように記述します。インデックスはCaedeListViewItemDividerも含めて、0からスタートします。
{self.b-list-view.set-action-handler-for-index
{on Action do
{popup-message "1行目がクリックされました。前の画面に戻ります"}
{self.change-page GamenAScreen}
},
1 || インデックス
} |
また、注意点として、defaultコンストラクタはインスタンスが生成される際に１回のみコールされますが、画面遷移毎に処理を実行させたい場合は、on-page-changedに記述してください。
ここまでの手順で作成したプロジェクトディレクトリを圧縮したものが以下からダウンロードできます。
UsingFramework.zip
手順⑥、⑦はこちらをご覧下さい。
モバイルアプリ生成方法 |