Questa lezione spiega i principi dell'approccio WebML (webml.org) per la modellazione in UML di applicazioni web. Tale lezione e' parte del corso di "Modellazione UML per il WEB", del Master in Web Technology, Universita' degli Studi dell'Aquila (http://www.di.univaq.it/mwt/)
1. WebML
Modellazione concettuale
di applicazioni Web
http://www.webml.org
Master in Web
Technology
Corso di: Modellazione UML per il Web
Docente: Henry Muccini
VIII Edizione 2012/2013
Dipartimento di Ingegneria e Scienze dell’Informazione e Matematica
Università degli Studi dell’Aquila
3. Nome Città Nazione Tipo
A2A SPA Milano Italy End User
ACER Europe Lainate (MI) Italy End User
Autostrade S.p.A. Firenze Italy End User I-Tech Web Porto Torres (SS) Italy Software House
Cim Italia Zingonia (BG) Italy End User Pantea s.r.l. Navacchio di Pisa Italy Software House
Cross Factor Milano Italy End User ROSEN Livorno Italy Software House
Eldor Corporation Orsenigo (CO) Italy End User
RTT Solutions Cinisello Balsamo Italy Software House
ENEL Roma Italy End User
(MI)
Forus - Electa Milano Italy End User
Softlabs Modena Italy Software House
Industria Chimica Reggio Emilia Italy End User
Substantial Roma Italy Software House
Reggiana
Zel Informatica Milano Italy Software House
Locat SpA Milano Italy End User
Prague Security Centre Prague Czech End User DiXtreme Milano Italy System
Republic Integrator
Provincia di Milano Milano Italy End User DS Group Milano Italy System
Senato della Rebubblica Roma Italy End User Integrator
Atena Informatica Cermenate (CO) Italy Software House Eustema Roma Italy System
Catharsys Consulting Bruxelles Belgium Software House Integrator
Group Gap It Udine Italy System
Data Progress Vimodrone Italy Software House Integrator
Edith Software Vanzaghello Italy Software House Pride Group Milano Italy System
E-tek srl Trivolzio (PV) Italy Software House Integrator
Eutopia srl Taranto Italy Software House Ra Computer Milano Italy System
GD Informatica Milano Italy Software House Integrator
Graficad Milano Italy Software House SESA Roma Italy System
Homeria Open Solutions Caceres Spain Software House Integrator
ItalSoft Sistemi S.r.l. Milano Italy Software House SIA - SSB Milano Italy System
Integrator
SNT Technologies Carpi (MO) Italy System
Integrator
STEP Roma Italy System
Integrator
L3S Research Center Hannover Germany System
Integrator
Si veda anche:
http://www.webratio.com/portal/contentPage/it/I%20nostri%20clienti
3 http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
5. Modellazione in WebML
» WebML fornisce un approccio strutturato per il
design di applicazioni Web data-intensive
» Fornisce un insieme integrato di modelli per la
produzione di applicativi Web ad alta qualita’
» WebML (Web Modeling Language) – http://webml.org
> Modellazione del contenuto informativo
> Modellazione dell’ipertesto
> WebRatio: un tool di sviluppo per WebML –
http://www.webratio.com
5 http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
6. Applicazioni Web data-intensive
» Sistemi per il Web, il cui scopo principale è gestire e pubblicare
grandi quantità di dati
» WebML non e’ l’approccio adatto per:
> Small Web sites (Homepages, …)
> Static Web sites
Esempi:
» Commercio: cataloghi elettronici, e-mall, aste elettroniche, ...
» Contenuto: quotidiani online, biblioteche elettroniche, siti
istituzionali ...
» Servizi: e-banking, prenotazioni, monitoraggio degli ordini, ...
» Comunità: portali tematici, forum, ...
» Contesto: portali di ricerca, directories,...
Tutte gestiscono e pubblicano grandi quantità di dati
6 http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
7. Alcuni modelli concettuali
»Prime proposte per la modellazione di applicazioni ipermediali (Communication of
ACM, August 1995)
> HDM (1993)
> OO-HDM (1995)
> RMM (1995)
»Proposte successive, per la modellazione di applicazioni Web
> ARANEUS (1998)
- ADM (Araneus Data Model)
> Strudel (1998)
- UGM (Unified Graph Model) + StruQL (Strudel Query Language)
> Web Modeling Language – WebML (1998)
- Modello ER per il contenuto + Primitive visuali per l’ipertesto
- Supportato da uno strumento CASE commerciale (http://www.webratio.com)
7 http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
8. The WebML models
» Models:
> Structure Model:
- Data organization
- Derivation: redundant data definition
> Hyptertext Model:
- Composition: definition of site pages as set of subpages and
elementary publishing units
- Navigation: definition of links between pages and between
units
> Presentation:
- positioning of the units in the page and definition of graphical
appearance
8 http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
9. WebML – concetti di base
Applicazione Web=
Structure Hypertext Presentation
Model Model Model
Dati + Ipertesto + Presentazione
entità, unità, pagine, link, site view stili
relazioni
struttura del composizione + navigazione +
contenuto presentazione
9 http://www.webml.org personalizzazione
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
10. Structure Model (1)
» Q: what are the objects published in the site and how
they are related?
» A:
> Entity: an object type in the application domain
> Attribute: scalar property of an entity
> Relationship: A connection between entities
> IS-A hierarchy: classification and grouping
» Compatible with Entity-Relationship and UML class
diagrams
10http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
11. Structure Model (2)
» Simplified Entity-Relationship model
> Binary relationships between entities
> IS-A hierarchies
> Simple typed Author Genre
attributes in entities
> Derivation model
can be applied for Book
redundant data
BestSeller
11http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
12. Derivation Model
» Redundant data can be easily specified using a
WebML-OQL (Object Query Language).
» E.g.:
> Author.BooksNumber = count(self.Author2Book)
> BestSeller := Book where Book.Sales > 50,000
Author Book
BestSeller
12http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
13. Hypertext Model
•Q1: what information is published in the
hypertext nodes?
•Q2: how are the hypertext nodes connected?
•Q3: how is the hypertext divided into pages
served to the user?
•A1: content units (Composition)
•A2: links (Navigation)
•A3: pages (Composition)
13http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
14. A1. Content Units examples
DATAUNIT
To publish information
about A SINGLE object
(e.g. AuthorDetail)
content
INDEXUNIT
To publish a list of objects
(e.g. IndexOfAuthors)
content
14http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
15. A1. Content Units examples
rendering
DATAUNIT
Author
first name:XXX
last name:YYY
photo:
Author
INDEXUNIT
Index of Authors
•S. Ceri
•P. Fraternali
•O.Versand
Author
15http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
16. A2. Navigation Model: Links
AuthorID
is transported
entity: Book
author [ author2book ]
• Semantics of a link:
1. Moving from one place to another
2. Transporting information from one place to
another (navigation context)
3. Activating a computation (side effect)
16http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
17. A2. Types of links
» Contextual links
> Between units
> Context transported
» Non-contextual links Voyages Books
> Between pages
> No context transported
17http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
18. A3. Composition: Pages
A Page is a structured container of units and links
> Possibly structured in and/or sub-pages
> Abstraction of screen, frame, card, deck...
> Permits one to cluster related information for more efficient
communication
E.g.:
The index of
authors and
the selected
author are
shown
Author Author together in the
same page
18http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
19. Presentation Model
» Presentation dealt with along two lines:
> Gallery of default presentation styles applicable
to site views or single pages (with elementary unit
positioning on a grid)
- each presentation style is an XSL stylesheet
> Compatibility with best selling tools for
presentation editing, for advanced page design
- E.g., WebML extensions for Dreamweaver 3 & 4
21http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
20. WebRatio
Site Development Studio
Functionalities:
» Structure model design
» Data derivation (Derivation Wizard)
» Hypertext model design (siteviews)
» Consistency checks (warnings)
» Structure Mapping onto a datasource
» Elementary units positioning in the pages
» Automatic web site generation with default
presentation styles
22http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
21. Structure modelling
Attribute
Entity
Relationship
ISA
hierarchy
23http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
22. Hypertext modelling
Siteviews
Allowed
operations:
» New siteview
creation
» Add/remove
pages, units,
Operation units
links
WebML units » Edit elements
properties
Links (panel)
Page/alternative
24http://www.webml.org
» Cut&paste
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
23. Modello dei Dati
in WebML
(Structure Model)
http://www.webml.org
Master in Web
Technology
Corso di: Modellazione UML per il Web
Docente: Henry Muccini
VIII Edizione 2012/2013
Dipartimento di Ingegneria e Scienze dell’Informazione e Matematica
Università degli Studi dell’Aquila
25. Obiettivi
» Tipiche domande:
> Quali sono gli oggetti informativi da pubblicare tramite
l’applicazione?
> Quali sono le proprietà che li caratterizzano?
> In che modo i vari oggetti sono correlati?
» Primitive del modello Entità-Relazioni:
> Entità: una classe di oggetti nel dominio dell’applicazione
> Attributo: una proprietà di una entità
> Relazione: una connessione tra entità
> Gerarchia IS-A: costrutto utilizzato per classificare o raggruppare
» Compatible con Entity-Relationship e UML class diagrams
27http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
26. MODELLO DEI DATI
Look and Feel
28http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
27. MODELLO DEI DATI
Notazione grafica
Entità1 Entità2
attributo1
SottoEntità
Le Entita’ sono dei box, con il nome dell’entita’ in alto
Gli attributi si trovano nel secondo compartimento
Le relazioni sono rappresentate tramite linee continue tra due
box
Gerarchie ISA sono denotate tramite un simbolo di
generalizzazione
29http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
28. MODELLO DEI DATI
Ruoli e cardinalità delle relazioni
» Il ruolo di una relazione è una delle due “direzioni” in cui
una relazione può essere interpretata
Per ogni ruolo, possono essere specificati vincoli di cardinalità
pubblica
Autore Libro
0..N 1..N
Pubblicazione
pubblicato_da
Attenzione: WebRatio usa notazioni differenti
30http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
29. MODELLO DEI DATI
Attributi composti
» Attributi con una struttura interna (per es., un indirizzo
può includere diversi campi)
» Rappresentati per mezzo di una entità e una relazione
» Es.: una persona ha uno o più indirizzi,ognuno formato da
numero, via, città, provincia, stato
Persona 0..N Indirizzo
1..N Via
Numero
Città
Provincia
Stato
31http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
31. MODELLO DEI DATI
Relazioni con attributi
» Rappresentate da una entità centrale e due
relazioni
» Es.: il voto preso da uno studente nell’esame di
un certo corso
Studente 0..N Voto 1..1 Corso
Valore:integer
1..1 0..N
33http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
32. MODELLO DEI DATI
Relazioni N-arie
» Relazioni che coinvolgono N entità (N>2)
> Es.: la fornitura di componenti ad un dipartimento
da parte di una ditta
» Rappresentabili da una combinazione di entità e
N relazioni binarie
Componente
0..N
1..1
Ditta 0..N Fornitura 1..1 Dipartimento
1..1 0..N
34http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
33. Gerarchie IS-A
» Le sotto-entità ereditano gli attributi e le relazioni di una
super entità
» Le sotto-entità possono anche avere proprietà localmente
definite
» Le sotto-entità modellano collezioni
Cantante
Alcune ipotesi restrittive in WebML:
nome
cognome • Non è permessa l’ereditarietà
biografia multipla [vedi su WebRatio]
• E’ possibile definire solo gerarchie
esclusive
CantantePop CantanteJazz • Ogni entità può apparire al massimo
in una gerarchia
strumento
35http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
34. CASO DI STUDIO
Esempio
Catalogo Elettronico della ditta ACME
»ACME: una medio-piccola impresa di mobili, che vende i suoi
prodotti attraverso punti vendita sparsi in tutto il mondo
»Necessità di sviluppare un sito Web per pubblicare il
catalogo dei suoi prodotti.
»Il sito deve pubblicare informazioni su:
> prodotti
> offerte speciali: combinazioni di prodotti venduti ad un
prezzo scontato
> punti vendita
> Ogni prodotto ha una sua scheda tecnica e diverse
immagini
> I prodotti sono raggruppati in categorie
36http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
35. CASO DI STUDIO
ACME – Schema dei dati
Category
Category: string
0:N Combination
1:1
Product Code: integer
Name: string
Code: integer 0:N Price: float
Name: string 1:N Description: text
Price: float Photo: image
Description: text StartDate: date
Thumbnail: image 0:N EndDate: date
Highlighted: boolean Highlighted: boolean
0:1
1:1 1:1
Tech record Big image Store
Colors: image Description: text Location: string
Sizes: text Photo: image Map: image
Email: URL
Foto: image
37http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
36. MODELLO DEI DATI
Oggetti derivati
» La derivazione permette di:
> Arricchire il contenuto di un’entità, aggiungendo sia
attributi calcolati, sia attributi importati da oggetti
correlati.
> Definire la popolazione di entità o di relazioni, sulla
base di alcune proprietà degli oggetti coinvolti.
38http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
37. MODELLO DEI DATI
WebML OQL
» La derivazione si specifica scrivendo espressioni
chiamate “query di derivazione”
» WebML OQL (Object Query Language): un
linguagigo per esprimere query di derivazione
» Concetti derivabili:
> Entità, relazioni, attributi
» Le query di derivazione sono
automaticamente trasformate in viste SQL
installate nella base di dati
39http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
38. MODELLO DEI DATI
Entità derivate
»La popolazione di Sotto-Entità nelle gerarchie IS-A può essere specificata
per mezzo di query OQL
Autore
ISA
AutoreItaliano
»Es.: “Un’autore italiano è un autore nato in Italia”
»WebML OQL:
value = “Autore as A where A.LuogoNascita contains ‘Italia’”
40http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
39. MODELLO DEI DATI
Attributi derivati
» Quattro tipi di attributi derivati:
> Attributi costanti
> Attributi Importati
> Attributi Calcolati
> Attributi Aggregati
41http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
41. Attributi Costanti
DipendentePoli
Affiliazione
Value=“Politecnico di Milano”
43http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
42. MODELLO DEI DATI
Attributi importati
Uomo Donna
marito
cognome cognomeAcquisito
Value=“Self.marito.cognome”
» La variabile Self denota l’entità corrente in cui si
vuole definire l’attributo
44http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
43. MODELLO DEI DATI
Attributi calcolati e aggregati
Ordine Dettaglio
Ordine_Dettaglio
prezzoTotale prezzo
numLineeOrd qta
prezzoTotale
» Prezzo totale dell’ordine come somma dei prezzi delle
singole linee d’ordine:
1.prezzoTotale in “Dettaglio” come attributo calcolato:
Self.prezzo * Self.qta
2.prezzoTotale in “Ordine” come attributo aggregato:
Sum (Self.Ordine_Dettaglio.prezzoTotale)
» Il numero di linee d’ordine per un certo ordine
Count (Self.Ordine_Dettaglio)
45http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
44. MODELLO DEI DATI
Relazioni Derivate
Le relazioni possono essere derivate in due modi:
» Definendo restrizioni e/o composizioni di relazioni pre-
esistenti
» Definendo nuove relazioni tra coppie di oggetti in base a
condizioni (concatenazione)
46http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
46. MODELLO DEI DATI
Relazioni derivate: restrizione
Restrizione di relazioni pre-esistenti:
Autore_LibroRecente
Autore Libro
Autore_Libro
Value=“Self.Autore_Libro as L where L.date >
‘01/01/08’”
48http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
47. MODELLO DEI DATI
Relazioni derivate: concatenazione
Concatenazione di relazioni:
Libro Libro_Autore Autore
Capitolo_Libro
Capitolo
Capitolo_Autore
value=“Self.Capitolo_Libro.Libro_Autore”
49http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
48. Modello di ipertesto
in WebML
http://www.webml.org
Master in Web
Technology
Corso di: Modellazione UML per il Web
Docente: Henry Muccini
VIII Edizione 2012/2013
Dipartimento di Ingegneria e Scienze dell’Informazione e Matematica
Università degli Studi dell’Aquila
51. 1. Motivazioni e Concetti di Base
53http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
52. MODELLO DI IPERTESTO
Modello di Ipertesto:
obiettivi
Modellazione ad alto livello del front-end di una
applicazione Web dinamica e delle interazioni
con la logica e i dati del back-end
Utilizzo di una notazione visuale semplice ma formale
Generazione automatica di template di pagine
dinamiche e di interrogazioni per l’accesso e la
manipolazione dei dati
54http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
53. MODELLO DI IPERTESTO
Modellazione dell’Ipertesto:
Domande Tipiche
• Domande tipiche
• In che modo l’utente deve fruire del contenuto pubblicato tramite il
sito?
• Quali sono le pagine nell’ipertesto, tramite cui l’utente può
accedere ai contenuti?
• Quale informazione deve essere pubblicata in ogni pagina?
• In che modo i nodi dell’ipertesto sono collegati tra loro?
• Primitive del modello di Ipertesto
• Unità di contenuto (o unit)
• Link
• Pagine
• Site view
55http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
54. MODELLO DI IPERTESTO
Unità di contenuto
» Una unita’ di contenuto in WebML è l’elemento
atomico per la pubblicazione dell’informazione
» Corrisponde ad una “vista” definita su di un
contenitore di oggetti:
> Tutte le istanze di un’entità sorgente
> Le istanze di una entità che soddisfano una condizione
di selezione chiamata selettore
unitX
Sorgente
[Selettore]
56http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
55. MODELLO DI IPERTESTO
Unità di Contenuto di Base
DATAUNIT INDEXUNIT MULTIDATAUNIT
Sorgente Sorgente Sorgente
[Selettore] [Selettore] [Selettore]
SCROLLERUNIT MULTICHOICE HIERARCHICAL
Sorgente Sorgente Sorgente
[Selettore] [Selettore] [Selettore]
57http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
56. MODELLO DI IPERTESTO
Significato delle unità di
contenuto
DATAUNIT INDEXUNIT MULTIDATAUNIT
Autore Indice di tutti gli Autori Tutti gli Autori
first name:XXX
last name:YYY •S. Ceri
photo: •P. Fraternali
•A.S. Tanenbaum
•O.Versand
SCROLLERUNIT MULTICHOICE HIERARCHICAL
Esplora gli Autori Scegli gli Autori Autori&Libri
5/12: vai a Ceri 1. S. Ceri
1/12
Fraternali Web Technologies
Advanced Databases
Versand
2. P. Fraternali
Tanenbaum Web Technologies
58http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
57. MODELLO DI IPERTESTO
Input e output delle unita’
ParIN ParOUT
unitX
entità
[selettore (ParIN)]
» Ogni unit può avere parametri di input e output
» I parametri in input sono necessari per calcolare la unit
> Parametri richiesti dal selettore della unit
» I parametri in output possono essere utilizzati per la
computazione di una o più unit che dipendono dalla unit
corrente
59http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
58. 2. Unit di Contenuto
60http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
59. MODELLO DI IPERTESTO
DataUnit
parametri OID
Entità
[Selettore(parametri)]
» Pubblica informazione circa UNA SINGOLA ISTANZA
» Contenitore: una entità, più (opzionalmente) un selettore
» Parametri in input:
> OID dell’oggetto che deve essere pubblicato, OPPURE
> Parametri richiesti dalla computazione del selettore
» Parametri in output:
> L’OID dell’oggetto pubblicato, più ogni suo attributo
61http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
60. CASO DI STUDIO
ACME
Esempio di DataUnit
Product
Details
Product
Informazione su di
un prodotto specifico
62http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
61. MODELLO DI IPERTESTO
MultiDataUnit
parametri {OID}
Entità
[Selettore(parametri)]
• Presenta istanze multiple di una entità (insieme di oggetti)
oggetti)
• Contenitore: una entità, più (opzionalmente) un selettore
• Parametri di input: quelli richiesti per la computazione del
selettore
• Parametri di output:
• L’insieme di OID degli oggetti pubblicati (più gli attributi
degli oggetti)
63http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
62. MODELLO DI IPERTESTO
IndexUnit
parametri OIDSel
Entità
[Selettore(parametri)]
» Pubblica una lista di elementi (insieme di oggetti)
» Contenitore: una entità, più (opzionalmente) un selettore
» Parametri di input: quelli richiesti per la computazione del
selettore
» Parametri in output:
- OID dell’oggetto selezionato dall’utente (più tutti i suoi attributi)
64http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
63. CASO DI STUDIO
ACME: IndexUnit nella pagina
Products
All
Products OIDSel
Product
L’utente può
accedere ai singoli
prodotti cliccando
su uno degli
elementi della
lista
65http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
64. MODELLO DI IPERTESTO
MultichoiceUnit
parametri {OIDSel}
Entità
[Selettore(parametri)]
[Preselettore(parametri)]
» Pubblica indici di elementi (insieme di oggetti) tra cui l’utente seleziona
uno o più elementi (tramite checkbox)
» Contenitore: una entità, più (opzionalmente) selettore e pre-selettore
» Parametri in input: quelli richiesti per la computazione dei selettori
» Parametri in output: OID degli oggetti marcati dall’utente (più tutti i suoi
attributi)
66http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
65. MODELLO DI IPERTESTO
HierarchicalUnit
Parametri {OIDSel}
Entita1
[Selettore1(Parametri)
NEST Entita2
[Entita1_Entita2]
[Selettore2(Parametri)]
» Pubblica una lista di oggetti (appartenenti a più entità) organizzati
gerarchicamente in base a relazioni definite tra le entità
» Contenitore: un insieme di entità e le relazioni che le associano, più
(opzionalmente) selettori ad ogni livello
» Parametri in input: quelli richiesti dalla computazione dei selettori
» Parametri in output: OID dell’oggetto selezionato dall’utente (più tutti i
suoi attributi)
67http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
66. MODELLO DI IPERTESTO
HierarchicalUnit:
Esempio
•Tables
•Kitchen
•Korla KJD54
•Chairs
Categoria •Stools
•Roy LKR34
NEST SottoCategoria
•OddVar JSQ87
[Categoria_SottoCategoria]
•Office
NEST Prodotto •Jess RLT45
[SottoCategoria_Prodotto]
68http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
67. MODELLO DI IPERTESTO
HierarchicalUnit:
Esempio
•Tables
Categoria •Kitchen
•Korla KJD54
•Chairs
SottoCategoria •Stools
•Roy LKR34
•OddVar JSQ87
Prodotto •Office
•Jess RLT45
69http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
68. MODELLO DI IPERTESTO
HierarchicalUnit:
link a
link uscenti
•Tables link a
Sotto_Cat
link b •Kitchen link b
•Korla KJD54 link c
•Chairs link a
link c
•Stools link b
Categoria •Roy LKR34 link c
SottoCategoria •OddVar JSQ87 link c
[Categoria_SottoCategoria] •Office link b
Prodotto •Jess RLT45 link c
[SottoCategoria_Prodotto]
» Ogni link è visualizzato come un ancora ad un
opportuno livello della gerarchia
» Il livello a cui il link è posizionato dipende dal
tipo dei parametri sul link
70http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
69. MODELLO DI IPERTESTO
ScrollerUnit
parametri {OIDSel}
Entità
[Selettore(parametri)]
» Permette di definire il browsing in un insieme di oggetti:
> Visualizza link al primo, al precedente, al prossimo, all’ultimo
oggetto nell’insieme
» Block factor = numero di oggetti visualizzati in blocco in un passo di
navigazione
» Contenitore: una entità, più (opzionalmente) un selettore
» Parametri in input: quelli richiesti per la computazione dei selettori
» Parametri in output: l’insieme di OID del blocco di oggetti corrente
71http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
70. 3. Link e parametri
72http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
71. MODELLO DI IPERTESTO
Link contestuali
Sorgente Destinazione
Autore Autore
• Connessioni orientate tra due unit (sorgente e destinazione), la
cui presentazione corrisponde ad ancore o bottoni “submit”
• Permettono all’utente di navigare tra nodi diversi
dell’ipertesto
• Trasportano informazione di contesto
• Attivano una computazione (effetto collaterale)
73http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
72. MODELLO DI IPERTESTO
Parametri sui link: default
• Quando è possible, i parametri sui link sono inferiti dal
diagramma, senza bisogno di essere specificati esplicitamente
• I diagrammi acquistano maggiore chiarezza
Autore Libro
[OID= …] [Autore_Libro]
75http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
73. MODELLO DI IPERTESTO
Selettori:
Default
• Quando possibile, i selettori e i loro parametri sono inferiti dal
diagramma, senza dover essere specificati esplicitamente
Autore Libro Libro
[Autore_Libro]
76http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
74. 4. Pagine, Aree, Site view
79http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
75. MODELLO DI IPERTESTO
Pagine
» Una pagina è un contenitore di una o più unità di
contenuto mostrate all’utente contemporaneamente
Home Page Login Indice dei Libri
80http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
76. MODELLO DI IPERTESTO
Link non contestuali
» Link definiti tra pagine
» Non trasportano alcuna informazione di
contesto
HomePage Indice dei libri
» L’utente naviga da una pagina all’altra per
mezzo di un’ ancora (es: >>Indice dei Libri)
81http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
77. MODELLO DI IPERTESTO
Home Page
» É la pagina principale di un sito
> La prima a cui l’utente accede
» Ogni site view deve contenere un pagina marcata
come “Home”
HomePage H Indice dei libri
82http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
78. MODELLO DI IPERTESTO
Pagine Landmark
Indice dei Libri Negozi Indice dei Libri Negozi
L
InfoLibro Autori InfoLibri Autori
» Pagine globalmente visibili. L’utente può saltare ad esse da
ogni altra pagina della site view
» Equivalenti a link non contestuali definiti da ogni altra
pagina della site view verso la pagina landmark
Lancia WebRatio
83http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
79. CASO DI STUDIO
ACME
Composizione della Home Page
84http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
80. CASO DI STUDIO
ACME
Pagina dei Prodotti
85http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
81. MODELLO DI IPERTESTO
Aree
Area
Pagina1 Pagina2
» Insiemi di pagine logicamente omogenee
> Sezioni di un portale: Sport, Musica, Tecnologia, …
» Le aree possono contenere sotto-aree annidate
» Ogni area può includere una pagina (o una
sottoarea) di “D”efault
CatalogoLibri
HomePage
Indice InfoLibri
dei Libri
D
86http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
82. 87http://www.webml.org Lancia WebRatio
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
83. MODELLO DI IPERTESTO
Site View
» Un insieme di pagine e/o aree che forniscono una
vista coerente del sito
» Sullo stesso schema dei dati è possibile definire
diverse site view
» Necessità di pubblicare ipertesti diversi per diversi
tipi di utenti o per diversi tipi di dispositivi di
output
> Es.:
- Site view pubblica: accesso concesso ad ogni utente
- Site view private: accesso protetto tramite password
88http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
84. CASO DI STUDIO
ACME
Modellazione delle site view
» Due site view sullo stesso schema dei dati
> Customer: pubblica, per i clienti
> Admin: privata, per amministratori e gestori di
contenuto
89http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
85. CASO DI STUDIO
ACME
Site View Customer
» Scopo: permettere al cliente di accedere ai contenuti
pubblicati tramite il sito
» Struttura:
> Due aree principali: Products e Offers
> Due pagine Landamark: HomePage, Store
Customer
Products Area Offers Area
L L
HomePage H Stores
L L
90http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
86. MODEL
Operazioni di Login/ Logout
» Una siteview può contenere una form per consentire login
Entry Unit Login
» Ogni siteview privata dovrebbe consentire logout
Logout
» E’ consentito per un utente il cambio di ruolo durante la
navigazione
Entry Unit ChangeGroup
10http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
0
87. MODEL
CurrentUser e CurrentGroup
» WebML fornisce due global parameters
predefiniti:
> CurrentUser: OID dell’utente corrente
> CurrentGroup: OID del gruppo di appartenenza
dell’utente corrente
» L’utente deve avere fatto login (altrimenti è
everyone)
» Le operazioni di Login, Logout e ChangeGroup
impostano automaticamente questi due
parametri
10http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
1
88. MODEL
Pagine annidate
» E’ possibile definire pagine annidate (sottopagine)
» Pagine annidate possono essere tra loro:
» In AND (presenza » In OR: Si inserisce un
contemporanea nella elemento ALTERNATIVE le
ALTERNATIVE,
pagina di tutte le cui pagine figlie compaiono
sottopagine) in mutua esclusione. Una di
esse è marcata come Default
ProductPage
ProductPage
Images Historical Info
InAlternativa
Details Designers
Designers
D
10http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
4
89. MODEL
Esempio di pagine annidate in OR
» Pagina di prodotto che mostra l’elenco dei dettagli oppure,
a scelta dell’utente, l’elenco dei designer
ProductPage
InAlternativa 1
Details Designers
2
Product
Detail Designer
[P_D]
D
10http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
5
» NB.Ogni ipertesto può essere riportato a non avere
90. Modello delle
Operazioni in WebML
http://www.webml.org
Master in Web
Technology
Corso di: Modellazione UML per il Web
Docente: Henry Muccini
VIII Edizione 2012/2013
Dipartimento di Ingegneria e Scienze dell’Informazione e Matematica
Università degli Studi dell’Aquila
93. MODEL
Integrazione di ipertesti e logica
applicativa
» Esempi di siti che fanno uso di servizi back-end o remoti:
back-
> Reservation Web site: richiesta di prenotazione, annullamento o
modifica di prenotazione
> Altri esempi: gestione contenuti,carrello della spesa di siti e-
commerce, gestione del profilo personale, ...
» PROBLEMA:
> Come modellare la chiamata di operazioni?
» SOLUZIONE:
> Inserendo le chiamate di operazioni come nuove primitive di
ipertesto
11http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
3
94. MODEL
Operation Unit
» Descrive una generica operazione esterna o predefinita
» Riceve input da uno o più link entranti (di cui uno deve essere un
normal link, mentre gli altri saranno transport links)
KO
Operation
Unit OK
Entità
[Selettore]
» Due tipi di link di uscita:
> OK link: seguito nel caso in cui l’operazione si conclude con successo
> KO link: seguito nel caso in cui l’operazione fallisce
» Le operazioni non hanno scopo di pubblicare informazione sono
posizionate all’esterno delle pagine
11http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
4
95. MODEL
Operazioni predefinite (Built-in)
» WebML fornisce un insieme di operazioni predefinite per
la gestione dei contenuti (istanze dei dati pubblicati sul
sito)
» Operazioni tradizionali di gestione di basi di dati: create,
delete, modify, create relationship, delete relationship
» Il loro comportamento è predefinito, e consente di
gestire le istanze di entità e relazioni dichiarate nel
modello dei dati
» E’ possibile arricchire tale insieme con altre operazioni
definite dall’utente
11http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
5
96. MODEL
Operazioni predefinite per la
gestione dei contenuti
CREATE DELETE MODIFY
Create Unit Delete Unit Modify Unit
Entità Entità Entità
[Selettore] [Selettore]
CONNECT DISCONNECT
Connect Unit Disconnect
Unit
Relazione Relazione
[Selettore] [Selettore]
11http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
6
97. MODEL
Create Unit
valore1→ attributo1 KO
Niente
Create Unit
OK
OID del nuovo
oggetto
valore2 → attributo2
Entità
» Riceve i valori da assegnare agli attributi del
nuovo oggetto creato
» Restituisce l’identificativo dell’oggetto creato
(se la creazione ha successo)
11http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
7
99. Esempio di creazione
Lancia WebRatio
11http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
9
100. MODEL
Modify unit
OIDs degli oggetti
valore1 → attributo2 non modificati
valore2 → attributo1
KO
Modify Unit
OK OIDs degli
oggetti modificati
OIDs degli oggetti da
modificare Entità
[Selettore]
» Riceve i valori da assegnare agli attributi da modificare
» Nota: le istanze da modificare possono essere selezionate per
mezzo di OID o per mezzo di selettore
» OK: Restituisce l’identificativo degli oggetti modificati (tutti quelli
che erano stati richiesti)
» KO: Restituisce l’identificativo degli oggetti che non si è riusciti a
modificare
12http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
0
101. Esempio di modifica
Lancia WebRatio
12http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
1
102. MODEL
Delete unit
OIDs degli oggetti
non cancellati
KO
OIDs degli oggetti Delete Unit
OK Nulla
da cancellare
Entità
[Selettore]
» Riceve l’elenco degli oggetti da cancellare
» Nota: le istanze da cancellare possono essere selezionate per
mezzo di OID o per mezzo di selettore
» OK: non restituisce nulla perchè gli oggetti non esistono più!!
» KO: Restituisce l’identificativo degli oggetti non cancellati
12http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
2
103. MODEL
Esempio di cancellazione
12http://www.webml.org
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
3