お手軽高機能!Closure UI【goog.ui.ComboBox】

2013.01.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Closure Libraryに用意されている「goog.ui.ComboBox」は、テキストフィールドとドロップダウンリストから構成されるコンポーネントです。テキストフィールドへの文字列入力によってドロップダウンリストをフィルタリングする機能を持っています。

デモ

フォントを選択する為のコンボボックスをイメージしたデモになります。
テキストフィールドへ文字列を入力すると、ドロップダウンリストがその文字列に前方一致するアイテムにフィルタリングされます。

フォント: 選択した値は「」です。

デモコード

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>goog.ui.ComboBox</title>
    <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script>
      goog.require('goog.array');
      goog.require('goog.dispose');
      goog.require('goog.dom');
      goog.require('goog.events');
      goog.require('goog.ui.ComboBox');
      goog.require('goog.ui.Component');
    </script>
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/common.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menu.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuitem.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuseparator.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/combobox.css">
    <style>
      .goog-combobox input {
        vertical-align: baseline;
      }
    </style>
  </head>
  <body>
    <p>フォント:<span id="combobox"></span> 選択した値は「<span id="value"></span>」です。</p>
    <script>
      var FONT_LIST = [
        'Arial',
        'Arial Black',
        'Arial Bold',
        'Arial Bold Italic',
        'Arial Italic',
        'Batang',
        'Comic Sans MS',
        'Comic Sans MS Bold',
        'Courier New',
        'Estrangelo Edessa',
        'Franklin Gothic Medium',
        'Gautami',
        'Georgia',
        'Gulim',
        'Impact',
        'Latha',
        'Lucida Console',
        'Mangal',
        'Microsoft Sans Serif',
        'MingLiU',
        'Modern',
        'MS Pゴシック',
        'MS P明朝',
        'Mv Boli',
        'Palatino Linotype',
        'Raavi',
        'Roman',
        'Shruti',
        'SimHei',
        'SimSun',
        'Small Fonts',
        'Symbol',
        'Tahoma',
        'Times New Roman',
        'Trebuchet MS',
        'Tunga',
        'Verdana',
        'Webdings'
      ];
      
     var cb = new goog.ui.ComboBox();
      cb.setUseDropdownArrow(true);
      cb.setDefaultText('選択してください');
      
      goog.array.forEach(FONT_LIST, function(fontName){
        cb.addItem(new goog.ui.ComboBoxItem(fontName));
      });
      cb.addItem(new goog.ui.MenuSeparator());
      
      var etc = new goog.ui.ComboBoxItem('その他...');
      etc.setSticky(true);
      cb.addItem(etc);
      
      var element = goog.dom.getElement('combobox');
      cb.render(element);
      cb.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
        goog.dom.setTextContent(goog.dom.getElement('value'), event.item.getValue());
      });
    </script>
  </body>
</html>

解説

ComboBoxインスタンスを生成し、対象要素へ「描画(render)」します。

Closure Libraryのロード

<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
  goog.require('goog.array');
  goog.require('goog.dispose');
  goog.require('goog.dom');
  goog.require('goog.events');
  goog.require('goog.ui.ComboBox');
  goog.require('goog.ui.Component');
</script>
6行目
Closure Libraryのbase.jsをロードしています。
(このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。)
7~14行目
必要とするClosure Libraryを宣言しています。ここで「require」したものがグローバル変数領域に展開されます。

標準スタイルのロード

<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/common.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menu.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuitem.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuseparator.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/combobox.css">
15~19行目
共通スタイルが定義されている「common.css」をロードしています。
他、ComboBoxのスタイル定義「combobox.css」以外にもいくつかのスタイル定義をロードしていますが、これはComboBoxのドロップダウンリスト部分にMenuコンポーネントを利用している為です。

画面要素

<p>フォント:<span id="combobox"></span> 選択した値は「<span id="value"></span>」です。</p>
28行目
コンポーネントを挿入するポイントにdivまたはspan要素(id="combobox")を設置します。ここではspan要素を用意しています。

ComboBoxの生成および描画

var cb = new goog.ui.ComboBox();
cb.setUseDropdownArrow(true);
cb.setDefaultText('選択してください');
70~72行目
ComboBoxコンポーネントのインスタンスを生成し、プロパティを設定します。ドロップダウンボタンに「逆三角形(▼)」を表示させる為に「useDropdownArrow」を「true」に、プロンプトとして表示するテキストを設定する為に「defaultText」に文字列を設定しています。
goog.array.forEach(FONT_LIST, function(fontName){
  cb.addItem(new goog.ui.ComboBoxItem(fontName));
});
cb.addItem(new goog.ui.MenuSeparator());

var etc = new goog.ui.ComboBoxItem('その他...');
etc.setSticky(true);
cb.addItem(etc);
74~77行目
ドロップダウンリスト上のメニューアイテムを生成し追加しています。メニューアイテムには「goog.ui.ComboBoxItem」を、セパレータには「goog.ui.MenuSeparator」を使用します。ComboBoxItemコンストラクタの第2引数にオブジェクトを指定すれば、後述のactionイベントハンドラでそのオブジェクトを取得することができます。
79~81行目
ここではテキストフィールドへの入力文字列に関わらずに表示されるメニューアイテムを設定しています。ComboBoxItemのプロパティ「sticky」を「true」とすることでフィルタリングの影響を受けないメニューアイテムとなります。
var element = goog.dom.getElement('combobox');
cb.render(element);
cb.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
  goog.dom.setTextContent(goog.dom.getElement('value'), event.item.getValue());
});
83~84行目
ComboBoxコンポーネントをターゲット要素へ描画しています。
85~87行目
ComboBoxコンポーネントのイベントリスナにactionイベントのハンドラを追加しています。ハンドラにはgoog.ui.ItemEventが渡されます。goog.ui.ItemEventはメニューアイテムへの参照を持っているので「event.item.getValue()」とすることでメニューアイテムのキャプション、または前述の通りデータオブジェクトが設定されている場合はそのオブジェクトを取得することができます。ここでは取得したキャプションをspan要素(id="value")へ設定しています。

まとめ

メニューアイテムにオブジェクトを指定できるので利用範囲が拡がります。このような定番のUIコンポーネントがしっかりと用意されている点も「Closure Library」の良いところですね。(^^)

参照