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

お手軽高機能！Closure UI

#JavaScript

#HTML5

#Closure

#RIA

稲毛透

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',
        'ＭＳ Ｐゴシック',
        'ＭＳ Ｐ明朝',
        '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"）へ設定しています。