Swiz è un framework per lo sviluppo di applicazioni con Adobe Flex, il
cui scopo fondamentale è fornire agli sviluppatori uno strumento semplice,
leggero ed efficace per lo sviluppo rapido di Rich Internet Application (RIA).
Al contrario di altri framework, Swiz è caratterizzato da alcune scelte fondamentali:
- non imporre agli sviluppatori un utilizzo eccessivo di design pattern ereditati dal mondo Java,
che rendono più lento l'apprendimento degli strumenti di sviluppo e rischiano di introdurre un'eccessiva complessità
nel codice - evitare la ripetitività della scrittura di porzioni di codice
- evitare l'utilizzo di numerosi file di configurazione xml
- facilitare l'adozione di un'architettura MVC (Model-View-Controller)
nella realizzazione dell'applicazione, fornendo semplici ma potenti funzioni di Dependency Injection (DI), eventi applicativi
e semplificare l'utilizzo delle chiamate remote al server
Model-View-Controller e Dependency Injection
Il Model-View-Controller è un design pattern di tipo architetturale il cui scopo è la separazione delle
componenti relative alla rappresentazione del modello di dominio (Model),
all'interfaccia utente (View) e al controllo dell'interazione utente-applicazione
(Controller). Ciò comporta notevoli vantaggi in termini di rapidità di sviluppo
(le componenti possono essere sviluppate in modo parallelo da diversi
componenti del team di sviluppo), manutenibilità, modularità e conseguente
riuso del codice.
L'idea di base della Dependency Injection è quella di avere
un sottosistema esterno a cui delegare l'organizzazione della collaborazione
tra i componenti applicativi. Tale sottosistema inietta nel
componente chiamante le specifiche istanze di oggetti con cui il componente
deve collaborare. In tal modo non è necessario che la logica applicativa
conosca gli oggetti iniettati in maniera specifica ma è sufficiente che gli
oggetti implementino una specifica interfaccia. Mediante tale interfaccia il
componente chiamante conosce le funzionalità di cui dispone l'oggetto ma non
come esse sono state implementate. E' chiaro che tale architettura consente un
forte disaccoppiamento tra i componenti e favorisce la modularità e il riuso
del codice. Quanto detto sarà maggiormente comprensibile dopo aver visto
l'esempio di applicazione presentata successivamente.
Configurazione dell'applicazione
Per lo sviluppo del progetto, una rubrica telefonica, utilizzeremo come ambiente di
sviluppo Adobe Flash Builder 4.5 con l'SDK di Flex nella versione 4.5.1 per la
compilazione del codice sorgente e la libreria Swiz scaricabile
gratuitamente dal sito web ufficiale.
Avviamo l'applicazione ed inziamo un nuovo progetto che chiameremo SwizSamplePhoneBook, in cui importeremo la libreria
swiz-framework-v1.2.0.swc appena ascaricata nella cartella lib.
Figura 1. Avvio del progetto Swiz
(clic per ingrandire)
Nel del file SwizSamplePhoneBook.mxml dovrà essere effettuata la configurazione del
framework. Tale operazione è piuttosto semplice: occorre definire all'interno
del tag <swiz:Swiz> i tag <swiz:config> e <swiz:beanProvider>.
Opzionalmente potrà essere definito un oggetto di tipo <swiz:loggingTarget> utile per la visualizzazione dei
messaggi di debugging.
Nel file è presente anche la creazione dell'interfaccia
grafica dell'applicazione che consiste in un unico componente. Quest'ultimo è
definito nel package swiz.example.samplephonebook.view ed è costituito da un pannello in cui è inserito un form per i dati del
contatto.
SwizSamplePhoneBook.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application ....>
<fx:Declarations>
<swiz:Swiz>
<swiz:config>
<swiz:SwizConfig
eventPackages="swiz.example.samplephonebook.events"
viewPackages="swiz.example.samplephonebook.view" />
</swiz:config>
<swiz:beanProviders>
<config:Beans />
</swiz:beanProviders>
</swiz:Swiz>
</fx:Declarations>
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>
<view:ContactsPanel />
</s:Application>Nel tag <swiz:SwizConfig> sono stati specificati il package contente le classi che gestiranno gli eventi e il
package dei componenti per la visualizzazione. Quest'ultimo è opzionale ma lo consigliamo per incrementare la velocità
di esecuzione dell'applicazione.
Il tag <swiz:beanProviders> serve, invece, per la dichiarazione dei componenti utilizzati dal sistema di
Dependency Injection di Swiz. Il tag <config:Beans> specifica al framework di processare i bean che sono
all'interno del file Beans.mxml nel package swiz.example.samplephonebook.config.
Vediamo il listato all'interno di Beans.mxml.
<swiz:BeanProvider
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:service="swiz.example.samplephonebook.service.*"
xmlns:controller="swiz.example.samplephonebook.controller.*"
xmlns:swiz="http://swiz.swizframework.org">
<service:ContactService id="contactService"/>
<controller:ContactController id="contactController"/>
<swiz:ServiceHelper id="serviceHelper" />
</swiz:BeanProvider>L'oggetto ServiceHelper sarà utilizzato nell'esempio per la simulazione di una chiamata ad un servizio
remoto di archiviazione del contatto.
La struttura della nostra applicazione è quella riportata in
figura. Come si vede, è stata adottata una struttura basata su package all'interno della quale è possibile
riconoscere i componenti facenti parte dei diversi strati dell'architettura
Model-View-Controller.
Swiz utilizza eventi Flex di tipo standard per la gestione dell'interazione dell'utente.
Nel componente ContactsPanel.mxml, precisamente all'interno del metodo save (), istanziamo un oggetto di
tipo ContactEvent, settiamo la sua proprietà contact e effettuiamo il dispatch dell'evento.
private function save() : void
{
contact.name = contactName.text;
contact.phoneNumber = contactPhoneNumber.text;
// creazione e propagazione dell'evento ContactEvent
var event : ContactEvent = new ContactEvent( ContactEvent.SAVE );
event.contact = contact;
dispatchEvent( event );
}
Guarda il codice completo all'interno di ContactsPanel.mxml.
La classe ContactEvent estende la classe Event di Flex e, nel suo costruttore, invochiamo
il costruttore della superclasse con il parametro bubble=true per abilitare la fase di bubbling nella gestione
dell'evento.
package swiz.example.samplephonebook.events
{
import swiz.example.samplephonebook.model.Contact;
import flash.events.Event;
public class ContactEvent extends Event
{
public static const SAVE : String = "save";
public var contact : Contact;
public function ContactEvent( type:String )
{
super( type, true );
}
}
}
La gestione dell'evento avviene nella classe ContactController
nel package swiz.example.samplephonebook.controller.
Ogni volta che avremo un evento di tipo ContactEvent.SAVE, verrà invocato il metodo saveContact()
della classe ContactController.
Tale comportamento è determinato dalla presenza del codice [EventHandler( event="ContactEvent.SAVE", prima della dichiarazione del metodo
properties="contact" )]saveContact().
EventHandler( event="ContactEvent.SAVE", properties="contact" )]
public function saveContact( contact : Contact ) : void
{
serviceHelper.executeServiceCall( contactService.save( contact ), handleSaveResult );
}
Guarda il codice completo all'interno della classe ContactController.
Nel metodo saveContact(), viene richiamato il metodo executeServiceCall
dell'oggetto serviceHelper passando come parametri il metodo della classe contactService,
responsabile dell'interazione con la logica lato server, e il metodo handleSaveResult(), che gestirà la
risposta ottenuta. La classe ServiceHelper di Swiz offre allo sviluppatore strumenti automatici per la gestione dell'interazione
client-server.
Controller, Service e Dependency Injection
La classe responsabile della funzionalità di injection in
Swiz è la classe BeanProvider. Tutti gli oggetti definiti all'interno di un
BeanProvider possono essere iniettati in altri oggetti mediante l'utilizzo del
metadata tag [Inject].
Nel nostro esempio abbiamo utilizzato il meccanismo di injection in due diversi casi.
Nel primo caso, per iniettare gli oggetti contactService e serviceHelper all'interno della classe ContactController
mediante le seguenti righe:
[Inject] public var contactService:ContactService; [Inject] public var serviceHelper:ServiceHelper;
Nel secondo caso, per iniettare l'oggetto contact nel componente ContactPanel:
[Inject( source="contactController.contact", bind="true" )] public var contact : Contact;
Mentre nel primo caso abbiamo iniettato il bean contactService e contactHelper, nel secondo caso abbiamo utilizzato
un'ulteriore funzionalità dell'injection di Swiz iniettando non tutto il bean
contactController ma solo la sua proprietà contact.
Conclusioni
Dopo aver creato tutti i componenti dell'applicazione e compilato il sorgente, il risultato ottenuto dovrebbe essere questo:
L'applicazione realizzata è molto semplice, utilizza solo alcune delle funzionalità messe a disposizione da
Swiz, ma rappresenta un primo passo verso l'utilizzo di questo semplice ma potente framework.
Listato all'interno di ContactsPanel.mxml.
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import swiz.example.samplephonebook.model.Contact;
import swiz.example.samplephonebook.events.ContactEvent;
[Bindable]
// Injection dell'oggetto contact
[Inject( source="contactController.contact", bind="true" )]
public var contact : Contact;
private function save() : void
{
contact.name = contactName.text;
contact.phoneNumber = contactPhoneNumber.text;
// creazione e propagazione dell'evento ContactEvent
var event : ContactEvent = new ContactEvent( ContactEvent.SAVE );
event.contact = contact;
dispatchEvent( event );
}
]]>
</fx:Script>
<mx:Form>
<mx:FormItem label="Nome: ">
<mx:TextInput id="contactName" />
</mx:FormItem>
<mx:FormItem label="Numero telefono: ">
<s:TextInput id="contactPhoneNumber" />
</mx:FormItem>
<mx:FormItem>
<s:Button label="salva" click="save()" />
</mx:FormItem>
</mx:Form>
</s:Panel>Listato all'interno della classe ContactController.
package swiz.example.samplephonebook.controller
{
import swiz.example.samplephonebook.model.Contact;
import swiz.example.samplephonebook.service.ContactService;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import org.swizframework.utils.services.ServiceHelper;
public class ContactController
{
[Inject]
public var contactService:ContactService;
[Inject]
public var serviceHelper:ServiceHelper;
[Bindable]
public var currentContact:Contact;
[PostConstruct]
public function createDefaultContact() : void
{
currentContact = new Contact();
}
[EventHandler( event="ContactEvent.SAVE", properties="contact" )]
public function saveContact( contact : Contact ) : void
{
serviceHelper.executeServiceCall( contactService.save( contact ), handleSaveResult );
}
private function handleSaveResult( event : ResultEvent ) : void
{
Alert.show( 'Il contatto è stato salvato con successo' );
}
}
}
