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


  • Squeak and friends or VisualWorks
  • Aida 6.0 preinstalled



 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


  • 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