Grails Dojo Plugin Tree Example

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

Grails Dojo Plugin Tree Example

ByteMonk
Does anyone know of an example that uses the Grails Plugin to create Dijit Tree widgets?  I have loaded my JSON object according to the format on the nightly test sites for Dojo but am still not seeing it on the screen even though I am rendering it.  

My GSP looks something like this.  My controller code is being called and the JSON object looks good when I print it out.  I just call 'render foo' after it is built but nothing seems to happen.

Do I need to have some extra scripting sections in here?  I am still very new to Grails and web development in general so it is very possible that I left something out.

<html>
  <head>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Generic Title</title>
    <meta name="layout" content="main"/>
    <dojo:header theme="soria"/>
    <dojo:treeResources/>
  </head>
  <body class="soria">
   

Sample line

    <dojo:tree name="foo" controller="fooMaster" action="getTheFoo"/>
  </body>
</html>
Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

Rob Meidal
Try defining how you want the nodes and leafs to look. Here is an example found in the test code I have written in the plugin source code: 


Controller Action: 
  /**
   * Will get the widgets nested as a tree structure to demo the tree component
   */
  def treeJson = {
    List releasedWidgets = Widget.findAllByReleased(true);
    List protoTypeWidgets = Widget.findAllByReleased(false);

    def jsonMap = [
      identifier: "id",
      label:"name",
      items:[]
    ]

    def releasedWidgetMap = [
      parent:"",
      id:999998,
      name:"Released Widgets",
      hasChildNodes:true
    ]
    def unreleased = [
      parent:"",
      id:999999,
      name:"Protottypes",
      hasChildNodes:true
    ]
    jsonMap.items.add(releasedWidgetMap)
    jsonMap.items.add(unreleased)
    releasedWidgets.each{w->
      jsonMap.items.add([parent:999998, id:w?.id, name:w?.name, category:w?.category, discounted:w?.discounted.toString() ])
    }
    protoTypeWidgets.each{w->
      jsonMap.items.add([parent:999999, id:w?.id, name:w?.name, category:w?.category, discounted:w?.discounted.toString()])
    }
    render jsonMap as JSON
  }


GSP Code: 

      <dojo:tree action="treeJson" name="widgetTree" childField="hasChildNodes">
        <dojo:treeNode>{node.name}</dojo:treeNode>
        <dojo:treeLeaf>{node.name}</dojo:treeLeaf>
      </dojo:tree>



Hope that points you in the right direction.
- Rob


On Oct 5, 2012, at 12:35 PM, ByteMonk <[hidden email]> wrote:

Does anyone know of an example that uses the Grails Plugin to create Dijit
Tree widgets?  I have loaded my JSON object according to the format on the
nightly test sites for Dojo but am still not seeing it on the screen even
though I am rendering it.   

My GSP looks something like this.  My controller code is being called and
the JSON object looks good when I print it out.  I just call 'render foo'
after it is built but nothing seems to happen.

Do I need to have some extra scripting sections in here?  I am still very
new to Grails and web development in general so it is very possible that I
left something out.

<html>
 <head>
   <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}"
type="text/css">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Generic Title</title>
   <meta name="layout" content="main"/>
   <dojo:header theme="soria"/>
   <dojo:treeResources/>
 </head>
 <body class="soria">

Sample line

   <dojo:tree name="foo" controller="fooMaster" action="getTheFoo"/>
 </body>
</html>



--
View this message in context: http://grails.1312388.n4.nabble.com/Grails-Dojo-Plugin-Tree-Example-tp4635930.html
Sent from the Grails - user mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

   http://xircles.codehaus.org/manage_email



Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

ByteMonk
Rob,

Thanks for your help.  I was using an outdated example since it appears the JSON data was a little different.  I updated my controller and GSP to follow the format in your repository and everything worked great!

Jeff
Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

d.tamm
In reply to this post by ByteMonk
On which version is the dojo version of the grails dojo plugin?

Though i am quite satisfied with a bunch of grails plugins, i am still more pleased with the standard / plain functionality of the dojo framework itself! at least for my needs :) is there already functionality for the dojox stuff implemented?

Dominik
Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

Rob Meidal
There are two versions of the dojo plugin that are production ready.

> grails install-plugin dojo 1.6.1.11

- OR -

> grails install-plugin dojo 1.7.2.0


These numbers correspond to the dojo library that is bundled. While dojo 1.8 is the latest, it is not included in the dojo plugin yet. I anticipate this to be ready by November or December this year.

- Rob



On Oct 9, 2012, at 12:36 PM, d.tamm <[hidden email]> wrote:

> On which version is the dojo version of the grails dojo plugin?
>
> Though i am quite satisfied with a bunch of grails plugins, i am still more
> pleased with the standard / plain functionality of the dojo framework
> itself! at least for my needs :) is there already functionality for the
> dojox stuff implemented?
>
> Dominik
>
>
>
> --
> View this message in context: http://grails.1312388.n4.nabble.com/Grails-Dojo-Plugin-Tree-Example-tp4635930p4636204.html
> Sent from the Grails - user mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe from this list, please visit:
>
>    http://xircles.codehaus.org/manage_email
>
>


---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

ByteMonk
Looks like I'm going to have to use dojox.grid.TreeGrid instead since I need to be able to include additional columnar data.  Rob, can the dojo:grid tag in the Grails Dojo plugin be mapped to this?  I have found some Javascript examples to use this widget but I am having a lot of trouble connecting the controller, Javascript, and GSP file.
Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

Rob Meidal
While the <dojo:tree> tag doesn't do exactly the same thing as the tree grid, you have the ability to add extra data to the output: 

Here is an example: 
<dojo:tree name="widgetTreeStaticData" childField="hasChildNodes" data="${jsonString}" expandFirstChild="true">
  <dojo:treeNode>
    <div class="category">{node.name}</div>
  </dojo:treeNode>
  <dojo:treeLeaf>
    <div class="regularWidget" onclick="{this}.setNodeValue( '{node.id}' ,'discounted','true')">{node.name}</div>
  </dojo:treeLeaf>
  <dojo:treeLeaf field="discounted" value="true">
    <div class="discountWidget" onclick="{this}.setNodeValue('{node.id}' ,'discounted','false')">{node.name} (discounted)</div>
  </dojo:treeLeaf>
</dojo:tree>







On Oct 10, 2012, at 1:40 PM, ByteMonk <[hidden email]> wrote:

Looks like I'm going to have to use dojox.grid.TreeGrid instead since I need
to be able to include additional columnar data.  Rob, can the dojo:grid tag
in the Grails Dojo plugin be mapped to this?  I have found some Javascript
examples to use this widget but I am having a lot of trouble connecting the
controller, Javascript, and GSP file.



--
View this message in context: http://grails.1312388.n4.nabble.com/Grails-Dojo-Plugin-Tree-Example-tp4635930p4636304.html
Sent from the Grails - user mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

   http://xircles.codehaus.org/manage_email



Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

ByteMonk
That seems to work quite well for my purposes.  The only thing I would like to do differently is color multiple sections of text for a given tree node.  What I have looks something like this but these are not the real variable names:

<dojo:treeNode>{node.name}
      ({node.health} of {node.totalHealth})
      (Magic: {node.magic}%)
  </dojo:treeNode>

I would like to be able to adjust these background colors dynamically based on the input data from the node.  So an entity with 90% health and 20% magic would have a green background for the health text and a red background for the magic text.  I have tried doing things with Javascript calls but do not know how to get the data from the node into the script such that I can call dojo.addClass() with the proper data.
Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

Rob Meidal
Currently it's not possible. 
But one thought that you may try is pass a "color" property in your data. This would've been calculated in your controller or service. 

Then the display code would be something like: 

<dojo:treeNode>
  <div style="background-color:{node.color};"> 
  {node.name} ({node.health} of {node.totalHealth})
  (Magic: {node.magic}%)
  </div>
</dojo:treeNode>


On Oct 16, 2012, at 11:53 AM, ByteMonk <[hidden email]> wrote:

That seems to work quite well for my purposes.  The only thing I would like
to do differently is color multiple sections of text for a given tree node.
What I have looks something like this but these are not the real variable
names:

<dojo:treeNode>{node.name}
     ({node.health} of {node.totalHealth})
     (Magic: {node.magic}%)
 </dojo:treeNode>

I would like to be able to adjust these background colors dynamically based
on the input data from the node.  So an entity with 90% health and 20% magic
would have a green background for the health text and a red background for
the magic text.  I have tried doing things with Javascript calls but do not
know how to get the data from the node into the script such that I can call
dojo.addClass() with the proper data.



--
View this message in context: http://grails.1312388.n4.nabble.com/Grails-Dojo-Plugin-Tree-Example-tp4635930p4636620.html
Sent from the Grails - user mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

   http://xircles.codehaus.org/manage_email



Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

ByteMonk
That worked just fine for most of my data elements but I did notice something strange.  One of my data elements is a list of maps.  When I set that in my controller it looks something like this:

def equipMaps = []

def equipMap1 = ["equipName": 'staff', "charges": 70]
def equipMap2 = ["equipName": 'wand', "charges":54]

equipMaps.add(equipMap1)
equipMaps.add(equipMap2)

And in my items [] for my tree I added this along with some other parameters:

equipMaps: equipMaps

However, if I add this data to the items array the tree will not render at all.  I tried adding just a single map instead of a list of maps and that didn't work either.  It appears that the rendering doesn't work if I add any data elements that are not a number or a string.  Any ideas?    :)

Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

ByteMonk
This post was updated on .
I have a slight correction.  Lists do seem to work as well.  I tried doing this:

def test = ["test1", "test2"]

and the rendering was not affected if I added it to a tree item.  When I changed it to:

def test = ["test1" : "test2"]

it was no longer able to render the tree item.  I will take a look around in the plugin source and see if anything jumps out at me.
Reply | Threaded
Open this post in threaded view
|

Re: Grails Dojo Plugin Tree Example

ByteMonk
Never mind.  I looked deeper into the problem and it looks like the answer probably lies in the usage of a custom type for this element within my ItemFileWriteStore.