Announcement Announcement Module
Collapse
No announcement yet.
how to DOJO + JSON Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • how to DOJO + JSON

    i want to make an input field with some options as autocomplete.

    I have used the
    roo> json add
    comand and tested with curl, its alright.

    now the dojo part i couldnt make.
    i need a dijit.form.ComboBox that reads the json to provide autocomplete options.

    How to make it?

  • #2
    cant use Dojo.

    dojo.require("dojo/store/Memory");
    var store = new Memory();

    dont work. how to use dojo in roo projects? couldnt find any reference in manual.

    Comment


    • #3
      Originally posted by bfpires View Post
      cant use Dojo.

      dojo.require("dojo/store/Memory");
      var store = new Memory();

      dont work. how to use dojo in roo projects? couldnt find any reference in manual.
      Take a look at the Roo tags - they embed Dojo directly.

      Here's how I did it (see Chapter 7 of Spring Roo in Action for some details on how to do Roo and Dojo in more detail):

      Code:
      <script type="text/javascript">dojo.require('dijit.TitlePane');</script>
        <div id="_title_${sec_id}_id" class="panel">
        <h2>${sec_title}</h2>
          <script type="text/javascript">
            Spring.addDecoration(new Spring.ElementDecoration({
                      elementId : '_title_${sec_id}_id', 
                      widgetType : 'dijit.TitlePane', 
                      widgetAttrs : {title: '${sec_title}', 
                      open: ${sec_openPane}}})); 
          </script>
          <jsp:doBody />
        </div>
      FWIW I don't use Dojo anymore. If I'm using Roo I will behead the Dojo widgets and do my own thing, and avoid scaffolding. I'm focusing on the AngularJS single-page web application framework, which can play nicely with Roo as a pure HTML/Javascript client. You can use @RooJson and @RooMvcJson (I forget the actual annotations) and treat Spring MVC as a smart datastore then.

      Comment


      • #4
        i can create a dojo combobox but i cant create a store and bind to it.

        my jsp:
        <script type="text/javascript">
        dojo.require("dijit.form.ComboBox");
        dojo.addOnLoad(function() {
        dojo.parser.parse();
        });
        dojo.require("dojo.store.Memory");

        </script>


        <div id="combo" />
        <div id="store" />

        <script type="text/javascript">
        var data = [
        {name:"Alabama", id:"AL"},
        {name:"Alaska", id:"AK"},
        {name:"American Samoa", id:"AS"},
        {name:"Arizona", id:"AZ"},
        {name:"Arkansas", id:"AR"},
        {name:"Armed Forces Europe", id:"AE"},
        {name:"Armed Forces Pacific", id:"AP"},
        {name:"Armed Forces the Americas", id:"AA"},
        {name:"California", id:"CA"},
        {name:"Colorado", id:"CO"},
        {name:"Connecticut", id:"CT"},
        {name:"Delaware", id:"DE"}
        ];
        Spring.addDecoration(new Spring.ElementDecoration({
        elementId : 'store',
        widgetType : 'dojo.store.Memory',
        widgetAttrs : {id: 'storeDojo', data: 'data' }}));
        </script>


        <script type="text/javascript">
        Spring.addDecoration(new Spring.ElementDecoration({
        elementId : 'combo',
        widgetType : 'dijit.form.ComboBox',
        widgetAttrs : {id: 'comboDojo', store: 'storeDojo' }}));
        </script>
        there is something wrong with the store.

        Comment


        • #5
          I've solved. This may help someone.
          After frustrating days trying Dojo, i move to jquery and it works.

          To use jquery, i added in load-scripts.tagx:
          Code:
          <spring:url value="/resources/styles/jquery-ui-1.10.1.custom.css" var="jqueryui_url"/>
              <spring:url value="/resources/scripts/jquery-1.9.1.js" var="jquery_url" />
          	<spring:url value="/resources/scripts/jquery-ui-1.10.1.custom.js" var="jquery_autocomplete_url" />
          
          	<link href="${jqueryui_url}" rel="stylesheet" type="text/css">        <!-- required for FF3 and Opera -->    </link>
              <script src="${jquery_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
          	<script src="${jquery_autocomplete_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
          and in jspx:

          Code:
            <script>
                      $(function() {
                      	$( "#tags" ).autocomplete({
                      		 source:  "/divae/alunoes/listar",
                      		 delay: 2000
                      	});
                      });
          </script>
          <div class="ui-widget">
          <label for="tags">Tags: </label>
          <input id="tags" />
          </div>

          Comment

          Working...
          X