SHOEISHA iD

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

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

顧客と開発者の生産性を格段に向上させる、業務システムの画面UI(AD)

JPAddressを用いて、さらに優れた住所入力フォームを作成しよう

顧客と開発者の生産性を格段に向上させる、業務システムの画面UI 第2回

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

MultiRowに応用する

 MultiRowコンポーネントも、InputManのGcPostal相当のGcPostalCellと、GcPostalBarCodeと同等の機能を実現できるGcBarCodeCellを備えているため、同様の住所検索、郵便バーコード表示が可能です。

 以下のサンプルでは郵便番号を入力すると、住所と住所のカナ表記、郵便バーコードが郵便番号に応じて変更されます。

MultiRowを使ったサンプル
MultiRowを使ったサンプル

 サンプルの実装のポイントを紹介します。

GcBarCodeCellのTypeをJapanesePostalに

 GcBarCodeCellは、郵便バーコード以外にもさまざまな形式に対応しているため、郵便バーコードを表示するということを指定する必要があります。

 郵便バーコードに指定するには、GcBarCodeCellのTypeプロパティをJapanesePostalに設定します。

GcBarCodeCellのTypeプロパティをJapanesePostalに
GcBarCodeCellのTypeプロパティをJapanesePostalに

データはList型のコレクションで指定

 前回の記事「Webアプリではまねできない、MultiRow&InputManを組み合わせた高機能入力フォーム」ではデータのソースにAccessのデータを利用しましたが、今回はList型のコレクションを指定しました。データはシンプルなプロパティを3つもったクラスです。

シンプルなデータクラスを容易
class AddressData
{
    /**
     * 郵便番号
     */
    public string postal { get; set; }

    /**
     * 住所(漢字)
     */
    public string address1 { get; set; }

    /**
     * 住所(カナ)
     */
    public string address_kana { get; set; }
}

 データはGcMultiRowのDataSourceプロパティに以下のように指定します。

シンプルなデータクラスを容易
this.data = new List<AddressData>();
this.data.Add(new AddressData() { postal = "9200021", address1 = "石川県金沢市七ツ屋町", address_kana = "イシカワケンカナザワシナナツヤマチ" });
this.data.Add(new AddressData() { postal = "2140021", address1 = "神奈川県川崎市多摩区宿河原", address_kana = "カナガワケンカワサキシタマクシュクガワラ" });

this.gcMultiRow1.DataSource = data;

テンプレートのDataFieldに対応するプロパティを指定

 GcMultiRowのどのセルにデータクラスの値を表示するかは、GcMultiRowのテンプレートのDataFieldプロパティに指定します。

 下の画像は郵便番号を表示したいセルのDataFieldプロパティにデータクラスのpostalプロパティを指定したことをあらわします。

DataFieldにpostalプロパティを指定
DataFieldにpostalプロパティを指定

 さらに詳しく実装を確認したい場合はサンプルコードを参照してください。

まとめ

 JPAddressコンポーネントと他のコンポーネントの連携を紹介してきました。JPAddressを組み合わせることでアプリケーションの住所を扱う機能が改善されることが実感いただけたと思います。

 アプリケーションの使われ方で、何度も住所入力を行うことが想定される場合は、ぜひJPAddressを用いることで効率を上げることができないか検討してみてください。

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
顧客と開発者の生産性を格段に向上させる、業務システムの画面UI連載記事一覧

もっと読む

この記事の著者

西村 誠(ニシムラ マコト)

 Microsoft MVP Windows Platform Development。 Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。 ブログ:眠るシーラカンスと水底のプログラマー 著書:基礎から学ぶ Windowsストアアプリ開発

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9557 2016/07/28 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング