< 前へ | 次へ >

レッスン 3: カスタム Dojo ウィジェットを Web ページに追加する

このレッスンでは、 Dojo レイアウト・ウィジェットを使用して Web ページにレイアウトされるカスタム Dojo ウィジェットを挿入します。Dojo API を使用して、ユーザーのウィジェットを出力フィールドに関連付け、結果を表示します。

カスタム Dojo ウィジェットは作成後、「パレット」の「その他の Dojo ウィジェット」ドロワーに追加されるため、ウィジェットを Web ページに追加しやすくなっています。
  1. WebContent フォルダーを右クリックし、「新規」 > 「Web ページ」を選択します。
  2. ページに index.html という名前を付け、「終了」をクリックします。
  3. 「設計」タブをクリックして、「設計」ビューにページを表示します。
  4. パレットで、「Dojo レイアウト・ウィジェット」ドロワーを開き、BorderContainer をページにドロップします。 「境界コンテナーの挿入」ダイアログ・ボックスが表示され、BorderContainer ウィジェットをカスタマイズできます。
    1. 「上部 (Top)」および 「中央 (Center)」チェック・ボックスを選択します。
    2. OK」をクリックします。
  5. BorderContainer ウィジェットの外観は「設計」ビューに表示されます。BorderContainer の可視化をクリックして、「プロパティー」タブをクリックし、「プロパティー」ビューを開きます。
    境界コンテナーの「プロパティー」ビュー
  6. 「スタイル」タブをクリックし、「プロパティー」フィールドで、境界コンテナーの以下の値を更新します。
    • 高さを 500px から 700px に変更します。
    • 幅を 600px に変更します。
  7. 領域をダブルクリックし、テキスト・ボックスを開きます。「Loan Payment Calculator」と入力し、テキスト・ボックスの外をクリックして変更を適用します。
    BorderContainer の上部領域
  8. パレットで、「その他の Dojo ウィジェット」ドロワーを展開します。
  9. LoanInput Dojo ウィジェットを境界コンテナーの中央領域にドロップします。
  10. 「ソース」タブをクリックして、「ソース」ビューに切り替えます。
  11. LoanInput ウィジェットの div タグで、ID 属性を "LoanInput" に設定します。
    <div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
  12. LoanInput ウィジェットの下に、結果を表示する新規 div タグを追加します。 以下のテキストをコピーして使用できます。
    <div>Monthly Payment: <span id="monthlyPayment"></span></div>
  13. 既存の dojo require の直後に dijit/registry の新規モジュールの require を追加します。
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput" ],
  14. require コールバック関数にレジストリー・パラメーターを追加します。
    function(dojo, registry) {
    	dojo.ready(function() {
    	});
    });
  15. dojo.ready 関数内部で、次の手順を実行します。
    1. var loanWidget = registry.b と入力してコンテンツ・アシストを起動します。候補の byId(id) を選択して、ページに挿入します。
    2. "LoanInput"byId 関数のパラメーターとして入力します。
    3. LoanInput パラメーターの右括弧の後にセミコロン (;) を入力します。
    4. registry.byId の呼び出しの下の行で、dojo.c と入力し、コンテンツ・アシストを起動します。ここで、dojo.connect に別のデフォルト・テンプレートを選択できます。 このテンプレートには 2 つのバージョンがあります。dijit.registry.byId を使用するバージョンを選択し、それをページに挿入します。
    5. 第 1 パラメーターに LoanInput、第 2 パラメーターに calculate を設定します。
    6. 接続関数の関数パラメーターの内側で、次のコードを追加します。
      var payment = loanWidget.monthlyPayment;
      if (payment == NaN) {
      	payment = 0;
      }
      
      // update the result field
      var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    7. 必要なモジュールがストリングの配列として require 関数に追加されます。各モジュールは、モジュールのセグメントのストリングがスラッシュで区切られています。require 関数の内側で、"dojo/currency" を必要な依存関係の配列に追加します。
    8. dojo.ready 関数の最終コードは次のようになります。
      dojo.ready(function() {
      		// get the LoanInput widget
      		loanWidget = registry.byId('LoanInput');
      		
      		// handle "calculate" from widget "LoanInput"
      		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
      			var payment = loanWidget.monthlyPayment;
      			if (payment == NaN) {
      				payment = 0;
      			}
      
      			// update the result field
      			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
      		});
      	});
  16. ページを保存します。 index.html ファイルのソースは、次のようなものになります。
    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/dijit.css">
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/claro/claro.css">
    <title>t1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
    	data-dojo-config="isDebug: false, async: true, parseOnLoad: true"
    	src="dojo/dojo/dojo.js"></script>
    <script type="text/javascript">
    require(
    // Set of module identifiers
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput", "dojo/currency" ],
    // Callback function, invoked on dependencies evaluation results
    function(dojo, registry) {
    	dojo.ready(function() {
    		// get the LoanInput widget
    		loanWidget = registry.byId('LoanInput');
    		
    		// handle "calculate" from widget "LoanInput"
    		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
    			var payment = loanWidget.monthlyPayment;
    			if (payment == NaN) {
    				payment = 0;
    			}
    
    			// update the result field
    			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
    			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    		});
    	});
    });
    </script>
    </head>
    <body class="claro">
    	<div id="BorderContainer" style="height: 500px; width: 500px"
    		data-dojo-type="dijit.layout.BorderContainer"
    		data-dojo-props="design:'headline'">
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'top'">Loan Payment Calculator</div>
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'center'">
    			<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
    			<div>Monthly Payment: <span id="monthlyPayment"></span></div>
    		</div>
    	</div>
    
    	</body>
    </html>
  17. この時点で、サーバー上でユーザーのアプリケーションをテストします。 「エンタープライズ・エクスプローラー」ビューで index.html を右クリックし、「実行」 > 「サーバーで実行」を選択します。
  18. 「Web プレビュー・サーバー」を選択し、「終了」をクリックします。ページが Web ブラウザーで開きます。
  19. ローン総額を入力し、結果のフィールドが更新されるのを確認します。
    毎月の支払額

演習のチェックポイント

カスタム Dojo ウィジェットをページに追加し、サーバーでテストしました。

この演習では以下のことを学習しました。
  • パレットを使用して Web ページにカスタム・ウィジェットを追加する方法
  • サーバーで Dojo アプリケーションを実行する方法
  • 作成した Dojo ウィジェットをテストする方法
< 前へ | 次へ >
トピックのタイプを示すアイコン チュートリアルの演習のトピック
インフォメーション・センターのご利用条件 | フィードバック

タイム・スタンプ・アイコン 最終更新: May 29, 2014 10:20

ファイル名: loan_lesson3.html