» Il materiale riportato in queste slide puo essere riutilizzato, parziale o totalmente, a patto che le fonti e gli autori vengano citati

Transcript

1 UML & WEb - Approccio WAE: Conallen Prerequisiti Master in Web Technology Corso di: Modellazione UML per il Web V Edizione 2008/09 Dipartimento di Informatica Università degli Studi dell Aquila Engineering Sanità Enti Locali, Energee3, Gruppo Imola, Maggioli Informatica, Micron Technology, Nous Informatica, SED, Technolabs, Taiprora, Tomato Interactive Copyright Notice» Il materiale riportato in queste slide puo essere riutilizzato, parziale o totalmente, a patto che le fonti e gli autori vengano citati Henry Muccini 2

2 Conallen» Conallen presenta un processo di sviluppo di applicazioni Web basato su > RUP e ICONIX > Architecture Centric» Vedremo nel seguito una > introduzione al RUP > una descrizione di cosa sia una Architettura per applicazioni Web > Approccio di Conallen per la modellazione di applicazioni Web tramite UML - Meccanismi di estensione ad UML > Tool support > Esempio 3 Cenni sul RUP 4

3 Sommario» Cos e un Processo di sviluppo del Software» Rational Unified Process (RUP) > Struttura dinamica del processo > Struttura statica del processo > Workflowdei requisiti > Esempio 5 Cosa è un processo?» Un processo definisce chi fa che cosa, quando e come per raggiungere un determinato obiettivo» Nell ingegneria del SW l obiettivo è di produrre prodotti SW o di migliorarne di esistenti 6

4 A Software Development Process» Def: > Coherent sets of activities for specifying, designing, implementing and testing software systems [Ian Sommerville]» Defines Who is doing What, When to do it, and How to reach a certain goal [Jacobson] New or changed requirements Software Engineering Process New or changed system 7 Un Processo effettivo...» Fornisce indicazioni sulla sequenza di attività all interno di un gruppo di lavoro» Specifica quale elaborato deve essere sviluppato e qual è il momento adeguato per farlo» Guida i compiti dei singoli sviluppatori e dell intero gruppo di lavoro» Fornisce dei criteri per controllare e misurare i prodotti e le attività di progetto 8

5 Processo Software: some years ago Programming Languages: Pascal, Fortran, Cobol, Waterfall model Royce, 1970» Linear, sequential» An ideal model» The output of each phase is the input to the next one Waterfall model (Royce 1970) [Figure from Ian Sommerville] 9» Evolutionary processes: > Exploratory development > Throw-away prototyping» Spiral, Boehm, 1985 Objectives Plan next phase Analyse and Evaluate Development and test 10

6 Rational Unified Process (RUP)» RUP è un processo effettivo per lo sviluppo di SW» RUP è un prodotto sul processo, sviluppato e aggiornato dalla Rational» RUP è un framework di processo, cioè èadattato ed esteso a seconda delle necessità» RUP abbraccia le 6 best practice e utilizza tools per implementarle 11 RUP» RUP: > Use case driven > Architecture-centric > Iterative and incremental Use Cases Guides SA Drive 12

7 RUP guidato dai casi d uso» Use case catturano i requisiti funzionali del sistema» Gli use case guidano tutte le fasi del processo > Use case sono l anello di congiunzione tra i requisiti e le attività di design > Use case costituiscono la base per identificare le procedure di test 13 RUP è centrato sull architettura Object Model of Design Modello di architettura a 4+1 viste Logical View Implementation (Development) View Static Organization of the Software End-user Functionality Process View Use Case View Programmers Software management Deployment View Concurrency and Synchronization Conceptual System integrators Performance Scalability Throughput System engineering System topology Delivery, installation Communication Software Mapping To Hw Physical Architettura non è piatta cioè ha bisogno di diverse viste per poter essere descritta 14

8 RUP è centrato sull architettura» Use-Case View > Ruolo chiave per le altre viste > Contiene scenari chiave o use-case che guidano la definizione dell architettura» Logical View > Contiene i requisiti funzionali del sistema > Astrazione del modello di progettazione 15 RUP è centrato sull architettura» Implementation View > Descrive l organizzazione dei moduli SW statici (codice sorgente, file di dati,...)» Process View > Descrive gli aspetti concorrenziali del sistema > Risponde alle problematiche di concorrenza, parallelismo,...» Deployment View > Mostra come gli eseguibili sono distruibuiti sulle diverse piattaforme 16

9 Modelli e Viste» Viste (architettura) si concentrano solo sugli aspetti importanti > Classi principali > Meccanismi principali, come persistenza... > Pattern > Interfacce > Processi principali e thread di controllo» Relazione tra viste e modelli 17 RUP guidato dall architettura Use Case Model Analysis Model Design Model Depl. Model Impl. Model Test Model Models Views L Architettura comprende una collezione di viste dei modelli L Architettura non e una singola fase nel processo di sviluppo software 18

10 Struttura del processo Core Workflows Inception Elaboration Construction Transition Requirements Analysis An iteration in the elaboration phase Design Implementation Test Preliminary Iteration(s) iter. #1 iter. #2 iter. #n iter. #n+1 iter. #n+2 iter. #m iter. #m+1 Iterations 19 Struttura del processo» Due dimensioni > Prima dimensione (Asse orizzontale) - Struttura dinamica del processo - Rappresenta il tempo e mostra gli aspetti del processo inerenti il suo dispiegamento nel ciclo di vita - Aspetto dinamico del sistema in termini di cicli, fasi, iterazioni e milestone > Seconda dimensione (Asse verticale) - Struttura statica del processo - Rappresenta i principali workflow (attività) del processo, che raggruppano attività per loro natura logicamente correlate - Aspetto statico del processo in termini di componenti del processo, attività, elaborati e ruoli 20

11 Struttura dinamica del processo» Processo a cascata (Requisiti, Progettazione, Implementazione e Integrazione) è un processo ragionevole purché > Requisiti non cambiano (è difficile che i requisiti rimangano invariati nel tempo) > Si può sviluppare un progetto completo prima di procedere» NON funziona quando i progetti hanno un elevato grado di innovazione, incertezza e rischio» SOLUZIONE: ITERARE il processo a cascata 21 Struttura dinamica del processo: in breve Ideazione Elaborazione Costruzione Transizione»Ideazione (Inception):»Elaborazione (Elaboration):»Construzione (Construction):»Transizione (Transition): > Definisce lo scopo del progetto > Pianificazione di progetto, specifica delle features e base architetturale > Costruisce il prodotto > trasferisce il prodotto agli utenti 23

12 Struttura statica del processo» Processo descrive chi fa che cosa, come e quando» RUP rappresentato utilizzando quattro elementi principali di modellazione > Chi: ruoli > Come: attività > Che cosa: elaborati > Quando: workflow 39 Struttura statica del processo 40

13 Second Dimension» A Role defines the behavior (activities) and responsibilities (expected artifact) of an individual or group of individuals working in a team > Examples: System analyst, Test designer, SW developer,...» An Activity assigned to a specific role consists in a set of tasks assigned to a person owning a certain role» An Artifact represent the output of the process, which can be created, modified and used > Examples: Models, Documents, Source Code, executables, Let us model this» Is this diagram correctly reflecting what we said?? 42

14 Second dimension: workflow» A Workflow describes the sequence of activities which must be executed in order to produce certain artifacts and shows how roles interact» RUP identifies nine primary workflows. The most important ones are: > Requirements > Analysis > Design > Implementation > Test 43 For example: Requirements Workflow» Roles: > System Analyst - Find Actors and Use Cases - Structure Use Case Model > Use-Case Specifier - Detail a Use Case > User-Interface Designer - Prototype User Interface > Architect - Prioritize Use Cases» Artifacts: > Domain model > Use-case model > User interface prototype > Supplementary specification 44

15 Again with modeling» A Workflow describes the sequence of activities which must be executed in order to produce certain artifacts» shows how roles interact» Is this diagram completely reflecting what we said? 45 Core Workflow: Analisi e Design 52

16 Analisi e design: Obiettivi» Analisi e Design: > Trasformare l insieme dei requisiti in una specifica che descriva come implementare il sistema > Evolvere il sistema in un architettura robusta > Adattare il design tenendo conto dell ambiente di implementazione, mettendolo a punto in termini di prestazioni, robustezza, scalabilità, testabilità ecc. 53 Analisi (e Design): Obiettivi» Obiettivo della fase di Analisi èdi comprendere il problema ed iniziare a sviluppare un modello del sistema indipendentemente dalle tecnologie di implementazione utilizzate» Focus dell analisi è di tradurre i requisiti funzionali in concetti software 54

17 Look and Feel 55 (Analisi e) Design: Obiettivi» Obiettivo della fase di design e di raffinare il modello (di analisi) con l intento di sviluppare un modello di design che permetta una transizione morbida alla fase di codifica» Si tiene conto dei requisiti non funzionali 56

18 Analisi e design: Ruoli ed elaborati 57 Analisi e design: Flusso Versione semplificata!!!! 61

19 Analisi degli Use-case» Viene eseguita per ogni use-case del sistema» Obiettivi > Identificare le classi che eseguono il flusso di eventi di uno usecase > Distribuire il comportamento degli use-case a tali classi utilizzando lo use-case realization 62 Passi nell Analisi degli use-case» Modificare la descrizione degli use-case» Per ogni use-case > Trovare le classi dal comportamento degli use-case > Distribuire il comportamento degli use-case alle classi» Per ogni classe di analisi (analysis class) trovata > Descrivere le responsabilità > Descriverre gli attributi e le associazioni > Qualificare i meccanismi di analisi» Unificare le classi di analisi 64

20 Trovare classi dal comportamento degli use-case» Tecnica che utilizza tre differenti prospettive del sistema per guidare l identificazione delle classi candidate > boundary tra il sistema e i suoi attori > informazioni che il sistema utilizza > logica di controllo del sistema» Vengono utilizzati degli stereotipi per identificare tali classi (<<boundary>>, <<control>>, <<entity>>) > Boundary: interfacce > Entity: dati > Control: attivita 65 Classi di Analisi» Rappresentano un modello concettuale del sistema che hanno responsabilità e comportamento» Utilizzate per catturare un first-draft, rough-cut (taglio approssimativo) del modello degli oggetti del sistema» Essendo delle proto-classi raramente sopravvivono intatte nell implementazione. Generalmente si trasformano in sottosistemi, componenti oppure vengono suddivise in classi più piccole 66

21 Trovare classi dal comportamento degli use-case Sistema di Billing Boundary = interfaccia ControllerRegistrazione Control = coordinamento Studente (from Logical View) Entity = dati 67 Classi Boundary» Funge da intermediario tra il sistema e qualcosa al di fuori di esso» Modellano le interazioni tra il sistema e il suo ambiente» Attori possono comunicare soltanto con le classi boundary» Forniscono una migliore comprensione del sistema poiché chiarificano i confini del sistema stesso» Generalmente vi è una classe boundary per ogni coppia attore/use-case che ha il compito di coordinare le interazioni tra l attore e il sistema 68

22 Classi Boundary» Diversi tipi > User interface: -intermediano la comunicazione con l interfaccia umana del sistema -Bisogna concentrarsi su quale informazione viene presentata all utente e non sui dettagli della UI > System interface: intermediano la comunicazione con altri sistemi > Device interface: forniscono l interfaccia verso dispositivi che catturano eventi esterni Nelle classi System e device ènecessario concentrarsi su quali protocolli utilizzare e non come verranno implementati 69 Classi Boundary: Esempio Studente Registrazione per Corsi Sistema Catalogo Corsi FormRegistrazioneCorsi (from Design Mod... Sistema CatalogoCorsi 70

23 Classi Entity» Entity object rappresentano i concetti chiave del sistema oggetto di sviluppo» Memorizzano e gestiscono le informazioni del sistema, cioé mostrano la struttura logica dei dati» Generalmente non sono specifici di uno use-case ma possono far parte di tanti use-case» Vengono dedotti dal glossario, flusso degli eventi degli use-case e dalle astrazioni chiave (identificate nell analisi dell architettura) 71 Classi Entity» Metodo per determinare le classi entity > Utilizzare il flusso degli eventi e le astrazioni chiave come input > Dal flusso degli eventi sottolineare i nomi > Rimuovere i candidati ridondanti e vaghi > Rimuovere gli attori (non sono entità, sono esterni al sistema quindi non si modellano) > Rimuovere i costrutti di implementazione Attributi ed operazioni vengono determinati successivamente 72

24 Classi Entity» Esempio > Use-case: Registrazione per Corsi Studente (from Design Model) Offerta Corsi (from Design Model) Piano studi (from D esign Model) > N.B.: Anche se studente è un attore, il sistema mantiene informazioni sullo studente. 73 Classi Control» Coordinano il comportamento nel sistema» Definiscono la logica di controllo dello use-case, cioé implementano il flusso degli eventi» Generalmente uno use-case contiene una control class» Può non essere presente qualora un particolare use-case manipola soltanto informazioni» Use-case complessi possono avere più classi di controllo» Disaccoppiano gli oggetti entity e boundary rendendo quindi il sistema più tollerante ai cambiamenti e permette il riuso di oggetti entity tra i vari use-case 74

25 Classi Control Studente Registrazione per Corsi Sistema Catalogo Corsi Contro llerregistra zione 75 Da fare in Classe» Realizzare un Analysis Class Diagram a partire dagli use cases 2.1 e 2.2 nel file AlumniRequirements.pdf 76

26 Architetture per il Web con Conallen 77 Software Architecture definitions» Perry and Wolf, 92 (aspects): > Architecture is concerned with the selection of architectural elements, their interactions, and the constraints on those elements and their interactions necessary to provide a framework in which to satisfy the requirements and serve as a basis for the design. > Elements are divided into processing elements, data elements and connection elements» Garlan and Shaw, 93 (elements): > Architecture for a specific system may be captured as a collection of computational components -or simply components - together with a description of the interactions between these components - the connectors -» Sommerville, 7th edition, 04 (process): > The design process for identifying the sub-systems making up a system and the framework for sub-system control and communication is architectural design. The output of this design process is a description of the SA. 78

27 Example of complex architectures: Eclipse Architecture Plugin Development Environment Core Workspace Runtime User Interface SWT Workbench JFace Java Development Tools 79 The DCOM Architecture Client Server COM Class Implementation Application Layer Object Proxy Interface COM proxy Library SCM Registry Microsoft RPCs OXID Resolver SCM Registry OXID Resolver Object COM stub InterfaceLibrary stub OXID Object Presentation Layer Session Layer» The Presentation layer is responsible for marshalling and unmarshalling and create or locate an interface pointer to clients» The Service Control Manager (SCM) is responsible for activation» The OXID is the protocol representing the how to communication information 80

28 TELECOM ITALIA NETWORK ARCHITECTURE ADM ADM ADM ADM ADM ADM WL WL WDM WL WL ADM ADM ADM STM-16 Ring STM-16 Ring ADM ADM ADM National Level ADM ADM ADM ADM ADM ADM SXA ADM STM-4/16 ADM Regional level SXC SXA 4/1 4/1 ADM STM-4/16 ADM STM-4/16 ADM SXA ADM ADM STM-1/4 ADM ADM Urban Level ADM ADM ADM STM-1/4 ADM ADM ADM STM-1/4 ADM ADM 81 Architetture» In precedenza, abbiamo introdotto il concetto di architetture software e architetture Web» In particolare, abbiamo visto: > Client-Server > Three Tier» Ora vediamo quali sono le architetture Web che vengono prese in considerazione nell approccio WAE di Conallen 82

29 Quindi...» Esistono alcuni pattern architetturali di riferimento: > Thin Web Client; > Thick Web Client; > Web Delivery» Ne esistono altri, ma questi sono quelli analizzati in [Con_Book] 83 Thin Web Client» Questo pattern viene usato per clients nei quali si possa garantire solo una bassa configurazione» Il client richiede solo un browser, abilitato ad usare forms» Adatto per clients con bassa capacita di computazione» Adatto per applicazioni B-2-C 84

30 Componenti (1/2)» Client Browser: > lavora come una user interface > l utente richiede pagine html dal server > l unico servizio a disposizione e quello relativo all accettaz. di cookies» Web Server: > e il punto di contatto tra pagine Web e Client > puo contenere degli script (CGI) > fornisce i risultati in un formato HTML visibile sui browsers» HTTP connection: > e il protocollo di comunicazione usato > SSL puo essere usato per incrementare la sicurezza del sistema» HTML page: > non ha bisogno di alcuna computazione da parte del Server > viene spedita dal Server al Client, cosi com e 85 Componenti (2/2)» Server Page: > Sono pagine web prodotte dal Server Web, tramite l utilizzo di risorse Server-side > hanno solitamente accesso a Dbase, business logic components, legacy systems > Tecnologia ASP, JSP,...» Application server: > puo risiedere in una macchina differente dal Server > si occupa della business logic > e una applicazione indipendente dal Server Web, che ha il compito di computare risultati utilizzando le risorse a disposizione 86

31 Figura Architettura Thin Web Client 87 Dinamica di un Thin Client 1. Il client attiva il processo, richiedendo una pagina tramite HTTP 2. se la richiesta consiste semplicemente in un Html file o un Web server filesystem file, il server semplicemente spedisce la pagina 3. se la pagina contiene uno script, il Server Web invoca l application server, il quale interpreta lo script e interagisce con risorse server side per produrre i risultati attesi 4. le informazioni vengono formattate in modo che siano comprensibili dal browser, ed inviate al client sotto forma di Web page. 88

32 Alcune considerazioni» Questo tipo di architettura e adatta per applicazioni che rispondano in un certo time-limit (pochi secondi)» non e adatta per servizi con tempi di esecuzione elevati al limite si usa un polling periodico» permette una limitata abilita nello sviluppare interfacce utenti, visto che l informazione deve essere presentata usando le capacita del browser 90 Thick Web Client» Si aggiungono client-side script e oggetti, come controlli ActiveX e applets.» E quindi piu di una semplice interfaccia utente» Richiede la possibilita di utilizzare e configurare un client avanzato» permette delle capacita di presentazione piu elevate» Un esempio: validazione di dati immessi in input > invece di mandare il tutto al Server» Il browser si adatta alle capacita dell utente 91

33 Componenti» Thick Web Client = Thin Web Client +» Client script: > JavaScript o VBScript possono essere embedded nella pagina Html. Il browser ha la capacita di interpretare lo script» Documenti XML» Controlli ActiveX: > tali componenti, come i Com components, vengono downlodati dal Server sul Client ed eseguiti dal Browser. Hanno accesso alle risorse del client» Java applet: > componenti compilate downlodate dal Server con accesso ristretto a risorse del Client. Solitamente usate per aumentare la capacita di presentazione del Client e per computazioni lato client 92 Dinamica e Considerazioni Oltre la dinamica del thin client» il Thick client puo eseguire business logic senza richiedere l intervento del Server» Non tutti i browser supportano JavaScript o VBScript» I controlli ActiveX possono essere usati solo da browser Microsoft» Differenti browsers possono produrre differenti risultati 93

34 Disegno architetturale del Thick Web Client 94 Terza architettura: Web Delivery» Architettura con oggetti distribuiti» E ben oltre un sistema Web, in quanto tutto lavora a componenti puo essere visto come: > una applicazione Web che usa oggetti distribuiti > oggetti distribuiti con elementi Web» Permette di introdurre oggetti esistenti all interno di una applicazione Web» Il client puo eseguire business logic piu complessa» Pattern usato generalmente in combinazione con gli altri gia prensentati 95

35 Componenti Oltre a cio che abbiamo gia visto» La comunicazione non e piu solo HTTP» Uso di DCOM: > per invocare oggetti in modo distribuito tra macchine Microsoft» Uso di IIOP: > basato su ORB» Uso di RMI: > tecnologia Java per comunicazione fra componenti 96 Dinamica» Il Client e usato come interfaccia grafica, per invocare oggetti distribuiti» Gli oggetti comunicano indipendentemente dal browser, una volta chiamati» Le comunicazioni avvengono tramite RMI, IIOP e DCOM» Vantaggi: > Il client puo automaticamente downlodare componenti dal server > l utente non necessita installare software particolare, visto che il client scarichera cio che gli serve > Componenti sono automaticamente spedite al client» Limiti: > ci vuole una rete affidabile, vista la quantita di informazione che puo essere scaricata 97

36 Disegno Architetturale del Web Delivery 98

37 UML & WEb - Approccio WAE: Conallen - Master in Web Technology Corso di: Modellazione UML per il Web V Edizione 2008/09 Dipartimento di Informatica Università degli Studi dell Aquila Engineering Sanità Enti Locali, Energee3, Gruppo Imola, Maggioli Informatica, Micron Technology, Nous Informatica, SED, Technolabs, Taiprora, Tomato Interactive Copyright Notice» Il materiale riportato in queste slide puo essere riutilizzato, parziale o totalmente, a patto che le fonti e gli autori vengano citati Henry Muccini 2

38 Conallen» Conallen presenta un processo di sviluppo di applicazioni Web basato su > RUP e ICONIX > Architecture Centric» Vedremo nel seguito una > introduzione al RUP > una descrizione di cosa sia una Architettura per applicazioni Web > Approccio di Conallen per la modellazione di applicazioni Web tramite UML - Uso dei Meccanismi di estensione di UML > Tool support > Esempio 3 Approccio di Conallen per il Web 4

39 Conallen» Considera tutto il processo: > Requisiti > Analisi > Design > Implementazione» Implementa il RUP per applicazioni Web 5 Conallen Core Workflows Inception Elaboration Construction Transition Requirements Analysis An iteration in the elaboration phase Design Implementation Test Preliminary Iteration(s) iter. #1 iter. #2 iter. #n iter. #n+1 iter. #n+2 iter. #m iter. #m+1 Iterations 6

40 Requisiti» Requisiti funzionali di applicazioni Web sono catturati e modellati tramite Use Cases;» Come nello sviluppo tradizionale, Use Case D. hanno l obiettivo di presentare graficamente ed esplicitare tramite templates, gli obiettivi funzionali da raggiungere» Use Case diagram sono usati per guidare i seguenti passi nel processo di sviluppo Web > Web actors identification - WebAdministrator, Browser, OnlineCustomer, Registered (unregistered) User > Web-related Use cases» Uso di Sequence Diagram > Ad altissimo livello 7 Analysis» L attivita di analisi consente di trasformare i requisiti del sistema in un progetto» Gli obietti dell analisi degli use case sono: > Identificare le classi e gli oggetti che esibiscono il comportamento descritto negli use case. > Identificare le responsabilità, gli attributi e le associazioni delle classi. > Rilevare l utilizzo dei meccanismi architetturali» A questo livello si identificano delle analysis class, che sono delle classi concettuali, astratte. 12

41 Look and Feel 13 Look and Feel Possiede 14

42 Look and Feel 15» Le analysis class possono essere stereotipate in tre tipi: boundary, entity e controller > Boundary object: - rappresentano l interfaccia tra l attore ed il sistema. - Istanze di questi oggetti sono tipicamente maschere di input o controlli all interfaccia utente. - Nelle applicazioni Web, i boundary object possono anche rappresentare delle intere pagine Web. > Entity object: - esempi di entity object, le cui istanze possono apparire in più invocazioni di use case, sono ordini, clienti, prodotti, ecc. - Nelle applicazioni Web, rappresentano i dati > Controller object: - rappresentano processi. - Questi oggetti rappresentano delle attività di sistema alle quali può essere attribuito un nome. - I controller object tipicamente dirigono le attività degli entity e dei boundary object. 16

43 Analysis» Elementi dell Analysis model: > Boundary: interfaccia grafica > Entity: dati > Control: attivita» Rules: R1: Actors interagiscono solo con boundary obj R2: Entity interagiscono solo con controller obj R3: Controller interagiscono con tutti 17» R1: Actors interagiscono solo con boundary obj B» R2: Entity interagiscono solo con controller obj E C» R3: Controller interagiscono con tutti B C 18 E C

44 Dai Requisiti all Analysis» Per passare dai Requisiti all Analysis, si seguono i seguenti passi: > Per ciascun Use Case, si identificano le Analysis class che le possono realizzare - Per ciascuna classe, si identifica il tipo (boundary, control, entity) > I sequence ad altissimo livello realizzati prima, vengono trasformati in sequence dettagliati 19 Dagli Use Case alle Analysis class 20

45 Dai Sequence dei Requisiti ai Sequence di Analysis 21 R1: Actors interagiscono solo con boundary obj R2: Entity interagiscono solo con controller obj R3: Controller interagiscono con tutti R1 R2 R2 R2 R3 22

46 Ricerca Anagrafica Personale B E C Utente Generico R1 Home Uffici Giudiziari Gestione Anagrafica Personale Ufficio Qualifica Form di Ricerca Personale Ricerca Persone Parametr i Ricerca Insuff. Persona Ufficio Qualifica Incarico Risultato Ricerca Persone Naviga Visualizza RicercaAnagr. Pers. RicercaAnagr. Pers. Visualizza Inserisce Param. Ricerca R2 Get Entry Build Submit RicercaPersone ControllaParametri Visualizza Visualizza [Param. Insufficienti] Redirect R2 [Param. OK] Get Entry Build 23 Altri diagrammi nella fase Analysis» Altri diagrammi: > Packages > Sequence diagram > Activity diagram 24

47 Lessons Learned» Analysis model classes can be elicited starting from: > Single Use Cases - Merge is required > Use Case Diagrams» Traceability among Use Cases and Analysis classes is a must» The boundary-control-entity pattern provides a very usefull schema for modeling modern Web applications (E.g., MVC patterns) 25 Esempio da fare in classe» Alumni» Agenda di eventi via Web: > consente di selezionare una data in una pagina Web. L applicativo Web visualizza, in un apposita finestra della pagina, l elenco delle attività programmate per quella data. > La funzionalità può essere implementata attraverso un frameset, contenente una client page a partire dalla quale può essere selezionata la data ed un target nel quale verrà visualizzato l elenco delle attività programmate per la data selezionata. > Il meccanismo di scelta della data è realizzato attraverso il client object Calendario (implementato per mezzo di un ActiveX control), contenuto nella client page. > Ogni volta che l utente seleziona una data, l elenco delle attività visualizzate nel target viene aggiornato, attraverso un link ad un apposita server page incaricata di creare la pagina con il dettaglio delle attività. 26

48 Design» Input: > Architettura Web > Analysis model (Class + Sequence)» Goals: > Elaborare le classi > Partizionare gli oggetti in tiers (Architettura) > Separare e definire interfacce - Web page: client e server pages» Component diagram 27 Look and Feel 28

49 Look and Feel 29 Design = Analysis+Architettura+Pagine» Questa e la fase in cui l approccio di Conallen piu si specializza per il Web, legando la fase di Analysis con quella architetturale > l analysis model viene raffinato, in modo tale che possa essere implementato con le componenti dell architettura > Le classi diventano meglio definite, con la specifica completa delle proprietà (nomi e tipi) e delle operazioni (signature complete).» Si definiscono le Web pages 30

50 Design» Passi: > La definizione delle interfacce utente, o pagine Web > La suddivisione degli oggetti in tier, come client tier, server tier e così via.» Per poter partizionare gli oggetti nei vari tier, bisogna sapere quali tier si hanno a disposizione. Questo dipende dalle specifiche dell architettura» Tutti quanti i pattern architetturali delle applicazioni Web prevedono l uso delle pagine Web 31 Pagine Web» Il primo problema di modellazione che si presenta e come modellare pagine Web: > pagina Web puo contenere degli script che devono essere eseguiti sul server. > Per complicare ulteriormente le faccende, la stessa pagina può contenere una serie di script che vengono eseguiti sul client.» I modelli messi a disposizione da UML, da soli, non sono sufficienti ad esprimere tutte le sottigliezze che caratterizzano una pagina Web contenente degli script, per consentirne la rappresentazione in un class diagram. 32

51 Pagina Client e Pagina Server» Nota: Il comportamento di una pagina Web sul Server e differente dal comportamento della stessa sul Client: > Sul Server la pagina deve accedere le risorse del Server (dbase, file system, ) > Sul Client, la pagina deve essere invece collegata al browser, alle Applet, ActiveX controls,...» Modelliamo gli aspetti Server-side e Client-side come elementi diversi, da linkare 33 Soluzione: Estendere UML Uml Extension Mechanisms Object Constraint Language Tagged Value Stereotypes 34

52 Perche estendere UML? Class attrib1 attrib2 method1() method2() Web page» Tali differenze sono importantissime quando: > Si usano tool di modellazione - Controllori automatici della sintassi dei modelli > Si usano tool di analisi - Significati diversi 35 Idea» Creare uno stereotipo che ci definisce quali siano i campi caratterizzanti una pagina Web, le sue proprieta, i suoi attribuiti, i suoi modi di interagire con altre pagine Web <<Web Page>> MainPage attrib1 attrib2 property1() property2()» A seconda dell architettura scelta, una Web page puo avere delle diverse proprieta 36

53 Cominciamo» Vediamo ora come Conallen estende UML classico per modellare i tre tipi di architettura > Thin Client > Thick Client > Web Delivery» Cominciamo con l architettura Thin Client 37 Cosa otterremo» Aprire il file 16_Glossary.mdl 38

54 Class Diagram Design level <<include>> String-Util <<link>> +LetterEntry {BeginWith} 26 +LetterEntry 25 <<link>> GlossaryHome <<redirect>> {ErrDescription} GetEntries <<build>> {BeginWith} SearchForm <<submit>> sperrormsg <<redire... {ErrDescription} EntryListing <<build>> globa.asa SearchResults ProcessSearch 39 Sequence Diagram Design level 40

55 Architettura Thin Client con Conallen» In questa architettura, dobbiamo distinguere tra due diverse tipologie di pagine Web: > Client page, che possono interagire con dei form, per la raccolta di dati di input da inviare al server > Server page, che provvedono ad elaborare i dati (interagendo con altre risorse server-side) e costruiscono dinamicamente delle pagine con i risultati delle elaborazioni, - pagine che verranno inviate al client per la visualizzazione. 41 Client e Server page» Dobbiamo iniziare con il fare una distinzione tra Client page e Server page <<Web Page>> MainPage attrib1 attrib2 operation1() operation2() <<Client Page>> MainPage <<Server Page>> MainPage 42

56 Da Analysis model a Design model» Per passare da elementi dell Analysis Model a quelli del Design model ci si puo aiutare seguendo tali direttive: > trasformare i boundary object in delle client page > trasformare i controller object in delle server page > gli entity object invece, verranno probabilmente mappati in una serie di server component 43 Relazioni tra Client e Server page» Relazione fondamentale: <<build>> > La pagina Server, dopo avere elaborato i dati,esegue un build della pagina Client > E una relazione unidirezionale 44

57 Relazione di <<redirect>>» Relazione di <<redirect>> > consiste nella possibilità di redirezionare la gestione di determinate richieste da una server page ad un altra 45 Esempio: da Analysis class diagram a design class diagram R1 R2 R2 R2 R3 46

58 47 48

59 Form» Un form èuna raccolta di elementi di input» Un form può esistere soltanto nel contesto di una client page» La relazione esistente tra un form e la client page che lo contiene è la relazione di aggregazione > Una client page puo contenere piu form» La relazione esistente tra un form e la pagina Web che lo elabora, viene espressa nel modello attraverso un associazione con lo stereotype «submits»

60 Link» Un link in un applicazione Web rappresenta un percorso di navigazione attraverso il sistema» Questa associazione ha origine sempre da una client page e punta ad un altra client page oppure ad una server page 51» I link possono anche contenere dei parametri (<<parameter>>), destinati ad essere utilizzati da parte della server page: > Nell esempio, il parametro identifica la persona di cui si vogliono i dettagli 52

61 Frame» I frame sono implementati in HTML definendo un frameset > I frameset sono rappresentati nel modello attraverso una client page con lo stereotype «frameset»» Il meccanismo utilizzato per referenziare frame in un frameset e il target > I target sono rappresentati tramite «target» - Un target non ha proprietà o attributi, è semplicemente un contenitore per una client page, referenziabile da parte di altre client page» In conclusione, un frameset può essere considerato come un aggregazione di client page e di target 53 54

62 Architettura Thick Web Client con Conallen» In questo pattern architetturale anche il Client puo eseguire delle computazioni» In generale, si tratta di computazioni su risorse residenti esclusivamente al lato client > E.g., validazione sui dati in input» Bisogna quindi modellare: > le componenti dell applicazione lato client > le relazioni tra queste componenti e le altre risorse client-side» client-side scripting e client object 55 Client-Side Scripting» Con client-side scripting s intende il codice (generalmente JavaScript o VBScript) che consente di arricchire le funzionalità offerte dalla pagina» Stereotype utilizzato: > «client-side script» (o equivalentemente «JavaScript», o «VBScript»), associata alla client page contenente lo script. Nota: Nei Sequence diagram, l esecuzione di un client-side script da parte di una client page viene rappresentato attraverso l invocazione di un operazione su client stesso 56

63 Esempio: pagina ricerca anagrafica 57» Thin Web client: > Tutta la computazione viene eseguita sul Server» Thick Web client: > I controlli possono essere fatti sul client - Immissione parametro - Controlli sintattici 58

64 Client Object» Generalmente ActiveX o applet Java» Stereotype «ActiveX control», o «Java applet».» La relazione esistente tra un client object e la client page che lo contiene è la relazione di aggregazione 59 Architettura Web Delivery con Conallen» Il Web Delivery Architectural Pattern è essenzialmente un sistema ad oggetti distribuito che è basato su un sito Web.» La differenza principale tra il Web Delivery e gli altri pattern architetturali è il metodo di comunicazione tra client e server > E.g., DCOM, IIOP, RMI» Per modellare un Web Delivery in UML, bisogna aggiungere delle estensioni per modellare protocolli di comunicazione tra client e server diversi da HTTP > <<DCOM>>, <<IIOP>>, <<RMI>> 61

65 Component Diagram» Una componente rappresenta a tutti gli effetti un file (generalmente un file ASP, JSP, PHP) che può essere richiesto dal Web server e che realizza almeno una server page o una client page» Una componente è qualcosa che realizza un insieme di interfacce.» Questa vista del modello esprime i moduli software e gli eseguibili, attraverso i quali il sistema verrà distribuito 62 Component Diagram» Associamo le classi a delle componenti implementative <<Server>> <<build>> <<Client>> GetShopping Cart Shopping Cart <<link>> <<Server>> Checkout ShoppingCart.asp Checkout.asp 63

66 Lessons Learned» The design transformation rules (boundary to client pages, controller to server pages) works well for ASP components» In MVC, instead: > There are at least two server pages for each controller (one S.P. for coordinating the business logic, another S.P. for creating the interface) > The two S.P. are related via a <<redirect>> association» Data modeling is performed via J2EE specific patterns 64 Da Fare in Classe» Uso di Magic Draw per modellare Analysis e Design class models di Conallen 65

67 Implementation» Nella fase di implementazione > Il design deve essere mappato sul codice e componenti - Tutti i diagrammi finora realizzati ci devono aiutare nella fase di implementazione > Gestione delle modifiche tramite reverse engineering - Bisogna tenere allineati i modelli ed il codice 66 Mapping del design sulle componenti» Per implementare Server Pages possono essere adottate due strategie: > Compiled Page - Una compiled page ha generalmente il ruolo di implementare piu server page - 1 componente piu server pages > Scripted Pages - Una componente realizza una server page - 1 componente 1 server page 67

68 Coding» Per iniziare la fase di mapping design-codice, si: > Prende il modello del design > Prende il modello delle componenti > Identificano le componenti reali che implementeranno le pagine identificate 68 Suddivisione in Package» Web Pages tenute separate da Server Components» Web Page package: > Astrazione di una directory sul Web Server > Le informazioni sulla directory (nome e locazione) sono memorizzati nei tagged value del package Web Pages Server Components 69

69 Web pages package Browsing <<include>> <<link>> +LetterEntry {BeginWith} 26 +LetterEntry 25 String-Util <<link>> GlossaryHome <<redirect>> {ErrDescription} GetEntries <<build>> {BeginWith} SearchForm <<submit>> sperrormsg <<redire... {ErrDescription} EntryListing <<build>> globa.asa SearchResults 70 ProcessSearch Browsing +LetterEntry GlossaryHome <<link>> +LetterEntry {BeginWith} 26 GetEntries SearchChar : String nl : String <<include>> String-Util Main() GetEntries() WriteEntry(id : long, word... : string, description : string, bgcolor : String) WriteLetterIndex() 25 <<link>> {BeginWith} <<redirect>> {ErrDescription} <<build>> sperrormsg EntryListing SearchForm <<submit>> <<redire... {ErrDescription} <<build>> globa.asa SearchResults 71 ProcessSearch

70 Code» Apri file 16_GetEntries.asp 72 User experience Model 75

71 User experience» Rappresentano delle estensioni, apportate da Conallen nella seconda versione del libro» Catturano il look and feel : > possibili scenari che l utente attraverserà durante la navigazione > diagrammare le possibili strade che sarà possibile imboccare durante la visita del sito» Tre concetti nuovi: > Screens and Content > Storyboard scenarios > Navigational paths attraverso gli screens. 76» Screen: > uno screen èprecisamente ciò che è presentato all utente - La combinazione dei contenuti statici e dinamici produce lo screen» Storyboard scenario: > Ordine di visita degli screen > Lo scopo finale degli Storyboard scenarios èdi esprimere un uso tipico del sistema attraverso gli occhi dell utente» Navigational Path map: > struttura degli screens di un applicazione insieme alle possibili strade che possono essere percorse > mappa stradale degli screens dell applicazione 77

72 Esempi» Screen: - Émolto importante realizzare un mapping fra gli screens e gli elementi utilizzati in fase di analisi per mantenere la tracciabilità 78 Esempi» Storyboard scenario: > modellato in UML tramite un collaboration diagram 79

73 Esempi» Navigation path map: > In UML è possibile esprimerlo mediante un class diagram che mostra le classi (=screen) ed i principali percorsi fra di esse > Se uno screen risulta collegato con un altro significa che è possibile accedere al secondo 80 81

74 Tool Support and Bibliography» IBM Rational tools and Magic Draw contain the Conallen stereotypes» Visio Stencils»» Building Web Applications with UML 2nd edition. The Addison-Wesley Object Technology Series. Jim Conallen > [Con_ACM99] Modeling Web Application Architectures with UML Jim conallen, Rational Software, June 1999 In the October 1999 (volume 42, number 10) issue of Communications of the ACM. On line at > [ConExt] UML Extension for Web Applications 0.91 Jim conallen. > [UML2000] Modeling Web Applications in the UML UML2000 Workshop. Workshop home page: 82 Riassumendo 83

75 Conallen» Basics: > Basato sul RUP > Guidato fortemente dall architettura dei sistemi Web» Fasi: > Requisiti, Analisi, Design, Implementazione» Concetti base: > Pagina Web, che funge da legame tra Architettura e gli Analysis model, tramite partizionamento di oggetti in tiers > Stereotype 84» Idea: Utilizzare UML stereotipato per rappresentare gli elementi di un Sito Web,cioe» Oggetti Pagine Form» Relazioni Frame COM object Link Frame Content 85

76 Intuizione Un Sito e composto da pagine, che possono essere di tipo Client e Server. Una pagina puo contenere delle Form e puo far parte di un Frame Set. Piu pagine possono essere linkate tra di loro Page Link Page Page Frame Frame 86 ServerPage: Metamodel Class: Descrizione Class nel Class Diagram Rappresenta una pagina Web con degli Script. Tali script possono interagire con le risorse disponibli sul Server Icona Attributi Operazioni Vincoli Sono le variabili funzioni degli script Le Server Page possono solo essere collegate ad oggetti nel Server 87

77 ClientPage: Metamodel Class: Descrizione Class nel Class Diagram Rappresenta una pagina formattata in Html. E un mix di dati, grafica e link.possono essere linkate a ClientPage e ServerPage Icona Attributi Operazioni Vincoli Sono le variabili nei tag Tag degli script Nessuno 88» Nota: Il comportamento di una pagina Web sul Server e differente dal comportamento della stessa sul Client: > Sul Server la pagina deve accedere le risorse del Server (dbase, file system, ) > Sul Client, la pagina deve essere invece collegata al browser, alle Applet, ActiveX controls,...» Modelliamo gli aspetti Server-side con una classe e quelli Client-side con un altra e leghiamo con il <<build>> le due pagine (Separation of Concerns) 89

78 Form: Metamodel Class: Descrizione Class nel Class Diagram Una form e una collezione di campi di Input che fanno parte di una ClientPage Icona Attributi Operazioni Vincoli Campi di Input Nessuna (non possono essere incapsulate in una form) Nessuno 90 FrameSet: Metamodel Class: Descrizione Class nel Class Diagram Un Frame set e un contenitore di piu pagine Web. Un Frame Set puo essere una Page o un altro FrameSet Icona Attributi Operazioni Vincoli Quelli di una Page Quelli di una Page Nessuno 91

79 Target: Metamodel Class: Descrizione Class nel Class Diagram E un particolare Frameo una nuova finestra del Browser linkata da altre pagine client Icona Attributi Operazioni

80 94 JavaScript: Metamodel Class: Descrizione Class nel Class Diagram Su browser che abilitano i JavaScript e possibile utilizzare tali oggetti. Possono esistere solo in ClientPage Icona 95

81 Link: Metamodel Class: Descrizione Association nel Class Diagram Un Linke un puntatore di una Client Page verso una Cliento una Server Page. I parametri che possono essere inviati vengono rappresentati tramite Tagged Values Icona << link>> 96 Build: Metamodel Class: Descrizione Icona Association nel Class Diagram Una Server Page <<build>> una Client Page nel senso che, ad ogni Clientpage deve essere acciata la relativa Server Page. Esempio: Server page = page dinamica, Client page = istanza della pagina dinamica << build >> 97

82 98 99

83 Page: Metamodel Class: Descrizione Componentnel Component Diagram Tramite questa vista descriviamo tutti i componenti (pagine Web) da sviluppare. Un component Diagram puo essere visto come una mappa del sito. Le componenti collegate in un ComponentDiagram verranno rappresentate come Classi linkate in un Class Diagram Icona 10 Master 0 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications 10 1

84 10 Master 2 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications Tool support 10 Master 3 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications

85 Visio Stencils 10 Master 4 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications Rational Rose» IBM Rational Rose include gli stereotipi di Conallen» Visual UML: > 10 Master 5 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications

86 Esempio 10 Master 6 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications Esempio» Prendendo ad esempio un sistema che permetta di eseguire acquisti on-line, tramite l utilizzo di un carrello» Vedremo come tale sistema puo essere modellato utilizzando le tre diverse architetture proposte precedentemente» Cercheremo di capire, quindi, quanto l architetture influenza il design 10 Master 7 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications

87 10 Master 8 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications Richieste del committente» Un utente, collegandosi al sito, deve poter effettuare degli acquisti on-line.» Gli articoli possono essere visti direttamente sul sito, con una lista delle caratteristiche e del prezzo. Tutti gli utenti possono eseguire tale visita» Gli articoli possono essere acquistati solo da utenti registrati» Dopo la selezione di un prodotto, il carrello dovra riportare la lista aggiornata dei prodotti da acquistare» Naturalmente, ci sono dei requisiti di sicurezza il sistema deve rispettare» Alla fine dell operazione di acquisto, si esegue un logon» La sessione deve rimaner valida finche l utente non esegue logon e comunque per non piu di xxx minuti» Master 9 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications

88 11 Master 0 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications Utilizzo di un Glossario» Ha il compito di: > identificare: - Pagine Web - Dati e Dbase - Applicativi» Analizzare: > l architettura del sistema, al fine di distribuire componenti ed assegnare le giuste tecnologie di sviluppo 11 Master 1 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications

89 Oggetti: glossario» Gli articoli possono essere visti direttamente sul sito, con una lista delle caratteristiche e del prezzo. Tutti gli utenti possono eseguire tale visita» Gli articoli possono essere acquistati solo da utenti registrati» Dopo la selezione di un prodotto, il carrello dovra riportare la lista aggiornata dei prodotti da acquistare 11 Master 2 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications Elementi del Modello» Pagine lato Client: > Pagina Iniziale con possibilita di login > Pagina di Login (input) > Pagina di Errore nella Login (statica o dinamica) > Pagina con link ai prodotti (link statico o dinamico) > Pagina di ricerca sui prodotti (risultato dinamico) > Pagina di Logout 11 Master 3 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications

90 Thin Web Client 11 Master 4 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications Ora Conallen» Le informazioni catturate nel passo precedente aiutano la definizione architetturale,» aiutano la formalizzazione di un Class Diagram» permettono di avere una visione globale sugli oggetti da modellari, suddivisi in tre categorie, rappresentanti: > contenuto > presentazione > business logic 11 Master 5 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications

91 Class D 11 Master 6 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications 11 7

92 11 Master 8 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications Thick Web Client 11 Master 9 in Web Technology V Edizione 2008/09 Henry Muccini: UML for Web Applications

93 12 0