Seaside Tutorial de Lukas Renggli

From OFSET Wiki

Jump to: navigation, search

Contents

[edit] Seaside Tutorial

Traduction en cours - Documents originaux http://www.lukas-renggli.ch/seaside/tutorial

[edit] Slides

[edit] Introduction - 01.pdf

[edit] Applications Web avec Seaside

  • Nordakademie
  • Hochschule der Wirtschaft
  • Lukas Renggli
  • renggli@iam.unibe.ch

[edit] Lukas Renggli

[edit] Défis

  • Tant que Seaside est simple, il n'aura pas besoin d'un autre framework web que vous puissiez connaitre.
  • Changer votre esprit pour un monde différent.
  • Seaside dispose d'une bibliotheque etendue de code, lisez la et apprenez d'elle.
  • Pensez en objets.

[edit] Participants

  • Internet comme un utilisateur
  • Les bases de l'internet (HTTP)
  • Sites Web Statiques (HTML, XHTML, CSS, ...)
  • Sites Web Dynamiques (PHP, JSP, SSP, ...)
  • Applications Web (Struts, WebObjects, ...)
  • Applications Web Cool (Seaside, Borges, ...)

[edit] Ordre du jour

  • Section de problème
  • Documentation technique
  • Exemples et quelques demos
  • Resoudre les exercices
  • Experimentation
  • Discussion

[edit] Programme

  • Vendredi, Le 4 Février 2005, 16:00 - 21:00
  • Introduction avec des demos
  • Premiers pas et quelques petites applications
  • Samedi, Le 5 Février 2005, 09:00 - 16:00
  • Developpement d'applications Web
  • Conceptions de vraies applications

[edit] Programme de Vendredi

  • Introduction
  • Une ballade avec Seaside
  • Démarrage
  • Outils de développements
  • Flot de contrôle

[edit] Exercices du Vendredi

  • Installation de Seaside
  • Prise de connaissances avec les outils de developpements
  • Realisation de petites applications exemples
  • Estimation en nombre
  • TicTacToe

[edit] Programme du Samedi

  • Composants - Conception d'un composant dynamique simple
  • elements de la programmation Web
  • Composition - Utilisation de differentes manieres de composer
  • Construction d'une application Web sophistiquees
  • Avancé - Apprendre quelques fonctionnalites avancees qui pourraient etre utile pour construire une application Web simple d'utilisation.

p.10

p.11

[edit] License du Tutoriel

  • Creative Common License
  • Attribution-ShareAlike 2.0
  • Vous êtes libre :
  • De copier, distribuer, afficher, et réaliser des travaux.
  • Faire des travaux dérivés.
  • L'utiliser de manière commerciale.
  • Sous les conditions suivantes :
  • Attribution : Vous devez faire figurer les informations originales concernant l'auteur du document.
  • Share Alike: Si vous modifiez, transformez, ou complétez ce travail, vous pouvez en distribuer le résultat sous une licence identique à celle-ci.
  • Pour la réutilisation ou distribution, vous devez faire attention à être en conformité avec les autres termes de la licence de ce travail.
  • Chacune de ces conditions peut être suspendue si vous obtenez la permission du détenteur des droits de copies.

[edit] Une ballade avec Seaside - 02.pdf

[edit] Une ballade avec Seaside

  • Lukas Renggli
  • renggli@iam.unibe.ch

[edit] Qui fait quoi? 

 ,----------------,                           ,---------------,
 |     Client     |---------Requetes--------->|    Serveur    |
 |                |                           |               |
 |                |      Protocoles HTTP      |               |
 |Navigateur Web  |                           | Serveur Web   |
 |                |<--------Reponses----------|               |
 '----------------'                           '---------------'

[edit] Contour

[edit] Un premier Exemple

p.4

[edit] Common Approach

  • first.html

<form action="second.html"> <input type="text" name="value1"> <input type="submit" value="OK"> </form>

  • second.html

<form action="result.html"> <input type="hidden" name="value1" value="<% value1 %>" > <input type="text" name="value2"> <input type="submit" value="OK"> </form>

  • result.html

<% value1 + value2 %>

[edit] Problèmes de Regroupement

p.6

[edit] Retour en arriere

p.7

| value1 value2 | Entrer un premier nombre value1 := self request: ‘First Number’. Entrer un second nombre value2 := self request: ‘Second Number’. Montre la somme du premier et du second nombre self inform: value1 asNumber ! + value2 asNumber.

  • Span Window
  • Bouton Arriere

[edit] Fonctionnalités de Seaside

  • Fonctionnalités
  • Les sessions comme une partie de code continue.
  • Constructions en XHTML/CSS
  • Callback basees sur un modèle événementiel
  • Composition et réutilisation
  • Exemples
  • Outils de développements
  • Déboggage interactif

[edit] Apparence d'une interface utilisateur

p.9

  • XHTML
  • Developpeur et Seaside
  • CSS
  • Dessinateur

[edit] Apparence d'une interface utilisateur

p.10

[edit] Conception en XHTML

html divNamed: ‘title’ with: ‘Titel’. html divNamed: ‘list’ with: [ " html spanClass: ‘item’ with: ‘Item 1’. " html spanClass: ‘item’ with: ‘Item 2’. ]. 

           |
           |
           |
           v
Title

" Item 1 " Item 2

[edit] Callback Event Model 

 Example3>>renderContentOn: html
 ! html form: [
 ! ! html
 " " " submitButtonWithAction: [ self inform: ‘Hello’ ]
 " " " text: ‘Say Hello’ ].
             |
             |
             |
             v
 <form method="post" action="/seaside/example2">
 ! <input name="_s" value="WwaXKYdGNmGxCoiy" type="hidden" />
 ! <input name="_k" value="EUCelKJU" type="hidden" />
 ! <input value="Say Hello" name="1" type="submit" />
 </form>

[edit] Reutilisation

p.15

  • Tableaux
  • Formulaires
  • Dialogues
  • Assistants
  • Rapports
  • Traitements par lots
  • Diagrammes

[edit] Applications

  • Application d'assurance
  • Rédacteur De Carte de visite professionnelle
  • Gallerie de photographies avec Magasin
  • Logiciel de gestion de projet
  • Gestion de travaux collaboratifs
  • Gestion du code source

[edit] Rédacteur De Carte de visite professionnelle

p.17

[edit] Logiciel de gestion de projet

p.18

[edit] Gallerie de photographies

p.19

[edit] Squeak Source

p.20

[edit] Domaine des Assurances

  • Assurances Santés
  • Petites entreprises avec agences
  • Recommandation
  • Créer et gérer les offres
  • Impression et création de documents PDF
  • Processus d'acceptation des nouvelles polices
  • Gestion des clients existants
  • Facturation par agences

[edit] Bases de codes pour les Assurances

  • Modèle – 49 classes, 987 methodes, 2997 lignes
  • Produits –!55 classes, 289 methodes, 3527 lignes
  • Tests – 19 classes, 168 methodes, 2140 lignes
  • Seaside – 109 classes, 1346 methodes, 7075 lignes
  • PDF – 9 classes, 240 methodes, 3826 lignes

[edit] Configuration pour les Assurances!

p.23

  • Smalltalk
  • Application
  • Seaside
  • Postgresql
  • Apache
  • sSL
  • Système de fichiers

[edit] Assurance

p.24

[edit] Disponibilites

  • Open Source – MIT License
  • Environnements
  • Squeak
  • Cincom VisualWorks
  • (Dolphin Smalltalk)

[edit] Conclusion

p.26

  • Abstraction
  • Requete / Reponse
  • Gestion de Session
  • Composition et Reutilisation
  • Developpement
  • Smalltalk
  • Outils-Web

[edit] Références

[edit] Premiers pas - 03.pdf

[edit] Seaside - Premiers pas

  • Lukas Renggli
  • renggli@iam.unibe.ch

[edit] Introduction

  • Framework pour des Applications Web
  • Generation dynamique de pages Web
  • Disponible dans Squeak et VisualWorks
  • Fonctionne au dessus du serveur Web
  • Fournis une API de haut niveau au dessus d'HTTP

[edit] Fonctionnalites de Seaside

  • Sessions comme une bribe de code continue
  • Construction facile en XHTML
  • Callback basee sur un modele evenementiel
  • Composition et reutilisation
  • Outils de developpements
  • Deboggueur interactif
  • Controle multiple sur le flot de controle

[edit] Squeak 3.7

  • Chargement du SqueakMap: Monticello, Dynamic-Bindings, KomServices, KomHttpServer
  • Installation de Seaside à partir d'une des adresses suivantes :
  • SqueakMap (fast and easy to load)
  • Depot Monticello d'Avi (Code recent)

[edit] SqueakMap

  • World | Open | SqueakMap Package Loader

[edit] Depot Monticello

  • World | Open | Monticello Browser

[edit] Paquets utiles

  • Environnement Squeak
  • BrowseUnit
  • Shout
  • Extensions Seaside
  • SeasideTesting
  • Mewa

[edit] Paquets Tutoriels

[edit] Depot public du Cincom

  • Store | Published Items

[edit] Etapes d'Installation

  • Cliquer sur charger
  • Choisir un nom d'utilisateur et un mot de passe pour le mode Administrateur :
  • Par defaut : admin / seaside
  • Valider le parametrages
  • un serveur HTTP exemples
  • un exemple de site Seaside


[edit] Verification de l'installation


[edit] Paquets utiles

  • Environement VisualWorks
  • RBSUnitExtensions
  • HyperRBCodeHighlighting
  • Extensions Seaside
  • Seaside Testing
  • Mewa

[edit] Morceau de tutoriel

  • Telecharger le morceau de tutoriel
  • Charger le morceau en utilisant le navigateur de fichiers
  • Lancer les tests

[edit] Outils de developpements - 04.pdf

[edit] Outils de developpements Seaside

  • Lukas Renggli
  • renggli@iam.unibe.ch

[edit] Problemes

  • Le développement est fait dans un editeur (PHP, Cocoon, ...) ou dans un navigateur Web (Zope).
  • Apres une erreur la session est detruite et doit etre redemarree manuellement.
  • Les modifications du code requiert une recompilation et un redemarrage du serveur (et des sessions).

[edit] Contour

  • Barre d'outils
  • Interface de configuration d'application
  • Profilage de la memoire et des performances
  • Halos
  • Naviguateur Système et Inspecteur
  • Naviguateur de bibliotheque
  • Vue du source
  • Débogguage

[edit] Barre d'outils

p.4

  • Nouvelle Session
  • Configuration
  • Bascule des Halos
  • Profiler
  • Utilisation de la memoire
  • Terminater
  • XHTML

[edit] Configuration du Serveur

p.5

[edit] Configurer l'application

p.6

[edit] Paramètres de l'application

p.7

[edit] Halos

p.8

  • Navigateur Système
  • Inpsecteur
  • Editeur de Styles
  • Nom de classe
  • Rendu
  • Source

[edit] Naviguateur Système

p.9

[edit] Inpsecteur

p.10

[edit] Editeur de Styles

p.11

[edit] Vues

p.12

  • Rendu
  • sources

[edit] Profiler

p.13

[edit] Utilisation de la mémoire

p.14

[edit] Terminer

  • Termine un processus attache a la session courante, ceci est utile seulement si l'application ne repond plus.
  • Ceci fonctionne seulement si l'application n'a pas ete configuree en mode deploiement.

[edit] XHTML

p.16

[edit] Deboggage

  • Ecrire et tester de maniere incrementale vos applications.
  • Modifier et debogger votre code a la volée.
  • Pas besoin de recompiler manuellement et redemarrer le serveur ou la session.

[edit] Exemple

p.18

[edit] Trace de la pile

p.19

[edit] Exception

p.20

[edit] Deboggeur

p.21

[edit] Recompilation

p.22

[edit] Retour sur la Session

p.23

[edit] En Résumé

  • Développement aisé d'applications Web
  • Editer votre code source a la volée
  • Aucune recompilation manuelle
  • Aucun redemarrage du serveur ou des sessions

[edit] Controle du flot - 05.pdf

[edit] Seaside Control Flow

  • Lukas Renggli
  • renggli@iam.unibe.ch

[edit] Problemes

  • Le flot est disperse sur different fichiers.
  • Les etats doivent etre rassembles et passés en avant et en arriere entre le client et le serveur.
  • Des erreurs peuvent etre facilement introduitent.
  • Les applications sont difficiles a maintenir.

[edit] Exemple

p.3

[edit] Défis

  • Le flot de controle d'une application Web peut toujours etre modifiee en appuyant sur le bouton Arriere ou par l'ouverture d'un nouveau navigateur Web avec la meme Url.

[edit] Contour

  • Definir le flot
  • Methodes de convenances
  • Appel et Reponse
  • Transactions
  • Exemple
  • Resume

[edit] Definir le flot

  • Créer une sous classe de WATask
  • Implémenter la methode #go
  • Découpe la méthode #go en de petites parties de code afin d'en assurer la lisibilité.
  • Créer un Déclencheur D'action (dont nous parlerons plus tard)

[edit] Taches

  • Les taches sont des composants particuliers qui n'ont pas de representation visuelle en tant que tel.
  • Les taches definissent un flot logique (ou une partie d'un flot) par la methode #go.
  • Les taches appelent d'autres composant permettant ainsi la deleguation des sorties écrans.

[edit] Taches

p.8

[edit] Methodes de convenances

  • #inform: aString
  • #confirm: aString
  • #request: aString

[edit] #inform:

  • self inform: ‘Hello World’.
  • Hello World

[edit] #confirm:

  • bool := self confirm: ‘Are you sure?’.
  • Are you sure?

[edit] #request:

p.12

  • string := self request: ‘Your name?’.
  • Your name?

[edit] #request:label:default:

  • string := self 
   request: ‘Your name?’
   label: ‘Accept’
   default: ‘Lukas Renggli’
  • Your Name?
  • Lukas Renggli

[edit] Appel et Reponse

  • #call: aComponent
  • Transfere le controle a aComponent
  • aComponent sera un controle donne
  1. answer: anObject
  • anObject sera retourne de #call:
  • La reception du composant sera retire

p.15

[edit] Transactions

  • Parfois, il est necessaire de se prevenir du retour arriere de l'utilisateur par le bouton Arriere avec un flot.
  • L'appel de #isolate: traite le flot defini in le bloc comme une transaction.
  • Les utilisateurs pourront aller en arriere et en avant durant la transaction, mais une fois validee, ils ne pourront pas revenir en arriere.

[edit] #isolate:

  • self isolate: [ 
   self doShopping.
   self collectPaymentInfo ].
   self showConfirmation.

[edit] Jeu d'exemple

  • UserNumberGuesser>>go 
  | guess number |
  guess := -1. number := 100 atRandom.
  self inform: 'I am thinking of a number between 1 and 100.'.
      [ guess = number ] whileFalse: [
        guess := (self request: 'What is your guess?') asNumber.
  guess < number
  ifTrue: [ self inform: 'The number I am thinking of is bigger.' ].
    guess > number
  ifTrue: [ self inform: 'The number I am thinking of is smaller.' ] ].
    self inform: 'You got it!'.

[edit] Exemple de Transaction

  • UserNumberGuesser>>go 
 | guess number |
   guess := -1. number := 100 atRandom.
     self inform: 'I am thinking of a number between 1 and 100.'.
     [ guess = number ] whileFalse: [
      self isolate: [
       guess := (self request: 'What is your guess?') asNumber.
       guess < number
     ifTrue: [ self inform: 'The number I am thinking of is bigger.' ].
      guess > number
     ifTrue: [ self inform: 'The number I am thinking of is smaller.' ] ] ].
      self inform: 'You got it!'.

[edit] Registre de point de départ

  • Pour enregistrer votre tache (ou un autre composant) comme un point de depart de votre application :
  • Creer une methode #canBeRoot qui retournera true sur la "class-side" de votre composant.
  • Enregistrer le composant en utilisant l'interface de configuration de Seaside.
  • UserNumberGuesser class>>canBeRoot 
 ^true

[edit] Enregistrement du point de depart

  • Pour enregistrer votre tache (ou un autre composant) comme un point de depart de votre application :
  • Creer une methode #initialize sur le "class-side" de cette derniere comme un composant.
  • Evaluer la methode d'initialisation
  • UserNumberGuesser class>>initialize

! self registerAsApplication: 'ung'.

[edit] Resume

  • Definition d'un flot d'application par le biais de la methode #go etant sous classe de WATask.
  • Utilise #call: ou un des messages de convenances afin de deleguer le rendu a d'autres composants.
  • Utilise #isolate: pour controler l'utilisation du bouton Arriere.

[edit] Composants - 06.pdf

[edit] Composants Seaside

  • Lukas Renggli
  • renggli@iam.unibe.ch

[edit] Problemes

  • La concaténation de chaines sans limite
  • La generation du balisage est source d'erreur
  • L'apparence et la logique de l'application sont melangees
  • HTTP etait concu pour des pages statiques
  • Aucune abstraction au dessus d'HTTP
  • Problèmes de nommage des paramètres nommés


[edit] Contour

  • Composant
  • Rendu : XHTML et CSS
  • Callbacks: Ancre, Formulaire, "En direct"
  • Personnalisation

[edit] Composants

  • Les composants sont la vue (et controlleur) d'une application Seaside
  • Les composants gardent leurs etats (modele et etat de l'interface utilisateur) par des variables d'instances.
  • Les composants definissent l'apparence visuelle et le declanchement des interactions de l'utilisateur.

[edit] Composants

  • Les composants sont crees en sous classant WAComponent
  • Mettre toutes les vues relatives aux methodes dans une categorie appellée rendu.
  • Mettre toute les controlleurs relatifs aux methodes dans une categories appellée accesibilité, actions, privée...
  • Creer une variable d'instance pour respecter le modele.

[edit] Composants

p.6

[edit] Rendu

  • XHTML est construits de maniere pragmatique et est appellé le rendu.
  • Créer une methode appellée #renderContentOn: ou vous emmettesz l'XHTML du composant.
  • SomeComponent>>renderContentOn: html 
  html text: ‘Hello World’.

[edit] Rendu Simple

  • Afficher une chaine : 
 html text: ‘My Text’.
  • Afficher une chaine sans caractere d'echappement : 
 html html: ‘<foo:bar>Zork</foo:bar>’.
  • Afficher un objet (en utilisant le "double-dispatching") : 
 html render: 123 factorial.
 html render: #( #foo ‘abc’ 123 ).

(continuer a la p.9)

Retrieved from "http://community.ofset.org/index.php/Seaside_Tutorial_de_Lukas_Renggli"
Personal tools