Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Flex: Swiz framework con ActionScript per le RIA

Sviluppare applicazioni RIA semplicemente con Swiz e Flex
Sviluppare applicazioni RIA semplicemente con Swiz e Flex
Link copiato negli appunti

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)

    Swiz Framework in Flex

    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.

    Figura 2. Struttura cartelle del progetto Swiz
    Swiz Framework in Flex

    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 void // creazione e propagazione dell'evento ContactEvent var new

    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:

    Inject public var Inject public var

    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:

    Figura 3. Swiz in azione
    Swiz Framework in Flex

    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'

Ti consigliamo anche