Home/ Questions/Q 7592115
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T20:49:33+00:00

I’ve tried to implement the ‘Layout with Dijit’ tutorial http://dojotoolkit.org/documentation/tutorials/1.7/dijit_layout/ as a JSP. My

  • 0

I’ve tried to implement the ‘Layout with Dijit’ tutorial http://dojotoolkit.org/documentation/tutorials/1.7/dijit_layout/
as a JSP.

My code JSP code is:

<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>

The HTML generated by the jsp engine (Tomcat 7.0) is

<?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>

When this HTML is rendered by the browser (FireFox 10.0.2) then nothing happens. The defined layout is not applied. Even the required modules are not loaded. Only the ‘claro.css’ and the ‘dojo.js’ are loaded.

Can anybody give me a hint what’s wrong with the generated HTML.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a couple of issues with your rendered HTML. Your body element defines a class of clark instead of claro. You also need to use an end-tag with the script element (I’m not qualified to tell you why, it just needs to be there to work).

    The other issue was a little harder to see. According to the “Setting Sizes” section on this page, you also need to include a definition for the width/height of the BorderContainer element. As an in-place fix, I added the following to the head section of your page:

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