Curlとは

■Curl カールとは?
その生い立ちは1995年に来るべきインターネット社会を予測して米国マサチューセッツ工科大学(MIT)にて米国国防総省(DARPA)との共同プロジェクトにより、インターネットの次世代標準となるべく本格的リッチクライアント言語の研究開発が始まりです。

HTMLでは実現できないユーザビリティに優れた高度なWebベースコンテンツを作成する為に誕生した新しい言語です。その為に当初はブラウザー上で動作するアプレットとしての実行のみでしたが2005年リリースされた新バージョン「Curl Ver.4.0(日本語版)」よりDetached Applet(独立型アプレット)として独立したウィンドウでの実行も可能になりました。これによりクライアント上で動作するリッチクライアントとしての可能性が広まりました。

詳しくはメーカーのホームページもご覧ください。>>  株式会社カール

■Curlの優位性
近年まで生産性や配布が容易な事もありクライアント/サーバー型のシステムはJSPやServletなどサーバーサイドのテクノロジーを使用してエンドユーザーのオペレーション環境が提供されてきました。 やがて求められる情報はリアルタイム性のあるよりクリティカルな内容となり画面を構成する膨大な情報はネットワーク基盤を圧迫しレスポンスにも影響を与えてきました。
問題の山積はサーバーやネットワークなどのハードウェアインフラの初期投資やランニングコストを上げることで対応せざるえずシステム開発に要求される高い生産性やクライアント資源の活用は急務となっています。
また操作性の問題などからSwingや独自プラットフォームによるブラウザーベースのリッチクライアント・ソフトウェアが市場に登場してきましたが開発言語、ツール特有の開発/実行環境などは習得に時間を要して期待していたほどの生産性は発揮されていませんでした。 Curlではどの様な点が優位なのか

 最先端のオブジェクト指向言語

Curlはスクリプト言語ではなくコンテンツ生成、2次元/3次元グラフィック処理、Webサービスなど多くの機能を備えた完全なオブジェクト指向に基づいた言語です。非常に多くのプリミティブ型を始め数量や単位を表すSI 標準単位系のデータセット、多重継承をサポートするクラスやインスタンス化が不要なプロシージャなど言語としての生産性が高く習得にも時間が掛かりません。
また全て言語で機能を実装しているのでツール特有のブラックボックス化による制約などがなくフロンサイドのIT基盤としては最適です。

 統合開発環境

Curlはクライアント上に動作させるランタイムエンジンとして Surge RTE が必要になります。開発環境としてはSurge Lab IDEが提供され画面やコンポーネントを作成するビジュアルレイアウトエディタ(以下VLE)、コーディング、デバック、実行中のオブジェクト状態を確認するインスペクタなどのテキストエディタで構成されています。開発からデバック、実行が1つの環境で実現します。



 ドキュメンテーションの充実

初めてCurlを導入し実際に挙動を確認できるドキュメンテーションをご覧になると驚かれるかもしれません。以下はSurge Lab IDEに付属しているドキュメント画面の例となりますが大半の説明にはドキュメント上で実際にサンプルコードが実行されています。ソースを修正して実行ボタンを押下すると画面にその結果を表示できます。これは文章を読んだ記憶のみでは無く実際に動作させながら体験する事で望んでいる機能やパラメータの違いによる反応を確認する事が可能です。



 SOAPクライアント

Curlは4.0よりWeb Service Development Kit(以下WSDK)と呼ばれるツールが提供されています。これはアプリケーションサーバー等に配置されたWebサービスとのインターフェースを生成する機能が実装されています。利用可能もしくは新しく作成したWebサービスから生成されたWSDLファイルを読み込みクライアント画面などから簡単に呼び出し結果を得る事が出来ます。これによりエンタープライズ基盤上など既存のIT基盤を無駄にする事が無く最利用する事で低コストのユーザービリティに優れたオペレーティング環境が実現できます。

【WSDLファイルからCurlプログラムを自動生成】
・WEBサービスを定義するWSDLファイルを元にそのWEBサービスと通信を行うためのCURLクラスを自動的に生成する
・通信用(同期/非同期の両方)と、データクラスなどを生成
・XmethodsやPocketSOAPのWSDLに対応

【XMLドキュメントモデルパッケージ】
・XMLをドキュメントモデルとして容易にハンドリングが可能
・XMLSchemaをサポートし、RSS(1.0,2.0)などXMLの拡張フォーマットに対応
・Xpathに対応し、モデル内の捜査、変更が容易
・Curlコントロールへのバインディング機能を実装
・Curlオブジェクト(RecordSetなど)へのエラボレート(変換)が可能

【XHTMLコンバータ】
・XHTML で作成されたファイルを動的にCurlのコードに自動コンバートし、その場でCurlのコンテンツとして表示


 コストパフォーマンス

通常はサーバライセンス(EPS1)URL(ホスト名)単位にライセンス・キーが発行されます。ここで重要なのが使用するユーザ数、端末数、配置されるアプリケーションの数には依存していない点です。ロードバランサー(負荷分散機)の下に複数のサーバを配置する場合にも、URLが1本に集約されていれば、追加ライセンスは発生しません。これはライセンスの管理をCurlモジュールを配布するサーバーのホスト名(ドメイン)単位となっている為です。

このサーバーライセンスはクライアントにキャッシュされたモジュールが最新なのかを管理する為に必要で配布を前提としない場合には必要ありません。.Netなどのスマートクライアントホストとして利用する際に利用するものです。

市場に出回っている多くの製品はクライアントもしくはサーバーCPU単位の課金が発生するのに対し中規模もしくは大規模なシステムでもイニシャルコストが抑えられる事を意味しています。 年間使用料については初年度より発生します。ライセンスの使用期間はご購入いただいた月の翌月1日起算日とし1年間とします。価格体系につきましては最新の情報をメーカーに問い合わせてください。

詳しくはメーカーのホームページもご覧ください。>>  Curl実行ライセンスについて

■無料のWEBトレーニングを公開しています

無償のCurlトレーニングを公開しています。リッチクライアントの導入をご検討されているソリューションベンダーが必要とされる情報を随時に掲載していきますので是非ご利用ください。

詳しくはこちらをご覧ください。>>  Curlテクノロジー

■コラム1 WebLogic8.1で作成したEJBをWebサービス化するには

WebLogicなどで作成したEJBコンポーネントやインスタンス化する事で実行可能なクラスはビルド時に自動でWebサービス化する事が可能です。これはBeaより提供されているWebLogicのAntタスクから呼び出す事ができ同時にWSDLファイルの出力も行えます。

以下はWebLogic8.1以降のAntで実行するbuild.xmlファイルの一部を掲載しました。実際にどの様に実現するのか見てみましょう。
上記の例ではpackage-webservice-warターゲットよりservicegen タスクが実行されています。 serviceName属性にて指定したCustomerServiceというWebサービスが生成されます。この時点でWebサービス用のWARファイルが作成され中には実行と配置に必要なClassファイルの他にweb-services.xmlが格納されます。

またwsdlターゲットではwsdlgen タスクが実行されています。serviceName属性に指定されたサービスの内容を検査してwsdlFile属性で指定したファイル名にてWSDLファイルが出力されます。



次回のコラムでは生成したWSDLファイルからWSDKを使用する例をご覧頂きます。

Curl Tips:継承による画面操作

Curlテクノロジー >> Curl Tips
継承による画面操作

curl™

Curlではクラス定義の文法にdefine-class句、親クラスを継承するにはinherits(引き継ぐ)を指定します。Javaでの文法ではextends(拡張)に相当します。

このテーマではVLEからCanvasコンテナを使用してデザインされた画面を継承し、イベント及びコントロールの操作を行います。継承したビジュアルコンポーネント資産をどの様に参照して拡張するのか確認してください。

■継承される親クラスを作成

まずVLEを使用して以下の画面を作成してファイル名には「ex1.dcurl」として保存します。この際にプロパティからデザイン名を指定する事で各コンポーネントの識別子をつける事ができます。この識別子によりself句を使い外部からの参照が容易に出来るようになりますのでユニークで対象が分かりやすい名称を指定してください。



VLEを使用したコンテナにはMyContainerというデザイン名が初期値で与えられています。他のコントロールには以下の名前で指定しました。

名前 TextField txf_firstname
名前 TextField txf_lastname
確定 CommandButton btn_confirm
再入力 CommandButton btn_reset

生成されたソースは以下になります。IDEのファイルツリーからファイルを選択してマウスの右ボタンからコンテキストメニューの開くで確認してください


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURL.LAYOUT-EDITOR.RUNTIME-SUPPORT,
version = “3.0”
}

{define-layout-class MyContainer
|| Begin meta-data DO NOT EDIT
format-version = 2,
design-time-class = “Canvas”,
run-time-class = “Canvas”,
|| End meta-data
width = 246.74pt,
height = 105.22pt,
background = “#D4D0C8”,
border-width = 1.5pt,
border-color = “#D4D0C8”,
border-style = “raised”,
font-size = 8pt,
control-appearance-changeable? = true,

{layout-element void:TextFlowBox
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 12pt,
y = 18pt,
|| End meta-data
{TextFlowBox
width = 60pt,
height = 18pt,
“名前:”
}
}

{layout-element txf_firstname:TextField
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 36pt,
y = 12pt,
|| End meta-data
{TextField
width = 84pt,
height = 24pt
}
}

{layout-container btn_confirm:CommandButton
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 36pt,
y = 54pt,
|| End meta-data
{CommandButton
label = “確定”,
width = 54pt,
height = 24pt
}
}

{layout-container btn_reset:CommandButton
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 102pt,
y = 54pt,
|| End meta-data
{CommandButton
label = “再入力”,
width = 54pt,
height = 24pt
}
}

{layout-element txf_lastname:TextField
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 132pt,
y = 12pt,
|| End meta-data
{TextField
width = 84pt,
height = 24pt
}
}

{constructor {default}
{self.initialize-components}
}
}

||– 以下のロジックはコメントもしくは削除してください。
||– includeマクロにて評価され実行されます。
||
||–{View
||– {Dialog
||– {new MyContainer}.container
||– },
||– visibility = “normal”,
||– {on WindowClose do
||– {exit}
||– }
||–}

■作成したCanvasを継承するクラスを作成

継承するクラスを作成するために「Surge Lab IDE」のメニューバーよりファイル -> 新規をクリックして新規ファイルタブから独立型アプレットを選択し、ファイル名にSubCanvasと入力します。

define-class句とinherits機能を使用して以下のソースをエディタで入力します。

 Curlによる継承

{curl 4.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}
{applet manifest = "manifest.mcurl",
    {compiler-directives careful? = true}
}

{include “ex1.dcurl”}

{define-class public SubCanvas {inherits MyContainer }

{constructor public {default}
{self.init}
}

{method private {init}:void

||確定ボタンイベント処理
{self.btn_confirm.add-event-handler
{on Action at b:CommandButton do
||message-boxの返答が「はい」の場合はテキストフィールドを入力禁止にする
let result:String = {popup-message “確定しますか?”, cancel? = true}
{if Dialog.ok == result then
set self.txf_firstname.enabled? = false
set self.txf_lastname.enabled? = false
}
}
}

||再入力ボタンイベント処理
{self.btn_reset.add-event-handler
{on Action at b:CommandButton do
set self.txf_firstname.enabled? = true
set self.txf_lastname.enabled? = true
}
}
}
}

{View
{new SubCanvas}.container,
visibility = “normal”,
{on WindowClose do
{exit}
}
}

一方でJavaではClass句にextendsを指定してクラスの定義と継承を行います。

 Javaによる継承

public class SubCanvas extends Canvas {
  ・・・
}

以下は実行した結果です。名前を入力して確定ボタンを押すと入力付加となり中のテキストはグレーに表示されています。

■いくつか新しいシンタックスが出てきましたブロック毎にソースを説明していきます。

 includeマクロ文

{include "ex1.dcurl"}

指定したファイルパスのコンテンツをコンパイル時に取り込みます。取り込んだ内容は評価されるロジックがある場合は同時に実行されます。準備の段階でViewロジックをコメントにしている理由もincludeマクロの使用により実行される事を防ぐためです。

 popup-messageプロシージャ

  let result:String = {popup-message "確定しますか?", cancel? = true}
  {if Dialog.ok == result then
    ・・・
  }

popup-messageプロシージャにcancel? = true引数を渡すとダイヤログには「OK」「キャンセル」のボタンが表示されユーザーに問い合わせを行う事ができます。このケースでは「OK」のボタンが選択された場合に処理を実行します。

■まとめ
コンテナを継承する事で画面デザインと、イベント処理が容易に分離されている点にも注目してください。画面デザイン時にデフォルトの処理を記述し例外時にイベント内容を上書きする事も可能です。

ステップ7:イベント処理

Curlテクノロジー >> WEBトレーニング
ステップ7:イベント処理

curl™

イベントはボタンのクリックなどユーザーのオペレーションやコントロール自身から通知すべきタイミングでターゲットにメッセージを通知して発生します。目的のアクションに対応した処理を検出するためにイベント ハンドラと呼ばれるEventHandlerクラスを継承したオブジェクトを適用します。

本ステップでは主にボタンコントロールを使用してイベントの処理を説明していきます。

■on 式によるアタッチ

ドキュメントを参照していると {on Action do ・・・}の参照が多く見られます。これはコマンドボタンが押下された際に発生するイベント処理をハンドリングするイベント ハンドラと呼ばれるものです。

ボタンはマウスからクリック、キーボードからEnterキーを押される場合があり何れも画面上ではボタンが押下された事を示すためボタンが凹んだ状態になります。このためボタンコントロールではActionと呼ばれる高レベルハンドラが存在しておりマウス、キーボードのイベントを包括して1つのトリガを指定するだけで済みます。

以下の例でボタンコントロールのイベントを確認します。ボタンが押下されるとメッセージボックスが表示されます。


 step7_1.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}

{let button:CommandButton =
{CommandButton
label = “メッセージ表示”,
{on Action do
{popup-message “Actionイベントが起動されました。”}
}
}
}
{View
button,
visibility = “normal”
}

いくつか新しいシンタックスが出てきましたブロック毎にソースを説明していきます。

 on式

on式とよばれイベントをアタッチ(処理)する場合に使用します。{on event-class do body} の書式にてイベントを表現するクラスを指定します。この例ではオブジェクトを生成するタイミングで引数として渡しています。

コマンドボタンはクリックされる事を前提にして設計されており、マウスクリックを検知するPointerPress、PointerReleaseハンドラはトリガせず代わりにActionが使用されます。


{on Action do
イベント処理
}

 popup-messageプロシージャ

標準的なダイヤログを実装しており、メッセージ表示と共に引数として指定するとOK、CANCELボタンが表示されユーザーとの対話結果を返却します。


{popup-message メッセージ }

■add-event-handlerによるアタッチ

オブジェクト生成時にイベント ハンドラを組み込む方法以外に GuiEventTarget.add-event-handler メソッドを使用してアタッチする事も出来ます。

画面デザインとイベントが分離されるため有効な手段ですが、イベント処理内では他のコントロールへの変更が含めれる事が多いためフォーム内のコントロールを参照しやすくする為のアーキティチャデザインが必要になってきます。

 step7_2.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}

{let button:CommandButton =
{CommandButton
label = “メッセージ表示”
}
}
{button.add-event-handler
{on Action do
{popup-message “add-event-handlerによるアタッチ”}
}
}
{View
button,
visibility = “normal”
}

■ダブルクリックイベント

マウスポインタ関連のイベントを見ているとダブルクリックをトリガするハンドラが無いことが分かります。ではマウスが2回押された事を検知する場合はどのようにするのでしょうか。

PointerPress および PointerRelease はマウスポインタのイベントを管理する PointerButtonEventクラス が親クラスとなります。またon式には複数の記述スタイルがありこの例では {on event-var:event-type do body} の書式にてトリガされたイベント内容をe変数にバインドしてPointerPressオブジェクトのプロパティを参照しています。

e.buttonはボタンの種類、click-countは連続したクリックの回数を示します。

 step7_4.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}

{let frame:Frame =
{Frame
width = 1.5cm, height = 1.5cm,
background = “green”,
{on e:PointerPress do
{if e.button == left-button then
{if e.click-count >= 2 then
{output “click-count=” & e.click-count & “回”}
}
}
}
}
}
{View
frame,
visibility = “normal”
}

■Surge Lab IDEによるイベント

VLEにより画面設計をしている場合はプロパティウィンドウにあるイベントハンドラ タブよりイベントを追加する事が出来ます。組み込み可能なイベントを参照する場合などにも利用できますので確認してみてください。

 step7_3.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURL.LAYOUT-EDITOR.RUNTIME-SUPPORT,
version = “3.0”
}

{define-layout-class MyContainer
|| Begin meta-data DO NOT EDIT
format-version = 2,
design-time-class = “Canvas”,
run-time-class = “Canvas”,
|| End meta-data
width = 315pt,
height = 250pt,
background = “#D4D0C8”,
border-width = 1.5pt,
border-color = “#D4D0C8”,
border-style = “raised”,
font-size = 8pt,
control-appearance-changeable? = true,

{layout-container void:CommandButton
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 12pt,
y = 12pt,
|| End meta-data
{CommandButton
label = “登録ボタン”,
width = 60pt,
height = 24pt,
{on Action do

}
}
}

{constructor {default}
{self.initialize-components}
}
}

{View
{Dialog
{new MyContainer}.container
},
visibility = “normal”,
{on WindowClose do
{exit}
}
}

CommandButtonに{on Action do}が追加されました。このブラケット内にイベントの処理を記述します。同Canvasに配置したコントロールの参照はself句を使用して参照します。
これでWEBトレーニングは終了です。
システム構築やCurlを扱うヒントなどを別ページで紹介していますので是非ご覧ください。

ステップ6:グラフィカル ユーザーインターフェース(後編)

Curlテクノロジー >> WEBトレーニング
ステップ6:グラフィカル ユーザーインターフェース(後編)

curl™

Curlにはデータを表形式で表示する RecordGrid と呼ばれるグリッドコントロールが付属しています。列を表現するRecordクラスのコレクションとしてRecordRecordSetクラスが用意されており、この情報を作成してグリッドに表示させます。

本ステップでは簡単なグリッドを作成し、システム構築でポイントになりそうな概観の操作について説明します。

■RecordGridの概要

RecordGridはその名の通り行レコードデータを管理するために幾つかのナビゲーション機能が実装されています。RecordGridのコンストラクタに何も指定しない状態では列ヘッダー、選択行を示すレコードセレクター、行移動に便利なナビゲーションバーなどが表示されています。

 step6_1.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
}

{let items:RecordSet =
{RecordSet
{RecordFields
{RecordField “番号”, domain = String},
{RecordField “商品名”, domain = String},
{RecordField “quantity”, domain = int}
},
{RecordData 番号 = “1”, 商品名 = “バナナ”, quantity = 100},
{RecordData 番号 = “2”, 商品名 = “りんご”, quantity = 2000},
{RecordData 番号 = “3”, 商品名,”マンゴー”, quantity = 150}
}
}
{let grid:RecordGrid =
{RecordGrid
record-source = items
}
}

{View
grid,
visibility = “normal”
}

まずitemsという名前でRecordSetクラスのインスタンスを作成します。RecordSetは表構造(実際は列)と表示データを管理する目的で使用され、この例ではRecordFieldクラスにて表構造を定義し、RecordDataクラスにて表示データを追加しています。RecordFieldsはRecordFieldのコレクションを扱うために使用されます。

RecordDataはRecordSet.appendメソッドなど後から追加や削除する事も可能でキー=バリュー形式もしくはキー、バリュー形式にてRecordFieldsに対応するハッシュ情報を加えていきます。

次に先ほど作成したitemsを表示データとしてコンストラクタに渡し、gridという名前でRecordGridクラスのインスタンスを作成しています。

■RecordGridの概観を制御

ローカル オプションを指定すると概観形状を変更させる事ができるので用途に合わせたデザインが可能になります。
上記から変更された画面とソースは以下の通りです。

 step6_2.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
}

{let items:RecordSet =
{RecordSet
{RecordFields
{RecordField “番号”, domain = String},
{RecordField “商品名”, domain = String},
{RecordField “quantity”, domain = int}
},
{RecordData 番号 = “1”, 商品名 = “バナナ”, quantity = 100},
{RecordData 番号 = “2”, 商品名 = “りんご”, quantity = 2000},
{RecordData 番号 = “2”, 商品名 = “マンゴー”, “quantity”, 150}
}
}
{let rg:RecordGrid =
{RecordGrid
record-source = items,
height = 3cm,
alternate-row-background = “#80ff80”,
grid-line-color = “#006a00”,
display-column-headers? = false,
display-record-selectors? = false,
column-selection-enabled? = true,
multiple-selection-enabled? = false,
display-filler-column? = true,
record-selection-enabled? = false,
display-navigation-panel? = false
}
}

{View
rg,
visibility = “normal”
}

display-column-headers?などのプロパティを無効にしてナビゲーション機能を非表示にしました。一番右側にあるquantityの横にも列が表示されていますが、これはスクロールバーが表示される領域が予約されている為です。alternate-row-backgroundプロパティは2行毎の背景色を指定できます。簡単な表であればこれだけで足りるかもしれません。

■RecordGridのセル内容を制御

RecordFieldクラスに定義するdomain引数にCurlのプリミティブ型を指定すると値と内容の整合性などを検査するDomainが生成されます。int型に指定した小数部が適切にキャストされている、bool型のセル表示形状が変わっている点などに注目してください。

 step6_3.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
}

{let items:RecordSet =
{RecordSet
{RecordFields
{RecordField “String”, domain = String},
{RecordField “Int”, domain = int},
{RecordField “Double”, domain = double},
{RecordField “Bool”, domain = bool},
{RecordField “Char”, domain = char}
},
{RecordData
String = “ABC”, Int = 123.4, Double = 234.5, Bool = true,Char=”\u0062″
}
}
}
{let grid:RecordGrid =
{RecordGrid
record-source = items,
width = 15cm
}
}

{View
grid,
visibility = “normal”
}

intに指定した .4が切り捨てられ、boolではチェックボックスがセルのユーザインターフェースとして表示されている事が分かります。

■RecordGridのセルに色を付ける

上記の例ではプロパティやコンストラクタを指定して全体的な概観をコントロールする事が出来ました。またRecordGrid.columnsアクセサなどから特定列の変更も可能ですが個別セルに対する修飾をプロパティから行う事は出来ません。

RecordGridではセル作画を拡張する幾つかのサブクラスが用意されています。以下はStandardRecordGridCellと呼ばれるクラスを継承して作成され在庫数が0個の場合は背景をピンク色に変更しています。

在庫数が0になるとセル背景色が変更されるルールが基本ロジックと分離出来ている点に注目してください。このルール(クラス)は他の画面でも使用できる上いつでも変更可能です。

 step6_4.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
}

||–
||– 在庫数量に応じたセル背景色を設定するクラス
||–
{define-class public open StockColorCell
{inherits StandardRecordGridCell}

field private _color_frame:Frame =
{Frame width={make-elastic}, height={make-elastic}}

{constructor public {default}
{construct-super}
{self.add-internal self._color_frame}
set self.cells-take-focus? = self.can-update?
}

{method public open {refresh-data}:void
let (data:String, valid?:bool) = {self.get-formatted-data}
{if valid? and data != “” then
{if data == “0” then
set self._color_frame.background = {Background “pink”}
else
set self._color_frame.background = “transparent”
}
{self._color_frame.add replace?=true, data}
else
{unset self._color_frame.background}
}
}
}

{let item-set:RecordSet =
{RecordSet
{RecordFields
{RecordField “no”, caption = “商品番号”, domain = int },
{RecordField “name”, caption = “商品名称”, domain = String},
{RecordField “stocks”, caption = “在庫数”, domain = int}
},
{RecordData no=1, name=”バナナ”, stocks=10},
{RecordData no=2, name=”ドリアン”,stocks=0 },
{RecordData no=3, name=”メロン”, stocks=5 }
}
}

{let custom_grid:RecordGrid =
{RecordGrid
record-source = item-set,
width = 12cm,
{RecordGridColumn width = 2cm, “no”, halign = “right”},
{RecordGridColumn width = 5cm, “name” },
{RecordGridColumn width = 3cm, “stocks”, cell-spec = StockColorCell}
}
}

{View
custom_grid,
visibility = “normal”
}

 cell-spec

拡張するクラスを適用するためセルを管理するRecordGridColumnクラスに対してcell-specを指定しています。


{RecordGridColumn width = 3cm, “stocks”, cell-spec = StockColorCell}

 StockColorCell

StockColorCellはIDEに組み込まれたStandardRecordGridCellを継承して実装しています。クラス内で宣言したFrameクラスをコンストラクタ内のadd-internalメソッドにて指定する事でセル作画フレームを置換しています。{refresh-data}メソッドでは作画要求が発生した際の処理を記述しておりセルにセットされたデータを{self.get-formatted-data}にて取得しています。その結果が0の場合はbackgroundを変更しています。


{define-class public open StockColorCell
{inherits StandardRecordGridCell}

field private _color_frame:Frame =
{Frame width={make-elastic}, height={make-elastic}}

{constructor public {default}
{construct-super}
{self.add-internal self._color_frame}
set self.cells-take-focus? = self.can-update?
}

{method public open {refresh-data}:void
let (data:String, valid?:bool) = {self.get-formatted-data}
{if valid? and data != “” then
{if data == “0” then
set self._color_frame.background = {Background “pink”}
else
set self._color_frame.background = “transparent”
}
{self._color_frame.add replace?=true, data}
else
{unset self._color_frame.background}
}
}
}

RecordGridの入力した内容によりセルに色を付けるには?

上記の例ではFrameクラスを作画コンテナとして使用していたのでセルに対して入力が出来ませんでした。ではグリッド内のセルを入力するにはどうしたらよいでしょうか。RecordGridにはユーザーの入力インターフェースを持たせるためにStandardBaseEditableStringCell抽象クラスが用意されています。このクラスを使用する例としてサブクラスが用意されておりStandardStringCellおよびStandardDropdownCellはこの具象クラスにあたります。

この例ではStandardStringCellクラスを継承して作成しており、入力した在庫数が0個の場合は背景をピンク色に変更しています。セル内の値を変更して変化を確認してください。

グリッドを使用する画面は一般的に扱うデータ量が多いためセルに対して入力可能にするのかデザイン時によく検討してください。表示に対するパフォーマンスはより複雑なロジックを実装すると遅くなります。

 step6_5.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
}

||–
||– 在庫数量に応じたセル背景色を設定するクラス
||–
{define-class public open StockEditableColorCell
{inherits StandardStringCell}

{method public open {refresh-data}:void
let (data:String, valid?:bool) = {self.get-formatted-data}
{if valid? and data != “” then
{if data == “0” then
set self.background = {Background “pink”}
else
set self.background = “transparent”
}
else
{unset self.background}
}
{super.refresh-data}
}
}

{let item-set:RecordSet =
{RecordSet
{RecordFields
{RecordField “no”, caption = “商品番号”, domain = int },
{RecordField “name”, caption = “商品名称”, domain = String},
{RecordField “stocks”, caption = “在庫数”, domain = int}
},
{RecordData no=1, name=”バナナ”, stocks=10},
{RecordData no=2, name=”ドリアン”,stocks=0 },
{RecordData no=3, name=”メロン”, stocks=5 }
}
}

{let custom_grid:RecordGrid =
{RecordGrid
record-source = item-set,
width = 12cm,
{RecordGridColumn width = 2cm, “no”, halign = “right”},
{RecordGridColumn width = 5cm, “name” },
{RecordGridColumn width = 3cm, “stocks, cell-spec=StockEditableColorCell}
}
}

{View
custom_grid,
visibility = “normal”
}

※ポイント:拡張コントロールが置かれているソースの場所は?


コアロジックは残念ながらソースが公開されていません。ただしコントロール内部の動作をより把握するためにいくつかの拡張コードが用意されています。標準でインストールすると以下のディレクトリに格納されていますので、詳しく知るためにもドキュメントと共に確認してみてください。


C:\Program Files\Curl Corporation\Surge\5\ide\gui\controls

次のステップではイベント処理について確認してきます。

ステップ5:グラフィカル ユーザーインターフェース(前編)

Curlテクノロジー >> WEBトレーニング
ステップ5:グラフィカル ユーザーインターフェース(前編)

curl™

Curlにはユーザーインターフェースとしてコントロールと呼ばれるボタン、テキスト、リスト、データレコード、グリッド、タブコンテナ、ツリーの他に、「形状」と呼ばれるダイアグラム、チャート、グラフ、その他の 2D グラフィックを作成するためのShapesパッケージがRTE 4.0から含まれています。
本ステップではテキストコントロールにて入力チェックの実装する方法について説明します。

■TextFieldのプロパティを編集する例

VLEから編集できるTextFieldコントロールのプロパティは以下の通りです。

 主なプロパティの意味を見ていきます。






















デザイン名
インスタンスが作成された際のオブジェクト識別子を表現します。未必須の項目ですが指定するとロジック上のアクセスが容易になるため一般的にはユニークな名前が指定されます。

ソース上では以下の変数名を宣言するセクションに該当します。

{layout-element textName:TextField
 ・・・


value(アクセサ)プロパティとして表示(入力)されている内容を表現します。初期値は無く未必須です。
最大文字数
max-chars(アクセサ)プロパティとして入力可能な最大の文字数を制御する際に指定します。初期値である-1は入力できる文字数の制約が無い事を意味します。
この制限は文字数を見るため全角と半角の区別はありません。業務システムではバイト数による別途のチェックなども必要になってきます。
タブインデックス
tab-index (ローカル オプション)プロパティとしてユーザーが入力するフォーカスの順番を定義します。初期値は0でグラフィック階層で定義された順序に従って順番が決まります。
Canvasコンテナを使用した場合はタブインデックスを指定しないと貼り付けた順番にフォーカスが移動します。これはソース上のlayout-element及びlayout-containerの順番(位置)と一致しているようです。
横幅
width (ローカル オプション)プロパティとしてグラフィックの横幅を定義します。一般的にはエラスティックによる自動縮尺の指定、ピクセルでの距離を示すPixelDistance(99pt)などが使われます。

また標準のフォントサイズ単位によって距離を評価するEmDistance(20em)などもCurlには有りまずが全角のプロポーショナルフォントでは全て表示されず、残念な事にTextFieldのwidthプロパティはEmDistanceは使用できないようです。


Curlでは14kg(kilograms)や12cm(centimeters)といった数量や単位を表現する事ができ整数や少数だけではないデータ型が多く利用できます。詳しくはドキュメント目次にある「基本概念 – データ型」 > 数量と単位を参照してください。
フォントサイズ
font-size (非ローカル オプション)プロパティとして表示される文字のフォントサイズを定義します。初期値は8ptでこのプロパティは非ローカル オプションとなっています。


このプロパティを変更した際の結果を確認するために VLE上に表示されているCanvas(デザイン名:MyContainer)をクリックしてフォントサイズを8ptから20ptに変更してください。コンテナに配置されたコントロール全てのサイズが変わった事が分かるでしょうか。明示的に他の値が指定されていない場合は非ローカルオプションでは子孫にも適用されるのです。
詳しくはドキュメント目次にある「基本概念 – データ型」 > クラスメンバ > オプションを参照してください。

この様にCanvasコンテナなどではVLE上やソースを編集して画面が作成されます。step4から変更された画面とソースは以下の通りです。

 step5.dcurl ※元はstep4.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURL.LAYOUT-EDITOR.RUNTIME-SUPPORT,
version = “3.0”
}

{define-layout-class MyContainer
|| Begin meta-data DO NOT EDIT
format-version = 2,
design-time-class = “Canvas”,
run-time-class = “Canvas”,
|| End meta-data
width = 315pt,
height = 250pt,
background = “#D4D0C8”,
border-width = 1.5pt,
border-color = “#D4D0C8”,
border-style = “raised”,
font-size = 15pt,
control-appearance-changeable? = true,

{layout-element lblName:TextFlowBox
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 12pt,
y = 12pt,
|| End meta-data
{TextFlowBox
width = 60pt,
height = 18pt,
“名前:”
}
}

{layout-element textName:TextField
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 12pt,
y = 30pt,
|| End meta-data
{TextField
width = 134pt,
height = 20pt,
value = “”,
max-chars = 10,
prompt = “”,
tab-index = 1
}
}

{layout-container btnEntry:CommandButton
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 12pt,
y = 66pt,
|| End meta-data
{CommandButton
label = “登録”,
width = 54pt,
height = 24pt,
tab-index = 2
}
}

{layout-container btnEnd:CommandButton
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 78pt,
y = 66pt,
|| End meta-data
{CommandButton
label = “終了”,
width = 54pt,
height = 24pt,
tab-index = 3
}
}

{constructor {default}
{self.initialize-components}
}
}

{View
{Dialog
{new MyContainer}.container
},
visibility = “normal”,
{on WindowClose do
{exit}
}
}

デザイン名などが新たに適用されている事が分かりましたか?VLEよりプロパティを変更するとその場でソースが変更されます。

※ポイント:ドキュメントの隠されたソースの場所は?


ドキュメントではソースが冗長的に成らないように表示が割愛されている場合があります。標準でインストールすると以下のディレクトリに格納されていますので、詳しく知るためにもドキュメントと共に確認してみてください。


C:\Program Files\Curl Corporation\Surge\5\docs\default\support

次のステップでは検索結果などを表示するグリッドコントロールなどユーザーインターフェース(UI)について確認してきます。

ステップ4:ビジュアル レイアウト エディター

Curlテクノロジー >> WEBトレーニング
ステップ4:ビジュアル レイアウト エディター

curl™

ビジュアル レイアウト エディター(以下、VLE)は、Surge Lab IDEに含まれるユーザー インターフェイス (UI) のビジュアル開発環境です。オブジェクトの配置、オブジェクトプロパティの編集、イベントハンドラを追加する事が出来ます。

一般的には座標位置を指定して配置ができるCanvasコンテナにコンポーネントを配置する際に使用されます。本ステップでは新規プロジェクトからVLEにて画面を作成して成されたソースを確認します。

■Canvasコンテナを使用した例

システムを利用するユーザー環境のスクリーンサイズが一定以上などの画面設定ではCanvasコンテナが多く利用されます。このコンテナはIDEに付属しているVLEを使用してコンポーネントを配置します。

VLEを使用した新規プロジェクトを作成するために「Surge Lab IDE」を起動します。メニューバーよりファイル -> 新規をクリックしてプロジェクトのタイプから空のプロジェクト(E)を選択します。
空のプロジェクトはproject.cprj とmanifest.mcurl のみが作成されます。VLEを起動するためにツール(T)メニューからビジュアル レイアウト エディターを選択します。


VLEが表示したらCanvasコンテナを使用した画面を新規に作成します。VLEファイル(F)メニューから新規(N)を選択すると新たに作成するファイルの条件を指定するダイヤログが表示されます。


独立型アプレット(P)、ファイル名にはstep4.dcurl、ディレクトリはc:\project\curl\step4を選択します。レイアウトコンテナはデフォルトのCanvasが選択されている事を確認してください。


OKボタンを押すと画面中央部分に今回作成したキャンバスが表示されています。それでは画面上部にあるパレットからコントロールを選択して画面を作成してみましょう。

・ラベルはグラフィックス パレットの2番目にAbcと書かれたTextFlowBoxをクリックしてからキャンバスの適切な位置に配置します。
画面に表示する内容を変更するためにVLEの左側にあるプロパティ テキストの内容をtext-1から「名前:」に変更します。

・入力フィールドはコントロールパレットの左から5番目にある白い四角が書かれたTextFieldをクリックして配置します。
今回は特にプロパティについて変更しません。

・ボタンはコントロールパレットの左から2番目のCommandBottunをクリックして2つ配置します。
画面に表示する内容を変更するためにプロパティ ラベルの内容をcommand-button-1及び2から「登録」、「終了」に変更します。



それでは配置とプロパティへの変更が完了したら実行してみます。VLE 実行(R)メニューからファイルを実行(U)を選択します。

無事に実行された場合は、生成されたソースを確認してみましょう。IDEのファイルツリーにてstep4.dcurlを選択してマウスの右ボタンを押すとコンテキストメニューが表示されます。「”step4.dcurl”を開く(o)」を選択するとエディタ部にソースが表示されます。
 step4.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURL.LAYOUT-EDITOR.RUNTIME-SUPPORT,
version = “3.0”
}

{define-layout-class MyContainer
|| Begin meta-data DO NOT EDIT
format-version = 2,
design-time-class = “Canvas”,
run-time-class = “Canvas”,
|| End meta-data
width = 315pt,
height = 250pt,
background = “#D4D0C8”,
border-width = 1.5pt,
border-color = “#D4D0C8”,
border-style = “raised”,
font-size = 8pt,
control-appearance-changeable? = true,

{layout-element void:TextFlowBox
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 12pt,
y = 12pt,
|| End meta-data
{TextFlowBox
width = 60pt,
height = 18pt,
“名前:”
}
}

{layout-element void:TextField
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 12pt,
y = 30pt,
|| End meta-data
{TextField
width = 132pt,
height = 24pt
}
}

{layout-container void:CommandButton
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 12pt,
y = 66pt,
|| End meta-data
{CommandButton
label = “登録”,
width = 54pt,
height = 24pt
}
}

{layout-container void:CommandButton
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 78pt,
y = 66pt,
|| End meta-data
{CommandButton
label = “終了”,
width = 54pt,
height = 24pt
}
}

{constructor {default}
{self.initialize-components}
}
}

{View
{Dialog
{new MyContainer}.container
},
visibility = “normal”,
{on WindowClose do
{exit}
}
}

■いくつか新しいシンタックスが出てきましたブロック毎にソースを説明していきます。

 import文


{import * from COM.CURL.LAYOUT-EDITOR.RUNTIME-SUPPORT,
version = “3.0”
}

VLEによりコンテナを作成するとdefine-layout-classと呼ばれる専用のマクロが使用されます。このマクロは生成したソース直下にCOM.CURL.LAYOUT-EDITOR.RUNTIME-SUPPORT.3.0という名前でディレクトリが自動的に作成されruntime-support.scurlファイルが追加されます。import文はその名の通り指定したパッケージの参照を設定しています。

 define-layout-classマクロ


{define-layout-class MyContainer
|| Begin meta-data DO NOT EDIT
format-version = 2,
design-time-class = “Canvas”,
run-time-class = “Canvas”,
|| End meta-data
width = 315pt,
height = 250pt,

・・・

この構文はimportしたパッケージのdefine-layout-classマクロによりrun-time-classで指定されている”Canvas”クラスのインスタンスが実行時に生成されます。ここではマクロにより配置したコントロールをCanvasクラスに組み込むコンストラクタの呼び出しが簡素化されいる事だけを理解すれば良いでしょう。layout-elementで指定されたオブジェクトの解析はマクロ内で処理されているので時間があればマクロのソースを参照してください。
 layout-elementプロシージャ


{layout-element void:TextFlowBox
|| Begin meta-data DO NOT EDIT
anchor = “top-left”,
x = 12pt,
y = 12pt,
|| End meta-data
{TextFlowBox
width = 60pt,
height = 18pt,
“名前:”
}
}

この構文はimportしたパッケージよりプロシージャとして実行時に解析されコンテナ左上からの相対値で指定したクラスのインスタンスがレイアウトされます。最終的な微調整はソースを直接編集する場合もあります。このケースではラベルとして「名前」」を表示するTextFlowBoxクラスが作成されます。

次のステップではTextFieldやCommandButtonなどユーザーインターフェース(UI)について確認してきます。

ステップ3:グラフィックコンテナの役割

Curlテクノロジー >> WEBトレーニング
ステップ3:グラフィックコンテナの役割

curl™

Curlでは高レベルなユーザーインターフェイスを GUIツールキットと呼ばれる CURL.GUI.STANDARD スーパーパッケージにて提供しています。このステップでは画面に表示されるユーザーインターフェース オブジェクトの配置を表すグラフィカル コンテナについて説明します。

■グラフィカル コンテナとは

実際にシステムを使用するユーザーには使いやすいように考察された画面設計が一般的に行われます。Curlでは画面レイアウトを左右する方法がいくつか用意されています。いずれも1つもしくは複数のグラフィカル オブジェクトを格納する事が出来る抽象基本型クラスと呼ばれるBoxクラスのサブクラスが使用されます。

 Box抽象基本型クラスのサブクラス

・View、Frame、Table、ScrollBox、TextFlowBox
・HBox、VBox、RasterBox、OverlayBox、Canvas、Grid

コンテナは役割や用途に合わせて使い分けて行きます。良く使われる物は次の通りです。


















View
1つのオブジェクトを格納しウィンドウ関連の操作、イベントハンドリングするために使用する。主に一番外側に位置する親コンテナとなるケースが多く、コントロールが複数配置されたHBoxなどを子として受け入れる。
Frame
Viewの親クラスであり1つのオブジェクトを格納する。色やフォントの定義など子オブジェクトに影響(伝播)させる非ローカル オプションを指定、一定エリアに別のグラフィックコンテナを表示する抽象的な場所を表現する場合など一般的なパネルとして使われる。
HBox、HBox
水平、垂直方向に複数のオブジェクトを表示するために使用する。WEBページのような画面の大きさが決まっていない場合に複数を組み合わせて使用する。非常に良く使われるコンテナで後述のエラスティック(Elastics)と共に使用することで柔軟な画面レイアウトが実現します。
Canvas
複数のオブジェクトを指定したCanvasの x,y 座標位置に表示するために使用する。IDEに含まれるビジュアル レイアウト エディター(以下、VLE)にて位置や細かなプロパティを設定する事でコントロールを画面に配置する。設計するシステム画面の大きさが共通化されている場合などや配置場所を細かく指定したい場合に使われる。

■グラフィカル コンテナを使用した例

システムを利用するユーザー環境のスクリーンサイズが不定やダイヤログなどウィンドウの大きさを一定に保つ必要がない設計ではView,VBox,HBoxなどのコンテナが多く使われます。

 step3_1.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}

|| let構文にてviewという名前のViewクラス変数を宣言後に代入
{let view:View =

{View
||縦方向のレイアウトでtext,TextField,HBoxを配置
{VBox
spacing=5pt, ||VBoxプロパティ設定
margin=10pt,
background=”silver”,

||textラベルを生成
“名前:”,

||1行の入力フィールドを生成
{TextField width=3in},

||横方向のレイアウトでボタンを配置
{HBox
spacing=5pt,
{CommandButton label=”登録”},
{CommandButton label=”終了”}
}
}
}}

|| Viewの可視性初期値はHiddenです。showメソッドを呼び出すか
|| コンストラクタの引数にvisibility = “normal”を指定して表示します。
{view.show}

ファイルをテキストエディタなどにコピーしてstep3_1.dcurlと名前をつけて保存してください。IDEにドラッグするかファイル(F)メニューの開くから保存したファイルを開きます。
プロジェクトを持たないファイルはファイルビュワーではその他ファイルの下に表示されます。
step3_1.dcurlを選択したら実行(R)メニューから”step3_1.dcurl” を実行を選択します。

上記のウィンドウが表示された事を確認してください。この例ではView,VBox,HBoxをコンテナとして使用しました。VBoxが縦の列を、HBoxによりボタンが横に並んでいる事が分かりましたか?

この様にコンテナと呼ばれるコントロールは他のビジュアルコントロールを配置する際に利用します。

次のステップではビジュアル レイアウト エディターと呼ばれるユーザーインターフェイスのビジュアル開発環境を使用してCanvasコンテナの動作を確認してきます。

ステップ2:新規プロジェット

Curlテクノロジー >> WEBトレーニング
ステップ2:新規プロジェット

curl™

Curlのインストールが完了したら新規にプロジェクトの作成方法を見ていきます。

■新規プロジェクトの作成

新規プロジェクトを作成するために「Surge Lab IDE」を起動します。スタートボタン -> プログラム -> Curl IDE -> Surge Lab IDEをクリックしてIDEを起動します。プロジェクトの作成はメニューバーよりファイル -> 新規をクリックしてプロジェクトのタイプを選択します。


新規ファイルと新規プロジェクトを作成するダイヤログが表示されます。


ここでは4.0から新たに導入された独立型アプレットでアプリケーションを作成しますので、新規プロジェクトタブの中から独立型アプレットプロジェクト(T)を選択します。同時に以下の内容も指定します。

・マニフェスト名(N):

ここではプロジェクト名称を指定します。プロジェクトプロパティもしくはmanifest.mcurlを直接修正する事で変更も可能です。

・ディレクトリ(D):

プロジェクト関連のファイルを格納するディレクトリを指定します。システムで決められた名称のファイルがあり複数のプロジェクトを同一ディレクトリに格納することは通常できません。必ずプロジェクト固有のディレクトリを入力します。指定したディレクトリが存在しない場合はメッセージが表示されディレクトリが作成されます。

・APIバージョン(V):

導入されているRTEに併せて表示が変更されます。ここでは4.0のままとします。


プロジェクトを作成すると指定したディレクトリに以下の4つのファイルが作成され、画面上にはマニフェスト名で指定した「トレーニングプロジェクト」と、start.dcurlが表示されています。start.dcurlをクリックすると右側のエディタにソースの内容が表示されます。





















project.cprj

プロジェクトに定義された情報を保持します。大変重要なファイルで通常は手動で編集は行いません。



project.cprj.local

Surge Lab IDEにて開いているファイルや参照しているファイルなどを保持します。これによりプロジェクトを閉じて再度開いた場合に終了時点での作業状態で復帰できます。



manifest.mcurl

IDE プロジェクトの一部としてリソースやコンポーネントなどライブラリの参照が定義されます。こちらも大変重要なファイルでシステムの規模が多くなるほど変更が必要になります。
IDEファイルツリーにあるマニフェスト名をダブルクリックするか右クリックでコンテキストメニューから開くを選択するとエディタに内容が表示されます。



start.dcurl

新規にテンプレートから作成された独立型アプレットのソースファイルです。拡張子はdetached-curl-appletとして .dcurlとなります。startという名前に意味は有りませんが初期設定で起動ファイルに指定されています。


一般的に編集の必要はありませんが以下にテンプレートが格納されています。

\Program Files\Curl Corporation\Surge\5\ide\curl-resources\default\templates

■start.dcurlのソースを見てみましょう

 start.dcurl


{curl 4.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
}

{View
|| Replace {Frame} with your code.
{Frame width = 8cm, height = 8cm},
visibility = “normal”,
{on WindowClose do
{exit}
}
}

Curlの構文はブラケット式と呼ばれる { } で囲まれた中にメソッド呼び出しや変数のスコープを持ちます。今回のソースでは{curl 4.0 applet}
を初めとする4つのスコープがある事になります。それではスコープ毎に意味を解説していきます。

 1.ヘラルド宣言


{curl 4.0 applet}

ヘラルドと呼ばれる宣言文です。最初に必ず必要なロジックでRTEコアが最初にこの部分を読み込こみ以下の処理を適用します。

1.対応するバージョンを宣言

 Curlは高い上位互換を持ちますが完全なコンパチブルではありません。特定のバージョンに依存するケースではそのバージョンを指定します。

複数のRTEバージョンに対応している場合は{curl 3.0, 4.0 applet}のように複数の指定が出来ます。

2.Curlのコンポーネントタイプを宣言

 各ファイルの種類に対応するapplet、package、manifest、script の宣言を指定します。

 2.文字エンコーディング


{curl-file-attributes character-encoding = “shift-jis”}

ソースファイルのエンコーディングを指定するに使用します。
ファイル内では Curlヘラルドの次行に指定するブラケット式でなければなりません。
 3.appletマクロ


{applet manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
}

複数の引数を持つアプレット宣言を補助するマクロで、このケースではmanifestが指定されています。このマニフェストを参照してプロジェクト内で参照可能なファイルやリソースを読み出す事ができます。

{compiler-directives ・・・}プリミティブは、コンパイラの動作を指定しています。このケースで指定されている careful?引数は “メタフラグ” として推奨されているコンパイル時のチェックを実行させる事を意味します。

 4.Viewクラス


{View
|| Replace {Frame} with your code.
{Frame width = 8cm, height = 8cm},
visibility = “normal”,
{on WindowClose do
{exit}
}
}

ブラウザーから起動されるappletと異なり独立型アプレットはデフォルトのコンテナを持ちません。Viewクラスはウィンドウを実装しており一番外側に表示されるグラフィック階層のルートとして使用されます。ここでは表示されるウィンドウがViewという意味です。



Viewブラケットの中にあるFrameクラスはViewクラスのスーパークラスです。このケースではFrameクラスにてwidth = 8cm, height = 8cmのように初期値を持ったFrameインスタンスをViewクラスのコンストラクタの一部として渡す動作をしています。


このインスタンスを作成する部分に最初は戸惑いを感じるかもしれません。
Java言語などは new シンタックスにてインスタンスを作成しますが、Curlでは{クラス名 ・・・}もしくは、{new class-type, …} のようにマクロを介してオブジェクトが生成されます。
またクラスを表現するオブジェクトとしてClassTypeやMethodがあり、リフレクションによるインタスタンス操作も可能です。

最後にカンマで区切られた{on WindowClose do 処理}マクロはスタティック イベント ハンドラ と呼ばれているイベントの記述を簡素化するマクロで、発生したイベントのオブジェクト内容を保持しています。このケースでは×ボタンなどのクリックでウィンドウが閉じようとしている事を通知するためにWindowCloseイベントが発生しています。

{exit}は呼び出し元の Process を終了するプロシージャです。メソッドやプロシージャの呼び出しなどにも {}ブラケットが必要な事に注意してください。

また実際には唯一のウィンドウが閉じるのでデフォルトの動作してイベントハンドラを記述しなくても終了します。

それでは実行してみます。IDEメニューの実行から「プロジェクトを実行」もしくはショートカットのF5キーを押下すると以下のウィンドウが表示されます。

以上で新規プロジェクトが作成されました。最初に出てくる3つのブラケット式は全てのファイルで宣言されるおまじないのような物で基本的に付加しておきます。

ステップ1:インストール

Curlテクノロジー >> WEBトレーニング
ステップ1:インストール

curl™
Curlをより多くの皆様がご理解頂けるように、導入から簡単なプログラムの開発までを見ていきます。

■ダウンロード

CurlをクライアントPC上で稼動させるにはSurge RTEをインストールする必要があります。Surge RTEは無償で提供されており 株式会社カールのホームページからダウンロードする事ができます。


今回は後ほどプログラムを作成してみますので「Surge Lab IDE」をインストールします。こちらは製品として販売している他に60日間の体験版を利用できます。利用規約とシステム要件を確認したら以下のリンクよりダウンロードしてください。Surge RTEが導入されていない場合は同時にインストールする事ができます。

 「Surge Lab IDE システム要件」

 「Surge Lab IDE 60日体験版ダウンロード」


■インストール

ダウンロードしたEXEファイルを実行してインストールを開始します。


Surge RTEが導入されていない場合は導入を促すダイヤログが表示されます。「OK」ボタンを選択してRTEのインストールを開始します。


Curl RTEセットアップ画面ではライセンス契約を確認し同意する場合はラジオボタンをクリックします。
ここでは「インストール先のフォルダ」を選択できます。後につづくIDEでは導入先のフォルダが選択できませんので、必要な場合はここで変更しておきます。


Curl IDEセットアップ画面ではライセンス契約を確認し同意する場合はラジオボタンをクリックします。ここではRTEで指定した「インストール先のフォルダ」が表示されています

■インストール後の設定

RTEがインストールされると 「Surge コントロールパネル」にて動作環境を設定する事ができます。開発状況に応じて各オプションを指定します。

スタートボタン -> プログラム -> Curl RTE -> Surge コントロールパネルをクリックして設定画面を表示します。一度Curlが実行されている場合は画面右下にあるトレイより起動する事も出来ます。


 セキュリティの設定

Curlは外部システムなどから不用意にクライアント内の資源にアクセスされないように、特権と呼ばれるセキュリティ構造として「sandbox」が採用されています。これによりランタイム上のアプレットなどに動作方法の制限を与えています。

通常はセキュリティオプションパネルより実行するモジュールが格納されたディレクトリやホストを特権ディレクトリとして定義します。

また c:\ などドライブレターを指定した場合は警告メッセージを表示の上で全てのディレクトリにシステムからアクセスする事が可能となります。

特権による主な制約事項

・クライアントPCのハードディスクのファイルのリード・ライト
※ユーザー自身がダイヤログなどで選択したファイルを除く

・ファイル名、またはファイルシステムのディレクトリ構成の取得。

・ネットワーク上の他コンピューターと接続する。

・256MB 以上のメモリー消費する。

・200個以上のウインドウを開ける。


 デバッグの設定

またIDE上でデバックを行うにはセキュリティオプションと同じくディレクトリやホストを定義しないとデバッガからトレースが実行されません。
開発環境に合わせてプロジェクトが格納されたディレクトを指定しておきます。


以上でCurlのインストールが完了しました。

トレーニング アジェンダ

Curlテクノロジー >> WEBトレーニング
トレーニング アジェンダ

curl™
無償のCurlトレーニングを実施しています。リッチクライアントの導入をご検討されているソリューションベンダーが必要とされる情報を随時に掲載していきますので是非ご利用ください。


■無料トレーニング概要

Curlをより多くの皆様がご理解頂けるように、体験版の導入から簡単なプログラムの開発までをWEB上にてご覧頂けます。CurlをクライアントPC上で稼動させるにはSurge RTEと呼ばれる専用のランタイムエンジンをインストールする必要があります。Surge RTEは無償で提供されており 株式会社カールのホームページからダウンロードする事ができます。

前編ではCurl言語とツールの使用方法から簡単な独立型画面の作成を行い、実際に業務画面を構築する際に必要ないくつかのアプローチをご紹介しています。構文やより詳しい情報についてはIDEをインストールすると「Surge Lab ドキュメンテーション」と呼ばれる品質の高い資料が付属しています。是非そちらもご覧頂きながらトレーニングを進めてください。

「1.インストール」

「2.新規プロジェクト」

「3.グラフィカル コンテナの役割」

「4.ビジュアル レイアウト エディター」

「5.グラフィカル ユーザーインターフェース前編」

「6.グラフィカル ユーザーインターフェース後編」

「7.イベント処理」


■実践的な開発手法について

実際に業務システムの要件を満たす事が可能であるか見極めるためには幾つかの機能的制限が無いのかを調査されている事と思います。まず最初に確認されるであろう機能要件について以下にまとめています。
大規模システムではさらに必要な条件が無いか検討する必要があります。プロジェクト管理による進捗状況の把握とスケジュールの共有、開発チームに効率的な開発手法を早期に提供する事で初期段階に見積もったROI(投資対効果)をより確かな実践的なものにする必要があります。またシステムのバージョン管理やテストの自動化と言った品質面などについても触れていきます。

「継承による画面操作」 New

「旧システムからのマイグレーション」 工事中

「印刷処理」 工事中

「カスタムコントロールによる入力制限」 工事中

「ローカルPCにデータをシリアライズ」 工事中

「WEBサービスとしてのクライアント」 工事中

「配布によるシステムアップデート」 工事中

「バージョン管理」 工事中

「テストの自動化」 工事中