ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|

ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Hannes Hirzel
A ToDo application in Amber has been made by

 Rodrigo Bistolfi <[hidden email]>

in Juli 2011 (see mailing list archive)

The code is here
[Todo application](https://github.com/rbistolfi/Amber-Todo)

It works fine. Very few classes.  Worth that somebody spends 1 hour on
it and checks if there are problems. Probably not.

--Hannes



On 3/30/14, Sebastian Sastre <[hidden email]> wrote:

> right now with low effort and big win, would be to make it visible here:
>
> http://todomvc.com/
>
> Volunteers to team up?
>
> Goal?
>
> Cause a great impression with:
>
>    - extremely light (snappy to load)
>    - fast
>    - highly readable code
>    - extremely easy to implement
>
>
>
> --
> 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/d/optout.
>

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Hannes Hirzel
An here is the code (300 lines)

Widget subclass: #Todo
        instanceVariableNames: 'isDone text id onTodoChanged onDeleteClicked'
        category: 'TodoList'!

!Todo methodsFor: 'accessing'!

isDone
        ^ isDone
!

isDone: aBool
        isDone := aBool.
!

text
        ^ text
!

text: anObject
        text := anObject
!

toggleIsDone
        self isDone: isDone not
!

id
        ^ id
!

id: aString
        id := aString
!

onTodoChangedDo: aBlock
        onTodoChanged := aBlock
!

onDeleteClickedDo: aBlock
        onDeleteClicked := aBlock
! !

!Todo methodsFor: 'initializing'!

initialize
        super initialize.
        isDone := false.
! !

!Todo methodsFor: 'rendering'!

renderOn: html
        | input delete |
        html li
                id: self id;
                with: [
                  input := html input
                  type: 'checkbox';
                  onClick: [
                          self toggleIsDone.
                          onTodoChanged value: self.
                          (input asJQuery next) toggleClass: 'done' ].
                html span with: text .
                delete := html span
                  with: '  [x]';
                  onClick: [ onDeleteClicked value: self ]].
        isDone ifTrue: [
          input at: 'checked' put: 'checked'.
          (input asJQuery next) addClass: 'done'].
! !

!Todo methodsFor: 'testing'!

= aTodo
        ^ self id = aTodo id
! !

!Todo class methodsFor: 'not yet classified'!

fromDictionary: aDict
        | todo |
        todo := self new.
        todo id: (aDict at: 'id').
        todo text: (aDict at: 'text').
        todo isDone: (aDict at: 'isDone').
        ^ todo
!

newWithText: aString
        ^ self new text: aString
!

fromDictionary: aDict withCallback: aBlock
        | todo |
        todo := self fromDictionary: aDict.
        todo onTodoChangedDo: aBlock.
        ^ todo
!

fromDictionary: aDict withTodoChangedCallback: aBlock
withDeleteClickedCallback: oBlock
        | todo |
        todo := self fromDictionary: aDict.
        todo onTodoChangedDo: aBlock.
        todo onDeleteClickedDo: oBlock.
        ^ todo
! !

Widget subclass: #TodoList
        instanceVariableNames: 'todos container count'
        category: 'TodoList'!

!TodoList methodsFor: 'adding/removing'!

addTodo: aTodo
        aTodo id: count asString.
        aTodo onTodoChangedDo: [ :todo | todos at: (todos indexOf: todo) put: todo ].
        aTodo onDeleteClickedDo: [ :todo | self removeTodo: todo ].
        todos add: aTodo.
        aTodo appendToJQuery: container asJQuery.
        count := count + 1
!

removeTodo: aTodo
        todos remove: aTodo.
        ('li#', aTodo id) asJQuery remove
! !

!TodoList methodsFor: 'events'!

handleInput: anEvent
        | text todo |
        text := anEvent target value.
        todo := Todo newWithText: text.
  self addTodo: todo
! !

!TodoList methodsFor: 'initializing'!

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 ]
! !

!TodoList methodsFor: 'rendering'!

renderOn: html
        html div
                id: 'application';
                with: [
                  self renderHeaderOn: html.
                  self renderBodyOn: html.
                  self renderFooterOn: html. ]
!

renderBodyOn: html
        html div
                id: 'body';
                class: 'section';
                with: [
                  self renderFormOn: html.
                  self renderTodosOn: html ]
!

renderFooterOn: html
        html div
                id: 'footer';
                class: 'section';
                with: [ html p with: 'Example Todo application for Amber Smalltalk
by rbistolfi' ]
!

renderFormOn: html
        | input defaultText |
        defaultText := 'What needs to be done?'.
        html div
                id: 'form';
                with: [
                   input := html input
                  type: 'text';
                  onKeyUp: [ :event |
                                  (event keyCode = 13) ifTrue: [
                                    self handleInput: event.
                                    input asJQuery val: '' ] ] ].
        input element placeholder: defaultText.
!

renderHeaderOn: html
        html div
                id: 'header';
                class: 'section';
                with: [ html h1 with: 'Todos' ]
!

renderTodosOn: html
        html div
                id: 'todos';
                with: [
                  html ol
                  with: [ todos do: [ :aTodo |
                                           aTodo onTodoChangedDo: [
:todo | todos at: (todos indexOf: todo) put: todo ].
                                           aTodo onDeleteClickedDo: [ :todo |
self removeTodo: todo ].
                                           aTodo renderOn: html ]]]
! !

!TodoList class methodsFor: 'not yet classified'!

run
        self new appendToJQuery: 'body' asJQuery
! !

Object subclass: #TodoStorage
        instanceVariableNames: 'storage array'
        category: 'TodoList'!

!TodoStorage methodsFor: 'accessing'!

at: anIndex
        ^ array at: anIndex
!

at: anIndex put: anObject
        array at: anIndex put: anObject.
        self save
!

getArray
        | anArray aJSONArray |
        aJSONArray := storage getItem: 'TodoList'.
        anArray := aJSONArray ifNil: [ self initializeStorage ] ifNotNil: [
smalltalk readJSON: (JSON parse: aJSONArray) ].
        ^ anArray collect: [ :each | Todo fromDictionary: each ]
!

setArray
        ^ self save
!

lenght
        ^ self size
!

size
        ^ array size
!

indexOf: anObject
        ^ array indexOf: anObject
! !

!TodoStorage methodsFor: 'adding/removing'!

add: anObject
        array add: anObject.
        self save.
!

remove: anObject
        | d |
        d := array detect: [ :each | each asJSON = anObject asJSON ].
        array remove: d.
        self save
! !

!TodoStorage methodsFor: 'initializing'!

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

initializeStorage
        | anArray |
        anArray := Array new.
        storage setItem: 'TodoList' value: anArray asJSON.
        ^ anArray
! !

!TodoStorage methodsFor: 'iterating'!

do: aBlock
        array do: aBlock.
        self save.
!

collect: aBlock
        ^ array collect: aBlock
!

select: aBlock
        ^ array select: aBlock
!

detect: aBlock
        ^ array detect: aBlock
! !

!TodoStorage methodsFor: 'persistence'!

save
        storage setItem: 'TodoList' value: array asJSON
! !


On 3/31/14, H. Hirzel <[hidden email]> wrote:

> A ToDo application in Amber has been made by
>
>  Rodrigo Bistolfi <[hidden email]>
>
> in Juli 2011 (see mailing list archive)
>
> The code is here
> [Todo application](https://github.com/rbistolfi/Amber-Todo)
>
> It works fine. Very few classes.  Worth that somebody spends 1 hour on
> it and checks if there are problems. Probably not.
>
> --Hannes
>
>
>
> On 3/30/14, Sebastian Sastre <[hidden email]> wrote:
>> right now with low effort and big win, would be to make it visible here:
>>
>> http://todomvc.com/
>>
>> Volunteers to team up?
>>
>> Goal?
>>
>> Cause a great impression with:
>>
>>    - extremely light (snappy to load)
>>    - fast
>>    - highly readable code
>>    - extremely easy to implement
>>
>>
>>
>> --
>> 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/d/optout.
>>
>

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

sebastianconcept
In reply to this post by Hannes Hirzel
great. As example for who is already in, that’s nice.

But that’s not the plan I’ve proposed.

Having it specifically here...


...is what enhances visibility and catches more really well targeted new eyeballs, thus "help Amber” 

Note there are specifications in order to get it published:

Does make sense what I say?

Would you like to see Amber hanging on that circle?

Do we want to be there?

Volunteers to team up for this task?

Who want it done?






On Mar 30, 2014, at 9:12 PM, H. Hirzel <[hidden email]> wrote:

A ToDo application in Amber has been made by

Rodrigo Bistolfi <[hidden email]>

in Juli 2011 (see mailing list archive)

The code is here
[Todo application](https://github.com/rbistolfi/Amber-Todo)

It works fine. Very few classes.  Worth that somebody spends 1 hour on
it and checks if there are problems. Probably not.

--Hannes



On 3/30/14, Sebastian Sastre <[hidden email]> wrote:
right now with low effort and big win, would be to make it visible here:

http://todomvc.com/

Volunteers to team up?

Goal?

Cause a great impression with:

  - extremely light (snappy to load)
  - fast
  - highly readable code
  - extremely easy to implement



--
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/d/optout.


--
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/d/optout.

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Nicolas Petton
That's a good idea :) Who's in?

Cheers,
Nico

sebastian writes:

> great. As example for who is already in, that's nice.
>
> But that's not the plan I've proposed.
>
> Having it specifically here...
>
> http://todomvc.com/
>
> ...is what enhances visibility and catches more really well targeted new eyeballs, thus "help Amber"
>
> Note there are specifications in order to get it published:
> https://github.com/tastejs/todomvc/blob/gh-pages/app-spec.md
>
> Does make sense what I say?
>
> Would you like to see Amber hanging on that circle?
>
> Do we want to be there?
>
> Volunteers to team up for this task?
>
> Who want it done?
>
>
>
>
>
>
> On Mar 30, 2014, at 9:12 PM, H. Hirzel <[hidden email]> wrote:
>
>> A ToDo application in Amber has been made by
>>
>> Rodrigo Bistolfi <[hidden email]>
>>
>> in Juli 2011 (see mailing list archive)
>>
>> The code is here
>> [Todo application](https://github.com/rbistolfi/Amber-Todo)
>>
>> It works fine. Very few classes.  Worth that somebody spends 1 hour on
>> it and checks if there are problems. Probably not.
>>
>> --Hannes
>>
>>
>>
>> On 3/30/14, Sebastian Sastre <[hidden email]> wrote:
>>> right now with low effort and big win, would be to make it visible here:
>>>
>>> http://todomvc.com/
>>>
>>> Volunteers to team up?
>>>
>>> Goal?
>>>
>>> Cause a great impression with:
>>>
>>>   - extremely light (snappy to load)
>>>   - fast
>>>   - highly readable code
>>>   - extremely easy to implement
>>>
>>>
>>>
>>> --
>>> 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/d/optout.
>>>
>>
>> --
>> 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/d/optout.


--
Nicolas Petton
http://nicolas-petton.fr

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

sebastianconcept




On Mar 31, 2014, at 8:41 AM, Nicolas Petton <[hidden email]> wrote:

That's a good idea :) Who's in?

Cheers,
Nico

Count me in

Who else wanna join?

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Hannes Hirzel
What is the time frame?

1 month
2 months
3 months?

--Hannes

On 3/31/14, sebastian <[hidden email]> wrote:

>
>
>
>
> On Mar 31, 2014, at 8:41 AM, Nicolas Petton <[hidden email]>
> wrote:
>
>> That's a good idea :) Who's in?
>>
>> Cheers,
>> Nico
>
> Count me in
>
> Who else wanna join?
>
> sebastian
>
> o/
>
> --
> 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/d/optout.
>

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Hannes Hirzel
(I mean elapsed time not time spent on the work).

On 4/1/14, H. Hirzel <[hidden email]> wrote:

> What is the time frame?
>
> 1 month
> 2 months
> 3 months?
>
> --Hannes
>
> On 3/31/14, sebastian <[hidden email]> wrote:
>>
>>
>>
>>
>> On Mar 31, 2014, at 8:41 AM, Nicolas Petton <[hidden email]>
>> wrote:
>>
>>> That's a good idea :) Who's in?
>>>
>>> Cheers,
>>> Nico
>>
>> Count me in
>>
>> Who else wanna join?
>>
>> sebastian
>>
>> o/
>>
>> --
>> 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/d/optout.
>>
>

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

NorbertHartl
In reply to this post by Hannes Hirzel

Am 01.04.2014 um 05:50 schrieb H. Hirzel <[hidden email]>:

> What is the time frame?
>
> 1 month
> 2 months
> 3 months?
>
Depends on the time frame we need to collect a team of 20 to do it.

Norbert

> --Hannes
>
> On 3/31/14, sebastian <[hidden email]> wrote:
>>
>>
>>
>>
>> On Mar 31, 2014, at 8:41 AM, Nicolas Petton <[hidden email]>
>> wrote:
>>
>>> That's a good idea :) Who's in?
>>>
>>> Cheers,
>>> Nico
>>
>> Count me in
>>
>> Who else wanna join?
>>
>> sebastian
>>
>> o/
>>
>> --
>> 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/d/optout.
>>
>
> --
> 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/d/optout.

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Nicolas Petton

Norbert Hartl writes:

> Depends on the time frame we need to collect a team of 20 to do it.

Haha :)

I'll do something on another repo, anyone who wants to help is welcome
:)

Nico


>
> Norbert
>
>> --Hannes
>>
>> On 3/31/14, sebastian <[hidden email]> wrote:
>>>
>>>
>>>
>>>
>>> On Mar 31, 2014, at 8:41 AM, Nicolas Petton <[hidden email]>
>>> wrote:
>>>
>>>> That's a good idea :) Who's in?
>>>>
>>>> Cheers,
>>>> Nico
>>>
>>> Count me in
>>>
>>> Who else wanna join?
>>>
>>> sebastian
>>>
>>> o/
>>>
>>> --
>>> 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/d/optout.
>>>
>>
>> --
>> 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/d/optout.


--
Nicolas Petton
http://nicolas-petton.fr

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

sebastianconcept
cool. I'll try to get an intro to the guys behind the site for relationship and get first hand tips

Nico please read their guidelines before doing. We need to reach our goal honoring them
( I know we don't have a controllers dir etc, that's why I want to talk with them)

sebastian

o/

> On 01/04/2014, at 07:41, Nicolas Petton <[hidden email]> wrote:
>
> I'll do something on another repo, anyone who wants to help is welcome
> :)

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Hannes Hirzel
Hello

I have updated the Amber ToDo List Application by Rodrigo Bistolfi to
Amber 0.12.4. I use the new `amber init` command. Rodrigo's version
was for Amber 0.9.1 two years ago.

Thus I created a new repository
       https://github.com/hhzl/Amber-ToDo-List

The only substantial files there besides general amber init boilerplate are

- Examples-ToDo.st in the src subdirectory.
- an updated index.html file which contains the CSS for the ToDo List.

All the rest is pulled in by
    bower install

The README.md lists the steps I did
   https://github.com/hhzl/Amber-ToDo-List/blob/master/README.md

Interestingly only two changes to the Smalltalk code were necessary

- replace
       smalltalk readJSON:
  with
       SmalltalkImage current readJSObject:

- replace
      asJSON
  with
      asJSONString

May I ask you to try it out and give comments.

Kind regards

Hannes  Hirzel

On 4/1/14, sebastian <[hidden email]> wrote:

> cool. I'll try to get an intro to the guys behind the site for relationship
> and get first hand tips
>
> Nico please read their guidelines before doing. We need to reach our goal
> honoring them
> ( I know we don't have a controllers dir etc, that's why I want to talk with
> them)
>
> sebastian
>
> o/
>
>> On 01/04/2014, at 07:41, Nicolas Petton <[hidden email]> wrote:
>>
>> I'll do something on another repo, anyone who wants to help is welcome
>> :)
>
> --
> 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/d/optout.
>

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Herby Vojčík
In reply to this post by Hannes Hirzel


"H. Hirzel" <[hidden email]>napísal/a:

Hello

I have updated the Amber ToDo List Application by Rodrigo Bistolfi to
Amber 0.12.4.

Interestingly only two changes to the Smalltalk code were necessary

- replace
       smalltalk readJSON:
  with
       SmalltalkImage current readJSObject:

This should be

Smalltalk readJSObject:

--
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/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ToDo-Application (was Re: [amber-lang] Easiet way to help Amber)

Hannes Hirzel
Thank you for the feedback, Herby.

Yes after I have written it down I thought so too that

    SmalltalkImage current readJSObject:

probably needs to be changed though it works as such.

https://github.com/hhzl/Amber-ToDo-List/issues/2

--Hannes

--
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/d/optout.