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
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.
Figura 1. Nuovo progetto Flex
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.
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.
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:
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.
