How to best deal with JSON in Amber?

I am trying to get jstree to work in Amber.

After a few missteps, I guess that the clean way to load the library is by doing something like (inspired by the presentation example):

Test>>showTree

jQuery 

getScript: '../vendor/jstree/dist/jstree.min.js'

do: [

'#treecontainer' asJQuery jstree: (JSON parse: '{

    "json_data": {

        "data": [

            {

                "data": "A node",

                "children": [

                    "Child 1",

                    "A Child 2"

                ]

            }

        ]

    },

    "plugins": [

        "json_data",

        "ui"

    ]

}').

]

But the handling of the JSON worries me. I am not going to parse strings like that to pass information to JS libs (the JS Tree lib does *everything* with JSON (like jstree(jsoncommandandparmsinabigblob).

What's the best way to deal with that in Amber?

(There are also theme issues with the lib right now, well, ...working on it, but fixing it is JSON based, so... first things first.)

TIA

Phil

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

I'm not sure I understand your problem. 

You need to do "JSON parse:" because the json code is now in a String. If you prefer you don't put it in a String but in an external file. But anyway when you get a JSON (file or String) you would need to parse it as a String.

jQuery 

getScript: '../vendor/jstree/dist/jstree.min.js'

onSuccess: [

jQuery 

getJSON: '../../jsonData.json'

onSuccess: [ :jsonData | 

'#treecontainer' asJQuery jstree: jsonData ] ].

Here jsonData is a JSObjectProxy that will understand json_data. (the same as "jsonData := JSON parse: aString" but better because jquery add some missing features)

jsonData json_data "Answers another JSObjectProxy"

jsonData json_data data "Answers an Array with 1 element"

(jsonData json_data data at: 1) data "Answers 'A node'"

For your usecase I guess you can just use the JSObjectProxy to use the json datas it is enough.

Or perhaps what you want is not to use JSON and to create directly the javascript object that is the result of "JSON parse:" and that will be used in :

'#treecontainer' asJQuery jstree: myObject

Then you don't have to rely on Strings, parsing ... It is not trivial to create objects compatible like that in Amber but it is possible with things like :

#{ 'data' -> 'A node')

In javascript, the result of "JSON parse:" is a regular javascript object that has only data and no methods.

I don't know if I was able to help you. I tried :/

2013/5/21 [hidden email] <[hidden email]>

I am trying to get jstree to work in Amber.

After a few missteps, I guess that the clean way to load the library is by doing something like (inspired by the presentation example):

Test>>showTree

jQuery 

getScript: '../vendor/jstree/dist/jstree.min.js'

do: [

'#treecontainer' asJQuery jstree: (JSON parse: '{

    "json_data": {

        "data": [

            {

                "data": "A node",

                "children": [

                    "Child 1",

                    "A Child 2"

                ]

            }

        ]

    },

    "plugins": [

        "json_data",

        "ui"

    ]

}').

]

But the handling of the JSON worries me. I am not going to parse strings like that to pass information to JS libs (the JS Tree lib does *everything* with JSON (like jstree(jsoncommandandparmsinabigblob).

What's the best way to deal with that in Amber?

(There are also theme issues with the lib right now, well, ...working on it, but fixing it is JSON based, so... first things first.)

TIA

Phil

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Clément Béra

Mate Virtual Machine Engineer

Bâtiment B 40, avenue Halley 59650 Villeneuve d'Ascq

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Clement,

Thanks for the explanations. Makes a lot of sense.

(Guess it was getting late and I was running out of brain juice when it comes to the string/object thing).

I think that the jQuery getJSON: 'something.json'  is the way to go in order to stay sane when it comes to maintaining the wealth of parms that jstree requires.

There are a number of typical jQuery patterns that one can use.

For someone who masters that, that's "easy" to map to Amber.

But looking at Amber first, there is value in documenting these patterns (if I do face them, I guess other newcomers will).

Integrating external JavaScript libraries is a big deal and while looking at the examples, none is done the same way:

1/ Google charts uses a loader

2/ processing uses a <script> in the index.html

3/ Presentation has a class with jQuery

and

4/ amber itself does things in amber.js in its own way

I used something looking like what presentation does but this loads the thing when I do the tree render. Which I may not want.

What I want is to get the library loaded cleanly without having to touch the index.html if possible.

So, maybe something on the class side's initialize that Nicolas told me was executed at loading time (the question being then: what is the order that is used for loading?).

Thanks again for your reply!

Phil

On Wed, May 22, 2013 at 8:53 AM, Clément Bera <[hidden email]> wrote:

I'm not sure I understand your problem. 

You need to do "JSON parse:" because the json code is now in a String. If you prefer you don't put it in a String but in an external file. But anyway when you get a JSON (file or String) you would need to parse it as a String.

jQuery 

getScript: '../vendor/jstree/dist/jstree.min.js'

onSuccess: [

jQuery 

getJSON: '../../jsonData.json'

onSuccess: [ :jsonData | 

'#treecontainer' asJQuery jstree: jsonData ] ].

Here jsonData is a JSObjectProxy that will understand json_data. (the same as "jsonData := JSON parse: aString" but better because jquery add some missing features)

jsonData json_data "Answers another JSObjectProxy"

jsonData json_data data "Answers an Array with 1 element"

(jsonData json_data data at: 1) data "Answers 'A node'"

For your usecase I guess you can just use the JSObjectProxy to use the json datas it is enough.

Or perhaps what you want is not to use JSON and to create directly the javascript object that is the result of "JSON parse:" and that will be used in :

'#treecontainer' asJQuery jstree: myObject

Then you don't have to rely on Strings, parsing ... It is not trivial to create objects compatible like that in Amber but it is possible with things like :

#{ 'data' -> 'A node')

In javascript, the result of "JSON parse:" is a regular javascript object that has only data and no methods.

I don't know if I was able to help you. I tried :/

2013/5/21 [hidden email] <[hidden email]>

I am trying to get jstree to work in Amber.

After a few missteps, I guess that the clean way to load the library is by doing something like (inspired by the presentation example):

Test>>showTree

jQuery 

getScript: '../vendor/jstree/dist/jstree.min.js'

do: [

'#treecontainer' asJQuery jstree: (JSON parse: '{

    "json_data": {

        "data": [

            {

                "data": "A node",

                "children": [

                    "Child 1",

                    "A Child 2"

                ]

            }

        ]

    },

    "plugins": [

        "json_data",

        "ui"

    ]

}').

]

But the handling of the JSON worries me. I am not going to parse strings like that to pass information to JS libs (the JS Tree lib does *everything* with JSON (like jstree(jsoncommandandparmsinabigblob).

What's the best way to deal with that in Amber?

(There are also theme issues with the lib right now, well, ...working on it, but fixing it is JSON based, so... first things first.)

TIA

Phil

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

"what is the order that is used for loading?"

To what I see it seems that Amber packages are loaded first, then your project packages are loaded in the order they are written in 'loadAmber()' method.

For the bootstrap of my app I have to load several images and JSON files so I manually do it with a class "Bootstrap" that displays a loading bar and loads everything. When everything expected is loaded, it removes the loading bar and executes the method 'startApp'. I don't use initialize on class side but in the index.html I have in loadAmber(ready: function() {smalltalk.CWBootstrap._start() } ). You don't want to touch index.html but you have to write loadAmber() anyway, do you ?

I'm not sure what is the best way to go to load cleanly the library without modifying index.html ...

2013/5/22 [hidden email] <[hidden email]>

Clement,

Thanks for the explanations. Makes a lot of sense.

(Guess it was getting late and I was running out of brain juice when it comes to the string/object thing).

I think that the jQuery getJSON: 'something.json'  is the way to go in order to stay sane when it comes to maintaining the wealth of parms that jstree requires.

There are a number of typical jQuery patterns that one can use.

For someone who masters that, that's "easy" to map to Amber.

But looking at Amber first, there is value in documenting these patterns (if I do face them, I guess other newcomers will).

Integrating external JavaScript libraries is a big deal and while looking at the examples, none is done the same way:

1/ Google charts uses a loader

2/ processing uses a <script> in the index.html

3/ Presentation has a class with jQuery

and

4/ amber itself does things in amber.js in its own way

I used something looking like what presentation does but this loads the thing when I do the tree render. Which I may not want.

What I want is to get the library loaded cleanly without having to touch the index.html if possible.

So, maybe something on the class side's initialize that Nicolas told me was executed at loading time (the question being then: what is the order that is used for loading?).

Thanks again for your reply!

Phil

On Wed, May 22, 2013 at 8:53 AM, Clément Bera <[hidden email]> wrote:

I'm not sure I understand your problem. 

You need to do "JSON parse:" because the json code is now in a String. If you prefer you don't put it in a String but in an external file. But anyway when you get a JSON (file or String) you would need to parse it as a String.

jQuery 

getScript: '../vendor/jstree/dist/jstree.min.js'

onSuccess: [

jQuery 

getJSON: '../../jsonData.json'

onSuccess: [ :jsonData | 

'#treecontainer' asJQuery jstree: jsonData ] ].

Here jsonData is a JSObjectProxy that will understand json_data. (the same as "jsonData := JSON parse: aString" but better because jquery add some missing features)

jsonData json_data "Answers another JSObjectProxy"

jsonData json_data data "Answers an Array with 1 element"

(jsonData json_data data at: 1) data "Answers 'A node'"

For your usecase I guess you can just use the JSObjectProxy to use the json datas it is enough.

Or perhaps what you want is not to use JSON and to create directly the javascript object that is the result of "JSON parse:" and that will be used in :

'#treecontainer' asJQuery jstree: myObject

Then you don't have to rely on Strings, parsing ... It is not trivial to create objects compatible like that in Amber but it is possible with things like :

#{ 'data' -> 'A node')

In javascript, the result of "JSON parse:" is a regular javascript object that has only data and no methods.

I don't know if I was able to help you. I tried :/

2013/5/21 [hidden email] <[hidden email]>

I am trying to get jstree to work in Amber.

After a few missteps, I guess that the clean way to load the library is by doing something like (inspired by the presentation example):

Test>>showTree

jQuery 

getScript: '../vendor/jstree/dist/jstree.min.js'

do: [

'#treecontainer' asJQuery jstree: (JSON parse: '{

    "json_data": {

        "data": [

            {

                "data": "A node",

                "children": [

                    "Child 1",

                    "A Child 2"

                ]

            }

        ]

    },

    "plugins": [

        "json_data",

        "ui"

    ]

}').

]

But the handling of the JSON worries me. I am not going to parse strings like that to pass information to JS libs (the JS Tree lib does *everything* with JSON (like jstree(jsoncommandandparmsinabigblob).

What's the best way to deal with that in Amber?

(There are also theme issues with the lib right now, well, ...working on it, but fixing it is JSON based, so... first things first.)

TIA

Phil

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Clément Béra

Mate Virtual Machine Engineer

Bâtiment B 40, avenue Halley 59650 Villeneuve d'Ascq

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.