Smalltalk › Amber Smalltalk

ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

12 messages Options

Hannes Hirzel

ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

Hello Rodrigo

Thank you for sharing what for your app example. I think this would be
a nice thing to have as a third tutorial (1st beeing setup of the
environment by Goran K, the second 'hello world' by Nicolas P, and
then this one).

It is actually the first "real" client side app I see which runs in
Amber. Or not, probably Bernat's Sokoban game is probably the first.
But I think it is the first which teaches people how to do something
quickly (within a few hours).

http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage/

(It works fine in Chrome e.g. from
http://portableapps.com/apps/internet/google_chrome_portable;
Firefox 5.0 did not work)

You say it is just a hack so far. So it needs a little bit of
polishing and explanation. I.e. it can be converted to a tutorial in
the style Nicolas has done for the hello world tutorial.

It nicely shows how you call your app (see second screenshot with the
Chrome developer tools)

loadAmber({ready: function () { smalltalk.TodoList._run(); }});

It resides in a package of its own and has three classes

ToDo (remark: I would rename it to ToDoItem)
ToDoList
ToDoStorage

ToDoList initialize is

initialize
super initialize.
todos := TodoStorage new.
container := 'div#todos ol'.
count := todos size = 0 ifTrue: [ 1 ] ifFalse: [( todos collect: [
:each | each id asNumber ]) sort last + 1 ]

and in
ToDoStorage initialize

you have

initialize
storage := localStorage.
array := self getArray.

My question. What is 'localStorage' here. From a Smalltalk point of
view it looks like an instance variable but there is none

Object subclass: #TodoStorage
instanceVariableNames: 'storage array'
package: 'TodoList'

nil subclass: #Object
instanceVariableNames: ''
package: 'Kernel'

So it must be the windows.localStorage I assume.
http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%29.aspx#_global

https://developer.mozilla.org/en/DOM/Storage

If yes, I'd like to see a comment at that point because for somebody
coming from Smalltalk this is not obvious.

A minor thing:

Instead of

ToDoStorage>>lenght
lenght
^ self size

go for

length
^ self size

Maybe ToDoStorage needs some more polishing as well, I have not looked
into it yet.

So my suggestion: add some more comments and write one page like
https://github.com/NicolasPetton/amber/wiki/Writing-my-first-app.
Then we have a third tutorial for 0.9.1! This will help people to get
started quickly.

And we need to get it running in InternetExplorer 9, Firefox 5, 6, 7
or 8, (maybe Opera 11+)
(probably by using a JavaScript localStorage library which levels out
the browser differences as jQuery does). This might or might not be
tricky, any suggestions by others?

Kind regards
Hannes

On 10/6/11, Rodrigo Bistolfi <[hidden email]> wrote:

> Hi Hannes, guys
>
> I wrote a small Todo application for learning Amber (inspired by the one in
> backbone.js), in which I use localStorage. It is just a hack so far, and
> for some reason *it only works with chrome* for now, but maybe it can bring
> you some inspiration. You can check out the code at github:
> https://github.com/rbistolfi/Amber-Todo and take a look at the app itself in
> http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage
>
> Regards, Rodrigo (aka rbistolfi)
>

Amber-RBistolfi-ToDo-List-App.png (66K) Download Attachment

Amber-RBistolfi-ToDo-List-App-With-Chrome-Developer-Tools.PNG (129K) Download Attachment

Bernat Romagosa

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

That's a cool one :)

Should we include it in the examples?

Cheers!

2011/10/7 H. Hirzel <[hidden email]>

Hello Rodrigo

Thank you for sharing what for your app example. I think this would be
a nice thing to have as a third tutorial (1st beeing setup of the
environment by Goran K, the second 'hello world' by Nicolas P, and
then this one).

It is actually the first "real" client side app I see which runs in
Amber. Or not, probably Bernat's Sokoban game is probably the first.
But I think it is the first which teaches people how to do something
quickly (within a few hours).

http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage/

(It works fine in Chrome e.g. from
http://portableapps.com/apps/internet/google_chrome_portable;
Firefox 5.0 did not work)

You say it is just a hack so far. So it needs a little bit of
polishing and explanation. I.e. it can be converted to a tutorial in
the style Nicolas has done for the hello world tutorial.

It nicely shows how you call your app (see second screenshot with the
Chrome developer tools)

loadAmber({ready: function () { smalltalk.TodoList._run(); }});

It resides in a package of its own and has three classes

ToDo (remark: I would rename it to ToDoItem)
ToDoList
ToDoStorage

ToDoList initialize is

initialize
super initialize.
todos := TodoStorage new.
container := 'div#todos ol'.
count := todos size = 0 ifTrue: [ 1 ] ifFalse: [( todos collect: [
:each | each id asNumber ]) sort last + 1 ]

and in
ToDoStorage initialize

you have

initialize
storage := localStorage.
array := self getArray.

My question. What is 'localStorage' here. From a Smalltalk point of
view it looks like an instance variable but there is none

Object subclass: #TodoStorage
instanceVariableNames: 'storage array'
package: 'TodoList'

nil subclass: #Object
instanceVariableNames: ''
package: 'Kernel'

So it must be the windows.localStorage I assume.
http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%29.aspx#_global

https://developer.mozilla.org/en/DOM/Storage

If yes, I'd like to see a comment at that point because for somebody
coming from Smalltalk this is not obvious.

A minor thing:

Instead of

ToDoStorage>>lenght
lenght
^ self size

go for

length
^ self size

Maybe ToDoStorage needs some more polishing as well, I have not looked
into it yet.

So my suggestion: add some more comments and write one page like
https://github.com/NicolasPetton/amber/wiki/Writing-my-first-app.
Then we have a third tutorial for 0.9.1! This will help people to get
started quickly.

And we need to get it running in InternetExplorer 9, Firefox 5, 6, 7
or 8, (maybe Opera 11+)
(probably by using a JavaScript localStorage library which levels out
the browser differences as jQuery does). This might or might not be
tricky, any suggestions by others?

Kind regards
Hannes

On 10/6/11, Rodrigo Bistolfi <[hidden email]> wrote:
> Hi Hannes, guys
>
> I wrote a small Todo application for learning Amber (inspired by the one in
> backbone.js), in which I use localStorage. It is just a hack so far, and
> for some reason *it only works with chrome* for now, but maybe it can bring
> you some inspiration. You can check out the code at github:
> https://github.com/rbistolfi/Amber-Todo and take a look at the app itself in
> http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage
>
> Regards, Rodrigo (aka rbistolfi)
>

--
Bernat Romagosa.

Nicolas Petton

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

In reply to this post by Hannes Hirzel

That's great!

If that's ok, I'd like to add it into Amber's examples, and probably put
it online on the website too.

I saw some errors in Firefox, but I'll try to fix them. If you agree,
there would be some css fixes too, as it kinds of breaks the IDE.

Cheers,
Nico

On Fri, 2011-10-07 at 05:22 +0000, H. Hirzel wrote:

> Hello Rodrigo
>
> Thank you for sharing what for your app example. I think this would be
> a nice thing to have as a third tutorial (1st beeing setup of the
> environment by Goran K, the second 'hello world' by Nicolas P, and
> then this one).
>
> It is actually the first "real" client side app I see which runs in
> Amber. Or not, probably Bernat's Sokoban game is probably the first.
> But I think it is the first which teaches people how to do something
> quickly (within a few hours).
>
> http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage/
>
> (It works fine in Chrome e.g. from
> http://portableapps.com/apps/internet/google_chrome_portable;
> Firefox 5.0 did not work)
>
>
> You say it is just a hack so far. So it needs a little bit of
> polishing and explanation. I.e. it can be converted to a tutorial in
> the style Nicolas has done for the hello world tutorial.
>
>
> It nicely shows how you call your app (see second screenshot with the
> Chrome developer tools)
>
>
> loadAmber({ready: function () { smalltalk.TodoList._run(); }});
>
> It resides in a package of its own and has three classes
>
> ToDo (remark: I would rename it to ToDoItem)
> ToDoList
> ToDoStorage
>
>
> ToDoList initialize is
>
> initialize
> super initialize.
> todos := TodoStorage new.
> container := 'div#todos ol'.
> count := todos size = 0 ifTrue: [ 1 ] ifFalse: [( todos collect: [
> :each | each id asNumber ]) sort last + 1 ]
>
>
>
> and in
> ToDoStorage initialize
>
> you have
>
> initialize
> storage := localStorage.
> array := self getArray.
>
> My question. What is 'localStorage' here. From a Smalltalk point of
> view it looks like an instance variable but there is none
>
> Object subclass: #TodoStorage
> instanceVariableNames: 'storage array'
> package: 'TodoList'
>
> nil subclass: #Object
> instanceVariableNames: ''
> package: 'Kernel'
>
> So it must be the windows.localStorage I assume.
> http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%29.aspx#_global
>
> https://developer.mozilla.org/en/DOM/Storage
>
> If yes, I'd like to see a comment at that point because for somebody
> coming from Smalltalk this is not obvious.
>
>
> A minor thing:
>
> Instead of
>
> ToDoStorage>>lenght
> lenght
> ^ self size
>
> go for
>
> length
> ^ self size
>
>
> Maybe ToDoStorage needs some more polishing as well, I have not looked
> into it yet.
>
>
>
> So my suggestion: add some more comments and write one page like
> https://github.com/NicolasPetton/amber/wiki/Writing-my-first-app.
> Then we have a third tutorial for 0.9.1! This will help people to get
> started quickly.
>
> And we need to get it running in InternetExplorer 9, Firefox 5, 6, 7
> or 8, (maybe Opera 11+)
> (probably by using a JavaScript localStorage library which levels out
> the browser differences as jQuery does). This might or might not be
> tricky, any suggestions by others?
>
>
> Kind regards
> Hannes
>
>
> On 10/6/11, Rodrigo Bistolfi <[hidden email]> wrote:
> > Hi Hannes, guys
> >
> > I wrote a small Todo application for learning Amber (inspired by the one in
> > backbone.js), in which I use localStorage. It is just a hack so far, and
> > for some reason *it only works with chrome* for now, but maybe it can bring
> > you some inspiration. You can check out the code at github:
> > https://github.com/rbistolfi/Amber-Todo and take a look at the app itself in
> > http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage
> >
> > Regards, Rodrigo (aka rbistolfi)
> >

Pablo Iaria

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

In reply to this post by Hannes Hirzel

Hola!

About the "localStorage" issue, I guess it is better to use it within a primitive statement so every body knows that the thing you are refering to is a window property:

initialize

< self['@localStorage'] = window.localStorage>

Please correct me if I'm wrong as I'm new to Amber (Amber was the excuse to come back to the Smalltalk lands).

Saludos!

Pablo.-

On Fri, Oct 7, 2011 at 2:22 AM, H. Hirzel <[hidden email]> wrote:

Hello Rodrigo

Thank you for sharing what for your app example. I think this would be
a nice thing to have as a third tutorial (1st beeing setup of the
environment by Goran K, the second 'hello world' by Nicolas P, and
then this one).

It is actually the first "real" client side app I see which runs in
Amber. Or not, probably Bernat's Sokoban game is probably the first.
But I think it is the first which teaches people how to do something
quickly (within a few hours).

http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage/

(It works fine in Chrome e.g. from
http://portableapps.com/apps/internet/google_chrome_portable;
Firefox 5.0 did not work)

You say it is just a hack so far. So it needs a little bit of
polishing and explanation. I.e. it can be converted to a tutorial in
the style Nicolas has done for the hello world tutorial.

It nicely shows how you call your app (see second screenshot with the
Chrome developer tools)

loadAmber({ready: function () { smalltalk.TodoList._run(); }});

It resides in a package of its own and has three classes

ToDo (remark: I would rename it to ToDoItem)
ToDoList
ToDoStorage

ToDoList initialize is

initialize
super initialize.
todos := TodoStorage new.
container := 'div#todos ol'.
count := todos size = 0 ifTrue: [ 1 ] ifFalse: [( todos collect: [
:each | each id asNumber ]) sort last + 1 ]

and in
ToDoStorage initialize

you have

initialize
storage := localStorage.
array := self getArray.

My question. What is 'localStorage' here. From a Smalltalk point of
view it looks like an instance variable but there is none

Object subclass: #TodoStorage
instanceVariableNames: 'storage array'
package: 'TodoList'

nil subclass: #Object
instanceVariableNames: ''
package: 'Kernel'

So it must be the windows.localStorage I assume.
http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%29.aspx#_global

https://developer.mozilla.org/en/DOM/Storage

If yes, I'd like to see a comment at that point because for somebody
coming from Smalltalk this is not obvious.

A minor thing:

Instead of

ToDoStorage>>lenght
lenght
^ self size

go for

length
^ self size

Maybe ToDoStorage needs some more polishing as well, I have not looked
into it yet.

So my suggestion: add some more comments and write one page like
https://github.com/NicolasPetton/amber/wiki/Writing-my-first-app.
Then we have a third tutorial for 0.9.1! This will help people to get
started quickly.

And we need to get it running in InternetExplorer 9, Firefox 5, 6, 7
or 8, (maybe Opera 11+)
(probably by using a JavaScript localStorage library which levels out
the browser differences as jQuery does). This might or might not be
tricky, any suggestions by others?

Kind regards
Hannes

On 10/6/11, Rodrigo Bistolfi <[hidden email]> wrote:
> Hi Hannes, guys
>
> I wrote a small Todo application for learning Amber (inspired by the one in
> backbone.js), in which I use localStorage. It is just a hack so far, and
> for some reason *it only works with chrome* for now, but maybe it can bring
> you some inspiration. You can check out the code at github:
> https://github.com/rbistolfi/Amber-Todo and take a look at the app itself in
> http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage
>
> Regards, Rodrigo (aka rbistolfi)
>

Nicolas Petton

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

You can also write it in Smalltalk:

initialize
super initialize.
localStorage := window localStorage

Cheers,
Nico

On Fri, 2011-10-07 at 10:34 -0300, Pablo Iaria wrote:

> Hola!
>
>
> About the "localStorage" issue, I guess it is better to use it within
> a primitive statement so every body knows that the thing you are
> refering to is a window property:
>
>
> initialize
> < self['@localStorage'] = window.localStorage>
>
>
> Please correct me if I'm wrong as I'm new to Amber (Amber was the
> excuse to come back to the Smalltalk lands).
>
>
> Saludos!
> Pablo.-
>
>
>
> On Fri, Oct 7, 2011 at 2:22 AM, H. Hirzel <[hidden email]>
> wrote:
> Hello Rodrigo
>
> Thank you for sharing what for your app example. I think this
> would be
> a nice thing to have as a third tutorial (1st beeing setup of
> the
> environment by Goran K, the second 'hello world' by Nicolas P,
> and
> then this one).
>
> It is actually the first "real" client side app I see which
> runs in
> Amber. Or not, probably Bernat's Sokoban game is probably the
> first.
> But I think it is the first which teaches people how to do
> something
> quickly (within a few hours).
>
> http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage/
>
> (It works fine in Chrome e.g. from
> http://portableapps.com/apps/internet/google_chrome_portable;
> Firefox 5.0 did not work)
>
>
> You say it is just a hack so far. So it needs a little bit of
> polishing and explanation. I.e. it can be converted to a
> tutorial in
> the style Nicolas has done for the hello world tutorial.
>
>
> It nicely shows how you call your app (see second screenshot
> with the
> Chrome developer tools)
>
>
> loadAmber({ready: function ()
> { smalltalk.TodoList._run(); }});
>
> It resides in a package of its own and has three classes
>
> ToDo (remark: I would rename it to ToDoItem)
> ToDoList
> ToDoStorage
>
>
> ToDoList initialize is
>
> initialize
> super initialize.
> todos := TodoStorage new.
> container := 'div#todos ol'.
> count := todos size = 0 ifTrue: [ 1 ] ifFalse: [( todos
> collect: [
> :each | each id asNumber ]) sort last + 1 ]
>
>
>
> and in
> ToDoStorage initialize
>
> you have
>
> initialize
> storage := localStorage.
> array := self getArray.
>
> My question. What is 'localStorage' here. From a Smalltalk
> point of
> view it looks like an instance variable but there is none
>
> Object subclass: #TodoStorage
> instanceVariableNames: 'storage array'
> package: 'TodoList'
>
> nil subclass: #Object
> instanceVariableNames: ''
> package: 'Kernel'
>
> So it must be the windows.localStorage I assume.
> <a href="http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%">http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%
> 29.aspx#_global
>
> https://developer.mozilla.org/en/DOM/Storage
>
> If yes, I'd like to see a comment at that point because for
> somebody
> coming from Smalltalk this is not obvious.
>
>
> A minor thing:
>
> Instead of
>
> ToDoStorage>>lenght
> lenght
> ^ self size
>
> go for
>
> length
> ^ self size
>
>
> Maybe ToDoStorage needs some more polishing as well, I have
> not looked
> into it yet.
>
>
>
> So my suggestion: add some more comments and write one page
> like
> https://github.com/NicolasPetton/amber/wiki/Writing-my-first-app.
> Then we have a third tutorial for 0.9.1! This will help people
> to get
> started quickly.
>
> And we need to get it running in InternetExplorer 9, Firefox
> 5, 6, 7
> or 8, (maybe Opera 11+)
> (probably by using a JavaScript localStorage library which
> levels out
> the browser differences as jQuery does). This might or might
> not be
> tricky, any suggestions by others?
>
>
> Kind regards
> Hannes
>
>
> On 10/6/11, Rodrigo Bistolfi <[hidden email]> wrote:
> > Hi Hannes, guys
> >
> > I wrote a small Todo application for learning Amber
> (inspired by the one in
> > backbone.js), in which I use localStorage. It is just a
> hack so far, and
> > for some reason *it only works with chrome* for now, but
> maybe it can bring
> > you some inspiration. You can check out the code at github:
> > https://github.com/rbistolfi/Amber-Todo and take a look at
> the app itself in
> >
> http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage
> >
> > Regards, Rodrigo (aka rbistolfi)
> >
>
>

laurent laffont

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

In reply to this post by Bernat Romagosa

On Fri, Oct 7, 2011 at 9:34 AM, Bernat Romagosa <[hidden email]> wrote:

That's a cool one :)

Should we include it in the examples?

Good example of local storage

Laurent

Cheers!

2011/10/7 H. Hirzel <[hidden email]>

Hello Rodrigo

Thank you for sharing what for your app example. I think this would be
a nice thing to have as a third tutorial (1st beeing setup of the
environment by Goran K, the second 'hello world' by Nicolas P, and
then this one).

It is actually the first "real" client side app I see which runs in
Amber. Or not, probably Bernat's Sokoban game is probably the first.
But I think it is the first which teaches people how to do something
quickly (within a few hours).

http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage/

(It works fine in Chrome e.g. from
http://portableapps.com/apps/internet/google_chrome_portable;
Firefox 5.0 did not work)

You say it is just a hack so far. So it needs a little bit of
polishing and explanation. I.e. it can be converted to a tutorial in
the style Nicolas has done for the hello world tutorial.

It nicely shows how you call your app (see second screenshot with the
Chrome developer tools)

loadAmber({ready: function () { smalltalk.TodoList._run(); }});

It resides in a package of its own and has three classes

ToDo (remark: I would rename it to ToDoItem)
ToDoList
ToDoStorage

ToDoList initialize is

initialize
super initialize.
todos := TodoStorage new.
container := 'div#todos ol'.
count := todos size = 0 ifTrue: [ 1 ] ifFalse: [( todos collect: [
:each | each id asNumber ]) sort last + 1 ]

and in
ToDoStorage initialize

you have

initialize
storage := localStorage.
array := self getArray.

My question. What is 'localStorage' here. From a Smalltalk point of
view it looks like an instance variable but there is none

Object subclass: #TodoStorage
instanceVariableNames: 'storage array'
package: 'TodoList'

nil subclass: #Object
instanceVariableNames: ''
package: 'Kernel'

So it must be the windows.localStorage I assume.
http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%29.aspx#_global

https://developer.mozilla.org/en/DOM/Storage

If yes, I'd like to see a comment at that point because for somebody
coming from Smalltalk this is not obvious.

A minor thing:

Instead of

ToDoStorage>>lenght
lenght
^ self size

go for

length
^ self size

Maybe ToDoStorage needs some more polishing as well, I have not looked
into it yet.

So my suggestion: add some more comments and write one page like
https://github.com/NicolasPetton/amber/wiki/Writing-my-first-app.
Then we have a third tutorial for 0.9.1! This will help people to get
started quickly.

And we need to get it running in InternetExplorer 9, Firefox 5, 6, 7
or 8, (maybe Opera 11+)
(probably by using a JavaScript localStorage library which levels out
the browser differences as jQuery does). This might or might not be
tricky, any suggestions by others?

Kind regards
Hannes

On 10/6/11, Rodrigo Bistolfi <[hidden email]> wrote:
> Hi Hannes, guys
>
> I wrote a small Todo application for learning Amber (inspired by the one in
> backbone.js), in which I use localStorage. It is just a hack so far, and
> for some reason *it only works with chrome* for now, but maybe it can bring
> you some inspiration. You can check out the code at github:
> https://github.com/rbistolfi/Amber-Todo and take a look at the app itself in
> http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage
>
> Regards, Rodrigo (aka rbistolfi)
>

--
Bernat Romagosa.

Rodrigo Bistolfi

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

In reply to this post by Nicolas Petton

2011/10/7 Nicolas Petton <[hidden email]>

That's great!

If that's ok, I'd like to add it into Amber's examples, and probably put
it online on the website too.

I saw some errors in Firefox, but I'll try to fix them. If you agree,
there would be some css fixes too, as it kinds of breaks the IDE.

Cheers,
Nico

Hi guys,
I am glad you liked it. I would love to see the small app in the examples and in the websites. I will polish it and gladly implement any suggestions you may have.
The CSS indeed breaks the IDE, should be easy to fix since everything is under a div#application tag.
I will work on this and other issues.

Regards, Rodrigo

Rodrigo Bistolfi

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

In reply to this post by Hannes Hirzel

2011/10/7 H. Hirzel <[hidden email]>

Hello Rodrigo

You say it is just a hack so far. So it needs a little bit of
polishing and explanation. I.e. it can be converted to a tutorial in
the style Nicolas has done for the hello world tutorial.

Yup. It is a hack, since I just tryed to get something working that I could refactor later.

I can spot quite a few things I would change, but let go step by step.

It nicely shows how you call your app (see second screenshot with the
Chrome developer tools)

loadAmber({ready: function () { smalltalk.TodoList._run(); }});

Note that run is a class method in TodoList.

It resides in a package of its own and has three classes

ToDo (remark: I would rename it to ToDoItem)
ToDoList
ToDoStorage

ToDoList initialize is

initialize
super initialize.
todos := TodoStorage new.
container := 'div#todos ol'.
count := todos size = 0 ifTrue: [ 1 ] ifFalse: [( todos collect: [
:each | each id asNumber ]) sort last + 1 ]

and in
ToDoStorage initialize

you have

initialize
storage := localStorage.
array := self getArray.

My question. What is 'localStorage' here. From a Smalltalk point of
view it looks like an instance variable but there is none

Right. localStorage is indeed window>>localStorage, Amber automatically "resolves" that name for us from Javascript.

Object subclass: #TodoStorage
instanceVariableNames: 'storage array'
package: 'TodoList'

nil subclass: #Object
instanceVariableNames: ''
package: 'Kernel'

So it must be the windows.localStorage I assume.
http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%29.aspx#_global

https://developer.mozilla.org/en/DOM/Storage

If yes, I'd like to see a comment at that point because for somebody
coming from Smalltalk this is not obvious.

You got it right.

A minor thing:

Instead of

ToDoStorage>>lenght
lenght
^ self size

go for

length
^ self size

:) I was keeping writting size in the js console, and lenght in the smalltalk side, so I added a convenience method.

Maybe ToDoStorage needs some more polishing as well, I have not looked
into it yet.

I am sure you are correct. TodoStorage is basically a composed object from Array and localStorage. It delegates
almost everything to Array, and adds persistence capabilities through localStorage.

So my suggestion: add some more comments and write one page like
https://github.com/NicolasPetton/amber/wiki/Writing-my-first-app.
Then we have a third tutorial for 0.9.1! This will help people to get
started quickly.

Thanks for the suggestions, I will work through the list, keep them comming!

And we need to get it running in InternetExplorer 9, Firefox 5, 6, 7
or 8, (maybe Opera 11+)

Yup, Firebug can be of help here.

(probably by using a JavaScript localStorage library which levels out
the browser differences as jQuery does). This might or might not be
tricky, any suggestions by others?

Thats a good idea.

Kind regards
Hannes

Thanks!
Rodrigo

Hannes Hirzel

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

Hi again Rodrigo

On 10/9/11, Rodrigo Bistolfi <[hidden email]> wrote:

> 2011/10/7 H. Hirzel <[hidden email]>
>
>> Hello Rodrigo
>>
>> You say it is just a hack so far. So it needs a little bit of
>> polishing and explanation. I.e. it can be converted to a tutorial in
>> the style Nicolas has done for the hello world tutorial.
>>
>
> Yup. It is a hack, since I just tryed to get something working that I could
> refactor later.
> I can spot quite a few things I would change, but let go step by step.
>
> It nicely shows how you call your app (see second screenshot with the
>> Chrome developer tools)
>>
>>
>> loadAmber({ready: function () { smalltalk.TodoList._run(); }});
>>
>
> Note that run is a class method in TodoList.
>
> It resides in a package of its own and has three classes
>>
>> ToDo (remark: I would rename it to ToDoItem)
>> ToDoList
>> ToDoStorage
>>
>>
>> ToDoList initialize is
>>
>> initialize
>> super initialize.
>> todos := TodoStorage new.
>> container := 'div#todos ol'.
>> count := todos size = 0 ifTrue: [ 1 ] ifFalse: [( todos collect: [
>> :each | each id asNumber ]) sort last + 1 ]
>>
>>
>>
>> and in
>> ToDoStorage initialize
>>
>> you have
>>
>> initialize
>> storage := localStorage.
>> array := self getArray.
>>
>> My question. What is 'localStorage' here. From a Smalltalk point of
>> view it looks like an instance variable but there is none
>>
>>
> Right. localStorage is indeed window>>localStorage, Amber automatically
> "resolves" that name for us from Javascript.
>
>
>> Object subclass: #TodoStorage
>> instanceVariableNames: 'storage array'
>> package: 'TodoList'
>>
>> nil subclass: #Object
>> instanceVariableNames: ''
>> package: 'Kernel'
>>
>> So it must be the windows.localStorage I assume.
>> http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%29.aspx#_global
>>
>> https://developer.mozilla.org/en/DOM/Storage
>>
>> If yes, I'd like to see a comment at that point because for somebody
>> coming from Smalltalk this is not obvious.
>>
>
> You got it right.
>
>
>> A minor thing:
>>
>> Instead of
>>
>> ToDoStorage>>lenght
>> lenght
>> ^ self size
>>
>> go for
>>
>> length
>> ^ self size
>>
>>
> :) I was keeping writting size in the js console, and lenght in the
> smalltalk side, so I added a convenience method.

What I meant is that there is a spelling error

length instead of lenght

A convenience method is fine.

>
> Maybe ToDoStorage needs some more polishing as well, I have not looked
>> into it yet.
>>
>> I am sure you are correct. TodoStorage is basically a composed object from
> Array and localStorage. It delegates
> almost everything to Array, and adds persistence capabilities through
> localStorage.

I have read through the code and I think it is very readable. A
wrapper around 'Array'. The array gets initialized when the page loads
if there is a key 'ToDoList' in window localStorage.

aJSONArray := storage getItem: 'TodoList'.
anArray := aJSONArray ifNil: [ self initializeStorage ]
ifNotNil: [ smalltalk readJSON: (JSON parse: aJSONArray) ].

When there is a change a 'save' is done and that saves back the whole array.

storage setItem: 'TodoList' value: array asJSON

I wonder where the #setItem:value: comes from.
It seems that it is the direct call to the JavaScript object method
window.localStorage('ToDoList', [{"isDone":false,"text":"Discussion
about goals for
0.9.1","id":"5","onTodoChanged":{},"onDeleteClicked":{}},{"isDone":false,"text":"finalize
to-do example","id":"6","onTodoChanged":{},"onDeleteClicked":{}}]')

I still need to get used to the fact that the JavaScript layer shines
through and that any JavaScript method may be called with Smalltalk
syntax.

>
>>
>> So my suggestion: add some more comments and write one page like
>> https://github.com/NicolasPetton/amber/wiki/Writing-my-first-app.
>> Then we have a third tutorial for 0.9.1! This will help people to get
>> started quickly.
>>
>> Thanks for the suggestions, I will work through the list, keep them
> comming!

Yes, and thank you for this insightful example.

So for me there is no need to learn backbone.js.

JavaScript objects may be used with Smalltalk syntax.

Though the presentation actually states that in a few slides it
actually needs some time to get used to this.

Regarding backbone.js
http://backbonetutorials.com/why-would-you-use-backbone/

<citation>
Building single-page web apps or complicated user interfaces will get
extremely difficult by simply using jQuery or MooTools. The problem is
standard JavaScript libraries are great at what they do – and without
realizing it you can build an entire application without any formal
structure.</citation>

http://jvcustomdesigns.com/139/backbone-tutorial-1/

and
http://documentcloud.github.com/backbone/examples/todos/index.html

with the fully annotated source

http://documentcloud.github.com/backbone/docs/todos.html

>> And we need to get it running in InternetExplorer 9, Firefox 5, 6, 7
>> or 8, (maybe Opera 11+)
>>
>
> Yup, Firebug can be of help here.
>
>
>> (probably by using a JavaScript localStorage library which levels out
>> the browser differences as jQuery does). This might or might not be
>> tricky, any suggestions by others?
>>
>
> Thats a good idea.

JQuery has a plug-in. Maybe that is useful.

--Hannes

Hannes Hirzel

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

Hello again and happy New Year

I retested
http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage/

In addition to Chrome it works in Opera 11.60.
Firefox 9.0 still does not work
IE9 gives the error message
[object HTMLInputElement] does not understand #placeholder.

The version of Amber used here
http://vlcore.vectorlinux.com/~rbistolfi/amber/todo-localstorage/
is two months old, maybe a newer one will not have this error anymore.....

Regards
Hannes

On 10/11/11, H. Hirzel <[hidden email]> wrote:

> Hi again Rodrigo
>
> On 10/9/11, Rodrigo Bistolfi <[hidden email]> wrote:
>> 2011/10/7 H. Hirzel <[hidden email]>
>>
>>> Hello Rodrigo
>>>
>>> You say it is just a hack so far. So it needs a little bit of
>>> polishing and explanation. I.e. it can be converted to a tutorial in
>>> the style Nicolas has done for the hello world tutorial.
>>>
>>
>> Yup. It is a hack, since I just tryed to get something working that I
>> could
>> refactor later.
>> I can spot quite a few things I would change, but let go step by step.
>>
>> It nicely shows how you call your app (see second screenshot with the
>>> Chrome developer tools)
>>>
>>>
>>> loadAmber({ready: function () { smalltalk.TodoList._run();
>>> }});
>>>
>>
>> Note that run is a class method in TodoList.
>>
>> It resides in a package of its own and has three classes
>>>
>>> ToDo (remark: I would rename it to ToDoItem)
>>> ToDoList
>>> ToDoStorage
>>>
>>>
>>> ToDoList initialize is
>>>
>>> initialize
>>> super initialize.
>>> todos := TodoStorage new.
>>> container := 'div#todos ol'.
>>> count := todos size = 0 ifTrue: [ 1 ] ifFalse: [( todos collect:
>>> [
>>> :each | each id asNumber ]) sort last + 1 ]
>>>
>>>
>>>
>>> and in
>>> ToDoStorage initialize
>>>
>>> you have
>>>
>>> initialize
>>> storage := localStorage.
>>> array := self getArray.
>>>
>>> My question. What is 'localStorage' here. From a Smalltalk point of
>>> view it looks like an instance variable but there is none
>>>
>>>
>> Right. localStorage is indeed window>>localStorage, Amber automatically
>> "resolves" that name for us from Javascript.
>>
>>
>>> Object subclass: #TodoStorage
>>> instanceVariableNames: 'storage array'
>>> package: 'TodoList'
>>>
>>> nil subclass: #Object
>>> instanceVariableNames: ''
>>> package: 'Kernel'
>>>
>>> So it must be the windows.localStorage I assume.
>>> http://msdn.microsoft.com/en-us/library/cc197062%28v=vs.85%29.aspx#_global
>>>
>>> https://developer.mozilla.org/en/DOM/Storage
>>>
>>> If yes, I'd like to see a comment at that point because for somebody
>>> coming from Smalltalk this is not obvious.
>>>
>>
>> You got it right.
>>
>>
>>> A minor thing:
>>>
>>> Instead of
>>>
>>> ToDoStorage>>lenght
>>> lenght
>>> ^ self size
>>>
>>> go for
>>>
>>> length
>>> ^ self size
>>>
>>>
>> :) I was keeping writting size in the js console, and lenght in the
>> smalltalk side, so I added a convenience method.
>
> What I meant is that there is a spelling error
>
> length instead of lenght
>
> A convenience method is fine.
>
>
>>
>> Maybe ToDoStorage needs some more polishing as well, I have not looked
>>> into it yet.
>>>
>>> I am sure you are correct. TodoStorage is basically a composed object
>>> from
>> Array and localStorage. It delegates
>> almost everything to Array, and adds persistence capabilities through
>> localStorage.
>
>
> I have read through the code and I think it is very readable. A
> wrapper around 'Array'. The array gets initialized when the page loads
> if there is a key 'ToDoList' in window localStorage.
>
> aJSONArray := storage getItem: 'TodoList'.
> anArray := aJSONArray ifNil: [ self initializeStorage ]
> ifNotNil: [ smalltalk readJSON: (JSON parse: aJSONArray) ].
>
> When there is a change a 'save' is done and that saves back the whole
> array.
>
> storage setItem: 'TodoList' value: array asJSON
>
>
> I wonder where the #setItem:value: comes from.
> It seems that it is the direct call to the JavaScript object method
> window.localStorage('ToDoList', [{"isDone":false,"text":"Discussion
> about goals for
> 0.9.1","id":"5","onTodoChanged":{},"onDeleteClicked":{}},{"isDone":false,"text":"finalize
> to-do example","id":"6","onTodoChanged":{},"onDeleteClicked":{}}]')
>
> I still need to get used to the fact that the JavaScript layer shines
> through and that any JavaScript method may be called with Smalltalk
> syntax.
>
>
>>
>>>
>>> So my suggestion: add some more comments and write one page like
>>> https://github.com/NicolasPetton/amber/wiki/Writing-my-first-app.
>>> Then we have a third tutorial for 0.9.1! This will help people to get
>>> started quickly.
>>>
>>> Thanks for the suggestions, I will work through the list, keep them
>> comming!
>
> Yes, and thank you for this insightful example.
>
> So for me there is no need to learn backbone.js.
>
> JavaScript objects may be used with Smalltalk syntax.
>
> Though the presentation actually states that in a few slides it
> actually needs some time to get used to this.
>
> Regarding backbone.js
> http://backbonetutorials.com/why-would-you-use-backbone/
>
> <citation>
> Building single-page web apps or complicated user interfaces will get
> extremely difficult by simply using jQuery or MooTools. The problem is
> standard JavaScript libraries are great at what they do – and without
> realizing it you can build an entire application without any formal
> structure.</citation>
>
> http://jvcustomdesigns.com/139/backbone-tutorial-1/
>
> and
> http://documentcloud.github.com/backbone/examples/todos/index.html
>
> with the fully annotated source
>
> http://documentcloud.github.com/backbone/docs/todos.html
>
>
>>> And we need to get it running in InternetExplorer 9, Firefox 5, 6, 7
>>> or 8, (maybe Opera 11+)
>>>
>>
>> Yup, Firebug can be of help here.
>>
>>
>>> (probably by using a JavaScript localStorage library which levels out
>>> the browser differences as jQuery does). This might or might not be
>>> tricky, any suggestions by others?
>>>
>>
>> Thats a good idea.
>
>
> JQuery has a plug-in. Maybe that is useful.
>
>
> --Hannes
>

Amber-ToDo-List-App-in-IE9.png (60K) Download Attachment

Rodrigo Bistolfi

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

Hi guys, indeed the version of Amber used there is getting old. I have
been busy here. I will make the time to put things up to date and see
how it goes.

Regards, Rodrigo.

Amber Milan Eskridge

Re: ToDo-List-App (was Re: [amber-lang] For 0.9.1...)

Nice work :)

On Tue, Jan 3, 2012 at 3:09 PM, Rodrigo Bistolfi <[hidden email]> wrote:

Hi guys, indeed the version of Amber used there is getting old. I have
been busy here. I will make the time to put things up to date and see
how it goes.

Regards, Rodrigo.