简体   繁体   中英

Spring Roo with Dojo/Dijit declative menu bar?

I am trying to use the Dojo/Dijit declarative menu with Spring ROO 1.1.4, but even if I replace the complete roo generated menue.jspx with the example (ligthly addapted) from the Dojo/Dijit hompage, it does not replace the decorated menu divs with the menu.

that is how it look

看起来如何

that is how should look:

看起来如何

My modified menu.jspx

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:menu="urn:jsptagdir:/WEB-INF/tags/menu"
    xmlns:sec="http://www.springframework.org/security/tags" 
    version="2.0">
    <jsp:directive.page contentType="text/html;charset=UTF-8" />
    <jsp:output omit-xml-declaration="yes" />

    <script type="text/javascript">
            dojo.require("dijit.MenuBar");
            dojo.require("dijit.PopupMenuBarItem");
            dojo.require("dijit.Menu");
            dojo.require("dijit.MenuItem");
            dojo.require("dijit.PopupMenuItem");
        </script>   
    </head>

        <div dojoType="dijit.MenuBar" id="navMenu">
            <div dojoType="dijit.PopupMenuBarItem">
                <span>
                    File
                </span>
                <div dojoType="dijit.Menu" id="fileMenu">
                    <div dojoType="dijit.MenuItem" onClick="alert('file 1')">
                        File #1
                    </div>
                    <div dojoType="dijit.MenuItem" onClick="alert('file 2')">
                        File #2
                    </div>
                </div>
            </div>
            <div dojoType="dijit.PopupMenuBarItem">
                <span>
                    Edit
                </span>
                <div dojoType="dijit.Menu" id="editMenu">
                    <div dojoType="dijit.MenuItem" onClick="alert('edit 1')">
                        Edit #1
                    </div>
                    <div dojoType="dijit.MenuItem" onClick="alert('edit 2')">
                        Edit #2
                    </div>
                </div>
            </div>
        </div>
</jsp:root>

Can anybody give me a hint what I am doing wrong? (I know the fallback to do the menu programmatic, but I want to do it declarative.)


The html header is looks like that:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />    

    ...
    <script type="text/javascript">var djConfig = {parseOnLoad: false, isDebug: false, locale: '${fn:toLowerCase(userLocale)}'};</script>

    <script src="${dojo_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
    <script src="${spring_url}" type="text/javascript"><!-- /required for FF3 and Opera --></script>
    <script src="${spring_dojo_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
    <script language="JavaScript" type="text/javascript">dojo.require("dojo.parser");</script>      


    <spring:message code="application_name" var="app_name"/>
    <title><spring:message code="welcome_h3" arguments="${app_name}" /></title>
</head>

I don't knows anything about Spring Roo, so maybe I'm saying something very stupid here...

Is that menu.jspx compiling into some static html? If this is the case, you can tell Dojo to parse your initial page simply by setting parseOnLoad to true on your djConfig

var djConfig = {parseOnLoad: true, ...}

(no need to require dojo.parser in this case).

On the other hand, if that template is inserted dinamicaly, you will need to call dojo.parser.parse() on the root 'navMenu' node yourself. You seem to be require-ing it, but I don't see where it is being called.

I had to use: { dojo.addOnLoad(function(){ dojo.parser.parse(); }); }

instead of parseOnLoad:true

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM