使いこなしたいDojoウィジェット - (1) Dojo Combobox

ComboboxはWebブラウザのアドレスバーに似た、HTMLのテキストボックスとセレクトボックスが一緒になったようなUIを提供する。

HTMLファイル - combo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./js/dojo1.2/dojo/resources/dojo.css" rel="stylesheet" type="text/css">
<link href="./js/dojo1.2/dijit/themes/tundra/tundra.css" rel="stylesheet" type="text/css">
<title>Dojo Combobox sample</title>
<script type="text/javascript" src="./js/dojo1.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
<!--

dojo.require('dojo.parser');
dojo.require('dojo.data.ItemFileReadStore');
dojo.require('dijit.form.ComboBox');

// コンボボックス内の候補として表示する元データをロード
var store = new dojo.data.ItemFileReadStore({url:'./combo_data.json'});

dojo.addOnLoad
(
    function()
    {
        dojo.query('#say').connect('onclick',
            function()
            {
                alert( 'I love ' + dojo.byId('jsFrameworks').value + '!' );
            }
        );
    }
);

-->
</script>

</head>
<body class="tundra">

    <p>
        I love 
        <select id="jsFrameworks" dojoType="dijit.form.ComboBox" store="store"></select>
        <input type="button" id="say" value="say">
    </p>

</body>

</html>

JSONファイル - combo_data.json

{
    'identifier': 'name',
    'label': 'name',
    'items':
    [
        { 'name': 'jQuery' },
        { 'name': 'Prototype' },
        { 'name': 'Scriptaculous' },
        { 'name': 'YUI' },
        { 'name': 'Ajax for ASP.Net (Atlas)' },
        { 'name': 'Mootools' },
        { 'name': 'Dojo' },
        { 'name': 'ExtJs' },
        { 'name': 'Nitobi' },
        { 'name': 'Spry' },
        { 'name': 'Other (please specify)' },
        { 'name': 'GWT' },
        { 'name': 'JMaki' },
        { 'name': 'Mochikit' }
    ]
}

Comboboxを使用するにあたり必要なライブラリ群をdojo.require()で呼びだしている。dojoTypeといった独自の属性を認識させるために、dojo.jsロード時に「djConfig="parseOnLoad: true"」と指定しているところがポイントだ。

またCombobox内で表示する候補は別ファイルにJSON形式で格納し、このファイルをdojo.data.ItemFileReadStoreでロードし、<select>のstoreに指定させている。

HTMLのセレクトボックスを独自のDojo Comboboxに置き換える。ComboboxではWebブラウザのアドレスバーのように手打ちで入力のほか、候補から選択して入力することが可能だ

何か文字を入力すると候補が絞り込まれる。Dojo 1.2から候補内でもハイライト表示がおこなわれるようになった

Combobox内に入力された値は、dojo.byId('id').valueで取得できる

サーバサイド側のプログラムと組み合わせれば、表計算ソフトのオートフィルタのようなインタフェースをWebアプリケーションで実現することが可能となる。工夫次第で、強力なUIになるだろう。