1. CDEとCaedeのインストールからアプリ起動まで

2. Caedeを使用した際のCurl言語の基本的な構文

3. Caedeアプリケーションを理解しよう！

4. アプリケーションを実行しよう！

5. リスト表示画面を作ろう！

6. 入力系画面を作ろう！

7. カメラ起動と画像を表示しよう！

8. 整列に使えるレイアウトコンテナクラス

9. エラスティックとダイナミックレイアウト

10. 画面を遷移させよう！

11. データを管理しよう！

12. ユーザー操作に合わせてロジックを作ろう！

13. もっとCaedeを知ろう！

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

初心者のためのCaede入門講座

Curl とはCurl は米国防総省やマサチューセッツ工科大学 (MIT) などの共同プロジェクトから生まれた技術であり、RIA アプリケーションをあらゆるプラットフォームで実行するためのクロスプラットフォーム開発環境および実行環境です。

Your Application Your Application

Curl RTEWebブラウザ WebKit

Caede Translator

Visual Layout EditorCDE ＋ Caede Development Tools

コード編集

ドラッグ＆ドロップによる画面作成

プロパティ設定

Curl アプリケーションを開発・動作させるために、4つのモノが提供されています。

■ Curl 言語とAPI 群 マークアップ言語、オブジェクト指向、言語拡張などあらゆる要素を１つに包括した開発言語です。

■ Curl RTE（Curl Runtime Environment：Curl 実行環境） Curl 言語で記述されたソースファイルを PC用に RIA アプリケーションとして JIT コンパイル・実行する実行環境です。

■ CDE （Curl Development Tools for Eclipse） Curl 言語を使用した RIA およびモバイルアプリケーションの開発を支援する Eclipse のツール プラグインです。 CDEは Curl 言語に対応したプロジェクト、エディタ、ウィザード、デバッグサポートなど数多くの機能を提供します。

■ Caede（Curl Application Export Development Environment） Curl 言語で記述されたソースファイルをモバイル用のモジュール（ハイブリッドアプリケーションモジュール）に変換する フレームワークおよび開発ツールです。

Caede アプリケーションが動作する仕組み

モバイル用のハイブリットアプリケーションとして動作させる場合は Caede の Translator を使用して「HTML5 群」に変換してモバイル用アプリケーションを生成し、ハイブリッドアプリケーションとして動作します。ハイブリッドアプリケーションとはネイティブコンテナ（WebViewコンポーネントなどの）のなかで、コンテンツをHTML5で構成し、動作するアプリケーションのことをいいます。HTML5 のウェブページやウェブアプリはそれだけでは iTunes App Store や Google Android Market に公開することは出来ませんが、ネイティブのコンテナを用いることでアプリとしてパッケージし、それを可能にしています。また、ネイティブのコンテナを使うことで、ブラウザ +HTML からはアクセスすることができない、カメラ、マイク、コンタクトリスト、GPS、プッシュメッセージなどのデバイスのネイティブ機能が利用できるようになっています。

また RIA アプリケーションとして動作させる場合は Curl RTE をエンジン・コンパイラとして使用します。CurlRTE は Curl 言語で記述されたファイルを PC 用の RIA アプリケーションとして Web ブラウザで動作させるためのプラグイン・ソフトです。一般のプラグイン・ソフトと同様に、Curl の Web サイト からダウンロードして、クライアント PC にインストールします。Curl RTE をインストールすれば、後はパソコンがあればCurl は基本的に動作します。詳しくは「Caede 入門（RIA 編）」を参照してください。

RIA 用およびモバイル用どちらにしても Curl 言語および CDE を使用して開発していきますので、開発に関してそれほど大きな違いはありません。ただし、Caede SDK のフレームワークを使用するという前提があります。

CDEと Caede のインストールからアプリ起動まで

まずは開発環境をインストールしましょう。Caede アプリケーションの開発には CDE を使用し、CaedeSDK のフレームワークやライブラリ、またトランスレーターを試用して開発します。 また、CDE の１つのツールとして提供されている「Caede Development Tools」を使うと開発が非常に簡単になります。ここでは「Caede Development Tools」を使った開発方法を説明します。以下のリンクから「Caede Development Tools」のインストールからアプリケーションの実行までをやってみましょう。http://www.curlap.com/products/caede/

Caede を使用した際のCurl 言語の基本的な構文

Caede を使用したモバイルアプリケーション開発にはCurl 言語を使用します。Curl 言語の基本的な構文は RIA アプリケーションを使用する際と同じです。ただし、Caede を使用したモバイルアプリケーション開発では Caede SDK のフレームワークを使う必要があるという前提が違います。そのため、テキストを単純に表示する場合もフレームワークの手続きに従って開発する必要があります。ここでは RIA アプリケーションを作る際と違う、Caede SDK のフレームワークの説明を中心に説明します。学習の流れとしては、まず RIA 開発編の Curl 言語の基本的な構文 を学習してから以下の説明を確認してください。

CaedeSDKのフレームワークは画面遷移などの機能を提供しているMVCフレームワークです。フレームワークではGraphic クラスと Screen クラスを一組にして一つの画面およびロジックを定義します。たとえば以下の図の例では最初に呼び出される画面がＡ画面でそこからＢ画面に遷移するような場合です。このように 1画面に対し１Graphic クラスと１Screen クラスを定義していきます。ちなみにプロジェクトの作成時にテンプレートを選択するとあらかじめ Graphic クラスと Screen クラスのコードが自動的に生成されます。２のサンプルでは prompt-graphic.scurl ファイルに PromptGraphic クラス、prompt-screen.scurl ファイルにPromptScreen クラスが定義されています。

CaedeSDKのフレームワークとは？

※Curl 言語ではクラスを定義することができます。。いさだくてし照参を 」 スラク － 型ターデ - 念概本基 － ドイガ者発開lruC 「 はていつに細詳のスラク

Graphic クラスとは「画面レイアウトを定義するクラス」となります。任意のクラス名を使用することができ、Frame やCanvas といったCurl 標準のグラフィカルなコンテナクラスを継承したクラスを定義することができます。

Graphic クラスは以下のようなクラス定義となります。

Graphic クラスとは？

|| Graphicクラス

{define-class public　AGraphic{inherits　Frame}

{constructor public {default}

{construct-super

　　　　{CommandButton name = “a-button”,label = “(ア)”}

|| 画面をレイアウトしたコンテナを

|| ここでスーパークラスのコンストラクタに渡す

・・・

}

}

}

コード1

なお、フレームワークにおけるGraphic クラスは「静的（動的変化のない）」なレイアウトのみを定義し、 動的なレイアウト（ユーザーの操作などに伴う画面の一部のみのレイアウト変更など）は Screen クラスで実装する必要があります。

またCaede フレームワークを使用した場合のその他の制限事項として以下のようなものがあります。

・Curl 標準提供以外のユーザー定義による独自コンテナクラスや独自コントロールクラスクラスを継承することは できません。

・イベントハンドラは定義できません。イベントハンドラは Screen クラスで定義する必要があります。 Graphic クラス にて以下のように コンストラクタに引数として渡す形でイベントハンドラを定義した場合、これはCaede では無視 されます。Screen クラスでダイナミックなイベントハンドラとして定義、実装してください。

・field やメソッドなどを定義することはできません。

Screen クラスとは対となる Grahic クラスに対する「ビジネスロジックやイベント処理を定義するクラス」となります。Screen クラス内で、画面の初期化処理やイベントの起動処理、画面の遷移処理などを記述します。

Screen クラスは以下のようなクラス定義となります。

Screen クラスとは？

定義したGraphicクラスとScreenクラスをアプリケーションで使用する画面としてフレームワークに認識させる必要があります。

client プロシージャと screen-graphic-reference プロシージャを使用して以下のような記述を行います。第一引数に与える名称（String 型 ) は画面ごとに一意なものとし、他の画面と重複しないよう注意してください。第二引数には Graphic クラスのクラス名を指定します。

{client {screen-graphic-reference "a-gamen",AGraphic}}

記述場所の制約はありませんが、画面ごとに必要になるものですので各画面の Screen クラスの定義の後をおすすめします。

Caede SDK フレームワークへの画面宣言

|| Screenクラス

{define-class public AScreen

{inherits {Screen-of AGraphic}}

{constructor public {default}

|| Graphicクラスで定義した名前でコントロールにアクセスする。

def button = {self.find-graphic-by-name "a-button"} asa CommandButton

|| 取得したコントロールのadd-event-handlerを

|| 呼び出してイベントハンドラを付加する

{button.add-event-handler

{on Action do

・・・

}

}

}

}

コード2

Screen クラスの定義は、Caede フレームワークのクラスを継承して行います。Screen クラスは「inherits {Screen-of XxxxGraphic}」のように Screen-of を継承します。VLE でデザインされた画面の場合は VScreen-of を継承します。VLE による画面レイアウトの作成についてはCaede 入門のVLE 編を参考にしてください。またXxxxGraphic は対応するGraphic クラス名を指定します。

Caede アプリケーションはCurl アプリケーションと同様、start.curl が起動ファイルとなります。Start.curl に startup プロシージャを使用して最初に表示する画面の処理を記述します。

{startup AScreen}

最初に表示する画面を Screen クラス名で定義します。なお、Start.curl で startup プロシージャの処理を記述していない場合はCaede アプリケーションは起動しません。

Start.curl への初期画面表示の設定

ダイナミックレイアウトとはスマートフォンからタブレットまでの複数のディスプレイサイズに対応したプログラムを実装する方法です。

詳しくはデベロッパーセンターをご覧ください。http://developers.curlap.com/re-reference/57-caede/850-caede-dynamic-layout.html

ダイナミックレイアウトとは？

Caede アプリケーションを理解しよう！

Caede で開発できるアプリケーションはさまざまですが、ここでは業務システムにフォーカスして「入力更新画面」や「リスト画面」モバイル特有の機能を使った「デバイス連携画面」で一般的に使われるコントロールや機能を取り上げます。具体的にはリストコントロールや入力用コントロールおよびカメラや画像を使用し、業務アプリケーションに必要な機能を実装しています。また、スマートフォンだけでなく、タブレットでも使えるようにダイナミックレイアウトを使用しています。

サンプルアプリケーション

サンプル・アプリケーションを構成するすべてのファイルは、以下のURL からダウンロードできます。

ダウンロードして解凍すると２つのフォルダが生成されますが、「CaedeSample_3.0」のフォルダ内にあるプロジェクトをCDEがインストールされた Eclipse でインポートするとソースファイルがすべて参照できます。

入力コントロール、選択コントロールなど

カメラの起動や画像の表示など

トップ画面や一覧などに使われるリストビュー

Caede アプリケーションの構造

RIA アプリケーションとして使用する場合、Curl はクライアント（PC）で動作しますが、Caede アプリケーションの場合はモバイル端末（Android および iOS）で動作します。そこで使用されるデータ（DB）はサーバにあることが一般的ですが、モバイルの特性上、ネットワークへの接続は断続的であり、必ずしもデータサーバーに接続できるわけではありません。ですから同時にモバイル端末上にデータを保存しておく必要もある場合があります。このため、Caede アプリケーションの構成は下図のようになります。Caede アプリケーションからデータ（DB）にアクセスする場合、通常は HTTP（または HTTPS）の POST および GET を使用して Web アプリケーション・サーバへリクエストし、サーバからレスポンスとしてデータ（XML、CSV、Json、バイナリなど）を取得します。それを下図の「モデル・レイヤ」において、Curl 内部で扱いやすいデータモデルに変換して使用します。たとえばArray や Hash-Table などのコレクションや JsonObject などが代表的なクラスです。またそのデータをモバイル端末に保存する必要がある場合はデバイス上のローカルストレージや SDカードなどを使用します。

データモデルを作成したら、その表現形式については「プレゼンテーション・レイヤ」に処理を任せます。

プレゼンテーションは RIA アプリケーションと同じように通常のコンテナや GUI、またはモバイル独自のコンテナや GUI を使用します。たとえば例えば、リスト形式で表現する場合は ListViewクラスを使用します。

画面遷移は Caede SDK フレームワークの画面遷移機能である change-page メソッドを使用し、1 画面内のダイナミックなレイアウト変更にはコンテナクラスなどの add、clear メソッドなどを使用します。

サンプル・アプリケーションでは、サーバとの通信部分やデータのローカルストレージへの書き込みなどの部分はありませんが、基本的には Web サーバにリクエストを送ってレスポンスを取得し、モデル・レイヤのデータオブジェクトにデータを設定する処理を追加することで、ほぼ完全なモバイルアプリケーションとして成り立ちます。また取得したデータをローカルストレージで格納すればオフラインでも稼働するアプリケーションになります。

サンプル・アプリケーションの詳細な機能および基本クラスは以下のようになっています。

使用目的 クラス名 機能

入力画面

一覧画面

カメラの起動や画像処理

画面遷移処理

内部保存データ

TextField クラスCommandButton クラス

Listviewer クラス

run-camera プロシージャSimpleImageGraphic

Screen クラス

StrageConnection クラスRdbStorage クラスRdbRowクラス

入力および登録

リストによる表示と選択

カメラ起動や画像の表示

画面遷移

SQLite データベースへの操作

アプリケーションを実行しよう！

Caedeアプリケーションを実行するには 2つの方法があります。・Caede プレビューを使ってイメージを確認実機を使って確認するより素早くレイアウトや動きなどを確認できます。・実機やどれぞれのデバイスのエミュレーター（Android シミュレーターなど）で確認Caede プロジェクトをモバイルモバイルアプリケーションに変更してから実行する必要があります。

Caede プレビューによる確認は以下のように簡単にできます。１．プロジェクトエクスプローラーからプロジェクトを選択し右クリックし、「Caede アプリケーションプレビュー」を選択します。

２．Caede アプリケーションプレビュー画面が出力されます。あとはメニューから「デバイスの傾き」や「画面サイズ」を選択することによりスマートフォンからタブレットまでのレイアウトの構成や画面遷移などを確認できます。

実機やどれぞれのデバイスのエミュレーターで確認するにはモバイルアプリケーションの生成する必要があり Caede SDK のトランスレーターを使用します。Caede Development Tools を使用すれば Eclise 上で簡単にアプリケーションを生成してくれます。詳しくはhttp://www.curlap.com/products/caede/　の「３．アプリケーションのビルドと実行を行う」を参照してください。

実行方法と実行結果

リスト表示画面を作ろう！

スマートフォンでもっともよく使われる ListViewer クラスを解説します。「COM.CAEDE.CAEDESAMPLE」内の「menu-block.scurl」内の「MenuBlockGraphic」クラスです。スマートフォンでは一覧形式で表示する画面の大きさがありませんので、ListViewを使用して、詳細を見る場合は選択してブレイクダウンする手法を使います。タブレットの場合は左に常に表示して右側に詳細が出力されるように使います。ListViewer クラスで使用するデータはConnectedListModel や DefaultListModelViewを使用しますが、ConnectedListModel、DefaultListModelViewについては「11．データを管理しよう！」の部分で解説します。

スマートフォンで一般的によく使われる ListViewクラス

サンプル・アプリケーションでは ListViewer を使用して幅（width）と高さ（height）に make-elastic プロシージャを設定しています。make-elasticプロシージャは親のオブジェクトのサイズに合わせて幅や高さを伸長圧縮させることができる機能です。スマートフォンやタブレットの画面サイズはさまざまであり、しかも縦横に向きを変えることもできます。そのため、その種類に応じたサイズに設定する必要がありますが、make-elastic プロシージャを設定しおけばどのようなサイズであってもピッタリフィットした画面が生成されます。このプロシージャについては「9．エラスティックとダイナミックレイアウト」で詳しく説明します。また nameは動的にデータを設定するときなどに Screen クラスから使用します。

{ListViewer

height = {make-elastic preferred-size = 1m},

width = {make-elastic preferred-size = 1m},

name = "lv-top"

},

「menu-block.scurl」の「MenuBlockGraphic」クラス

入力系画面を作ろう！

入力コントロールとなる「TextField クラス」の説明していきます。対象は「COM.CAEDE.CAEDESAMPLE」内の「edit-body.scurl」内の EditBodyGraphic クラスです。

入力系コントロール

TextField クラスを使用すると、ユーザーにテキスト入力フィールドを提供できます。TextField はテキスト入力フィールドを1行表示し、テキストの編集を許可する機能を持っています。既定の TextField クラスは、以下のように既定（default）のコンストラクタを呼び出して作成します（クラス、コンストラクタについてはCurl ドキュメントの「クラス」を参照ください）。

{TextField}

または

{TextField.default}

TextFieldの例

対象は「CAEDE.SAMPLE.PACKAGE」内の「new-and-update.scurl」内の「NewUpdateGraphic」クラスです。

「height」オプションは TextField の高さを設定します。今回はpx（ピクセル）で指定していますがpt（ポイント）や yd（ヤード）、cm（センチメートル）など、さまざまな単位で設定できます。

TextField クラスには、これ以外にもさまざまなオプションがありますが Caede プロジェクトでは使用できるものとそうでないものがあります。詳しくは Curl ドキュメントの「TextField クラスのローカルオプション」「非ローカルオプション」を参照してください。また、その他さまざまなGUI コントロールが用意されており使用することができます。

詳しくは「Curl ドキュメントの目次」タブ－「Curl 開発者ガイド」－「グラフィカル ユーザー インターフェイス」をご覧ください。

また TextField 以外にも SimpleImageGraphic、CommandButton が使用されていますが、別の章で説明します。

{TextField

name = "tf-name",

height = 45px,

font-size = 16px,

prompt ="名前"

},

「edit-body.scurl」の「EditBodyGraphic」クラス

カメラ起動と画像を表示しよう！

カメラの起動には run-camera プロシージャを使用します。対象は「COM.CAEDE.CAEDESAMPLE」内の「edit-body.scurl」内の「EditBodyGraphic」クラスです。

カメラ起動の run-camera プロシージャー

run-camera プロシージャを使用するとデバイスのカメラを起動します。サンプルアプリケーションでは起動した後の処理として保存された画像を読み込むイベント処理を記述してありますが、ここについては 「 12. ユーザー操作に合わせてロジックを作ろう！ 」 で解説します。

{run-camera

{on e:CameraFinishedEvent do

　　{if not e.canceled? then

　 set self.image-graphic.source ={non-null e.media-url}

　　 }

}

}

「edit-body.scurl」内の「EditBodyGraphic」クラス

カメラ起動のrun-cameraプロシージャー

{SimpleImageGraphic

height = 243px,

width = 243px,

name = "sig-image",

source = {{manifest-url "directory", "images"}.concat "noimage.png"}

},

「edit-body-block.scurl」の「EditBodyBlockGraphic」クラス

画像をCaedeアプリケーションで表示する場合はSimpleImageGraphicクラスやsimple-imageプロシージャーを使用します。サンプルアプリケーションでは SimpleImageGraphic クラスを使用しています。対象は「COM.CAEDE.CAEDESAMPLE」内の「edit-body.scurl」内の「EditBodyGraphic」クラスです。SimpleImageGraphic クラスは source という Url クラス型のパラメータを持っていますが、サンプルアプリケーションでは最初に noimage.png というブランクの画像を設定しています。これはカメラを起動し、撮影した画像をユーザー操作により、後から撮影した実際の画像を表示するためです。画像の設定をしている部分は「12．ユーザー操作に合わせてロジックを作ろう！」で解説します。

画像を表示する SimpleImageGraphic クラス

整列に使えるレイアウトコンテナクラス

Curl でレイアウトを作成する場合はグラフィカル・コンテナと呼ばれるオブジェクトに TextField などのオブジェクトを配置したり、または入れ替えたりすることで実現します。

整列に使えるレイアウトコンテナクラス

代表的なグラフィカル・コンテナとして VBox、HBox、Frame があります。VBox は垂直方向に HBox は水平方向にオブジェクトを配置でき、Frame は 1 つのオブジェクトを配置する機能を持っています。　サンプル・アプリケーションでは、GUI 部品の配置に Frame や VBox といったグラフィカルコンテナを使用しています。対象は「COM.CAEDE.CAEDESAMPLE」内の「tparent-edit.scurl」内の「TParentEditGraphic」クラスです。

VBox、HBox は中のグラフィカルおオブジェクトを縦方向および横方向に並べてくれる便利なものです。Frameは写真のフレームのように中のオブジェクトを１つのみ入れることができて、別のものを入れるときは中のものを取り出してから入れます。

また、オブジェクトとオブジェクトの間を自動的に埋めてくれる Fill クラスというものもよく使用します。詳しくは Curl ドキュメントの 「目次」 タブ－ 「グラフィカル ユーザー インターフェイス」 － 「グラフィカルコンテナ」 を参照してください。

{VBox

width=20cm,

margin=4pt,

border-width=2pt,

border-style="groove",

margin=15pt,

　x,

y,

z

}

{HBox width=10cm, x, y, z }

VBoxやHBoxの例

エラスティックとダイナミックレイアウト

同じスマートフォンでも 4.X インチから 5.X インチまでさまざまな大きさのディスプレイが搭載されており、さらにタブレットまで含めてアプリケーションを対応しようとするとかなり大変です。

Caede にはこれらの課題に対して、「エラスティック（伸長圧縮技術）」と「ダイナミックレイアウトシステム」を提供しており、さまざまなデバイスに対して１つのプロジェクトで開発できるようになっています。

Caede には「エラスティック」と呼ばれる技術が使用できます。これはグラフィックコンテンツの幅や高さに対して通常は固定値の「18px」や「30cm」などのように距離を設定しますが、そうすると大きさの違うディスプレイを思ったデバイスでは小さく表示されてしまったり、崩れてしまったりします。そこで固定値の代わりに「make-elastic プロシージャ」というものをしてすることで画面または親のグラフィックのサイズに合わせて伸び縮みさせることができます。対象は「COM.CAEDE.CAEDESAMPLE」内の「tparent-detail.scurl」の「SParentDetailGraphic クラス」です。

エラスティックを使ったフィッティング

VBox の width に make-elastic プロシージャが設定されています。これにより画面サイズに合わせて伸長圧縮されるようになります。make-elastic プロシージャを使用するとかなり細かい設定が可能です。たとえば伸長係数を設定することにより、以下のように１：２の比率で常に伸長圧縮するなどです。対象は「COM.CAEDE.CAEDESAMPLE」内の「tparent-top.scurl」の「TParentTopGraphic クラス」と「menu-block.scurl」の「MenuBlockGraphic クラス」です。

{construct-super

halign = "center",

width = {make-elastic preferred-size = 640px},

{DetailHeaderBlockGraphic},

{ScrollBox

hscroll? =false,

{VBox

halign = "center",

width = {make-elastic preferred-size = 640px},

以下省略

「sparent-detail.scurl」の「SParentDetailGraphic」クラス

TParentTopGraphic クラスでは VBox にエラスティックが設定されていますが、stretchness という伸長係数オプションが２と設定されています。

・・・

{MenuBlockGraphic},

{Rule width=1px,height = {make-origin-elastic}},

{VBox

background ="#ffffff",

width = {make-elastic stretchiness=2},

{DetailHeaderBlockGraphic}, 以下省略

「tparent-top.scurl」の「TParentToplGraphicクラス」

逆に TParentTopGraphic クラスで管理される MenuBlockGraphic クラスでは stretchness という伸長係数オプションが 1と設定されています。

この伸長係数により伸長圧縮の比率が決定され、画面のように１：２の関係で常に表示されるようになります。Stretchness オプション以外にもさまざまなオプションを用意しています。詳しくはＣｕｒｌドキュメントから「エラスティック」や「make-elastic」プロシージャーを検索し、参照してください。

・・・

{constructor public {default}

{construct-super

name = "menu-block",

halign = "center",

width = {make-elastic stretchiness = 1},

height = {make-elastic preferred-size = 1136px},

以下省略

「menu-block.scurl」のMenuBlockGraphicクラス

ダイナミックレイアウトシステムを使用したスマートフォン／タブレットの同時対応

ダイナミックレイアウトとは「３．Caede を使用した際の Curl 言語の基本的な構文」で説明したようにスマートフォンからタブレットまでの複数のディスプレイサイズに対応したプログラムを実装する方法です。ダイナミックレイアウトを使用する場合は以下のように最初にスマートフォンの設計から開始します。

1. スマートフォンの 1画面に表示される情報量／コンテンツを決定します。 2. 画面遷移先の画面も同様に 1画面に表示される情報量／コンテンツを決定します。 3. スマートフォン画面サイズ以上の場合にスマートフォンの画面情報をどのように 1画面に表示するか決定します。 4. タブレットの画面設計が決定したら、スマートフォンの画面からブロック（Block クラス）に分解します。 5. ブロックを管理するコントローラーとなる画面クラスを決定します。

またロジックについてはブロックの Screen クラスでもコントローラーとなる画面の Screen クラスでもどちらでも実装ができますが以下のように整理すると明確になります。

・ ブロック内にのみ影響し、ディスプレイサイズの変化に依存しないブロック内でのみ処理ができるものはブロックの 　Screen クラスにロジックを記述する。 　たとえばブロックが表示または更新されたときの初期処理や、ボタンが押されたときのメッセージ出力、タップされ 　たときにカメラを表示する、または画像を表示するなど

・ 上記以外をコントローラーとなる画面の Screen クラスで記述する 　たとえば、画面遷移時の初期処理や次の画面へのデータ引き渡しや、更新処理、またブロックで管理されているコン 　トロールなどがディスプレイサイズに変化によって振る舞いが変わるときの処理など

本サンプルでは以下の図のような構造でブロックおよびコントローラーとなるクラスを分解しています。

詳しくは各ブロッククラスや画面クラスのGraphic クラス、Screen クラスを参照してみてください。

画面を遷移させよう！

画面を遷移するときには Screen クラスの change-page メソッドを使用します。遷移先画面の Screen クラスをこのメソッドの第一引数に指定してください。また、遷移先画面から引き渡したいデータがある場合にはキーワード引数dataを使いこのメソッドに渡します。また、transition パラメーターは画面遷移する場合のアニメーションを指定できます。PageTransition.slide を指定すると右方向に画面がスライドして画面遷移します。これ以外にもさまざまなアニメーションを用意しています。詳しくはCurl ドキュメントの「Screen-of」マクロの「change-page」メソッドを参照してください。対象は「COM.CAEDE.CAEDESAMPLE」内の「sparent-top.scurl」内の「SParentTopScreen」クラスです。対象のコードでは ListViewer に表示される ListViewItemData に対してリストがタップされた時に画面遷移する設定をしています。

画面遷移機能の change-page メソッドとデータの受け渡し

タブレットの場合は右エリアに表示される詳細情報が画面遷移することなく、動的に変わるように設定しています。対象は「COM.CAEDE.CAEDESAMPLE」内の「sparent-top.scurl」内の「TParentTopScreen」クラスです。画面遷移をせずに表示しているブロックを更新する場合は Screen クラスの active-block メソッドを使用します。パラメータなどは change-page メソッドと同じです。例では表示しているDetailBodyBlock の表示しているデータを更新するために active-block メソッドを使用しています。

{ListViewItemData

width = 1m,

label = hb,

{on Action do

{self.change-page

SParentDetailScreen,

data = val

}

}

以下省略

「sparent-top-screen.scurl」の「SParentTopScreen」クラス

{ListViewItemData

width = 1m,

label = hb,

{on Action do

{self.activate-block

DetailBodyBlockScreen,

data = val

}

以下省略

「tparent-top-screen.scurl」の「TParentTopScreen」クラス

遷移先の画面ではまず Screen クラスのコンストラクタの内容が実行されますので、遷移してきたときに画面を初期化する処理はここに記述しておくことができます。前の画面から change-page メソッドに渡されたデータは、on-page-changed メソッドで受け取ることができます。

対 象 は「COM.CAEDE.CAEDESAMPLE」内 の「edit-body-block.scurl」内 の「EditBodyBlockScreen」ク ラ ス の「on-page-changed」メソッドです。on-page-changed メソッドにて渡された data を判定して、SimpleImageGraphic のsource や TextField の value などに設定しています。これにより更新画面でデータを表示しています。

遷移先画面での初期処理とデータの受け取り

また、EditTopBlockScreen は新規画面の場合と更新画面の場合で同じクラスを使用しています。そのため if 文にてコントロールへのデータの反映などの設定処理を分岐させています。

{method public {on-page-changed data:any}:void

{if-non-null data then

set self.sig-image.source = {url {(data asa RdbRow).get-String "IMAGEURL"} }

set self.tf-name.value = {(data asa RdbRow).get-String "NAME"}

set self.tf-kana.value = {(data asa RdbRow).get-String "KANA"}

}

}

　　　　（以下省略）

「edit-body-block.scurl」の「EditBodyBlockScreen」クラス

データを管理しよう！

データ管理を管理する場合は一般的なコレクションであるArray-of クラスやHashTable-of クラスなどを使用したり、または独自にデータ管理クラスを作成することなどさまざまな方法がありますがサンプル・アプリケーションは、アプリケーション起動時や保存ボタンを押すとローカルデータベースの SQLite からデータを読み込んだり更新されるようになっています。

対 象 は「COM.CAEDE.CAEDESAMPLE」内 の「connected-data.scurl」内 の「initialize-db」プ ロ シ ー ジ ャ、「read-rows-from-db」プロシージャ、「edit-rows-to-db」プロシージャです。Initialaize-db プロシージャではを使用してRdbConnectionクラスを使用してデータベースを作成し、RdbStorageクラスを使用して「SQL文」にてテーブルがなければテーブルを作成して初期データを格納しています。

ローカルデータベースの SQLite を操作する StorageConnection クラス、RdbStorage クラス、RdbRowクラス

またテーブルからのデータ読み込みやデータの更新なども初期処理と同様に RdbConnection クラスや RdbStorage クラスを使用して「SQL文」にて行っています。詳しくは「read-rows-from-db」プロシージャ、「edit-rows-to-db」プロシージャを参照してください。なお SQL 文については別途学習する必要があります。

サンプルアプリケーションではこ上記の read-rows-from-db プロシージャを使用して、返却された RdbRow の配列をリスト画面で使用したり、入力画面からのデータを保存したりしています。たとえばリスト ListViewer へのデータ表示では Listviewerクラスの list-item-creation-proc を使用して RdbRow からデータを取り出して TextflowBox に値を設定しています。対象は「sparent-top.scurl」の「SParentTopScreen」の「set-list-item-creation-proc-for-listviewer」メソッドです。

def con = {StorageConnection.open "caedeaddressdb"}

def storage = con.storage asa RdbStorage

let return-data:#{Array-of RdbRow} = null

set return-data = {storage.execute-query "SELECT COUNT(*) FROM sqlite_master WHERE

type='table' AND name='LIST'"}

{if {{return-data.get 0}.get-int "COUNT(*)"} == 0 then

{storage.execute-update "DROP TABLE IF EXISTS LIST"}

{storage.execute-update "CREATE TABLE LIST (ID integer, NAME text, KANA text, EMAIL

text, TEL text, ADDRESS text, MEMO text, NICKNAME text,IMAGEURL text)"}

{con.begin}

{storage.execute-update

"INSERT INTO LIST values(1,'カール太郎', 'カールタロウ', 'curltaro@curl.com', '03-1234-5678', '

東京都杉並区A町12-3', 'かえでかずこちゃんの彼氏', 'たろうちゃん',?)",{{manifest-url "directory",

"images"}.concat "man.png"}.full-filename

}

以下省略

{con.commit}

}

{con.close}

「connected-data.scurl」の「initialize-db」プロシージャ

{method public {set-list-item-creation-proc-for-listvier list-viewer:ListViewer}:void

set list-viewer.list-item-creation-proc =

{proc {val:any}:ListItem

let hb:HBox={HBox}

{if-non-null val then

sethb = {HBox

valign = "center",

{SimpleImageGraphic

width = 50px,

height= 50px,

source = {url{(val asa RdbRow).get-String "IMAGEURL"}}

},

{Fill width =15px},

{VBox

halign = "left",

{TextFlowBox

font-size = 12pt,

{(val asa RdbRow).get-String "NAME"}

},

{Fill height = 5px},

{TextFlowBox

font-size = 8pt,

color = "#838383",

{(val asa RdbRow).get-String "KANA"}

}

},

{Fill}

}

else

set hb ={HBox "null"}

}

「sparent-top.scurl」の「SParentTopScreen」クラスの「set-list-item-creation-proc-for-listviewer」メソッド

ユーザー操作に合わせてロジックを作ろう！

ユーザーの操作には以下のようなものがあります。

・「文字や数値をキーボードで入力する」 ・「画面をタッチする」 ・「画面をスワイプする」

Curl には上記のようなユーザー操作を処理する場合に「イベント」というものがあります。

Screen クラスの中で {on … do} という記述があります。これはイベント処理の部分です。「on」はマクロです。詳しくは Curl ドキュメントの「on（マクロ）」を参照してください。「on」の後に続く部分には「Action クラス」だけでなく「PointerPressイベントクラス」「Tap イベントクラス」「KeyPress クラス」といったクラスを指定することができます。下記サンプルコードで は CommandButton を ユ ー ザ ー が 押 し た と き の 処 理 と し て、Action ク ラ ス を 使 用 し て い ま す。対 象 は「COM.CAEDE.CAEDESAMPLE」内の「sparent-edit.scurl」内の「SParentEditScreen」クラスの「constructor」内です。押した時に「11．データを管理しよう！」で解説をした edit-rows-to-db プロシージャを呼び出し編集された Textfield（tf-name など）の値をパラメータとして渡しています。これにより SQLite データベースにデータが保存されます。またそのあとに change-page メソッドを呼び出し詳細画面（SParentDetail）へ遷移させています。

イベントとは

{cb-save.add-event-handler

{on Action do

def rowdata = {edit-rows-to-db

rowdata = self.rowdata,

name = self.tf-name.value,

kana = self.tf-kana.value,

email = self.tf-email.value,

tel = self.tf-tel.value,

address = self.tf-address.value,

nickname = self.tf-nickname.value,

memo = self.tf-memo.value,

imageurl = self.sig-image.source.full-filename

}

{self.change-page

SParentDetailScreen,

data = rowdata

}

}

}

「sparent-edit.scurl」の「SParentEditScreen」クラスの「constructor」

カメラの起動にはFrameクラスにPointerPressイベントを設定することでタッチすると起動できるような設定になっています。またカメラ起動が終了したときに発生するイベントが CameraFinishedEvent です。CameraFinishedEvent クラスはさまざまなステータスや保存された画像の場所などを持っており、このイベントが発生したときに SimpleImageGraphic の source アクセサを使用してCameraFinishedEvent クラスのmedia-url アクセサから画像が保存された場所を取得して表示されている画像をいれかえる処理を設定しています。対象は「CAEDE.SAMPLE.PACKAGE」内の「edit-body-block.scurl」内の「EditBodyBlockScreen」クラスの「constructor」内です。

{on PointerPress do

{run-camera

{on e:CameraFinishedEvent do

{if not e.canceled? then

set self. sig-image.source ={non-null e.media-url}

}

}

}

}

「new-and-update.scurl」の「NewUpdateScreen」クラスの「constructor」

もっとCaedeを知ろう！

もっとCaedeを知ってもらうために、様々なイベントやコンテンツをご用意しております！

■ Curl IDE ドキュメント（CDE内） 開発環境CDEの中にインストールされています。Curl言語を効率良く学習できるよう、リンクやインタラクティブな例題などの機 能が含まれています。

■ Curl Global Community ）/moc.lruc.seitinummoc//:ptth（ 　

技術者同士が交流できる場を設けることで、双方のコミュニケーションを深め、Curl技術の普及・促進を図っています。

■ DeveloperCenter）/moc.palruc.srepoleved//:ptth（ 　

サーバ連携方法、オープンソースの使い方など様々なCurlの実際のソースコードの記述方法が集約されています。

■ Curl無料セミナー）/tneve/moc.palruc.www//:ptth（ 　

リッチクライアント市場とCurlを知る最初の一歩として1日無料セミナーを定期開催しています。

■ オンライントレーニング）/enilno/gniniart/ecivres/moc.palruc.www//:ptth（ 　

E-learningツールを使用してオンラインでトレーニングを公開しています。時間や場所に制限されず、お客様の都合に合わせて トレーニングを進めることができます。

■ オンサイトトレーニング）/rotcurtsni/gniniart/ecivres/moc.palruc.www//:ptth（ 　

オンライントレーニングのベーシックコースのオンサイト版です。学習内容はベーシックコースと同様になります。

■ Curl Facebookページ）mroftalPlruC/moc.koobecaf.www//:sptth（ 　

ツンテンコるす関に品製lruC、どな」例事入導ーザーユ「」ーュビレーナミセ「や」況状発開のムーォフトッラプ発開ルイバモやlruC「 はもちろん、開発者がこっそり教える「開発の舞台裏」や「他社製品のレビュー」記事など、Curl製品以外の情報も、どんどんご紹介 していきます。

■ AppsGallery）/sppa/yrellag/moc.palruc.srepoleved//:ptth（ 　

Curlの色々なアプリケーションを動かしたり、ダウンロードができます。作成したアプリを投稿することができます。（全て無償）

プロジェクトの情報入力画面の「プロジェクトの型を選択」エリアで「ビジュアルレイアウトコンテナとそのコンテナ内に表示されるアプレットを含んだプロジェクト」を選択する。

2.

CDEの「新規Caede プロジェクト」を選択する。※プロジェクトの作成手順は「1．CDEと Caede のインストールからアプリ起動まで」を確認してください。

1.

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

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

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

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

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

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

4.

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

3.

最後に「finish」ボタンでプロジェクトの完成です。5.

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

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

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

6.

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

8.

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

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