Curlで始めるリッチクライアント（1）　Page 3/3

入力系アプリケーションでCurlを使ってみる

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

■TextFieldクラスを使ってみよう

　今回は入力コントロールとなる「TextFieldクラス」の説明と機能追加の方法を説明していきます。対象ファイルは「TextField.scurl」と「A_TextField.curl」です。「A_TextField.curl」はTextFieldを単体で理解しやすいように、TextFieldのみで実行できるようにしています。

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

{TextField}
または
{TextField.default}
リスト4　TextFieldクラスを使用

　例えば、今回の入力フォームで「名前（全角）」のインターフェイスを作るに当たり、以下のオプションを設定しています

{TextField
  width=5cm,
  halign="left",
  input-method-focus-behavior = "activate",
  input-method-keyboard-mode="hiragana"
  （以下、略）
}
リスト5　TextFieldクラスのオプション設定（A_TextField.curlの6行目からを抽出）

　「width」オプションはTextFieldの幅を設定します。今回はcm（センチメートル）で指定していますがpt（ポイント）やyd（ヤード）など、さまざまな単位で設定できます。「haligh」はTextField内のテキストを水平方向にどのように配置するかを指定できます。「名前（全角）」の場合は左寄せで設定しています。

　「input-method-focus-behavior」オプションと「input-method-keyboard-mode」は、名前で分かるようにIMEの制御を設定するオプションです。「input-method-focus-behavior」オプションはIMEのON／OFFを設定でき、「input-method-keyboard-mode」はIMEのモード切り替えの設定ができます。上記の例では「input-method-keyboard-mode」オプションを「hiragana」として、平仮名文字の入力モードに設定しています。

　TextFieldクラスには、これ以外にもさまざまなオプションがあります。詳しくはSurge Labドキュメントの「TextFiledクラスのローカルオプション」「非ローカルオプション」を参照してください。

　次に、{on … do}という記述が3つあります。これはイベント処理の部分です。「on」はマクロです。詳しくはSurgeLabドキュメントの「on（マクロ）」を参照してください。「on」の後に続く部分には「FocusOutクラス」「FocusInクラス」「KeyPressクラス」といったイベントクラスを継承したクラスを指定します。今回のサンプルでは以下のようになっています。

{on e:FocusOut at t:TextField do
    {unset t.control-content-background}
},
{on e:FocusIn at t:TextField do
    set t.control-content-background = "#ccccff"
},
{on e:KeyPress at t:TextField do
    {if e.value == KeyPressValue.enter then
        let kp:KeyPress={KeyPress}
        set kp.value=KeyPressValue.tab
        {t.handle-event kp}
        {e.consume}
    }
}
リスト6　TextFieldクラスのイベント処理（A_TextField.curlの11行目からを抽出）

　FocusOut／FocusInクラスはキーボード・フォーカスを取得または失うとき、そのオブジェクトをターゲットとして発生するイベントです。TextFieldの既定の振る舞いでは、フォーカスを取得しても背後の色（control-content-backgroundオプション）は変わりません。それをFocusOut／FocusInイベント処理を追加することにより変更しています。

　また、KeyPressクラスは任意の非修飾キーのキー・ストロークまたは同等のアクションにより発生するイベントです。TextFieldの既定のKeyPressイベント動作は、Tabキーを押したときにフォーカス移動が発生するようになっています。それをKeyPressイベント処理を追加することによって、Enterキーが押されたときにTabキーを押されたときと同じ動作をするようにしています。これによりTabキーでもEnterキーでもフォーカスの移動が可能になっています。もちろんTab以外にもキーを指定することができます。詳しくはSurge Labドキュメントの「目次」タブ−「グラフィカルユーザーインタフェース」−「イベント」−「フォーカスとキーイベント」を参照してください。

　またその後に続くTextFieldは、以下のようにイベント処理が追加されています。

{on e:KeyPress at t:TextField do
    {if e.normal? and
        not (e.value >='0' and e.value <= '9') and
        not (e.value == KeyPressValue.enter) then
            {popup-message
                title = "入力エラー",
                "数値で入力してください。"
            }
            {e.consume}
      elseif e.value == KeyPressValue.enter then
         let kp:KeyPress={KeyPress}
         set kp.value=KeyPressValue.tab
         {t.handle-event kp}
         {e.consume}
     }
}
リスト7　TextFieldクラスの入力エラー処理（A_TextField.curlの37行目からを抽出）

　ここではEnterキーによる移動処理のほかに、数値以外を入力できないような制御を加えています。ここではif式を使用して「0」から「9」までの数字キー以外が入力されると、popup-messageプロシージャを使用してエラーをポップアップ表示するようにしています。popup-messageプロシージャの詳細なパラメータなどはSurge Labドキュメントの「インデックス」タブ−「popup-message（プロシージャ）」を参照してください。

◇

　今回はTextFieldの機能に特化した説明を行いました。次回はCurlのWebアプリケーション開発における基本的なアプリケーション構成を説明するとともに、オブジェクト指向のメリットを生かした共通部品化（サブクラス化）の方法と、Curlコントロールの中でも強力なインターフェイスである「RecordGrid」と「TabContainer」を解説します。（次回に続く）

　 3/3  

　INDEX

Curlで始めるリッチクライアント（1）
入力系アプリケーションでCurlを使ってみる
  Page1
Curlとは？
Curlが動作する仕組み
  Page2
Curlの基本的な構文
サンプル・アプリケーションの概要
Page3
TextFieldクラスを使ってみよう




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

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT