Announcement Announcement Module
Collapse
No announcement yet.
Spring's Web Application and Dojo Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

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

  • #2
    Hello

    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

    Comment


    • #3
      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,

      Comment


      • #4
        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.

        Comment


        • #5
          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,

          Comment


          • #6
            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

            Comment


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

              Comment


              • #8
                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?

                Comment


                • #9
                  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?

                  Comment


                  • #10
                    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.

                    Comment

                    Working...
                    X