dojoのDijitコンポーネントの表示

沖林正紀
2008-01-24 08:00:00
  • このエントリーをはてなブックマークに追加

 今回は、dojoに含まれるDijitコンポーネントを表示させる方法を紹介しよう。コンポーネントの一覧はドキュメントの「Dijit at a Glance」を参照していただきたい。

Dijitコンポーネントの表示

 Dijitのコンポーネントを表示するには、スクリプトで設定する方法と、HTML属性で設定を付記する方法との2通りが用意されている。図1のように、ボタンをクリックするとダイアログが表示されるという動作を例にして、それらを順に紹介しよう。

図1 ボタンのクリックでダイアログを表示 図1 ボタンのクリックでダイアログを表示

スクリプトによるコンポーネントの表示

 スクリプトで設定する場合は、

などの要素に対して、Dijitコンポーネントのオブジェクトがレンダリングを行う。リスト1は、図1の動作をこれにより実現するものだ。

 コンポーネントは、最初にdojo.require()により読み込ませる(1)。ボタンのコンポーネントはdijit.form.Button、ダイアログはdijit.Dialogだ。レンダリングはdojo.addOnLoad()内の関数で行う(2)。

 ここでは、(3)から(5)に示すように、それぞれのコンポーネントのインスタンスに対して、オプションとレンダリングする要素を引数で指定している。オプションの詳細はドキュメントを参照していただきたい。

 コンポーネントを利用する上で重要なことは、テーマ設定が書かれているCSSファイルをきちんと読み込ませ、それを画面上に反映させることだ。リスト1ではtundraというテーマを用いているので、dojo本体以外にtundra.cssを読み込ませ、で画面上に反映させている。

リスト1 ボタンのクリックでダイアログを表示/消去(スクリプトによる設定)



  
    Dijitコンポーネントの表示(dojo)
    
    
      dojo.require( 'dijit.form.Button' );  // (1)コンポーネントの読込
      dojo.require( 'dijit.Dialog' );
      dojo.addOnLoad( function()  {         // (2)HTMLのレンダリング
        new dijit.form.Button( {            // (3)ダイアログ表示ボタン
          label : 'ダイアログを表示',   // ボタンに表示する文字列
          onClick : function()  {
            dijit.byId( 'd1' ).show();  // クリックされたらダイアログを表示
          }
        }, dojo.byId( 'ex1' ) );
        new dijit.Dialog( {                 // (4)ダイアログ
          title : 'Dijitでダイアログ表示',  // ダイアログのタイトル
          execute : function()  {
            this.hide();  // ボタンがクリックされたらダイアログを消去
          }
        }, dojo.byId( 'd1' ) );
        new dijit.form.Button( {            // (5)ダイアログ消去ボタン
          label : '消去',
          type  : 'submit'
        }, dojo.byId( 'ex2' ) );
      } );
    // ]]>
  
  
    

Dijitコンポーネントの表示

これがDijitのダイアログ
  • コメント(2件)
#1 anonymous   2010-02-03 11:21:36
//
#2 anonymous   2010-02-03 11:26:11
script開始タグが抜けてる
  • 新着記事
  • 特集
  • ブログ