Tutoriel Aida

From OFSET Community Wiki
Jump to: navigation, search

Traduction du document : http://www.aidaweb.si/tutorial.html de Janko Mivsek.

Contents

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: #{Core.Object}
    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: #{Core.Object}
    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: #{AIDA.WebApplication}
    indexedType: #'none'
    private: false
    instanceVariableNames: ''
    classInstanceVariableNames: ''
    imports: ''
    category: '(none)'
Smalltalk defineClass: #'AddressApp'
    superclass: #{AIDA.WebApplication}
    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.html Si 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 |
            e addTextBold: each name, ' ', each surname.
            e addText: ', ', each phone, ', ', each email.
            e addBreak].
        self pageFrameWith: e title: 'Address book'

Avez-vous remarqué le message 'self observee'? Ce dernier permet de demander à notre App de retourner une référence vers l'objet modèle qu'il représente (design patterns observer et MVC). La méthode 'addText:' est utilisée pour ajouter du texte à la page, qui peut très bien inclure des balises HTML. Enfin, la méthode, 'addBreak' insère un retour chariot.

Comme vous l'aurez sans doute remarqué, cette page est horrible! Mettons nos données dans un tableau:

Tableaux

Aida gère les tableaux de manière commode et permet de raccourcir le temps qu'il serait d'habitude nécessaire pour construire des tableaux:

    viewMain
        | e |
        e := WebElement new.
        e addTextH1: 'Address book'.
        e table border: 1.
        self observee addresses do: [:each |
            e cell addText: each name. e newCell addText: each surname.
            e newCell addText: each phone. 
            e newCell align: #right; addText: each email.
            e newRow].
        self pageFrameWith: e title: 'Address book'

Chaque élément a une table dormante qui est activée quand nous commencons à utiliser les méthodes d'accès et de manipulation des tables (table, newTable, cell, newCell, row, newRow). En agencant simplement ces méthodes, il est possible de tout faire sur les tables. Etant donné qu'une table est un WebElement, il est possible de placer une table dans une autre:

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

Feuilles de Style CSS

Rendons ce tableau un peu plus élégant. La meilleure façon d'opérer est d'utiliser une feuille de style CSS (Cascaded Style Sheet) afin de séparer le design du contenu. Il existe déjà bon nombre de méthodes de style inclues dans la classe WebStyle (méthodes css dans le protocole styles-screen). Nous allons réutiliser un style déjà défini dans la méthode css24WebGrid pour les tableaux. Changeons la déclaration de notre tableau (e table border: 1) en:

    e table class: #webGrid.

Notre tableau a maintenant un arrière plan coloré et la police est plus petite. Les méthodes de WebStyle sont composées par ordre alphabétique dans une seule feuille de style CSS qui peut être vue sur: http://localhost:8888/screen.css L'ordre alphabétique est très important pour le CSS. C'est pourquoi les méthodes de CSS ont des nombres dans leur nom. Chaque méthode qui commence par 'css' sera inclue dans notre fichier CSS. Nous pouvons aussi faire une CSS destinée à l'impression en créant une méthode cssPrint.

Si vous désirez créer votre propre style, créez une sous classe de WebStyle et ajoutez ou redéfinissez les méthodes css. Il suffit alors de changer le style dans AIDASite:

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

Remarque: Changer le style sur la valeur nil fera une instanciation paresseuse de la nouvelle classe de style.

Lier les objets entre-eux

Nos objets modèles sont liés ensemble. Il devrait en être de même pour les pages web les représentant. Par exemple, notre carnet d'adresses contient une référence vers chaque adresse. Comme nous voulons pouvoir répresenter chaque adresse sur une page différente, nous devons créer un lien du carnet d'adresses vers chaque adresse.

Commençons par créer une vue principale (viewMain) pour les adresses dans AddressApp:


    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

URLs

Ce serait sympa d'avoir de beaux liens vers nos adresses; quelque chose du genre /address/newton.html et non pas des urls générées automatiquement (e.g., /object/o87654.html). Ce sont ces dernières qui sont utilisées par défaut dans Aida. Il est cependant possible de suggérer à Aida une généreration de l'adresse de l'objet en implémentant la méthode #preferedUrl dans la classe modèle. Pour la classe Address, cela donne:

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

Cette suggestion ne sera acceptée que si l'url de l'objet est unique. Sinon Aida la dégradera au profit d'une url générée automatiquement. Nous voilà prêt à créer les liens vers nos adresses:

Création d'URLs

Les liens sont créés simplement en pointant vers l'objet modèle que nous voulons montrer. Dans notre cas, nous allons faire pointer chaque adresse du carnet d'adresses vers sa page. Nous allons utiliser la méthode #addLinkTo: text: de la classe WebElement afin de rendre le nom de famille cliquable. Par exemple:

           e addLinkTo: address text: address surname.

Mettons à jour la méthode #viewMain de la class AddressBookApp:

    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].
        self pageFrameWith: e title: 'Address book'

Et voilà! Tous les noms de famille sont changés en lien. Vérifiez le fonctionnement dans votre navigateur. La suggestion proposée fonctionne. Vérifiez que l'affichage d'une adresse est bien celle que nous avions défini dans la méthode #viewMain de la classe AddressApp.


La suite reste à venir! (si vous vous sentez l'âme d'un rédacteur, n'hésitez pas à rédiger la suite du tutoriel :)

Personal tools