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
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
framework. Tale operazione è piuttosto semplice: occorre definire all'interno
del tag <swiz:Swiz>
<swiz:config>
<swiz:beanProvider>
Opzionalmente potrà essere definito un oggetto di tipo <swiz:loggingTarget>
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
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>
package dei componenti per la visualizzazione. Quest'ultimo è opzionale ma lo consigliamo per incrementare la velocità
di esecuzione dell'applicazione.
Il tag <swiz:beanProviders>
Dependency Injection di Swiz. Il tag <config:Beans>
all'interno del file Beans.mxml
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
</swiz:BeanProvider>L'oggetto ServiceHelper
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.
Guarda il codice completo ContactsPanel.mxml
La classe ContactEvent
il costruttore della superclasse con il parametro bubble=true
dell'evento.
package import import public class extends public static const "save" public var public function super 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,
saveContact()
della classe ContactController
Tale comportamento è determinato dalla presenza del codice [EventHandler( event="ContactEvent.SAVE",
properties="contact" )]saveContact()
EventHandler "ContactEvent.SAVE" "contact" public function void
Guarda il codice completo ContactController
Nel metodo saveContact()
executeServiceCall
dell'oggetto serviceHelper
contactService
responsabile dell'interazione con la logica lato server, e il metodo handleSaveResult()
risposta ottenuta. La classe ServiceHelper
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:
Nel secondo caso, per iniettare l'oggetto contact ContactPanel:
[Inject( "contactController.contact" "true" public var
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 import import import import import public class Inject public var Inject public var Bindable public var PostConstruct public function void new EventHandler "ContactEvent.SAVE" "contact" public function void private function void 'Il contatto è stato salvato con successo'
