Spring's Web Application and Dojo

Printable View

Jul 24th, 2011, 09:11 PM
java.developer.researcher

Spring's Web Application and Dojo

Hello,

I am trying build web applications using Spring and Dojo, I'm using the "<mvc:resources/>" element in the spring's configuration.

I have the next problem, when I use "dijit.byId('idelement')" I get an error message:

1. "dijit.byId is not a function" in Firefox 5.0 with Firebug
2. "Uncaught TypeError: Object #<Object> has no method 'byId'" in Chrome 12

My questions are:

1. Is possible use spring 3 and dojo independently (in a no intrusive way)? that is, use in one application but each with its own syntax.

2. How I cant solve those error messages?

3. Does it apply the same settings for Spring MVC 3 and Spring Web Flow 2?

I hope someone can help me.

Thanks and regards,
Jul 24th, 2011, 09:57 PM
dr_pompeii

Hello

Quote:

I have the next problem, when I use "dijit.byId('idelement')" I get an error message:

1. "dijit.byId is not a function" in Firefox 5.0 with Firebug
2. "Uncaught TypeError: Object #<Object> has no method 'byId'" in Chrome 12

Did you tested in other webbrowser?

Post here your jsp code specially when you are declaring or importing Dojo
Jul 25th, 2011, 12:40 PM
java.developer.researcher

1 Attachment(s)

Code and Project

Thanks for your answer,

My jsp code is:

Code:

<%@page contentType="text/html" pageEncoding="windows-1252"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <html> <head> <style type="text/css"> @import "resources/dojo1.5/dijit/themes/claro/claro.css"; </style> <script type="text/javascript" src="resources/dojo1.5/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad:true"/> <script type="text/javascript"> dojo.require("dijit.form.TextBox"); dojo.require("dijit.Dialog"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.form.Button"); dojo.ready(function(){ alert("Dojo version " + dojo.version + " is loaded"); }); </script> <script type="text/javascript"> function showDialogTest(){ dijit.byId('dialogContent').show(); } </script> </head> <h2>Registrar Datos</h2> <body class="claro"> <form:form modelAttribute="data"> <input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}"> <b>Campo 1: </b> <input dojoType="dijit.form.TextBox" type="text" name="campo1" path="campo1" /><br/> <b>Campo 2: </b> <input dojoType="dijit.form.TextBox" type="text" name="campo2" path="campo2" /><br/> <input dojoType="dijit.form.Button" type="submit" class="button" name="_eventId_submit" value="Submit"> <input dojoType="dijit.form.Button" type="button" value="mostrar" onclick="showDialogTest()"> </form:form> <div dojoType="dijit.Dialog" id="dialogContent" title="Test ContentPane" style="display: none"> <div dojoType="dijit.layout.ContentPane"> </div> </div> </body> </html>

Also I am attaching the project structure for see the location of dojo.

Notes:

1. when request the url 'http://localhost:8181/springwebflowtemplate/resources/dojo1.5/dojo/dojo.js' in the browsers, the resource is loaded succesfully.

2. The problem occurs to call the 'showDialogTest()' function.

3. Apparently the cause of problem is that the jsp is loaded but dojo isn't loaded

Thanks and regards,
Aug 2nd, 2011, 10:35 AM
java.developer.researcher

Hello,

Anyone can help me with this topic?

I understand how to work with Spring MVC and Spring Web Flow but for real web applications need a good interface for the users. I want to use dojo because already I've worked with this tool.

Thanks in advance.
Aug 2nd, 2011, 04:57 PM
java.developer.researcher

Hello,

I made a basic tests using dojo and with Spring MVC (without using Spring Web Flow) and is working normally (as expected).

Apparently the problem is when working with spring web flow, so my query is: what considerations should be taken into consideration for the view layer when working with spring web flow?

I hope someone can help me.

Thanks and regards,
Aug 26th, 2011, 05:32 AM
priyanka_hdp

Friend Solve it like This

is is not solved yet.?
following tags enter to your web.xml

Code:

<servlet-name>default</servlet-name> <url-pattern>*.css</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.js</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.jpg</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.jpeg</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.gif</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.png</url-pattern> </servlet-mapping>

you know how to load data to dojo grid.?
if you know please let me explain about it.

thanks & regards
Mar 23rd, 2012, 12:23 PM
AlternativeMind

Same Issue here

Hi everyone, I am running into the exact same issue as the OP.

I took some simple component such as a button, and placed it into index.jspx for a Roo-created Spring MVC project.

Now, if I render the page using straight HTML, my component is rendered correctly, using chrome's developer tools, I confirmed that the served HTML looked like:

HTML Code:

<input type="button" dojoType="dijit.form.Button" intermediateChanges="false" label="Button" iconClass="dijitNoIcon"></input>

Whereas, the parsed HTML looked like:

HTML Code:

<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_0"><span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:_onClick" role="presentation"><span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_0_label" tabindex="0" id="dijit_form_Button_0" style="-webkit-user-select: none; "><span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar">●</span><span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode">Button</span></span></span><input type="button" value="" class="dijitOffScreen" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode"></span>

Now, when I place the same button in the jspx. The parsing does not happen, and I see this in both the source and parsed files:

HTML Code:

<input type="button" dojoType="dijit.form.Button" intermediateChanges="false" label="Button" iconClass="dijitNoIcon"></input>

So now, I made sure I had what I thought are the necessary requirements:

HTML Code:

<script type="text/javascript"> dojo.require(["dijit/dijit"]); dojo.require(["dojo/parser"]); dojo.require(["dijit/form/Button"]); </script>

dojo.js is included properly as part of the roo spring-MVC deployment.

Any ideas?
Mar 23rd, 2012, 03:49 PM
AlternativeMind

Solved (SpringMVC+Roo+Dojo)

Ok, I have managed to resolve my issue, not really sure why it's set-up this way, but here it goes.

I had the same issue as the poster. I also had the added issue of misused require:

HTML Code:

dojo.require(["dojo/parser"]);

Which boils down to be wrong, and I combined, incorrectly two ways of doing this which is described here:
http://livedocs.dojotoolkit.org/dojo/require

In my case I did (note the "/" is replaced by "." and "[,]" are gone too:

HTML Code:

dojo.require("dojo.parser");

Now, I was back to square one. My dojo widgets weren't being parsed.

So after some digging I found that Roo's automatic Spring MVC configuration uses the following line:

HTML Code:

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

Now, this disables Dojo's parsing. Once you set:
parseOnLoad: true

Everything started working.

Now, why is that value disabled by default? I would like to know.

Also, I can't seem to disable that value and use something like:

Code:

dojo.addOnLoad(function() { dojo.parser.parse(dojo.byId("myDiv")); }

Any thoughts?
Mar 23rd, 2012, 04:32 PM
AlternativeMind

One more thing about the parser...

Ok today I am on a roll on answering my own questions, and asking new ones. Hopefully this will be helpful for those running into similar issues.

Ok, so the parseOnLoad: false is to force you to control the way your page loads. Better explained here:
http://acuriousanimal.com/blog/2010/...oader-in-dojo/

Now, I just need to figure out how to get the parser to work in this configuration. I just can't get it to work, whenever I try to do something like:

Code:

dojo.addOnLoad(function() { dojo.parser.parse(dojo.byId("myDiv")); }

I end up with:
Uncaught SyntaxError: Unexpected end of input

But the page loaded correctly...

What gives?
Mar 28th, 2012, 01:12 PM
AlternativeMind

Figured it out:

Code:

require(["dojo/dom", "dojo/domReady!"], function(dom){ dojo.parser.parse(dojo.byId("myDiv")); });

Need to make sure that the DOM is ready as opposed to when the page is loaded. I guess this has to do with the way the pages are being parsed with tiles and JSPx.