SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Flexで作成する業務アプリケーションテクニック

バリデーション機能の実装で学ぶ、Flexでの共通フレームワークの作り方

Eclipseのプロブレムビューのような入力チェックUIをFlexで実現する


  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルコード (10.0 KB)

 Flexで業務アプリケーションを開発する際、「入力データのチェック機能」の実装は欠かせません。本稿では、RIAならではの操作感・ユーザービリティを実現しつつ、直感的で学習コストの低い、共通機能・フレームワーク機能の作り方について説明します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

1. はじめに

 Flexで業務アプリケーションを開発する際には、他の技術と同様に開発者の間でさまざまな取り決めを行うことと思います。サーバ通信とその戻りの受け取り方や、画面とロジックの分離や連携の仕方、エラー処理の集約化などいろいろあります。こういった定型的な処理は、共通部品やフレームワーク機能を用意して、コーディング量を減らしたり、処理の組み立て方を統一したりすることで、大きく生産性とメンテナンス性を向上させることができます。

 本稿では、業務画面で必須となる「入力データのチェック機能」について、RIAならではの操作感・ユーザービリティを実現しつつ、直感的で学習コストの低い、共通機能・フレームワーク機能の作り方について説明します。

 まずは完成後の状態を確認して、最初に右下の[次へ]ボタンをクリックしてみてください。

画面画像(エラー部分が赤枠とメッセージ一覧で表示され、赤枠をポイントすると詳細が表示される)
画面画像

 上図を見ると分かるように、ここで実現しようとしている機能は、Eclipseのプロブレムビューのような機能です。読者の方はよくご存知かと思いますが、Eclipseのプロブレムビューはとても優れた操作感とユーザーインターフェイスを提供しています。エラーのすべてが、スクロール可能なデータグリッド上に表示されていて、データグリッドの行を選択することで、問題箇所にジャンプしてくれます。これにより、ユーザーはいちいちエラー箇所を探す必要がありません。またエラー状態とリストは動的にリンクしていて、エラーが解消するとデータグリッドから該当の行が消えます。このような操作感で、「エラーリストが空になるまで修正すればいいんだ」という非常にシンプルなユーザービリティをユーザーに与えてくれます。

 このアイディアは我々開発者だけが享受するだけではもったいないです。ぜひ、一般ユーザーの手元にもこの「ユーザーエクスペリエンス」を届けてあげましょう。同時に、各画面を開発する開発メンバーにも直感的で分かりやすく、かつ使い勝手のいいフレームワーク機能を提供し、生産性を向上させることも目的としています。ぜひ、RIAだからこそできる機能をスマートに実現していただければと思います。

2. 対象読者

  • Flex開発者。
  • MXML、ActionScriptについて基礎的な知識がある方。

3. Validatorの基礎

 Flexの入力チェック機能は、Validatorクラスとそれに関連するクラスで処理することができます。Flexでのコーディングスタイルは基本的に非常に直観的で分かりやすく、ファーストステップの学習コストが低いことが魅力ですが、このValidateの使い方だけは少しその直観性に劣ります。ですので、ここでValidatorの基本的な使い方をおさらいしたいと思います。ただし、この学習が必要なのは、フレームワーク機能を構築する人だけです。後で説明するフレームワーク機能が用意されれば、他の開発メンバーは非常にスムーズにValidation機能を利用できます。本稿で紹介するフレームワーク機能は、Flexの中で比較的とっつきにくいValidater機能を分かりやすくコーティングするという目的が第一にあるのです。

 下の図1をご覧ください。

図1
図1

 図中の処理について簡単に説明します。

  1. Validatorが入力部品に対してイベントリスナーをセットします。
  2. 入力部品からの、入力があったことを知らせるイベントを契機にValidatorでチェック処理を実施します。
  3. 結果によって、valid(成功)イベントとinvalid(失敗)イベントを発行します。
  4. valid/invalidイベント発行と同時に入力部品のerrorStringプロパティにエラーメッセージをセットします。

 (4)のerrorStringへの値のセットによって、入力部品には赤い枠が描画され、mouseOverすると赤のツールチップでエラーメッセージが表示されます。

 このような流れで入力部品とValidatorが連携するのですが、コーディングすると次のようになります。

Code01.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">

    <mx:Validator id="vldtr"
        source="{txi}"
        property="text"/>

    <mx:TextInput id="txi"/>

</mx:Application>

 少し分かりにくくないでしょうか。何よりも、入力チェックを行うためにわざわざValidateオブジェクトを用意しないといけない点が面倒です。小規模なアプリケーションでは問題ないかもしれませんが、画面へのコーディングの際には極力ロジック要素を排除し、外部定義などの手段で容易に実装を変更できる必要が出てきます。このようにValidateオブジェクトを用意するのではなく、入力部品のプロパティを変えるだけで入力チェック程度の実装が変更できるようにしたいものです。

 また、チェック結果は各Validatorがイベントとして発行するだけなので、それを収集して、同一画面上の入力項目に関するチェック処理がすべて完了しているのかどうかを判断する仕組みが別途必要です。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
4. Validate処理を構築する前に検討すべきこと

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

土佐 鉄平(とさ てっぺい)

・某金融機関のユーザ系SEとして仕事しております。 ・Flexを使ったRIA開発をメインに担当。非コンシューマ向けシステムへのFlex導入に実績・有。・ブログteppei-studioでもFlexなどのTipsを紹介中。  

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3645 2009/10/20 17:15

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング