Progettazione di Sistemi Interattivi Implementazione di sistemi by zwj23860

VIEWS: 44 PAGES: 8

									          Progettazione di Sistemi                               Oltre AJAX…
                 Interattivi                      • Separazione fra implementazione della parte
                                                    presentazione e implementazione della parte
                                                    applicazione
        Implementazione di sistemi                • Per la presentazione:
          interattivi web-based                                un linguaggio basato su XML
                          (seconda parte)         • Per l’applicazione:
                                                               un linguaggio di programmazione
                     Docente: Daniela Fogli                    tradizionale o un linguaggio di scripting

                                                                                                       2




                  Esempio: XUL                     Esempio: Adobe Flex e MXML
• XUL (“zool”) (XML
  User interface                                  • Flex: “Framework open source gratuito per la
  Language) di Mozilla                              creazione e gestione di applicazioni web
• Widget-based markup                               interattive implementabili uniformemente su tutti i
  language (vedi                                    principali browser, desktop e sistemi operativi”
  esempio)
                                                    http://www.adobe.com/it/products/flex/
• Usa JavaScript per la
  dinamica                                        • Usa linguaggio XML chiamato MXML
                                                    (Macromedia Flex Markup Language) per la
                                                    presentazione
                                                  • Usa ActionScript per la dinamica
                                              3                                                        4
             Un semplice esempio
                                                                              Esempio: WPF e XAML
              (senza dinamica)
                                                    Descrizione     • XAML (Extensible Application Markup Language)
<?xml version="1.0" encoding="utf-8"?>
                                                     MXML               – Definisce un insime di elementi XML come Button, TextBox,
                                                                          Label, …
<mx:Application
                                                                        – Permette definizione del look&feel di una interfaccia WPF
    xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalAlign="center" verticalAlign="center">                • WPF (Windows Presentation Foundation) –
                                                                      API grafica del Framework .NET 3.0
    <mx:Button id="myButton" label="I'm a button!" />                   – Consente di integrare grafici, contenuti multimediali, documenti, e
</mx:Application>                                                         gli altri controlli classici di un sistema WIMP (unica tecnologia)
                                                                        – Basato su grafica vettoriale anziché bitmap
                                                                    • C# o Visual Basic per la dinamica


                                                                5                                                                               6




          Canvas con un bottone                                     Una struttura ad albero e una lista
                                                   Descrizione
                                                    XAML            <Border xmlns="http://schemas.microsoft.com/winfx/avalon/2005">
                                                                        <DockPanel Background="silver" Margin="20" LayoutTransform="scale 2">
                                                                              <Menu DockPanel.Dock="Top">
<Border                                                                          <MenuItem Header="File" />
   xmlns="http://schemas.microsoft.com/winfx/avalon/2005">                       <MenuItem Header="Edit" />
   <Canvas Background="silver" Margin="20"                                    </Menu>
                                                                              <TreeView>
        LayoutTransform="scale 2">
                                                                                  <TreeViewItem Header="root1">
        <Button Canvas.Top="30" Canvas.Left="50">Hello world!                      <TreeViewItem Header="child" />
        </Button>                                                                 </TreeViewItem>
                                                                                   <TreeViewItem Header="root2“ />
   </Canvas>
                                                                              </TreeView>
</Border>                                                                     <ListBox>
                                                                                  <ListBoxItem>listBoxItem1</ListBoxItem>
                                                                                  <ListBoxItem>listBoxItem2</ListBoxItem>
                                                                              </ListBox>
                                                                        </DockPanel>
                                                                    </Border>



                                                                7                                                                               8
Interface Designer e System Developer
                                                  Binding con la parte applicativa
          allo stesso “livello”
                                                 <Application xmlns =
                                                    http://schemas.microsoft.com/winfx/2006/xaml/presentation
                                                    xmlns:x = http://shemas.microsoft.com/winfx/2006/xaml
                                                    StartupUri = “Page1.xaml”
                                                                                               L’attributo Class è
                                                    x:Class = “Example.SimpleApp”>
                                                 …
                                                                                              usato per identificare
                                                 </Application>
                                                                                              la classe che contiene
                                                                                                       il codice associato
                                                                                                         all’applicazione
                                                 <Canvas xmlns =
                                                    http://schemas.microsoft.com/winfx/2006/xaml/presentation
                                                    xmlns:x = http://shemas.microsoft.com/winfx/2006/xaml
         XAML consente di separare                  x:Class = “Example.CodeForCanvas”>
         progetto e sviluppo, migliorando           <Button Click=“Button_Click”>             Button_Click è il
         collaborazione fra interaction              Click here                                nome del metodo che
         designer e software developer              </Button>                                  gestirà l’evento click
                                            9                                                                     10
                                                 </Canvas>




 Sia per applicazioni standalone che             Dal modello di interazione PCL un altro
        per applicazioni web                      linguaggio di descrizione di interfacce

                                                          Comunicazione come base dell’interazione

                                                           interpretation                 materialization
                                                      H                        i (ti)                             C
                                                           materialization                    interpretation


                                                       i (t1)         i (t2)            ...            i (tn)



                                            11                                                                          12
             Il concetto di entità virtuale                                           Esempio di entità virtuale
• Le immagini sullo schermo i(ti) sono manifestazioni (fisiche, pittoriali)                                         Un’entità virtuale di tipo
  di entità virtuali                                                                                               “bench” (banco di lavoro)
                                                                                                                         composta da:
• Una entità virtuale è un sistema dinamico che esiste come risultato
  dell’interpretazione di un programma da parte di un computer                                                         un “operator set” di tipo
• L’intero sistema interattivo è un’entità virtuale, composta di altre entità
                                                                                                                           “navigation bar”
  virtuali                                                                                                             un “operator set” di tipo
                                                                                                                           “emoticon bar”
• La manifestazione di ciascuna entità virtuale è detta struttura
  caratteristica: un insieme di pixel sullo schermo che ha un significato                                                   un “infoSpace”
  funzionale o percettivo per l’utente
                                                                                                                            un “dataSpace”
                                                                           13                                                                          14




     Descrizione in IM2L (Interaction
     Multimodal Markup Language)                                                 Implementazione di sistemi interattivi
                                                                                           basata su IM2L
                                                                                • IM2L:
                                                                                  – Un linguaggio XML-based di descrizione di interfacce utente basato
                                                                                    sul concetto di entità virtuale

                                                                                • IM2L document:
                                                                                  – È la descrizione di un sistema interattivo specificando il contenuto e
                                                                                    la struttura logica delle entità virtuali che lo compongono
                                                                                    (descrizione astratta)
                                                                                  – E’ interpretato da un browser arricchito dell’opportuna applicazione
                                                                                    di materializzazione
                                                                                  – Quando viene interpretato dal browser, viene trasformato in una
                                                                                    struttura dati intermedia (albero DOM)
                                                                                  – Può essere materializzato secondo le esigenze dell’utente in un
                                                                                    contesto specifico
                                                                           15                                                                          16
            La materializzazione                                                      Gli standard web: SVG
• Attraverso un altro standard web: SVG                                     • La grafica SVG è vettoriale in quanto basata su un modello
• Scalable Vector Graphics (SVG): è un linguaggio di                          d’immagine vettoriale
  markup basato su XML per la descrizione della grafica a                   • Sono definiti tre tipi di oggetti grafici:
  due dimensioni                                                               – forme vettoriali (punti, linee, poligoni)
• E’ diventato W3C recommendation nel settembre 2001                           – immagini
• SVG è scalabile in due differenti modi:                                      – testo
   – dal punto di vista grafico: significa non essere limitati ad una       • Gli oggetti possono essere raggruppati in modo da
     singola e ben determinata dimensione espressa in pixel                   ottenere un qualsiasi oggetto grafico complesso
   – dal punto di vista del web: significa che la grafica SVG può           • Agli oggetti semplici e complessi si può associare uno stile
     essere pensata come formata dall’insieme di singoli oggetti grafici      o anche dei processi d’animazione, che ne modificano le
     prodotti da persone diverse che si trovano in luoghi diversi e molto
     distanti tra loro                                                        caratteristiche di materializzazione

                                                                       17                                                               18




 Raggruppare gli oggetti in SVG                                              La descrizione SVG di un’icona
• Per raggruppare gli oggetti si utilizza l’elemento <g>,                   <g id="tag_enjoyable">
                                                                               <circle cx="15" cy="15" r="13" fill="yellow" stroke="none" />
  tutti gli elementi che fanno parte di uno stesso gruppo sono                 <circle cx="10" cy="8" r="2" fill="black" stroke="none" />
  racchiusi tra i tag:                                                         <circle cx="20" cy="8" r="2" fill="black" stroke="none" />
                       <g> ... </g>                                            <path d="M15,11 L15,16" stroke="black" stroke-width="2" />
                                                                               <path d="M5,18 S15,32 25,18" fill="none" stroke="black"
• Gli oggetti che fanno parte di un gruppo ereditano tutte le                  stroke-width="2" />
  proprietà impostate per l’elemento <g>                                    </g>

• Quindi se l’elemento <g> viene scalato di un fattore 0.5,
  viene scalato ogni elemento del gruppo



                                                                       19                                                               20
                    SVG e Javascript:                                                                    Esempio:
                    animare la grafica                                                          oggetto SVG con animazione
 • E’ possibile associare una funzione script in
   linguaggio JavaScript agli eventi causati dall’utente
 • Ad ogni evento che l’utente può scatenare è
   associato un attributo d’interazione                                                    <g id=”bottone_automatico” transform="translate(0 0)"
                                                                                                  onclick="DoAutomatico(evt)">
     – Es. al click del mouse è associato l’attributo d’interazione                               <rect width="160" height="80" rx="5" ry="5"
       onclick                                                                                           fill="lightgrey" stroke="black" stroke-
                                                                                                         width="1"/>
 • Il valore dell’attributo d’interazione deve                                                    <text transform="translate(10 50)" fill="green"
   corrispondere alla chiamata alla funzione JavaScript                                                  font-size="28" font-family="Arial">
                                                                                                         Automatico
   desiderata                                                                                     </text>
                                                                                           </g>
                                                                                    21                                                                                22




               Esempio:                                                                                         Programma IM2L
      oggetto SVG con animazione                                                            •   Definisce un sistema interattivo – denominato BANCO
                                                                                                (Browsing Adaptive Network for Changing user Operativity) - e
function DoAutomatico(evt)                                                                      quindi anche la sua interfaccia -
{
       obj = getTarget(evt);                                                                •   Nella corrente implementazione è composto da:
       obj.childNodes.item(1).setAttribute(‘fill’, ‘red’);                                        a)   Starter SVG, mette in relazione il programma IM2L con il plug-
                                                                                                       in necessario alla materializzazione
}
                                                                                                  b)   IM2L document descrive il contenuto dell’interfaccia
 E’ possibile risalire all’elemento su cui è avvenuto l’evento mediante l’oggetto                 c)   Insieme di prototipi SVG, specificano la materializzazione delle
 standard di tipo evento evt                                                                           entità virtuali e le loro relazioni topologiche
 Tale oggetto contiene una serie di informazioni tra cui il tipo di evento, la posizione          d)   Insieme di funzioni javascript di istanziazione, implementano
 assoluta del mouse al momento dell’evento e il nodo DOM su cui è avvenuto                             le regole di materializzazione (istanziano i prototipi SVG con le
 Per risalire al nodo DOM corrispondente all’oggetto su cui si è cliccato si utilizza la               informazioni nel documento IM2L)
 funzione getTarget(evt)                                                                          e)   Insieme di funzioni javascript di gestione dell’interazione,
 Una volta risaliti al nodo che identifica il bottone, è possibile navigare all’interno                implementano la dinamica delle entità virtuali
 della struttura DOM fino ad arrivare al nodo testo che ci interessa e modificarne
 l’attributo ‘fill’ (il testo da verde diventa rosso)
                                                                                    23      •   Il browser dotato di plug-in SVG lo interpreta e materializza         24
                                           Esempio                                                                                     The user activates the SVG
                                                                                                                                      Starter within the web browser
                                                                                                                                                                         Il sistema: inizializzazione                                                     Web browser
                                                                                                                                                         IM2L Program
                                                                                                                                                                                                                                              application
                                                                                                                                                                                                       DOM tree of the
                                                                                                                                                   Starter SVG           1        XML *            2
                                                                                                                                                                                                        SVG starter    3             JavaScript Interpreter*
                                                                                                                                                                                 processor                                               as Inizializator

                                                                                                                                                                                              4


                                                                                                                                                    IM2L                                               DOM tree of the
                                                                                                                                                                         4        XML *            5                     6           JavaScript Interpreter*
                                                                                                                                                  document                                             IM2L document
                                                                                                                                                                                 processor                                              as Transformer


                                                                                                                                                                                             (n)        7
                                                                                                                                                                                                                                10


                                                                                                                                                                                                                    (n)              6
                                                                                                                                                                                                                                                11
                                                                                                                                           doc.        doc.       doc.   8        XML *            9   DOM tree of the
                                                                                                                                           SVG         SVG        SVG
                                                                                                                                                                                 processor             SVG prototype                        SVG DOM
                                                                                                                                              SVG prototypes                                                                                  tree

                                                                                                                                                  instantiation
                                                                                                                                                    functions                                                                                    12


                                                                                                                                                  interaction                          JavaScript Interpreter*                               viewer SVG
                                                                                                                                                   managing                            as Interaction Manager
                                                                                                                                                   functions


                                                                                                                      25                                                                                                                                         26
                                                                                                                                                                                                                                         Materialization of the
                                                                                                                                 *stesso programma usato in fasi diverse
(Denise Salvi, Tesi di Laurea, 2003)                                                                                                                                                                                                     initial state on the screen




                           Interazione che causa la sola                                                                                    Interazione che richiede caricamento di
                                                                                                                                                  un’entità virtuale secondaria
                                modifica del DOM                                                          Web browser
                                                                                                                                              IM2L      Program                                                                               application
                                                                                                                                                                                                                                                          Web browser


           IM2L Program
                                                                                                                                                   Starter SVG                    XML *                                              JavaScript Interpreter*
                                                                                                  application
                                           XML *                                                                                                                                 processor                                               as Inizializator
                Starter SVG
                                          processor                                        JavaScript Interpreter*
                                                                                               as Inizializator                                                                                        DOM tree of the
                                                                                                                                                    IM2L                 4        XML *            5                     6           JavaScript Interpreter*
                                                                                                                                                  document                                             IM2L document
                                                                                                                                                                                 processor                                              as Transformer
                                                                                                                                                                                              3
                 IM2L                      XML *
               document                   processor                                         JavaScript Interpreter*                                                                          (n)        7
                                                                                                                                                                                                                                10
                                                                                               as Transformer
                                                                                                                                                                                                                    (n)              6
                                                                                                                                                                                                                                                11
        doc.        doc.       doc.                                                                                                        doc.        doc.       doc.
                                           XML *                                                                                                                         8        XML *            9   DOM tree of the
        SVG         SVG        SVG                                                                                                         SVG         SVG        SVG
                                          processor                                             SVG DOM                                                                          processor             SVG prototype                        SVG DOM
           SVG prototypes                                                                         tree                                        SVG prototypes                                                                                  tree
                                                             ti
               instantiation                                               ti+1                                                                   instantiation
                 functions                                   3                                      12   V                                          functions                                                                                    12   V
                                                                           4
                                                                                                                                                                             2
               interaction                       JavaScript Interpreter*                                                                                                                                                  1
                                                                                                 viewer SVG                                       interaction                           JavaScript Interpreter*                              viewer SVG
                managing              2          as Interaction Manger                                                                             managing                             as Interaction Manger
                functions                                                         1
                                                                                                                                                   functions



                                                                                                                      27                                                                                                                                         28
                                                                                       Events generated Materialization on the                                                                                                 Events generated Materialization on the
                                                                                      by the user activity screen                                                                                                             by the user activity screen
       Aspetti innovativi del metodo                                                               Sul palmare
                                                                                                                    Strumento di
• Visione classica di XML: usato per la descrizione di dati, per                                                   annotazione di
  favorirne lo scambio, la condivisione, la memorizzazione, …                                                     documenti tecnici
• Visione nuova di XML: usato per la descrizione di sistemi interattivi                                              sul cantiere

• La descrizione del sistema dovrebbe essere indipendente da:
   – Lo stile di materializzazione
   – Lo strumento (device) di materializzazione
   – Il modo con cui avviene la materializzazione
• Il browser, arricchito dal plug-in specificato nel programma, traduce il
  documento IM2L in una struttura dati per la quale esiste una
  applicazione di materializzazione


                                                                         29                                                     30




                                                                                        Un UIDE specializzato sviluppato con
               Aspetti innovativi dei                                                            tecnica “Banco”
                programmi IM2L
• Non più solo separazione fra presentazione (sintassi del
  dialogo) e applicazione (semantica), ma ulteriore livello di
  separazione:
    – Contenuto dell’interfaccia (descrizione astratta tramite IM2L)
    – Materializzazione dell’interfaccia
• IM2L è indipendente da stile, strumento, modo della
  materializzazione
• Adattabilità: locale e legata alla pragmatica
• Totalmente open source
• Ridotti costi di manutenzione: il Viewer è fatto da altri
• Ricorsività (vedi slide successiva)
                                                                         31                                                     32

                                                                              (Salvi, 2003)

								
To top