First steps to Aida/Web

Aida tutorial on ESUG 09 in Brest

(slides, code, oneclicks: Squeak, Pharo, VW, VW parcels)

Below are the notes while preparing this tutorial.

Tutorial goal

Tutorial contents

• Aida basics
• Simple app conventional way
• Ajaxifiying your web app
• Single page web apps, tree-like control flow
• Making it international

Prerequisites

• Squeak and friends or VisualWorks
• Aida 6.0 preinstalled

 

Notes

 1.domain model

• on Pharo
• new category AidaTutorial
• WeddingBook (persons)
  • initPersons, persons, addPerson:
  • class accessing:  #singleton
• WPerson (book name surname partner)
• WeddingBook singleton
  
  • inspect
  • addPerson: (WPerson new name: 'Janko' surname: 'Mivsek')
  • addPerson female too!

2.web presentation

• AIDASite default urlResolver defaultURL: '/book' forObject: WeddingBook singleton  
  • check in browser
• WebApplication subclass: WeddingBookApp  (WeddingBook+App) conventions!
  • check in browser
• category views, #viewMain (empty)!
  • check in browser -> login! explain! login admin/password
• #viewMain
  • explain WebElement, convinience methods, self style pageFrameWith:
  • self observee persons

• WPerson preferedUrl ^'/', self name, '-', self surname  (explain)
• adLinkTo: person text: person name, ' ', person title
• WPersonApp, #viewMain
  • e addText: self observee name.  (explain)
  • on the start: e addLinkTo: self observee book text: 'Back to book'.   (hierarchy links, no circles)
  • e add: self detailsElement  (explanation later!)

3.Simple Ajax

• WPersonApp>>statusElement   (explain element composition)
  
  • parent isNil ifTrue: Free ifFalse: marriedTo: 
• partner selection in detailsElement
  • e addMenuAspect: #name collection: self observee book persons
            selectedToAspect: #partner of: self observee
  • check in browser
  • (e addMenu...) onChangePostAndUpdate: e. 
  • explain WebElement events-ajax, WebFormElement events-ajax
     
    

Components, popup

• WebWidget subclass: WPersonEditWidget (person, element)  explain!
  • build (self clear, self registerId! self add...) 
  • self addButtonText: action: #save
  • self addCloseWindowText: 'Cancel'.
    
  • ajaxUpdate (self build)
  • class new ^super new method: #ajaxUpdate
• WeddingBookApp>>viewMain
  •     (e addNilLinkText: 'Add new person') onClickPopup: (WPersonEditWidget new person: self newPerson; element: e).
  • actions: actionMainSave self observee addPerson: self person (explain actions)
     
    

Tree-like control flow

Internationalization

• utf-8 on the web <-> Unicode in image
• two things: content and page text

• in-place text translation
  
• on VW ! on Squeak translated class metods not ported!
• find session, self setDevMode
• calendar example
• http: .... &setLanguage=fr
  
•