Embed Size (px)
Citation preview
Curlを始めよう
初心者のためのCurl入門講座
目次
1. CDEのインストールから起動まで
2. Curlプロジェクトを作成しよう！
3. Curl言語の基本的な構文
4. Curlアプリケーションを理解しよう！
5. アプリケーションを実行しよう！
6. 入力系画面を作ろう！
7. 一覧表示系画面を作ろう！
8. 分析系画面を作ろう！
9. レイアウトしよう！
10. データを連携しよう！
11. ユーザー操作に合わせてロジックを作ろう！
12. もっとCurlを知ろう！
Appendix：ビジュアルレイアウトエディタを使って画面を簡単に作る！
サンプルソースのダウンロード
Curlは米国防総省やマサチューセッツ工科大学(MIT)などの共同プロジェクトから生まれた技術であり、RIAアプリケーションをあらゆるプラットフォームで実行するためのクロスプラットフォーム開発環境および実行環境です。
Curlアプリケーションを開発・動作させるために、4つのモノが提供されています。
■ Curl言語とAPI群 マークアップ言語、オブジェクト指向、言語拡張などあらゆる要素を１つに包括した開発言語です。
■ Curl RTE（Curl Runtime Environment：Curl実行環境） Curl言語で記述されたソースファイルをPC用にRIAアプリケーションとしてJITコンパイル・実行する実行環境です。
）espilcE rof slooT tnempoleveD lruC（ EDC ■ Curl言語を使用した RIAおよびモバイルアプリケーションの開発を支援するEclipseのツール プラグインです。 CDEは Curl言語に対応したプロジェクト、エディタ、ウィザード、デバッグサポートなど数多くの機能を提供します。
■ Caede（Curl Application Export Development Environment） Curl言語で記述されたソースファイルをモバイル用のモジュール（ハイブリッドアプリケーションモジュール）に変換する フレームワークおよび開発ツールです。
Curl RTEはCurl言語で記述されたファイルをPC用のRIAアプリケーションとしてWebブラウザで動作させるためのプラグイン・ソフトです。一般のプラグイン・ソフトと同様に、CurlのWebサイトからダウンロードして、クライアントPCにインストールします。
Curl RTEをインストールすれば、後はパソコンがあればCurlは基本的に動作します。ではどうやって動作するのか図1で解説します。
1. 通常のHTMLページを表示するのと同様に、WebブラウザやショートカットからCurlコンテンツ（ライセンスファイルも含む）が配置さ れたURLにアクセスします。 2. Webサーバは要求されたCurlコンテンツを返します。 3. Curl RTEが起動されてCurlコンテンツを処理（JITコンパイル、アプリケーション生成）します。 4. Webブラウザの画面にアプレット（Curlコンテンツを処理した結果）が表示されます。 5. 実行されたアプレットからは、Curlコンテンツが配置されていたサーバとは別のサーバからもデータを取得できます。
Curlとは
Curlが動作する仕組み
Your Application Your Application
Curl RTEWebブラウザ WebKit
Caede Translator
Visual Layout EditorCDE ＋ Caede Eclipse Plug-in
コード編集
ドラッグ＆ドロップによる画面作成
プロパティ設定
Curl言語
図1 Curl RIA 実行の仕組み
また、モバイル用のハイブリットアプリケーションとして動作させる場合はCaedeのTranslatorを使用して「HTML5群」に変換してモバイル用アプリケーションを生成します。RIA用およびモバイル用どちらにしてもCurl言語およびCDEを使用して開発していきますので、開発に関してそれほど大きな違いはありません。
CDEのインストールから起動まで
Curl Development Tools for Eclipse（以下CDE）はEclipseのプラグインで基本的なソースエディタのほか、デバッガ、エラー検出機能、可視オブジェクトの詳細を検証するためのインスペクタ、デプロイメント・ウィザード、またGUIコントロールをドラッグ＆ドロップで作成できるビジュアル・レイアウト・エディタ（VLE）など、さまざまな機能が装備されています。
開発者に有益なヘルプ情報の「Curl IDE ドキュメント」は、CDEから参照できます。「Curl IDE ドキュメント」はそれ自体がCurlで作られておりコードサンプルも豊富で、しかもドキュメント上でコードが編集・即実行できる便利なものです。
開発環境Curl Development Tools for Eclipse (CDE）とは
まずは開発環境をインストールしましょう。Curlアプリケーションの開発にはCDEを使用します。CDEをインストールします。
CDEのダウンロードはここから http://curlap.com/download/ide/ インストール方法はこちら http://curlap.com/download/ide/guide.html
CDEのインストール
CDEはデスクトップにある「eclipse」ショートカットをダブルクリックして起動します。
CDEを起動しよう！
eclipseを起動すると、以下のような初期画面が表示されます。
Welcome画面を閉じると以下のような画面が表示されます。
以下の操作で「Open Perspective」を起動します。
1. メニューバーのWindowからOpen Perspective－Otherを選択
2. Curlを選択する
これで準備完了です。
Curl Perspectiveの設定
Curlプロジェクトを作成しよう！
Curlが動作する仕組み
Curlプロジェクトを展開する場合は以下の手順で展開します。
1. File－Curlプロジェクトを選択
2. 「エクリプスプロジェクト名」に任意の名前を入力する。たとえば 「HelloCurl」 など
3. プロジェクトの型の選択
プロジェクトの型にはいくつか種類があります。
・ ビジュアルレイアウトエディタを使ったブラウザ型アプリケーションが作れる。 ・ ブラウザ型アプリケーションが作れる。 ・ ノンブラウザ型アプリケーションが作れる。 ・ HTMLを埋め込んだCurlのノンブラウザ型アプリケーションが作れる。 ・ ファイルのない、空のプロジェクトが作れる。
どれもそれぞれ若干作りが違いますが、どれを選択しても後から、ブラウザ型に変更したり、ノンブラウザ型に変更したり、またビジュア ルレイアウトエディタを使えたりしますので、ご安心を。
以下の図では２つ目の「アプレットを含んだプロジェクト」を選択した例です。 Eclipseに以下のようにプロジェクトペインにソースファイル群が表示されたらプロジェクトが正しく作成されてます。 ここまで出来たら、あとは開発していくだけです。
Curl言語の基本的な構文
Curlが動作する仕組み
サンプル・アプリケーションを理解する前に、まずは基本的なCurlのシンタックスを理解しましょう。
Curlでアプリケーションを構築するためには、まず拡張子に「.curl」または「.dcurl」を付けた「アプレット・ファイル」と呼ばれるファイルを作成します。これらのファイルはアプリケーションの起動用のファイルで通常のテキストファイルです。Curlのアプレット・ファイルにはまず「ヘラルド」と呼ばれる宣言文を入れ、その後、テキスト、式、コメントを混在して記述していきます。
||ヘラルド
{curl 8.0 applet}
コード1 ヘラルド（宣言文）の記述
ヘラルドはCurlアプレット・ファイルのトップに必ず宣言しなければなりません。CDEを使用してアプレットを新規作成すると、自動的にヘラルドと日本語表示のための文字エンコーディング指定が記述されます。テキストを表示する場合は、通常エディタで文書を書くように記述します。Curl言語のテキスト書式を使用せずにテキストを含めると、既定のフォント／ポイント／サイズで表示されます。
{curl 8.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}
Hello! Curlこんにちは！
コード2 テキストのみによる「Hello World」
変数は、値をメモリに格納する 1 つの方法です。変数にはそれぞれ名前があり、これを使用して値にアクセスしたり、新しい値を代入します。変数を作成して初期値を与えるには let 式を使用します。
{let x:int = 10} || xをintとして定義し、初期値を10として宣言しています。
{set x = 200} || 値を200に変更してます
コード3 変数の宣言と代入
（tni「なうよるいてれさ用使で3ドーコは」型ブィテミリプ「。すまりあつ２てけ分くき大と」型ブィテミリプ非「と」型ブィテミリプ「はに型ターデ32ビット符号付き整数）」などの整数、浮動小数点、ブール型、文字などがあります。「非プリミティブ型」とは「String」や「Array-of」などのようなクラス型などがあります。以下のコード4はStringクラスを使用した例とGUIとして使用されるCommandButtonの例です。
{let s:String = "hello"}
{let cb:CommandButton = {CommandButton
}
}
コード4 データ型の非プリミティブ型
ています。
{set x = (a + b)/2 }
{set x = (a + b) * c }
コード5 演算式
プログラムフローを制御するためにはCurlにもif、switch、forまたは分岐などの式を実行することができます。以下の例はif式を使った例です。
{if x == 0 then
set y = 10
elseif x == 1 then
set y = 20
else
set y = 30
}
コード6 プログラムフローの制御 if式
の名の由来です。英語ではこれをcurly bracketと呼びます。最初は戸惑うかもしれませんが、ほとんどが以下のようにシンプルな構文になっています。コマンドに当たる部分は、クラス名やプロシージャ名などになります。
{コマンド 引数1, 引数2, …}
コード7 Curlの基本構文
これ以外の使い方などは DeveloperCenter にいろいろなサンプルがあります。また、ホワイトペーパーにもさまざまなサンプルがありますので、是非見てください。
Curlアプリケーションを理解しよう！
サンプルアプリケーション
Curlで開発できるアプリケーションはさまざまですが、HTMLのようなWebアプリケーションからからExcelのような表形式の入力や参照、さらには2D,3D、アニメーションを使用してCADシステムやゲームのような複雑なものまで１つで開発できます。ここでは業務システムにフォーカスして「入力・参照業務」、「分析業務」で一般的に使われるコントロールを取り上げます。具体的には入力用コントロールおよび表コントロール、グラフを使用し、業務アプリケーションに必要な機能を実装しています。
図2 IME自動制御、入力チェック、フォーカス時の色変更、データの登録
図3 ドラッグアンドドロップによる列の移動、列幅変更、フィルター、並び変え、枠の固定など
図4 グラフ表示、切り換えなど
サンプル・アプリケーションを構成するすべてのファイルは、以下のURLからダウンロードできます。
ダウンロードして解凍すると２つのフォルダが生成されますが、「CurlSample」のフォルダ内にあるプロジェクトをCDEがインストールされたEclipseでインポートするとソースファイルがすべて参照できます。
RIAアプリケーションとして使用する場合、Curlはクライアント（PC）で動作しますが、そこで使用されるデータ（DB）はサーバにあることが一般的です。このため、Curlのアプリケーション構成は図5のようになります。Curlアプリケーションからデータ（DB）にアクセスする場合、通常はHTTP（またはHTTPS）のPOSTおよびGETを使用してWebアプリケーション・サーバへリクエストし、サーバからレスポンスとしてデータ（XML、CSV、バイナリなど）を取得します。それを図5の「モデル・レイヤ」において、Curl内部で扱いやすいデータモデルに変換して使用します。そのデータモデルを提供するのがRecordSetクラスです。
データモデルを作成したら、その表現形式については「プレゼンテーション・レイヤ」に処理を任せます。例えば、表形式で表現する場合はTableクラスやRecordGridクラスを使用できますし、またグラフなどで表現することも可能です。
データモデルを作成したら、その表現形式については「プレゼンテーション・レイヤ」に処理を任せます。例えば、表形式で表現する場合はTableクラスやRecordGridクラスを使用できますし、またグラフなどで表現することも可能です。
サンプル・アプリケーションでは、サーバとの通信部分およびデータの取得部分はありませんが、基本的にはWebサーバにリクエストを送ってレスポンスを取得し、モデル・レイヤのRecordSetオブジェクトにデータを設定する処理を追加することで、ほぼ完全なWebアプリケーションとして成り立ちます。
Curlのサーバサイドとの連携については、「Curl IDE ドキュメント」の「目次」タブ－「Curl開発者ガイド」－「ファイルシステムとネットワーキング」－「Webサイトとの対話」を参照してください。
Curlアプリケーションの構造
図5 Curlアプリケーションのレイヤ構成と対応するクラス
使用目的 クラス名 機能
入力フォーム TextField クラス IME（InputMethodEditor）制御、フォーカスインの
ときの色変更、入力チェック
表 RecordGridクラス 列の移動、列のサイズ変更、レコードのソート、
スクロール
グラフ LayerdChard,BarLayer グラフの表示
タブシート TabContainerクラス タブ選択による画面遷移
内部保存データ RecordSet クラス レコードとフィールドによる編成、データの変更に
関するイベント管理
サンプル・アプリケーションの詳細な機能および基本クラスは以下のようになっています。
アプリケーションを実行しよう！
Curlが動作する仕組み
アプリケーションをCDEから実行するには、起動ファイル(start.curl)を選択して アイコンをクリックします。また、CDE以外で起動する場合は「start.curl」をエクスプローラなどから直接ダブルクリックします。
実行すると以下のような画面がWebブラウザに表示されます（注）。
図6 サンプル・アプリケーションのインターフェイス
注 ： サンプル・アプリケーションをダウンロードしたディレクトリによっては、Webブラウザを開いたときにエラーが表示される場合があります。Curlアプレットの実行を許可するディレクトリを追加することで、このエラーは回避できます。Windowsでは「スタート」メニューから「プログラム」－「Curl RTE」－「Curlコントロールパネル」を選択し、「セキュリティ」タブで「このコンピュータ」を展開し、「特権ディレクトリの追加」からサンプル・アプリケーションをダウンロードしたディレクトリを追加します
入力系画面を作ろう！
入力系コントロール
入力コントロールとなる「TextFieldクラス」の説明と選択コントロールとなる「SpinControlクラス」の説明していきます。対象ファイルは「gui-controls.scurl」です。
TextFieldクラスを使用すると、ユーザーにテキスト入力フィールドを提供できます。TextFieldはテキスト入力フィールドを1行表示し、テキストの編集を許可する機能を持っています。既定のTextFieldクラスは、以下のように既定（default）のコンストラクタを呼び出して作成します（クラス、コンストラクタについては「Curl IDE ドキュメント」の「クラス」を参照ください）。
{TextField}
または
{TextField.default}
コード8 TextFieldクラスを使用
例えば、今回の入力フォームで「名前（全角）」のインターフェイスを作るに当たり、以下のオプションを設定しています
ざまさ、どな）ドーヤ（dyや）トンイポ（tpがすまいてし定指で）ルトーメチンセ（mcは回今。すまし定設を幅のdleiFtxeTはンョシプオ」htdiw「まな単位で設定できます。「halign」はTextField内のテキストを水平方向にどのように配置するかを指定できます。
「input-method-focus-behavior」オプションと「input-method-keyboard-mode」は、名前で分かるようにIMEの制御を設定するオプシモのEMIは」edom-draobyek-dohtem-tupni「、きで定設をFFO／NOのEMIはンョシプオ」roivaheb-sucof-dohtem-tupni「。すでンョ
ード切り替えの設定ができます。上記の例では「input-method-keyboard-mode」オプションを「hiragana」として、平仮名文字の入力モードに設定しています。
Validate-withプロシージャを使うと簡単に入力チェック機能が実装できるようになっています。ただし、より複雑な制御を行いたい場合は「イベント」を使用して実装することができます。
TextFieldクラスには、これ以外にもさまざまなオプションがあります。詳しくは「Curl IDE ドキュメント」の「TextFiledクラスのローカルオがすまいてれさ用使がnottuBdnammoCやlortnoCnipSもに外以dleiFtxeTたま。いさだくてし照参を」ンョシプオルカーロ非「」ンョシプ
、詳しくは「Curl IDE ドキュメント」の目次」タブ－「Curl開発者ガイド」－「グラフィカル ユーザー インターフェイス」をご覧ください。
{TextField
width=5cm,
input-method-focus-behavior = "activate",
input-method-keyboard-mode="hiragana"
（以下、略）
}
コード9 TextFieldクラスのオプション設定
また入力チェックについて郵便番号が正しく入力されているかどうかの設定は以下のように設定しています。
{TextField
width=3cm,
input-method-focus-behavior = "deactivate",
{validate-with
ValidationPattern.ja-postal-code,
required? = false,
dialog-on-finished? = true,
refocus? = true
}
}
コード10 TextFieldクラスへのvalidate-withの設定
一覧表示系画面を作ろう！
強力なユーザー・インターフェイスを持つRecordGridクラス
一覧表形式で表示・編集可能な高機能を持ったRecordGridクラスを解説します。RecordGridはモデル層のRecordSetクラスを表形式で表示するための主要クラスです。対象ファイルは「recordgrid.scurl」です。RecordSetについてはデータの部分で詳しく解説します。
サンプル・アプリケーションではRecordGridの基本機能を知っていただくため、コード11のようにシンプルなオプション設定のみにしています。
「。すまいてし定設をンョシプオ」ecruos-drocer「と」dnuorgkcab-wor-etanretla「、てい続に定設の）htdiw（幅と）thgieh（さ高はでここ-droceRに」ecruos-drocer「、はスラクdirGdroceRに的本基。すまし定指をスラクteSdroceRのターデるす示表、はに」ecruos-drocer
Setクラスを指定するだけで使用できます。
{RecordGrid
width=20cm,
height=8cm,
alternate-row-background = "#ccccff",
record-source=rs
}
コード11 RecordGridクラスのオプション設定
「alternate-row-background」は1行置きに行の色を変えて表示するためのオプションで、色を指定することで1行ずつ色が変わります（図5）。そのほかにもディスプレイの変更のためのさまざまなオプションが用意されています。詳しくは「Curl IDE ドキュメント」の「目次」タブ－「Curl開発者ガイド」－「グラフィカル ユーザー インターフェイス」－「データ レコードとグリッド」および「APIリファレンス」の「RecordGrid」クラスを参照してください
RecordGridクラスの主要な機能を中心に説明しましょう。
・ ドラッグ＆ドロップによる列の移動 移動する列の見出しをドラッグすることで列の位置を移動できます
・ 列のサイズ変更 サイズを変更する列の右端の線上にカーソルを置くとカーソルが両方向矢印の形に変わります。ドラッグするとサイズを変更できます
・ レコードのソート 列見出しをクリックすると、列の値を基準にしてソートできます。その際、昇順／降順を示す小さな矢印も現れます
・ レコードの選択 レコード・セレクタ領域（左側の部分）をクリックすることで、レコード全体を選択できます。複数のレコードを選択する場合は［CTRL］も しくは［SHIFT］キーを押しながらクリックします
・ フレーム/列/行の固定、固定の解除示 領域の一部をスクロールしないように固定します。残りの表示領域はスクロールできます。あるセルを右クリックし、[フレームの固定] を適用すると、現在のセルより左側にあるすべての列と現在のセルより上にあるすべての行が固定されます。
このほかにもスクロール・バーやナビゲーション・バーの設定、さらにグリッド・セルを右クリックするとメニューが表示され［昇順ソート］ないし［降順ソート］や［（セルの値）のフィルタ]などが選択できます（図7）。
今回のアプリケーションでは参照用に使用していますが、もちろん入力用にも使用できます。また、Excelのようにより高度なユーザー・インターフェイスとして、例えばコピー＆ペースト、行の挿入などの機能を持たせることもできます。詳しくは「Curl IDE ドキュメント」の「目次」タブ－「Curl開発者ガイド」－「グラフィカル ユーザー インターフェイス」－「データ レコードとグリッド」、「目次」タブ－「Curl開発者ガイド」－「データアクセス」および「APIリファレンス」の「RecordGrid」クラスを参照してください。
図7 サンプル・アプリケーションの一覧表タブに実装された機能右クリックからサブメニューを表示させた。「フリガナ」列に降順ソートを示す矢印も表示されている
分析系画面を作ろう！
チャート全体を管理するLayeredChartクラスと7種類のチャートクラス
分析系画面でよく使用される「チャート」クラス群をを解説します。チャートを表示させるために必要なクラスはチャート全体を管理するLayeredChartクラスとチャート自体であるクラスが6種類も標準で用意されています！
・ BarLayer ・ LineLayer ・ AreaLayer ・ ScatterLayer ・ BubbleLayer ・ PieChart
この中でPieChart以外はXY座標を基準とした表示を行います。ここでは代表的なチャートのBarLayerを使っています。対象ファイルは「chart.scurl」です。チャートもRecordGridと同じようにデータとしてRecordSetを使用します。RecordSetについてはデータの部分で詳しく解説します。
BarLayerを表示するためにはLayeredChart内に追加する必要があります。
{LayeredChart
width = 8cm,
height = 8cm,
legend-enabled?=false,
{BarLayer
{ChartDataSeries rs, "order-quantity"},
x-axis-data = {ChartDataSeries rs, "name"}
}
}
コード12 BarLayerを使用した棒グラフ
LayeredChartには複数チャートを含むことができ、たとえば、折れ線グラフと棒グラフなども一緒に表示ができるようになっている便利なクラスです。BarLayerへのデータの指定はChartDataSeriesクラスを使用します。サンプル内でパラメータとして指定されているrsはRecordSetの変数名です。 また "order-quantity"を指定している意味としてはY軸方向へRecordSetのどのカラムを使用するか意味しています。また、X軸に何を使うかをx-axis-dataオプションにより指定しています。チャートにはさらに豊富なオプションが用意されています。たとえば、色の設定や凡例の出し方や、またイベントとの連動などがあります。
詳しくは「Curl IDE ドキュメント」の「目次」タブ－「Curl開発者ガイド」－「グラフ」を参照してください。
レイアウトしよう！
レイアウトコンテナとポータルにも使えるTabContainerクラス
Curlで画面遷移を実現する場合、HTMLのように新しいページにリンクして画面を変更するのではなく、グラフィカル・コンテナと呼ばれるオブジェクトにTextFieldなどのオブジェクトを配置したり、または入れ替えたりすることで実現します。
代表的なグラフィカル・コンテナとしてVBox、HBox、Frameがあります。VBoxは垂直方向にHBoxは水平方向にオブジェクトを配置でき、Frameは1つのオブジェクトを配置する機能を持っています。グラフィカル・コンテナはBoxクラスを継承しているため、それぞれaddメソッドおよびclearメソッドを使用してオブジェクトの追加および削除ができ、その機能を使用して画面を変更できます。
サンプル・アプリケーションでは、GUI部品の配置にFrameやVBoxといったグラフィカルコンテナを使用しています。対象ファイルは「layout.scurl」です。VBox、HBoxは中のグラフィカルおオブジェクトを縦方向および横方向に並べてくれる便利なものです。Frameは写真のフレームのように中のオブジェクトを１つのみ入れることができて、別のものを入れるときは中のものを取り出してから入れます。
{VBox
width=20cm,
margin=4pt,
border-width=2pt,
border-style="groove",
margin=15pt,
x,
y,
z
}
{HBox width=10cm, x, y, z }
コード13 VBoxの中にある子オブジェクト
上記以外にもさまざまなコンテナがあります。詳しくは「Curl IDE ドキュメント」の「目次」タブ－「グラフィカル ユーザー インターフェイス」－「グラフィカルコンテナ」を参照してください。
また、簡単に画面を切り替えられるTabContainerクラスを使用しています。 対象ファイルはtabcontainer.scurlです。 これは複数のページを構成できるコントロールで、Excelのシート（タブ）のように使用できます。ページを切り替えてもサーバにアクセスする必要はありません。TabContainerクラスは複数のTabPaneで構成され、それぞれのTabPaneが1つのタブになります。サンプル・アプリケーションの例では、静的にTabContainerクラスのパラメータにTabPaneを設定していますが、TabContainerクラスのadd-paneメソッドを使用して複数のTabPaneを動的に追加することもできます。
このようにTabContainerは簡単でポータル画面の作成にも向いています。また、オプション、メソッドなども豊富で、tab-placementオプションを変更することによりタブの位置を変更することも可能です。詳しくは「Curl IDE ドキュメント」の「目次」タブ－「APIリファレンス」から「TabContainer」クラスを参照してください。
let tc:TabContainer={TabContainer
height=10cm,
width=10cm
}
{for tp in ... do
{tc.add-pane tp}
}
コード14 TabContainerクラスに動的にTabPaneを追加
データを連携しよう！
データモデルのRecordSetクラス
サンプル・アプリケーションは、登録ボタンを押すとデータモデルのRecordSetクラスに登録されるようになっています。また、一覧表タブに表示されている一覧表にも同じRecordSetクラスが使われています（図8）。このようにRecordSetクラスは、プレゼンテーション・レイヤで共通に使用するのに便利なクラスです。RecordSetクラスの基本的な構造を解説しましょう。
RecordSetクラスはデータをレコードとフィールドで編成し、データの変更に関するイベントを管理する機能を持っています。つまり、データベースのテーブルと同じような機能が備わっています。関連する重要なクラスには、RecordFieldsクラス、RecordDataクラスなどがあります。RecordFieldsクラスはRecordSetクラスのフィールドを定義するために使用されます。
図8 サンプル・アプリケーションの一覧表タブ
RecordFieldsクラスは、コード15のように複数のRecordFieldオブジェクトで構成され、データフィールドの名前を指定するname、フィールドのデータを表示する際に使う文字列を指定するcaption、フィールドのデータ値のDomain（型）を指定するdomainなどから構成されます。
{RecordSet
{RecordFields
{RecordField
"name", caption = "氏名", domain = String
},
{RecordField
"hurigana", caption = "フリガナ", domain = String
},
{RecordField
"postalcode", caption = "郵便番号", domain = String
},
（以下略）
},
（以下略）
}
コード15 複数のRecordFieldオブジェクトで構成されるRecordFieldsクラス（recordset.scurl）
最初のRecordFieldでは、フィールドの名前を「name」、表示するときの文字列を「氏名」、データのDomain（型）を「String」と設定しています。これ以降も同じ構成でRecordFieldを設定しています。これらはちょうどデータベースのテーブルを定義するのとほぼ同じです。RecordSetクラスはデータベースのテーブルと同じような使い方をCurlアプリケーション内で実現しています。また、実際に使用されているデータは、コード16のようにRecordDataクラスを使用しています。
{RecordData name="カール太郎", hurigana="カールタロウ", postalcode="123-4567",
prefecture="東京都", city="杉並区", town="Ａ町", tel="03-1234-5678",
mail="[email protected]"},
{RecordData name="カール次郎", hurigana="カールジロウ", postalcode="123-4568",
prefecture="埼玉県", city="川越市", town="Ｂ町", tel="0123-1234-5679",
mail="[email protected]"},
{RecordData name="カール三郎", hurigana="カールサブロウ", postalcode="123-4569",
prefecture="神奈川県", city="横浜市", town="Ｃ町", tel="044-1234-5680",
mail="[email protected]"},
コード16 RecordDataクラスに格納されたデータ（RecordSet-and-RecordGrid.scurlの28行目からを抽出）
コード16のようにRecordSetクラスにRecordDataクラスを使用してデータを静的に設定することもできますが、通常はWebサーバ（またはファイルなど）からデータを取得して設定する方が一般的です。その場合には、コード17のCommandButtonクラスの{on Action do …}にあるように、RecordSetクラスのappendメソッドなどを使用してダイナミックにデータを追加します。
また、このほかにもRecordSetクラスにはデータベースと同じようにcommitメソッド（コミット）、revertメソッド（復帰）、delete-all（削除）など、たくさんのメソッドが用意されています。詳しくは「Curl IDE ドキュメント」の「目次」タブ－「Curl開発者ガイド」－「データアクセス」および「APIリファレンス」の「RecordSet」クラスを参照してください。
{rs.append {RecordData
name = name-tf.value,
hurigana = hurigana-tf.value,
postalcode = postalcode1-tf.value & "-" & postalcode2-tf.value,
（以下略）
}
}
コード17 RecordSetクラスのappendメソッドでダイナミックにデータを追加
ユーザー操作に合わせてロジックを作ろう！
イベントとは
ユーザーの操作には以下のようなものがあります。
「文字や数値をキーボードで入力する」 「マウスでクリックする」 「マウスでドラッグする。あるいはドロップする。」 「ショートカットキーを使う（CTR＋AとかF1とか）」
Curlには上記のようなユーザー操作を処理する場合に「イベント」というものがあります。
{on … do}という記述が3つあります。これはイベント処理の部分です。「on」はマクロです。詳しくは「Curl IDE ドキュメント」の「on（マクロ）」を参照してください。「on」の後に続く部分には「Actionクラス」だけでなく「FocusOutクラス」「FocusInクラス」「KeyPressクラス」「DragOver」「Drop」といったクラスを指定することができます。今回のサンプルではCommandButtonをユーザーが押した、あるいはEnterキーを押したときの処理として、Actionクラスを使用しています。
上記サンプルでは条件分岐で使用するif文を使用して、popup-message（ポップアップダイアロ表示）でokが押された場合にRecordSetへTextFieldおよびSpinControlの値（value）をRecordDataとして追加しています。上記サンプルに更に必須入力データがあるかどうかなどの処理を加えればより業務システムとしての実装に近い形になるでしょう。
{on Action do
{if {popup-message title="登録", cancel?=true,"登録します。よろしいですか？"} == "ok" then
{rs.append {RecordData
name = name-tf.value,
hurigana = hurigana-tf.value,
postalcode = postalcode-tf.value,
prefecture = prefecture-tf.value,
city = city-tf.value,
town = town-tf.value,
tel = tel-tf.value,
mail = mail-tf.value,
order-quantity = order-quantity-spn.value
}
}
}
}
コード18 CommandButtonクラスのイベント処理（layout.scurl）
もっとCurlを知ろう！
もっとCurlを知ってもらうために、様々なイベントやコンテンツをご用意しております！
■ Curl IDE ドキュメント（CDE内） 開発環境CDEの中にインストールされています。Curl言語を効率良く学習できるよう、リンクやインタラクティブな例題などの機 能が含まれています。
■ Curl Global Community （http://communities.curl.com/） 技術者同士が交流できる場を設けることで、双方のコミュニケーションを深め、Curl技術の普及・促進を図っています。
■ DeveloperCenter （http://developers.curlap.com/） サーバ連携方法、オープンソースの使い方など様々なCurlの実際のソースコードの記述方法が集約されています。
■ Curl無料セミナー （http://www.curlap.com/event/） リッチクライアント市場とCurlを知る最初の一歩として1日無料セミナーを定期開催しています。
■ オンライントレーニング （http://www.curlap.com/service/training/online/） E-learningツールを使用してオンラインでトレーニングを公開しています。時間や場所に制限されず、お客様の都合に合わせて トレーニングを進めることができます。
■ オンサイトトレーニング （http://www.curlap.com/service/training/instructor/） オンライントレーニングのベーシックコースのオンサイト版です。学習内容はベーシックコースと同様になります。
■ Curl Facebookページ （https://www.facebook.com/CurlPlatform） 「Curlやモバイル開発プラットフォームの開発状況」や「セミナーレビュー」「ユーザー導入事例」など、Curl製品に関するコンテンツ はもちろん、開発者がこっそり教える「開発の舞台裏」や「他社製品のレビュー」記事など、Curl製品以外の情報も、どんどんご紹介 していきます。
■ AppsGallery （http://developers.curlap.com/gallery/apps/） Curlの色々なアプリケーションを動かしたり、ダウンロードができます。作成したアプリを投稿することができます。（全て無償）
Appendix：VLEを使って画面を簡単に作る！
Appendix：VLEを使って画面を簡単に作る！
より簡単に多くの画面を作成できる効率的な開発方法があります。それがCDEに付属されたビジュアルレイアウトエディタ（以下、VLE）を使用した開発です。今までの画面はVLEを使用しても開発することができます。
VLEの起動およびファイル作成
VLEはマウス操作でオブジェクトの追加、サイズ変更、移動が可能なビジュアル開発環境です。Curlの基本的なコンテナ、コントロールがそろっており、ドラッグ＆ドロップでコーディングをすることなく画面を作成できます。
VLEを起動し新規にソースファイルを作成していきましょう。基本的な手順は以下のとおりです。
1. CDEがインストールされたEclipseを起動する。 2. CDEの「ツール（T）」メニュー－「ビジュアルレイアウトエディタ」を選択
また、VLEで作成するレイアウトを含んだソースファイルを作成するもっと簡単な方法は以下の手順となります。
1. Curlプロジェクトを選択 2. プロジェクトを作成し、ダイアログが表示されたら「ビジュアルレイアウトエディタプロジェクト」を選択
するとCDEのプロジェクトペインに以下のように表示されます。
図9の「vle-container.scurl」にはVLEで操作可能なCanvasクラスをトップレベルのコンテナにしたレイアウトが含まれており、ファイル名をダブルクリックすることで自動的にVLEが起動されます。
図9 CDEのプロジェクトペイン
また、VLEからも以下の手順で作成できます。
1. VLEの「ファイル」メニュー－「新規」から以下のダイアログボックスを開く
このダイアログボックスで「アプレット（A）」を選択すると、作成されるファイルそのものが単体で実行されるファイル（.curl）になり 「フラグメント（G）」を選択すると、インスタンス化はできるが単体では実行できないファイル（.scurl）が作成されます。
生成されるコードの違いは「フラグメント（G）」はインスタンス化できるクラスのコードのみが生成されるのに対し、「アプレット（A）」 はクラスのコードとそのクラスのインスタンスを生成して画面に表示するコードが追加されます。「フラグメント」を選択した場合、 そのソースコードのクラスのインスタンスを生成して画面に表示するアプレットファイルを別に作成する必要があります。
2. ファイル名、ディレクトリを任意に指定
3. レイアウトコンテナを指定。ここでは、レイアウトのトップレベルの階層にくるコンテナを指定する（設定したトップレベル階層の コンテナは後で変更できる）
4. 「OK」ボタンを押すと指定したディレクトリに新規にファイルが作成され、VLEにレイアウトが表示される
図10 VLEの「新規」ダイアログボックス
VLEの構成およびレイアウトの構築
次にVLEの画面構成とレイアウト（アプリケーションの画面）を構築していく方法です。VLEは図11のような画面になっており、4つの主要な領域があります。
パレット レイアウトに追加できるオブジェクトがあります。オブジェクトは種類ごとにタブで分類されています。「最近使ったオブジェクト」タブに は、最近使われた10のアイコンが表示されます。
レイアウトツリー レイアウトツリーでは、レイアウトの階層がツリー形式で表示されます。ここではエクスプローラと同じように階層の開閉ができます。 また、この領域でオブジェクトを選択または移動したり、オブジェクト名をドラッグしてグラフィカル階層を操作することも可能です。
レイアウト レイアウトではオブジェクトをドラッグしてグラフィカル階層を操作できます。この領域に最初に表示されているのはトップレベルのコン テナで、VLEのファイルを新規に作成した場合の既定ではCanvasクラスとなります。
プロパティ プロパティは2つのタブから構成されています。「プロパティ」タブでは、レイアウト領域やレイアウトツリー領域で選択されたオブジェクト のプロパティを編集できます。「イベントハンドラ」タブでは、選択されたオブジェクトにイベントハンドラを追加できます。イベントハンド ラは、CDEのエディタと連動して記述できます。
以上の主要な4つのエリアを使用して画面を構築していきます。レイアウト作成方法の基本的な手順を以下に示します。
図11 VLEの主要な4つの領域
（1）グラフィカルオブジェクトの追加
・ 図12の画面のように、パレット上のコンテナおよびコントロールを選択 ・ レイアウトペインもしくはレイアウトツリーにマウスを移動させて貼り付ける
上記手順を繰り返すことで画面を構築していきます。レイアウトツリーには階層を意識してオブジェクトを追加できます。
図12 ドラッグ＆ドロップによるグラフィカルオブジェクトの追加
図13 レイアウトツリーで階層を意識したオブジェクトの追加
（2）プロパティの設定
プロパティには、レイアウトおよびレイアウトツリーで選択されたオブジェクトのプロパティと値が表示されます。値の変更は直接 入力するか、メニューがある場合はそこから選択できます。
図14 メニューを使ったプロパティの設定
（3）イベントの追加
各オブジェクトに対して、1つ以上のイベントハン ドラを追加できます。オブジェクトを選択して、プ ロパティの「イベントハンドラ」タブを選択します。 ・ 名前列はイベントの種類を示しており、値列に ある{}ボタンを選択
・ 自動的にCDEが起動され、編集対象のコードセ クションが表示される（イベントハンドラについて は 11. ユーザー操作に合わせてロジックを作ろ うを参照）
VLEレイアウトを含んだファイルのイベントハンド ラ追加は、VLEまたはIDEの両方で編集できます。 一方のエディタで行った編集は他方のエディタに 反映されます。
図15 イベントハンドラの追加
（4）ファイルおよびプロジェクトの実行
作成されたレイアウトを表示させるには、VLEの「実行」メニューの「ファイルを実行」、もしくはCDEからVLEで作成したファイルを 指定して実行します。
図16 プロジェクトを実行し、レイアウトを確認する
CDEで「ビジュアルレイアウトエディタプロジェクト」を選択して新規プロジェクトを作成した場合、既定では「start.curl」が起動ファイルとなります。その場合はプロジェクトの実行を行うか、もしくはstart.curlを指定して実行することで、VLEで作成した画面を表示できます。
なお、ダウンロードしてサンプルの「VLE-Sample」のフォルダ内にあるプロジェクトをCDEがインストールされたEclipseでインポートするとVLEを使って開発したソースファイルがすべて参照できます。その中のvle-container.scurlをVLEで開いて確認してください。
以上が基本的なVLEの使用方法になります。各オブジェクトの詳細な情報、そのほかのVLE情報については「Curl IDE ドキュメント」の「Curl VLE ユーザーガイド」を参照してください。
