проблема с dijit: ни один из компонентов не отображается - PullRequest
Новая
       41

проблема с dijit: ни один из компонентов не отображается

0 голосов
/ 08 марта 2012

Я использую SPring JS 2.3.0.RELEASE (который использует dojo 1.6): я пытался добавить виджеты на свою страницу, но он никогда не рендерится

Я использую страницы с помощью плиток, так что вот покупатель шаблона макета.jspx 

<html xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:tiles="http://tiles.apache.org/tags-tiles" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:spring="http://www.springframework.org/tags">
<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" />
<jsp:output omit-xml-declaration="true" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="stylesheet" type="text/css" href="/resources/dojo/resources/dojo.css"/>
<link rel="stylesheet" type="text/css" href="/resources/dijit/themes/nihilo/nihilo.css" />
<link rel="stylesheet" type="text/css" href="/resources/css/screen.css" />
<c:url var="rootUrl" value="/resources/"/>
<script type="text/javascript" djconfig="parseOnLoad: true" src="${rootUrl}dojo/dojo.js"><jsp:text></jsp:text> </script>
<script type="text/javascript" src="${rootUrl}spring/Spring.js">
  <jsp:text></jsp:text>
</script>
<script type="text/javascript" src="${rootUrl}spring/Spring-Dojo.js">
  <jsp:text></jsp:text>
</script>
<script type="text/javascript">
  dojo.require("dojo.parser"); 
</script>
<title>My Shopping</title>
</head>
<body class="nihilo">
  <tiles:insertAttribute name="header" />
  <tiles:insertAttribute name="submenu" />
  <tiles:insertAttribute name="body" />
  <tiles:insertAttribute name="footer" ignore="true" />
</body>
</html>

и вот шаблон home.jspx, который переопределяет атрибут body 

<?xml version="1.0" encoding="UTF-8" ?>
<div id="page" class="roundedCorners" xmlns:spring="http://www.springframework.org/tags" xmlns:jsp="http://java.sun.com/JSP/Page"
  xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:form="http://www.springframework.org/tags/form">
  <jsp:directive.page contentType="text/html;charset=UTF-8" />
  <jsp:output omit-xml-declaration="yes" />
  <c:url var="rootUrl" value="/resources/"/>
  <script>
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.AccordionContainer");
        dojo.require("dijit.layout.ContentPane");  
        dojo.addOnLoad(function()
            {
            // create a BorderContainer as the top widget in the hierarchy
            var bc = new dijit.layout.BorderContainer({style: "height: 100%; width: 100%;"});

            // create a ContentPane as the left pane in the BorderContainer
            var cp1 = new dijit.layout.ContentPane({
               region: "left",
               style: "height: 100px",
               content: "hello world"
            });
            bc.addChild(cp1);

            // create a TabContainer as the center pane in the BorderContainer,
            // which itself contains two children
            var tc = new dijit.layout.TabContainer({region: "center"});
            var tab1 = new dijit.layout.ContentPane({title: "tab 1"}),
                tab2 = new dijit.layout.ContentPane({title: "tab 2"});
            tc.addChild( tab1 );
            tc.addChild( tab2 );
            bc.addChild(tc);

            // put the top level widget into the document, and then call startup()
            dojo.byId("inbox").addChild(bc.domNode);
            bc.startup();
        });
    </script>  
    <div id="inbox" class="panel roundedCorners">
        <div id="inboxContainer" dojo-data-type="dijit.layout.BorderContainer">
        </div>
    </div>
</div>

Я не вижу ни одного из этих виджетов, визуализируемых при загрузке страницы.Также консоль браузера показывает ошибку: 

dojo.byId("inbox").addChild is not a function
[Break On This Error]   

dojo.byId("inbox").addChild(bc.domNode);

, несмотря на наличие конфигурации djconfig="parseOnLoad: true".

Обновление: здесьś первоначальный декларативный синтаксис, который я пытался, но могне заставить его работать.

shopper.jspx: 

<html xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:tiles="http://tiles.apache.org/tags-tiles"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:spring="http://www.springframework.org/tags">
<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" />
<jsp:output omit-xml-declaration="true" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="stylesheet"
    href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/nihilo/nihilo.css"
    media="screen"/>
<link rel="stylesheet" type="text/css" href="/resources/css/screen.css" />
<!-- load dojo and provide config via data attribute -->
<script
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
    data-dojo-config="async: true, parseOnLoad: true">
    <jsp:text></jsp:text>
</script>
<script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.AccordionContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.AccordionPane");
</script>
<title>My Shopping</title>
</head>
<body class="nihilo">
    <tiles:insertAttribute name="header" />
    <tiles:insertAttribute name="submenu" />
    <tiles:insertAttribute name="body" />
    <tiles:insertAttribute name="footer" ignore="true" />
</body>
</html>

декларативный home.jspx Я скопировал из учебника Dojo: 

<?xml version="1.0" encoding="UTF-8" ?>
<div id="page" xmlns:spring="http://www.springframework.org/tags" xmlns:jsp="http://java.sun.com/JSP/Page"
  xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:form="http://www.springframework.org/tags/form">
  <jsp:directive.page contentType="text/html;charset=UTF-8" />
  <jsp:output omit-xml-declaration="yes" />
    <div id="inbox" data-dojo-type="dijit.layout.BorderContainer" style="width: auto; height:auto" > 
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Top pane</div>
     <div data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="region:'leading'">
          <div data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div>
          <div data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div>
          <div data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div>
     </div>
     <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center'">
          <div data-dojo-type="dijit.layout.ContentPane" title="tab #1">tab pane #1</div>
          <div data-dojo-type="dijit.layout.ContentPane" title="tab #2">tab pane #2</div>
          <div data-dojo-type="dijit.layout.ContentPane" title="tab #3">tab pane #3</div>
     </div>
     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
    </div>
</div>

в screen.css Iопределили следующее: 

body {
  margin: 0;
  padding: 0;
  background-color: #EAECEE;
  font-family: Verdana, sans-serif;
  font-size: 12px;
}

#page {
  background: #ffffff;
  margin-left: auto;
  margin-right: auto;
  -moz-box-shadow: 0 0 5px 3px #999;
  -webkit-box-shadow: 0 0 5px 3px #999;
}

И я не получаю виджеты, отображаемые при доступе к странице.

Исправлено: Игнорировал факт о том, как dijit помещает divЯ удалил стили, примененные через div "page" id и установил высоту и ширину следующим образом: 

<div xmlns:spring="http://www.springframework.org/tags" xmlns:jsp="http://java.sun.com/JSP/Page"
  xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:form="http://www.springframework.org/tags/form">
  <jsp:directive.page contentType="text/html;charset=UTF-8" />
  <jsp:output omit-xml-declaration="yes" />
    <div data-dojo-type="dijit.layout.BorderContainer" style="width: auto; height:600px;" >

1 Ответ

1 голос
/ 08 марта 2012

Вы объявляете контейнер границы в разметке, а также пытаетесь создать его программно.

Попробуйте:

Изменить 

<div id="inboxContainer" dojo-data-type="dijit.layout.BorderContainer">
</div>

на 

<div id="inboxContainer" style="width:800px; height: 600px"></div>

создать контейнер границы 

var bc = new dijit.layout.BorderContainer({}, dojo.byId("inboxContainer"));
...
// dojo.byId("inbox").addChild(bc.domNode); // remove this

Эта строка кода завершается сбоем, потому что dojo.byId возвращает domNode, а domNode не имеет метода addChild.

Я также изменил ширинуи высота.Использование height: 100% требует, чтобы все узлы dom над ним в иерархии (html, body, roundedCorners, inbox) также имели высоту: 100%, и я не смог проверить в опубликованном коде, что это так, поэтому исключите этопотенциальная проблема на данный момент, указав прямую высоту.Как только он заработает, вы можете изменить его обратно.

...