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 記事ランキング

本日 月間