Applicazioni web-based. Progettazione di Sistemi Interattivi. Implementazione di sistemi interattivi web-based (prima parte) Gli Standard Web

Transcript

1 Progettazione di Sistemi Interattivi Implementazione di sistemi interattivi web-based (prima parte) Docente: Daniela Fogli Applicazioni web-based Il World Wide Web (W3C) [ Fondato da Tim Berners-Lee nel 1994 Ha lo scopo di sovraintendere l evoluzione tecnica del web con 3 obiettivi principali: 1) Fornire accesso universale, per renderlo fruibile a tutti 2) Sviluppare protocolli e linee guida per assicurare la crescita del web 3) Guidare l evoluzione del web, prendendo in considerazione le questioni legali, sociali e commerciali Ogni nuova versione di una specifica tecnologia web viene esaminata dal W3C prima di diventare uno standard 2 Gli Standard Web Ogni standard ha un preciso processo di sviluppo: da bozza di lavoro (working draft), a candidatura (candidate recommendation), a stadio di proposta (proposed recommendation), fino a standard operativo (W3C recommendation) Ad ogni stadio del processo, i membri del consorzio W3C, votano quali emendamenti effettuare o se cancellare completamente lo standard e rimandarlo indietro perché venga riformulato Esempio: le specifiche HTML e HTTP sono soggette a questo procedimento e ogni nuova serie di aggiornamenti produce una nuova versione dello standard 3 Gli standard web: XML Extensible Markup Language (XML), standard per creare linguaggi di markup (meta-linguaggio) Attualmente è Standard W3C nella versione 1.0 Un documento XML è un file di testo che contiene una serie di tag (componenti logici detti elementi), attributi e testo secondo regole sintattiche ben definite Il contenuto è caratterizzato da struttura gerarchica Usato per la rappresentazione e lo scambio di dati: solo testo, quindi compatibile con diverse piattaforme (interoperabilità) Ma si può usare per descrivere ambienti interattivi 4

2 Definire un linguaggio XML-based Se si crea un linguaggio di markup, si deve creare l insieme di regole con cui comporre gli elementi (come usare i tag definiti e gli attributi) Si deve dunque definire una grammatica attraverso un DTD (Document Type Definition) o XML Schema: definizione di vocaboli (elementi), struttura (gerarchia elementi), attributi XML Schema segue la sintassi dell XML, DTD no DTD o XML Schema consentono di verificare la validità dei documenti scritti con il linguaggio di markup definito XML ben formato e valido Per documento XML ben formato si intende un file di testo scritto in modo sintatticamente corretto rispetto alle regole della sintassi XML Un documento XML è detto valido se è ben formato ed inoltre rispetta i tag e le norme di nidificazione impostate nel DTD (o XML Schema) corrispondente 5 6 Documento ben formato: regole sintattiche Deve contenere un elemento di massimo livello (root) che contenga tutti gli altri elementi all esterno solo direttive (come la dichiarazione della versione XML) e commenti Ogni elemento deve avere un tag di chiusura (o prevedere, se vuoti, la forma abbreviata /> ) Gli elementi devono essere nidificati in modo appropriato (i tag di chiusura devono seguire l ordine inverso dei rispettivi tag di apertura) I tag sono case sensitive ci sarà quindi anche una verifica in questo senso sui tag di apertura e di chiusura I valori degli attributi devono essere sempre racchiusi tra o 7 Utilizzo di un documento XML Lo standard XML non definisce solo il modo in cui scrivere i documenti XML ma anche il modo in cui debbano essere utilizzati Per utilizzare un documento XML si deve avere a disposizione un XML processor e un applicazione Con XML processor (o parser XML) si intende un modulo software utilizzato per leggere un documento XML e che fornisce accesso a contenuto e struttura del documento Per applicazione si intende il modulo software per conto del quale l XML processor lavora Quindi, un documento XML per poter essere utilizzato da un applicazione necessita di un operazione preliminare, effettuata dall XML processor, che lo renda comprensibile ed accessibile dall applicazione stessa 8

3 documento XMLbased Schema di utilizzo di un documento XML DTD o XML Schema XML processor albero DOM del documento XML applicazione L XML processor legge il documento XML e ne controlla sintassi e struttura logica in base alle regole fornite dal DTD o XML Schema Se durante tale controllo l XML processor non rileva errori, viene creata una struttura di memoria, l albero DOM, rappresentante il documento XML Gli standard web: il DOM Il Document Object Model stabilisce un modello ad oggetti per rappresentare, accedere e trattare un documento XML Il DOM prevede che un documento XML sia rappresentato con una struttura logica ad albero basato sulla relazione part_of, nella quale gli elementi del documento vengono tradotti in nodi Il DOM stabilisce che ogni nodo sia un oggetto standard, nell accezione di oggetto utilizzata nella programmazione orientata agli oggetti, corredato da metodi (Application Programming Interface API ) Tale struttura viene passata all applicazione che la utilizza 9 10 Uso delle API Vantaggi del DOM Le API sono metodi standard che permettono l accesso e la modifica delle informazioni contenute nel nodo e la manipolazione dell albero stesso Attraverso le API si possono: aggiungere, cancellare o spostare i nodi dell albero leggere le proprietà di un nodo in modo che un applicazione le possa utilizzare modificare le proprietà di un nodo Prima dell avvento del DOM, tutti i processori XML interagivano con i documenti XML in modi diversi ed erano inoltre soggetti a continue modifiche Con l avvento del DOM è stata raggiunta una maggiore stabilità e uniformità Si possono usare processori XML fatti da altri che restituiscono un DOM manipolabile dall applicazione 11 12

4 I nodi di un albero DOM (1) I nodi di un albero DOM (2) Ogni documento XML è caratterizzato dall avere un elemento che contiene tutti gli altri elementi del documento Nella rappresentazione ad albero, tale elemento viene detto nodo radice e rappresenta l origine dell albero stesso Chiamiamo poi padre il nodo posizionato immediatamente sopra ad un altro I figli sono i nodi posizionati immediatamente sotto ad un altro nodo I nodi allo stesso livello e con lo stesso padre sono detti fratelli I discendenti di un nodo sono dati dall insieme di tutti i nodi appartenenti al sottoalbero con origine nel nodo considerato, mentre gli antenati di un nodo sono i nodi che si incontrano risalendo l albero fino alla radice 13 Gli attributi degli elementi XML vengono trasformati in proprietà dell oggetto nodo corrispondente all elemento Il contenuto testuale dell elemento XML viene trasformato in un nodo di tipo testo ed inserito come primo figlio del nodo corrispondente all elemento considerato I nodi di tipo testo si differenziano dagli altri nodi perché non possono avere figli e sono quindi gli elementi terminali dell albero (foglie) Gli elementi contenuti in un altro elemento vengono trasformati in oggetti di tipo nodo ed inseriti come figli del nodo corrispondente all elemento considerato 14 Esempio bottoniera Struttura logica id = b1 <bottoniera id= b1 > DOM <bottone onclick= salva() > salva <immagine path= salva.gif /> </bottone> bottone <bottone> chiudi </bottone> </bottoniera> onclick = salva() Brano di documento XML salva immagine path = salva.gif bottone chiudi Accesso all albero DOM Le API permettono di accedere e modificare la struttura dell albero e gli attributi dei vari nodi Supponendo che l intero documento XML che contiene la struttura precedente sia identificato da una variabile di nome document, è per esempio possibile individuare l elemento <bottoniera> con il comando: Il nodo radice corrisponde all elemento <bottoniera>, I due elementi <bottone> sono i figli del nodo bottoniera e sono tra loro fratelli Il contenuto testuale degli elementi <bottone> è stato inserito come nodo di tipo testo Il nodo <immagine>, figlio del primo bottone, è stato inserito come nodo di tipo elemento Gli attributi sono stati aggiunti come proprietà al nodo corrispondente 15 bottoniera = document.getelementbyid( b1 ); Valore dell attributo id della bottoniera 16

5 Modificare l albero DOM E possibile modificare gli attributi del nodo individuato, ad esempio: bottoniera.setattribute( id, b2 ); L albero dopo le modifiche Il risultato dei comandi precedenti porterebbe ad avere la struttura seguente, in cui il nodo bottoniera ha un valore diverso per l attributo id e non è più presente il primo figlio del nodo bottoniera E possibile modificare la struttura dell albero eliminando un figlio dell elemento <bottoniera>: bottoniera.removechild(bottoniera.childnodes.item(0)); <bottoniera id= b2 > <bottone> chiudi </bottone> </bottoniera> bottoniera id = b2 bottone chiudi Il DOM standard Come si fa a manipolare il DOM? Il W3C fornisce una serie generica di oggetti, proprietà e metodi, che dovrebbero essere previsti da tutti i linguaggi di scripting (e.g. JavaScript, VBScript, ), sotto forma di DOM standard Ha una struttura a più livelli Come manipolare il DOM Oggetti base del DOM Node ogni elemento nel documento diventa un oggettonode NodeList elenco di oggetti Node NamedNodeMap fornisce l accesso per nome a tutti gli oggetti Node Esistono vari oggetti di tipo nodo (vedi diapositiva successiva): ognuno eredita le proprietà e i metodi dell oggetto Node, e aggiunge alcune proprietà e metodi propri 19 20

6 Tipi di nodo nel W3C DOM L oggetto Node:Alcune Proprietà nodename Document Il nodo corrispondente alla radice fornisce il nome del nodo nodevalue DocumentType DTD o schema del documento XML fornisce il valore del nodo DocumentFragment Spazio provvisorio di memoria per parti del documento nodetype EntityReference Rimando a un entità nel documento XML fornisce il tipo di nodo (elemento, testo, attributo, documento, ) Element Un elemento nel documento childnodes fornisce un elenco di nodi contenente i nodi figlio del nodo corrente Attr Un attributo di un elemento nel documento parentnode ProcessingInstruction Un comando di elaborazione fornisce il nodo genitore Comment Un commento in un documento XML firstchild Text Testo che deve formare un nodo figlio di un elemento fornisce il primo nodo del nodo corrente lastchild CDATASection Una CDATA section all interno del documento XML fornisce l ultimo nodo del nodo corrente Entity Un entità non analizzata nel DTD previoussibling Notation Una notazione dichiarata all interno di un DTD fornisce il precedente nodo di pari livello del nodo corrente nextsibling Vediamo più in dettaglio Node e Document 21 fornisce il successivo nodo di pari livello del nodo corrente 22 L oggetto Node Metodi insertbefore inserisce un nodo figlio prima del nodo specificato replacechild sostituisce il nodo figlio specificato con il nuovo nodo figlio specificato removechild elimina il nodo figlio specificato appendchild aggiunge un nuovo nodo figlio all ultimo nodo figlio del nodo corrente haschildnodes è vero se il nodo corrente ha nodi figlio clonenode restituisce un nuovo nodo, che è una copia di quello corrente 23 L oggetto Document: un metodo utile <bottoniera id= b1 > <bottone onclick= salva() > salva <immagine path= salva.gif /> </bottone> <bottone> chiudi </bottone> </bottoniera> getelementbytagname(tag) restituisce un puntatore (elenco di nodi) a una serie di elementi che hanno la stessa etichetta di quella fornita nell argomento document.getelementbytagname( bottone ) restituisce un puntatore all elenco degli elementi bottone ogni elemento dell elenco è accedibile attraverso il metodo item() bottone_salva = document.getelementbytagname( bottone ).item(0) bottone_chiudi = document.getelementbytagname( bottone ).item(1) 24

7 Manipolare il DOM con ECMAscript Il linguaggio JavaScript è stato inizialmente una innovazione di Netscape Navigator, successivamente incluso in Microsoft Internet Explorer (denominato Jscript) I due linguaggi hanno varie differenze Una specifica standard: ECMAScript Proposta dalla European Computer Manifacturers Association (ECMA) Il nome ECMAScript è stato scelto per evitare riferimenti al produttore e perché Java è un marchio Sun Tutte le attuali implementazioni di JavaScript dovrebbero essere conformi allo standard ECMAScript e OOP Non rispecchia rigorosamente il paradigma della programmazione ad oggetti Qualcuno dice che è un linguaggio basato su oggetti Qualcuno dice che è un linguaggio orientato agli oggetti basato su prototipi Non prevede esplicitamente il concetto di classe L ereditarietà è pertanto fra oggetti (non fra classi) Gli oggetti ereditano le proprietà dai loro prototipi Mancanza di classi e costruttori // costruttore dell oggetto function MyObject(attributeA, attributeb){ //creazione e istanziazione degli attributi this.attributea = attributea; this.attributeb = attributeb; //creazione dei metodi this.metodo = funzionemetodo //codice del metodo metodo dell oggetto function funzionemetodo(){ alert( dentro funzione metodo ); //istanziazione dell oggetto var obj = new MyObject('red', 1000); 27 Ereditarietà da prototipi Creo e instanzio due oggetti car function car (plate, model, color){ this.plate = plate; this.model = model; this.color = color; var car1 = new car ( AB 123, Ford, blue ); var car2 = new car ( CD 456, Fiat, black ); car.prototype.price = 0; Qualsiasi oggetto car già creato o in creazione eredita la nuova proprietà e il suo valore 28

8 Simulare ereditarietà fra classi //costruttore della classe (termine improprio) madre function Base(){ this.override = _Override; this.basefunction = _BaseFunction; function _Override(){ alert("base::override()"); function _BaseFunction(){ alert("base::basefunction()"); //costruttore della classe (termine improprio) figlia function Derive(){ Ereditarietà di Derive this.override = _Override; da Base function _Override(){ e sovrascrittura metodo alert("derive::override()"); Override tramite instanziazione oggetto //assegnamento del prototipo della classe (termine improprio) d madre Derive.prototype = new Base(); //creazione dell oggetto 29 var d = new Derive(); ECMAScript ed eventi E usato spesso per scrivere funzioni che agiscono in risposta ad eventi generati da elementi appartenenti a una pagina web (event handler) <text id= testo onclick=funzionedaattivare(); > 30 Gli standard web: CSS Cascading Style Sheets (CSS) permettono di definire il look-and-feel della pagina da visualizzare Permettono di definire stili visuali da applicare agli elementi di una pagina: colore, bordi, immagini di background, grandezza, trasparenza, layout (disposizione di un elemento rispetto agli altri) Regola di stile costituita da 2 parti: selector (a quali elementi applicare lo stile) e style declaration Esempio di regola CCS: h1 { color: red 31 La tecnica AJAX AJAX: Asynchronous Javascript and XML Tecnica (insieme di tecnologie) per sviluppare applicazioni web interattive e dinamiche usando una combinazione di: HTML (o XHTML) e CSS: per presentazione DOM: per accedere agli elementi della pagina e gestire l interazione sul client XML per lo scambio e la manipolazione dei dati Javascript (ECMAScript): per manipolare il DOM localmente Oggetto XMLHttpRequest: per leggere/spedire dati dal/al server in maniera asincrona 32