Tutoriel Aida

Introduction

Pour comprendre comment créér des applications web avec Aida et commencer à programmer par vous-mêmes, voici un court tutoriel qui vous guidera dans les principales étapes de la création d'un carnet d'adresses en ligne.

Ce tutoriel a été préparé sous VisualWorks mais il peut être utilisé avec Squeak et Dolphin Smalltalk (uniquement les déclarations de classes sont différentes).

Tout d'abord, assurez-vous après l'installation d'Aida de le démarrer :

SwazooServer demoStart 

Ouvrez la page http://localhost:8888 et logguez-vous avec le nom d'utilisateur admin et le mot de passe password. Nous pouvons maintenant commencer à préparer les modèles.

Préparer les modèles

Aida sépare strictement les modèles de leur représentation visuelle à la manière de MVC. Nous devons donc d'abord créér nos modèles. Dans notre exemple nous créerons un modèle pour notre carnet d'adresses, nous l'instancierons et le remplirons avec quelques exemples d'adresses :

• dans le package (none) créez une nouvelle classe AddressBook avec la variable d'instance addresses:

Smalltalk defineClass: #'AddressBook'
    superclass: #
    indexedType: #'none'
    private: false
    instanceVariableNames: 'addresses '
    classInstanceVariableNames: ''
    imports: ''
    category: '(none)'

• créez une nouvelle classe Address avec les variables d'instance: name surname phone email

Smalltalk defineClass: #'Address'
    superclass: #
    indexedType: #'none'
    private: false
    instanceVariableNames: name surname phone email '
    classInstanceVariableNames: ''
    imports: ''
    category: '(none)'

• créez une méthode initialize et des accesseurs pour la variable d'instance adresses de la classe AdessBook :

initAddresses
    addresses := OrderedCollection new

addresses

    addresses isNil ifTrue: self initAddresses.
    ^addresses

• créez des accesseurs et des mutateurs pour toutes les variables d'instance de la classe Address
• Ajoutez une méthode de classe pour la création rapide d'adresse :

newName: aName surname: aSurname phone: aPhone email: anEmail
    ^super new 
        name: aName; surname: aSurname; phone: aPhone; email: anEmail

• Dans un workspace créez une instance de AddressBook et remplissez-la avec quelques exemples d'adresses :

book := AddressBook new.
book addresses
    add: (Address newName: 'Sebastjan' surname: 'Dormir' phone: '01/514 33 66' email: 'sebastjan@something.si');
    add: (Address newName: 'John' surname: 'Newton' phone: '05/555 77 66' email: 'john@something.si');
    add: (Address newName: 'Elizabeth' surname: 'Schneider' phone: '03/561 23 12' email: 'elizabeth@something.at').

Enregistrer un objet racine

Maintenant que notre carnet d'adresses est prêt, nous enregistrons son url dans Aida, pour qu'il soit accessible du web. Dans notre workspace nous évaluons :

(AIDASite named: 'aidademo') urlResolver defaultURL: '/addressbook.html' forObject: book 

Vous ne devez enregistrer qu'un objet racine de vos modèles. Des liens vers tous les objets accessibles depuis l'objet racine seront automatiquement créés.

Création des classes de présentation (Apps)

Afin de représenter nos modèles, nous devons créer une classe application web (présentation) pour chacun d'entre-eux. Dans notre cas, il s'agit des classes AddressBook et Address. Créez simplement une sous-classe de WebApplication en suivant la règle suivante: "nom de la classe du modèle" + App. Nous aurons donc ces deux Apps: AddressBookApp et AddressApp:

Smalltalk defineClass: #'AddressBookApp'
    superclass: #
    indexedType: #'none'
    private: false
    instanceVariableNames: ''
    classInstanceVariableNames: ''
    imports: ''
    category: '(none)'

Smalltalk defineClass: #'AddressApp'
    superclass: #
    indexedType: #'none'
    private: false
    instanceVariableNames: ''
    classInstanceVariableNames: ''
    imports: ''
    category: '(none)'

Méthodes de vue

Une méthode de vue est une méthode qui va construire une page web représentant une des vues de nos objets. Les méthodes de vue sont nommées suivant la convention: view + "Nom de la vue". Par exemple, pour la vue 'summary', on créera une méthode #viewSummary. Chaque application devrait avoir une vue principale par défaut nommée #viewMain. Créons-en une pour notre classe AddressBookApp (et plaçons la dans le protocole 'printing'):

    viewMain
        | e |
        e := WebElement new.
        e addTextH1: 'Address book'.
        self pageFrameWith: e title: 'Address book'

Dans cet exemple, nous créons une instance locale de WebElement. WebElement est à la fois une sous classe de tous les autres éléments d'une page web (comme WebText, WebLink, etc.) et un élément composite auquel il est possible d'ajouter d'autres WebElement. Il est aussi possible de faire cela de manières plus longue en instanciant un nouvel élément et en l'ajoutant manuellement:

    e add: (WebText text: 'Address book' attributes: #bold)

Les méthodes plus courtes et plus directes pour ce genre de comportement (ajout de texte, images, liens, formulaires, composants ajax, etc.) peuvent être trouvées dans le protocole 'adding' de la classe WebElement.

La dernière ligne de notre exemple ajoute notre élément dans une page et l'encadre d'une en-tête et d'une barre de navigation sur la gauche. Il est possible de l'ajouter directement avec: (self add: e)

Il est maintenant temps d'ouvrir notre première page avec un navigateur internet: http://localhost:8888/addressbook.htmlSi vous ne l'avez pas encore fait, il est nécessaire de se connecter en administrateur (login: 'admin' mot de passe: 'password'). Par défaut, un admin peut voir toutes les pages alors q'un 'invité' ne peut pas (il est possible de changer les paramètres de sécurité pour l'y autoriser).

Texte

Montrons toutes les adresses de notre carnet d'adresse dans la vue principale:

    viewMain
        | e |
        e := WebElement new.
        e addTextH1: 'Address book'.
        self observee addresses do: :each |
.
        self pageFrameWith: e title: 'Address book'

    viewMain
        | e |
        e := WebElement new.
        e addTextH1: 'Address book'.
        e table border: 1.
        self observee addresses do: :each |
.
        self pageFrameWith: e title: 'Address book'

    e cell cell addText: each name. e cell newCell addText: each surname.

    e table class: #webGrid.

    (AIDASite named: 'test') styleClass: 'MyWebStyle'; style: nil

    viewMain
        | e |
        e := WebElement new.
        e addTextH1: 'Address'.
        e table class: #webGrid.
        e cell addText: 'name: '. e newCell addTextBold: self observee name. e newRow.
        e cell addText: 'surname: '. e newCell addTextBold: self observee  surname. e newRow.
        e cell addText: 'phone: '. e newCell addTextBold: self observee  phone. e newRow.
        e cell addText: 'email: '. e newCell addTextBold: self observee  email.
        self pageFrameWith: e title: 'Address

    preferedUrl
        ^'/address/', self surname, '.html'

           e addLinkTo: address text: address surname.

    viewMain
        | e |
        e := WebElement new.
        e addTextH1: 'Address book'.
        e table class: #webGrid.
        self observee addresses do: :each |
.
        self pageFrameWith: e title: 'Address book'