Curlで始めるリッチクライアント(3) Page 3/3

Curl独自のIDEでビジュアルな開発を実現

住商情報システム
三野 凡希
2005/7/14

独自コントロールをVLEに登録する

  VLEのパレットにはCurlの基本的なコンテナおよびコントロールがあり、それをドラッグ&ドロップすることで、コーディングをせずにレイアウトを構築できることは理解できたと思います。しかし実際のアプリケーションを作成する際、第1回第2回に紹介したように、入力コントロールでもさまざまな機能(例えばイベント処理など)を必要とします。VLEで複数のTextFieldのイベントハンドラに、毎回同じようなイベントハンドラを追加していたのでは非効率的です。

 VLEではそのような要求に対し、効率的に開発できる方法として、独自のコントロール(第1回、第2回で紹介したひらがな用のCustomTextField_hiraganaなど)をパレットに追加できる機能が備わっています。VLEに独自のコントロールを追加するには基本的に以下の作業が必要となります。

独自クラスの作成

 独自クラスを作成します。作成方法については第2回の「TextFieldクラスを継承したサブクラス(共通部品)化」を参照してください。

プロパティクラスの作成

 DesignTimeGraphicのサブクラスを定義して、VLEが新しいオブジェクトをどのように扱うか、例えばプロパティの表示内容やアイコン、説明文などを設定します。その後にregister-palette-itemプロシージャを呼び出して、新しいパレットアイコンを実際に追加します。独自コントロールのプロパティクラスの作成方法については、Surge Labドキュメントの「目次」タブ−「Surge Lab VLEユーザーガイド」−「ビジュアルレイアウトエディタの機能拡張」−「プロパティの設定」を参照してください。

 以上の方法で作成したソースファイルを以下のURLからダウンロードできます。独自コントロールの機能は第1回、第2回と同じ機能を持っています。

 フォルダ構成は以下のようになっています。

VLE-extension
EXT-FILES
    VLEパレットに登録するためのファイル。これをVLEが読み込むとVLEのパレットに登録される
GUI-PARTS
    TextFieldクラスなどのサブクラス定義したソースファイル群で第1回、第2回で作成したものと同じ機能
PALETTE
    VLEに追加されるオブジェクトのプロパティ設定用のファイル(「GUI-PARTS」のサブクラスをVLE上のプロパティ領域に表示するプロパティクラスの定義)

 ダウンロードしたファイルをローカルディスクに保存し、以下の手順でパレットに追加します。

  1. ビジュアルレイアウトエディタの「表示(V)」メニューから「パレット拡張機能(X)」を選択
  2. 「新規」ボタンをクリックし、EXT-FILESフォルダにあるExtension.scurlを選択

 すると図9のように、パレット部分に「CUSTOM-PARTS」というタブが作成され、独自のコントロールが並びます。

図9 独自コントロールのVLEへの追加

 実際に画面を作成して試してみましょう。VLE用のファイル作成方法は「VLEの起動およびファイル作成」を参照してください。ファイルが作成されたら「CUSTOM-PARTS」タブの各コントロールをレイアウトに貼り付けて、実行ファイルにリスト1のように{import ….}文(赤字部分)を追加して、実行します。

{curl 3.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}
{import * from VLE.CUSTOM.GUIPARTS,location="GUI-PARTS/load.scurl"}
リスト1 実行ファイルにimport文を追加

 IMEの制御や入力チェックなどが設定されたコントロールであることが分かります。このように独自のコントロールをVLEに登録すると、オブジェクト指向のメリットを生かして、開発生産性を向上できます。また、次期バージョン(Ver. 4.0)では独自コントロールのVLEへの登録がさらに簡単になる予定です。

 3回にわたり、サンプル・アプリケーションの機能およびVLEを中心に説明してきました。記事をきっかけに、いっそうCurlへの理解を深めていただくことを望んでおります。(連載完)

  3/3  

 INDEX

Curlで始めるリッチクライアント(3)
Curl独自のIDEでビジュアルな開発を実現
  Page1
今回の内容
VLEの起動およびファイル作成
  Page2
VLEの構成およびレイアウトの構築
Page3
独自コントロールをVLEに登録する




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間