Question

我尝试过实施'Dijit布局'教程http://dojotoolkit.org/documentation/tutorials/1.7/dijit_layout/ 作为JSP。

我的代码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>

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>

当浏览器呈现此HTML（FireFox 10.0.2）时，没有任何反应。未应用定义的布局。甚至没有加载所需的模块。只加载'claro.css'和'dojo.js'。

任何人都可以提示我生成的HTML有什么问题。

Answer 1

您呈现的HTML存在一些问题。您的body元素定义了一个clark而不是claro的类。您还需要使用带有script元素的结束标记（我没有资格告诉您原因，只需要在那里工作）。

另一个问题有点困难。根据{{3}}页面上的“设置大小”部分，您还需要包含BorderContainer元素的宽度/高度的定义。作为就地修复，我将以下内容添加到您网页的head部分：

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

使用DojoToolkit解析器和JSPDoj

1 个答案: