1. ホーム
  2. 質問と答え
  3. DojoToolkitパーサとJSPDojを使用する

DojoToolkitパーサとJSPDojを使用する

2012-02-28 4 views
0

私は、 'Layout with Dijit'チュートリアルhttp://dojotoolkit.org/documentation/tutorials/1.7/dijit_layout/ をJSPとして実装しようとしました。DojoToolkitパーサとJSPDojを使用する

マイコードJSPコードがある：

<html xmlns:jsp="http://java.sun.com/JSP/Page"> 
    <jsp:output doctype-root-element="HTML" doctype-system="about:legacy-compat" /> 
    <jsp:directive.page contentType="text/html;charset=UTF-8" /> 
    <jsp:directive.page pageEncoding="UTF-8" /> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Demo: BorderContainer</title> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" media="screen" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad: true"></script> 
    <script> 
     require([ "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/parser"]); 
    </script> 
    </head> 
    <body class="claro"> 
    <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'"> 
     <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'"> 
     <div> 
      <p>Lorem ipsum ...</p> 
     </div> 
     </div> 
     <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'"> 
     Header content (top) 
     </div> 
     <div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true"> 
     Sidebar content (left) 
     </div> 
    </div> 
    </body> 
</html>

このHTMLをブラウザ（FireFoxの10.0.2）によってレンダリングされるとJSPエンジン（Tomcatの7.0）によって生成されたHTMLは

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE HTML SYSTEM "about:legacy-compat"> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
    <title>Demo: BorderContainer</title> 
    <link media="screen" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" rel="stylesheet"/> 
    <script data-dojo-config="async:true, parseOnLoad: true" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"/> 
    <script> 
     require(["dijit/layout/BorderContainer","dijit/layout/ContentPane", "dojo/parser"]); 
    </script> 
    </head> 
    <body class="clark"> 
    <div data-dojo-props="design: 'headline'" data-dojo-type="dijit.layout.BorderContainer" class="demoLayout" id="appLayout"> 
     <div data-dojo-props="region: 'center'" data-dojo-type="dijit.layout.ContentPane" class="centerPanel"> 
     <div> 
      <p>Lorem ipsum ...</p> 
     </div> 
     </div> 
     <div data-dojo-props="region: 'top'" data-dojo-type="dijit.layout.ContentPane" class="edgePanel"> 
     Header content (top) 
     </div> 
     <div data-dojo-props="region: 'left', splitter: true" data-dojo-type="dijit.layout.ContentPane" class="edgePanel" id="leftCol"> 
     Sidebar content (left) 
     </div> 
    </div> 
    </body> 
</html>

あります何も起こらない。定義されたレイアウトは適用されません。必要なモジュールまで読み込まれません。 'claro.css'と 'dojo.js'のみが読み込まれます。

誰でも私に、生成されたHTMLに何が問題なのかを伝えることができます。

出典

2012-02-28 woelfle

答えて

1

レンダリングされたHTMLにはいくつかの問題があります。あなたのbody要素は、claroではなく、clarkのクラスを定義しています。また、script要素の末尾タグを使用する必要があります（理由を伝える資格はありません。なぜなら、それは正常に動作する必要があるからです）。

もう1つの問題は少し難解でした。 thisページの「サイズの設定」のセクションによれば、BorderContainer要素の幅と高さの定義も含める必要があります。インプレース修正として、ページのheadセクションに次を追加しました。

<style> 
body, html { width:100%; height:100%; margin:0; padding:0; overflow:hidden; } 
#appLayout { width:100%; height:100% } 
</style>

出典

2012-02-28 21:19:59

+0

ありがとうございました。 CSSを追加し、閉じる

関連する問題

 関連する問題