• Like
  • Save
Adobe TechConnection: Flex Best Practices
Upcoming SlideShare
Loading in...5
×
 

Adobe TechConnection: Flex Best Practices

on

  • 2,836 views

Questa è la presentazione che ho tenuto durante l'ultima Adobe TechConnection

Questa è la presentazione che ho tenuto durante l'ultima Adobe TechConnection

Statistics

Views

Total Views
2,836
Views on SlideShare
2,823
Embed Views
13

Actions

Likes
3
Downloads
0
Comments
0

2 Embeds 13

http://www.slideshare.net 12
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Adobe TechConnection: Flex Best Practices Adobe TechConnection: Flex Best Practices Presentation Transcript

    • MARCO CASARIO CTO – Comtaste http://casario.blogs.com
    • My books NOV 08 WWW.COMTASTE.COM
    • My books NOV 08 WWW.COMTASTE.COM
    • My Books NOV 08 WWW.COMTASTE.COM Advanced AIR Application Development Essential Guide to AIR 1.X with Flash CSX
    • Who i am NOV 08 WWW.COMTASTE.COM
    • Maximizing the User Experiences GOAL
      • “ Bringing Sexy Back to the Enterprise applications”
      • by a clever use of Rich Internet Applications and Multimedia content.
      • Because better information workplaces:
      • make customers happier
      • improve the quality of work life for employees
      MISSION
    • In other words: RIAs in enterprise environments dramatically increase staff productivity and responsive capacity Multimedia contents add enhanced effectiveness WHY
    • In other words: RIAs in enterprise environments dramatically increase staff productivity and responsive capacity Multimedia contents add enhanced effectiveness WHY
      • The technologies we use:
        • J2EE (Java, JSP, Hibernate, EJB3, Struts, Spring)
        • Ajax
        • Flash
        • Flex
        • AIR
        • Flash Media Server
      TECHNOLOGIES
    • Who can make it possible TEAM J2EE Developers Flex/Flash Developers Creative UI Designers
    • Accenture S.p.A.   Adobe Systems Software Ireland Ltd.   Altran Cis S.p.A.   Apress Inc. Reply Area Interactive Design S.r.l. BPU Banca S.p.A. – UBI Group TELECOM CLIENTS CapGemini S.p.A. Itag S.p.A Nexus Information Technologies S.a.u.– Gruppo Iconmedialab Televideocom S.p.A. University of Malta – Link Campus STE HP Poste Svizzere
    • CASE HISTORIES
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Le applicazioni Flex vengono eseguite all’interno del browser attraverso il Flash Player plugin Le applicazioni Flex sono file SWF che hanno 2 frames 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM
      • Il primo frame di un Flex movie contiene:
      • SystemManager
      • Preloader
      • DonwloadProgressBar
      1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM E’ nel SystemManager object che avviene la maggior parte delle azioni. L’oggetto SystemManager è la parent class del tag Application (ma non solo ...) 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM
      • Il costruttore del SystemManager controlla:
      • Se si sta caricando in un altra applicazione il contenuto
      • Interrompe la riproduzione del flash movie
      • Comunica alla ResourceBundle class quale locale mostrare allo start up
      • Crea un event listener per l’evento INIT e lancia l’initHandler()
      1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Il loaderInfo object gestisce una serie di proprietà read-only e di eventi (complete, init, progress, httpStatus ...) Gestisce le informazioni sulla quantità di dati caricati e da caricare Una volta che il SystemManager è stato eseguito l’INIT event del loaderInfo object è caricato 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Nell’initHandler() viene utilizzato un metodo non documentato : addFrameScript() Questo metodo permette di richiamare un metodo ogni volta che l’applicazione entra in un frame specifico Viene chiamato l’evento initialize() 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM
      • Il metodo Initialize crea un Preloader object che viene aggiunto al SystemManager
      • Vengono inoltre prese le informazioni di ogni RSL utilizzata nel progetto
      • Vengono registrate le classi:
      • ResourceManager
      • FontRegistry
      • StyleManagers
      • flashvars
      1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Il Preloader comincia a caricare le RSL e crea un’istanza della DownloadProgressBar. E’ questa la classe da sovrascrivere se si vuole usare un custom preloader Il Flash Player sta per caricare il secondo frame ! 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Comincia la fase di istanziazione dell’interfaccia Viene creata un istanza dell’applicazione ma non viene ancora aggiunta al SystemManager ma viene passata al Preloader 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM
      • Il Preolader reagisce ai seguenti eventi:
      • validatePropertiesComplete
      • validateSizeComplete
      • ValidateDisplayListComplete
      • creationComplete
      • Allo scattare di ognuno di questi eventi, il Preloader esegue un INIT_PROGRESS event
      1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Il SystemManager inizia il processo di inizializzazione dell’applicazione chiamando l’evento initialize() della subclass dell’Application 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Il SystemManager inizia il processo di inizializzazione dell’applicazione chiamando l’evento initialize() della subclass dell’Application L’applicazione raccoglie le informazioni per i suoi children dai Descriptors (istanze della classe ComponentDescriptor class creata per ogni MXML tag) 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Scatta l’evento preInitialize prima che i componenti vengono creati In questo evento è buona norma cambiare le proprietà di un componente 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Il metodo createChildren() viene invocato. Importante nello sviluppo di custom component perchè garantisce che i display objects vengano creati In questo metodo vengono creati i bordi dell’applicazione e le scrollbars (se ce n’è bisogno) 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM
      • Una volta che tutti i figli vengono creati ricorsivamente il metodo childrenCreated() viene lanciato.
      • Questo metodo chiama i metodi di invalidazione:
        • invalidateProperties()
        • invalidateSize()
        • invalidateDisplayList()
      1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Ognuno di questi metodi chiede al Flex framework di invocare i metodi: commitProperties() measure() updateDisplayList() 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Vengono ora letti ed eseguiti i bindings assegnati alle proprietà dei child L’evento initialize per ogni child viene chiamato A questo punto i child sono stati creati ma non posizionati e dimensionati 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM L’evento ENTER_FRAME chiama il codice all’interno della classe UIComponent che comunica con il LayoutManager e controlla se un componente deve esser misurato e ridisegnato Vengono chiamati di nuovo i metodi per l’invalidazione 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Se non ci sono altri componenti figli da creare, l’evento creationComplete su quel component viene eseguito 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM Il Preloader che era in ascolto del creationComplete event dell’application esegue del codice e indica che il suo lavoro è finito. Il SystemManager rimuove il preloader e aggiunge l’applicazione al SystemManager che adesso si vede per la prima volta. 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM L’evento applicationComplete viene eseguito sia dall’applicazione che dal SystemManager L’applicazione è ora visibile e lo start up è completo ! 1. Capire le Flex Application
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM
      • Ottimizzare il proprio codice significa aumentare:
      • le performance
      • la stabilità
      • la riusabilità
      2. Ottimizzare ActionScript 3
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM
      • La prima cosa da capire è come funziona la Garbage Collector nel Flash Player
      • È automatica
      • È incrementale
      • Viene caricatasolo durante l’allocazione
      2. Ottimizzare ActionScript 3
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM
      • Sono 2 gli algoritmi usati dalla Garbage Collector:
      • Incremental Mark and Sweep: gli oggetti che possono essere raggiunti via reference sono marcati, gli altri sono lasciati per la garbage collection
      • Deferred Reference Counting: tutte le “strong” reference sono contate. Se il count è > 0 l’oggetto è tenuto altrimenti è elegibile per la garbage collection
      2. Ottimizzare ActionScript 3
    • Best Practice Flex NOV 08 WWW.COMTASTE.COM The text expressed as JSON: {&quot;menu&quot;: { &quot;id&quot;: &quot;file&quot;, &quot;value&quot;: &quot;File&quot;, &quot;popup&quot;: { &quot;menuitem&quot;: [ {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;}, {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;}, {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;} ] } }} The text expressed as XML: <menu id=&quot;file&quot; value=&quot;File&quot;> <popup> <menuitem value=&quot;New&quot; onclick=&quot;CreateNewDoc()&quot; /> <menuitem value=&quot;Open&quot; onclick=&quot;OpenDoc()&quot; /> <menuitem value=&quot;Close&quot; onclick=&quot;CloseDoc()&quot; /> </popup> </menu>
    • MARCO CASARIO CTO – Comtaste http://casario.blogs.com