Degrafa è un Framework basato su Flex per realizzare elementi grafici e interfacce in modo dichiarativo: è possibile definire riempimenti, tratti, forme, percorsi complessi, proprio come faremmo cone un classico componente Flex in MXML.
Possiamo utilizzare Degrafa per creare skin, visualizzazioni di dati, mappe o altri elementi grafici per soddisfare qualsiasi esigenza.
Le caratteristiche di Degrafa includono:
- Una libreria di forme pre-composte per l'utilizzo e la possibilità di crearne uno nuovo
- Utilizzo dei dati in formato SVG per creare forme riutilizzabili
- Opzioni flessibili per riempimenti e tracce
- Il legame della proprietà per riempimenti, tratti e geometria
- Supporto CSS per gli sfondi a più livelli, bordi complessi e l'immagine di sfondo per il posizionamento basati su CSS3
- Funzioni di produzione come i derivati, il riutilizzo dei componenti, biblioteca delle forme, ripetitori, e altre utilità che permettono di fare di più con meno codice
- Architettura model-based leggera
- Compatibilità con Flex 2 e Flex 3
Esaminiamo gli aspetti più importanti aspetti della libreria e cerchiamo di capire quali sono le situazioni in cui può tornare più utile.
Terminologia
Negli esempi seguenti utilizzeremo termini particolari per indicare le immagini, Flex, o i tag usati in Degrafa. Ecco allora le definizioni di alcuni di questi termini:
| Termine | Descrizione |
|---|---|
Geometry |
Entità gestita dal Framework: una linea, una forma (shape) o un percorso (path) |
Graphic Context |
Rappresenta la "destinazione" del nostro disegno, dove i comandi di disegno vettoriale possono esser eseguiti e memorizzati per renderli disponibili come batch. Col Framework abbiamo strumento capace di memorizzare informazioni su "come" i nostri disegni vengono tracciati sullo schermo (colori, spessori, accorgimenti grafici di sorta). Qualsiasi cosa sia visibile, quindi, viene disegnata e/o memorizzata in un Graphic Context. |
Fill |
Riempimento applicato alle forme. Degrafa fornisce una varietà di effetti di riempimento: solido, sfumatura lineare, sfumatura radiale, Bitmap, Blend e rimpimenti complessi. |
Stroke |
Trattamento del bordo di un oggetto, di solito definito con uno spessore . Degrafa fornisce bordi com solido, sfumatura lineare e radiale, gradienti. |
Surface |
Punto di partenza per i componenti canvas. I principali che vengono utilizzati sono strokes, fills, e percorsi geometry paths. |
GeometryGroup |
Consente di raggruppare vari oggetti. È basato su Sprite, in modo da poter sfruttare le proprietà e gli eventi inclusi da Sprite. |
GeometryComposition |
Consente di comporre, o raggruppare, elementi a qualsiasi livello all'interno del file MXML, compreso il root. Opzionalmente la grafica si può associare a qualsiasi oggetto che esponga la proprietà graphicsTarget. |
Utilizzo del Framework
Per prima cosa scarichiamo il Degrafa
adatto alla nostra versione di Flash Builder, in questo articolo utilizzeremo la versione per Flex 3,
iniziamo con un nuovo progetto avendo cura di selzionare il Flex Framework 3.5 come predefinito.
Includiamo le librerie di Degrafa: tramite drag'n'drop trasciniamo il file SWC
presente nell'archivio scaricato all'interno della cartella "libs" del progetto in Flash
Builder. Per comodità possiamo
aggiungere il namespace di Degrafa a quelli già previsti dalla nostra
applicazione, nell'elemento principale del programma.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:Degrafa="http://www.degrafa.com/2007"
layout="absolute">
</mx:Application>Disegniamo la prima forma con Degrafa.
Prima di continuare, una piccola precisazione: in fase di disegno si
devono utilizzare vari metodi (e quindi tag ben precisi) di Degrafa.
Un'alternativa è l'uso del tag GeometryGroup, che viene posizionato all'interno
di Surface.
Oppure possiamo utilizzare un elemento GeometryComposition, settando l'attributo "graphicsTarget"
per definire l'area da usare, per tracciare le varie forme e geometrie. La nostra applicazione adesso appare così:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:Degrafa="http://www.degrafa.com/2007"
layout="absolute">
<Degrafa:GeometryComposition
graphicsTarget="{[ mioCanvas ]}">
<!-- Qui vanno le varie geometrie. -->
</Degrafa:GeometryComposition>
<mx:Canvas
id="mioCanvas"/>
</mx:Application>Andiamo avanti: disegnamo un rettangolo (disponibile tramite la classe
RegularRectangle) e definiamo le sue peculiarità e il suo colore di riempimento
tramite i tag Fill e SolidFill. Di seguito il codice completo.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:Degrafa="http://www.degrafa.com/2007"
layout="absolute">
<Degrafa:GeometryComposition
graphicsTarget="{[ mioCanvas ]}">
<Degrafa:RegularRectangle width="100" height="50" x="10" y="10">
<Degrafa:fill>
<Degrafa:SolidFill color="#FFF" />
</Degrafa:fill>
</Degrafa:RegularRectangle>
</Degrafa:GeometryComposition>
<mx:Canvas
id="mioCanvas"/>
</mx:Application>Il nostro rettangolo è ben visibile su schermo e le
istruzioni sono veramente poche e semplici da comprendere. Ora procediamo parlando
di una funzionalità fondamentale per il Framework: il Binding.
Il Binding
Binding crea una relazione tra due entità permettendoci di sfruttare tutte le potenzialità di Degrafa.
Assegniamo un id al nostro rettangolo, settandolo come "rettangolo1". È necessario
fare in modo che ad ogni movimento del mouse venga calcolata la nuova posizione del nostro rettangolo.
Al tag "Application" associamo un event handler per gestire il movimento del mouse.
Il metodo è "muovi_mouse" e l'evento in questione da utilizzare è
mouseMove. Il codice di seguito mostra un esempio:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:Degrafa="http://www.degrafa.com/2007"
layout="absolute"
mouseMove="muovi_mouse(event)">
<mx:Script>
<![CDATA[
protected function muovi_mouse(event:MouseEvent):void {
rettangolo1.x = event.stageX;
}
]]>
</mx:Script>
<Degrafa:GeometryComposition
graphicsTarget="{[ mioCanvas ]}">
<Degrafa:RegularRectangle id="rettangolo1" width="100" height="50" x="10" y="10">
<Degrafa:fill>
<Degrafa:SolidFill color="#FFF" />
</Degrafa:fill>
</Degrafa:RegularRectangle>
</Degrafa:GeometryComposition>
<mx:Canvas
id="mioCanvas"/>
</mx:Application>Conclusioni
Compiliamo il nostro progetto ed abbiamo realizzato la nostra
prima applicazione con Degrafa, con un Binding basilare per
capire come rendere tutto "dinamico".
Il meccanismo alla base di tutto è facile da comprendere: ogni
elemento deve avere un suo specifico "id", in modo da poterlo associare facilmente ad un'animazione.
Dopo questo esempio, potreste chiedervi quanto convenga questo tool quando ci sono
strumenti analoghi in ActionScript.
La risposta non riguarda i casi semplici come questi:
in applicazioni più grandi e complesse, l'utilizzo accurato degli
strumenti messi a disposizione dal Degrafa Framework alleggeriscono, in modo sensibile
il lavoro di uno sviluppatore. A testimonianza di ciò ci sono
i vari esempi che vengono mostrati nella pagina "Samples" del sito.
Passano da semplici applicazioni grafiche a strumenti di gestione finanziaria, arrivando al
Project Dragonfly della Autodesk, il ventaglio di possibilità di Degrafa
è ampio. Il confronto con Actionscript a questo punto è praticamente impossibile.
Prima di concludere una segnalazione di un tool particolarmente interessante: su RandomFractals.com è possibile trovare il Mini Shape Designer, un piccolo strumento che permette
di disegnare al volo delle forme tramite un'interfaccia agevole e generare
automaticamente il codice MXML da includere nei nostri file. Soprattutto per le prime prove, può risultare decisamente utile.
Link utili
La documentazione del progetto, da tenere sempre a portata di
mano come reference in fase di programmazione, è reperibile all'indirizzo Degrafa Docs.
Come linea di contatto diretta con gli sviluppatori, c'è il blog sul quale vengono postati eventuali
aggiornamenti e riflessioni, Degrafa Blog.
Per finire l'immancabile raccolta di esempi, Degrafa Samples.
