Aida Tutorial

> Hey Aiders,
>
> I've started to complete the Aida Tutorial. As my english writing is far
> from perfect, I'll appreciate any help :p
> What do you want to be covered by the tutorial? I've a first draft that
> introduce Forms and WebGrid (check the attachment).
>
> Cheers,
>
>
> Francois
>
>
> ------------------------------------------------------------------------
>
>
>
>     6. Forms
>
> It's time to add new entries in our AddressBook. For that, we have to
> create a form, process the inputs and add the new entry to our address
> book.
> Create a link on the main view of the address book:
>
>    viewMain
>
>        | e |
>
>        e := WebElement new.
>
>        e addTextH1: 'Address book'.
>
>        e table class: #webGrid.
>
>        self observee addresses do: [:each |
>
>            e cell addText: each name.
>            e newCell addLinkTo: each text: each surname.
>
>            e newCell addText: each phone.
>            e newCell align: #right; addText: each email.
>
>            e newRow].
>
>     e addBreak.
>
>     e addLinkTo: self text: 'Add a new entry'  view: #add.
>
>     self pageFrameWith: e title: 'Address book'
>
>
> We now have a link to an 'add view'. Create the corresponding method
> (#viewAdd) in the AddressBookApp class:
>
> viewAdd
>
>     | e |
>
>     e := WebElement new.
>
>     newEntry := AddressEntry new.
>
>     e addTextH1: 'Add a new entry'.
>
>     e cell addText: 'Name:' ; addBreak.
>
>     e cell addInputFieldAspect: #name for: newEntry.
>
>     e newRow.
>
>     e cell addText: 'Surname:' ; addBreak.
>
>     e cell addInputFieldAspect: #surname for: newEntry.
>
>     e newRow.
>
>     e cell addText: 'Phone:' ; addBreak.
>
>     e cell addInputFieldAspect: #phone for: newEntry.
>
>     e newRow.
>
>     e cell addText: 'Email:' ; addBreak.
>
>     e cell addInputFieldAspect: #email for: newEntry.
>
>     e newRow.
>
>     e cell addButtonText: 'Add this entry'.
>     self pageFrameWith: e title: 'Add an entry'.
>
>
>
> This create a form linked to the newEntry instance variable. Declare it
> in your class definition.
> When the button 'Add this entry' is pressed, Aida will call the method
> #actionAdd (by default, the submit button of a form call the method
> #actionNameOfTheView). Let's have a look:
>
> actionAdd
>
>     self observee addresses add:  newEntry.
>
>     self redirectToView: #main.
>
>
>
> Quite simple isn't it ?
> In a real world example, you can check and validate the data (e.g.,
> verifiy that the phone number is a valid one).
>
> For more informations about the Forms in Aida, have a look at the doc:
> http://www.aidaweb.si/forms.html or browse the source code.
>    
>
>
>     7.Enhance the table
>
>
> Aida makes javascript/Ajax scripting really easy. No need to know
> Javascript, Aida does everything for you.
> We'll improve our AddressBook table by adding two features: sorting and
> filtering
> Here's the complete #viewMain method:
>
> viewMain
> | e entryList |
> e := WebElement new.
> e addTextH1: 'Address Book'.
> entryList := WebGrid new.
> entryList columnNames: #('' 'Name' 'Surname' 'Phone' 'Email');
> setNumbering;
> columnFilters: #(nil true true nil nil);
> sortOn: 2;
> collection: self observee addresses;
> columnAspects: #(nil #name #surname #phone #email);
> column: 3 addBlock: [ :each |
> (WebElement new) addLinkTo: each text: each surname.].
> e add: entryList.
> e addBreak.
> e addLinkTo: self text: 'Add an entry'  view: #add.
>         self pageFrameWith: e title: 'Address book'
>
>
> Do you see the difference?
> We've created a WebGrid object and gave it all the informations it needs
> to work properly .
> #columnNames: is used to give a name to each column.
> #setNumbering simply tells the webGrid to give each line a number (which
> will be in the 1st column)
> #columnFilters: tells the WebGrid on which column we want to use a
> filter. In this case, only the 'Surname' and 'Name' column will have a
> filter box.
> #sortOn: sets on which column the initial sorting has to be done
> #collection: sets the collection that will be displayed by the webGrid.
> We use the #observee to retrieve our addressBook.
> #columnAspects: tells which method has to be called for each column on
> very object of the collection.
> #column: addBlock: The specified column will be rendered with the given
> block (which must return a WebElement).
>
> That's it! Refresh your browser and enjoy your brand new table.
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> Aida mailing list
> [hidden email]
> http://lists.aidaweb.si/mailman/listinfo/aida