SlideShare una empresa de Scribd logo
1 de 54
Descargar para leer sin conexión
Flex 3: Introducing Cairngorm

                                                   August 2008




                                               y
                                              op
                                              C
                                          ot
                                 N
                       o
              D




Copyright © 2008 Adobe Systems Incorporated                  1
Trademarks
Adobe, the Adobe logo, Acrobat, Acrobat Reader, Adobe Type Manager, ATM, XMP, Display PostScript, Distiller,
Exchange, Frame, FrameMaker, and PostScript" are trademarks of Adobe Systems Incorporated, 1 Step RoboPDF,
ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion,
Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper,
Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Adobe, MXML, RoboEngine,
RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev, and
WebHelp are either registered trademarks or trademarks of Adobe Systems Incorporated and may be registered in the
United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or
phrases mentioned within this publication may be trademarks, service marks, or trade names of Adobe Systems
Incorporated or other entities and may be registered in certain jurisdictions including internationally.

Third-Party Information
This guide contains links to third-party websites that are not under the control of Adobe, and Adobe is not responsible
for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your




                                                                           y
own risk. Adobe provides these links only as a convenience, and the inclusion of the link does not imply that Adobe
endorses or accepts any responsibility for the content on those third-party sites.




                                                              op
Copyright © 1997-2008 Adobe Systems Incorporated

All rights reserved.                                  C
The software described in this manual is provided by Adobe Systems Incorporated under a Adobe Systems
Incorporated agreement. The software may be used only in accordance with the terms of the agreement. No part of
this publication may be reproduced, transmitted, or translated in any form or by any means, electronic, mechanical,
                                        ot
photocopying, manual, optical, recording, or otherwise, outside the license agreement accompanying these materials,
without the prior written permission of Adobe Systems Incorporated

Adobe Systems Incorporated claims copyright in this program and documentation as an unpublished work, revisions
                                N


of which were first licensed on the date indicated in the foregoing notice. Claim of copyright does not imply waiver of
other rights of Adobe Systems Incorporated and its subsidiaries.
                       o



Information in this manual may change without notice and does not represent a commitment on the part of Adobe
Systems Incorporated
             D




NOTICE OF LIABILITY
The information in these training materials is distributed on as "AS IS" basis, without warranty of any kind, either
express or implied. While every precaution has been taken in the preparation of these materials, neither Adobe Systems
Incorporated nor its licensors shall have any liability to any person or entity with respect to liability, loss, or damage
caused or alleged to be caused directly or indirectly by the instructions contained in these materials or by the computer
software and hardware products described herein.

Third Edition: Aug 2008, Second Edition: June 2008, First Edition: March 2008

Adobe Systems Incorporated
345 Park Avenue
San Jose, CA 95110-2704
USA




2                                                                                Copyright © 2008 Adobe Systems Incorporated
Flex 3: Introducing Cairngorm

Introducing Cairngorm
    Introducing Cairngorm......................................................................................................................................................... 2
      Understanding the purpose of Cairngorm..................................................................................................................... 2
      Reviewing the benefits of using Cairngorm .................................................................................................................. 3
      Learning about the components of Cairngorm ............................................................................................................. 3
    Using Cairngorm in Flex RIAs ............................................................................................................................................ 4
      Identifying roles of code ................................................................................................................................................... 4
      Refactoring code to Cairngorm layers and classes ........................................................................................................ 5
      Reviewing benefits of Cairngorm refactoring................................................................................................................ 7
    Walkthrough 1:  Using Cairngorm in a project ................................................................................................................. 8
    Implementing the ModelLocator......................................................................................................................................... 9




                                                                                                                        y
      Example ModelLocator code............................................................................................................................................ 9
      Using the ModelLocator ................................................................................................................................................. 10




                                                                                                  op
    Walkthrough 2:  Building the ModelLocator ................................................................................................................... 11
    Implementing the ServiceLocator ..................................................................................................................................... 13
      Example ServiceLocator code ........................................................................................................................................ 13
      Using the ServiceLocator ................................................................................................................................................ 13
    Walkthrough 3:  Building the ServiceLocator.................................................................................................................. 14
                                                                                     C
    Implementing Cairngorm events....................................................................................................................................... 16
      Introducing the concept of Business Events................................................................................................................. 16
      Example Cairngorm event code..................................................................................................................................... 16
                                                               ot
      Using a Cairngorm event ................................................................................................................................................ 17
    Walkthrough 4:  Building Cairngorm events ................................................................................................................... 18
    Implementing Commands.................................................................................................................................................. 20
      Example Command code................................................................................................................................................ 20
                                                  N


      Using the Command ....................................................................................................................................................... 21
    Walkthrough 5:  Building Cairngorm Commands.......................................................................................................... 22
    Implementing the FrontContoller ..................................................................................................................................... 27
                                  o



      Example FrontController code....................................................................................................................................... 27
      Using the FrontController .............................................................................................................................................. 28
                    D




    Walkthrough 6:  Building the FrontController ................................................................................................................ 29
    Implementing Delegates ..................................................................................................................................................... 31
      Understanding the role of a Delegate ........................................................................................................................... 31
      Implementing a Delegate ................................................................................................................................................ 32
      Implementing a Responder ............................................................................................................................................ 32
      Example Delegate code ................................................................................................................................................... 32
    Walkthrough 7:  Building a Cairngorm Delegate ............................................................................................................ 34
    Using the Cairngorm components .................................................................................................................................... 36
    Walkthrough 8:  Modifying FStop to use Cairngorm ..................................................................................................... 37

Lab:
        Tasks .................................................................................................................................................................................. 42
      Create a new Cairngorm MVC Project............................................................................................................................. 43
      Create a form to request a patient visitation .................................................................................................................... 45
      Submit the Visitation Request ............................................................................................................................................ 47
      Create the Business Component to Process the Visitation Details ............................................................................... 49




Copyright © 2008 Adobe Systems Incorporated                                                                                                                                                       i
y
          op
         C
         ot
     N
     o
     D




ii            Copyright © 2008 Adobe Systems Incorporated
Introducing Cairngorm

                                  In this module you will preview the use of Cairngorm for Flex. You will
                                  be introduced to concepts and components of Cairngorm; without
                                  the accompanying in-depth theory and details. You will also convert
                                  an existing Flex application to use Cairngorm.




                                                                         y
                                  Objectives


                                                              op
                                  After completing this unit, you should be able to:
                                        •   Understand why Cairngorm is used in Flex development.
                                                      C
                                        •   Understand what are the primary components used in Cairngorm.
                                        •   Understand the use of custom events in Cairngorm.
                                        •   Understand the impacts of using Cairngorm on Flex applications.
                                            ot

                                  Topics
                                 N


                                  In this unit, you will learn about the following topics:
                                        •   Introducing Cairngorm
                                        •   Using Cairngorm in Flex RIAs
                       o



                                        •   Implementing the ModelLocator
              D




                                        •   Implementing the ServiceLocator
                                        •   Implementing Cairngorm events
                                        •   Implementing Commands
                                        •   Implementing the FrontContoller
                                        •   Implementing Delegates
                                        •   Using the Cairngorm components




Copyright © 2008 Adobe Systems Incorporated                                                                   1
Introducing Cairngorm
               • Understanding Cairngorm purposes
               • Review the benefits of using Cairngorm
               • Learn about the components of Cairngorm


           Understanding the purpose of Cairngorm
               • Cairngorm is an approach to organizing and partitioning
                    ■ code and packages
                    ■ component functionality and roles
               • Cairngorm is a “best-practice” methodology for Flex software design
                 and development




                                                  y
               • Cairngorm encourages developers to identify, organize, and separate
                 code based on its roles/responsibilities.




                                      op
                              C
                  ot
          N


           Figure 1: Mapping Functionality Roles to Cairngorm Layers
       o



               • Cairngorm encourages separation of concerns
    D




                   ■ Model holds data objects and the state of the data
                   ■ Controller process business logic
                   ■ Views render data and announce gestures with events
                   ■ Views communicate with Controller using events
                   ■ Views watch Model with data bindings
                        – Views are graphical user interfaces or visual portions of the
                          Flex application.
                        – Views usually are composites of UI controls or other views.
                        – Views can contain child views
                        – Even <mx:Application /> is a view




2                                                       Copyright © 2008 Adobe Systems Incorporated
Figure 2: View Nestngs within the FStop application


                                  Reviewing the benefits of using Cairngorm




                                                                          y
                                                              op
                                        • Cairngorm allows designers, component developers, and data-services
                                          developers to work in parallel
                                        • Cairngorm is best suited for medium to large-size applications
                                        • Cairngorm is ideal for team development
                                                     C
                                        • Cairngorm provides the following benefits
                                             ■ maintenance is easier
                                             ■ debugging is easier
                                          ot
                                             ■ feature additions and/or changes are easier
                                             ■ automated testing of business logic and data access is easier
                                 N

                                             ■ using mock data-services is easier


                                  Learning about the components of
                       o



                                  Cairngorm
              D




                                        • Cairngorm has 5 primary components that are used with Flex RIA
                                          solutions
                                             ■ ModelLocator: a repository for global data and global access
                                             ■ Services: a respository of pre-configured RDS components
                                             ■ Commands: non-UI components that process business logic
                                             ■ Events: custom events that trigger the business objects
                                                [Commands] to start processing
                                             ■ Controller: component needed to route business events to
                                                commands for processing.




Copyright © 2008 Adobe Systems Incorporated                                                                   3
Using Cairngorm in Flex RIAs
               • Identify Roles of Code
               • Refactor Code to Cairngorm MVC Layers
               • Review Benefits of Cairngorm Refactoring


           Identifying roles of code
               • Within the source code for a Flex application identify code that has a
                 role- or is responsible for data, GUI, business, or data services.




                                                    y
                                       op
                               C
                  ot
           N
        o
    D




           Figure 3: Identifying Roles of Code and Color by Stereotype

               • Using the example illustration [from the FStop application] above, let’s
                 identify specific code “roles”:
                    ■ Inside <mx:Script />
                          – [Bindable] public var declarations are part of “Data” roles
                          – The remaining is for either business or data access.
                    ■ After <mx:Script />
                          – These are controls and components instantiated using
                            MXML tag notation.
                          – <mx:HTTPService /> is a non-UI controls in the “Data
                            Access” role




4                                                        Copyright © 2008 Adobe Systems Incorporated
– All other <mx: /> tags are view components associated with
                                                    the “GUI” role
                                                  – <v: /> tags are custom view components with “GUI” roles


                                  Refactoring code to Cairngorm layers and
                                  classes
                                        • Refactoring code to use Cairngorm can be achieved by




                                                                        y
                                                             op
                                                     C
                                          ot
                                 N
                       o
              D




                                  Figure 4: Mapping code to Cairngorm MVC Layers and Components

                                  Tip: While the imports statements in the code above have not been highlighted,
                                  the imports will be modified accordingly to support code restructuring.


                                         1. Isolate the “ui” tags in the FStop application file in the View layer
                                         2. Move the “data” code to the ModelLocator in the Model layer
                                         3. Create custom [business] events to communicate from the View layer
                                            to the Controller [business] layer.
                                                    – AddPhotosToCartEvent
                                                    – LoadPhotosEvent




Copyright © 2008 Adobe Systems Incorporated                                                                        5
4. Move the “business” code to the Controller layer
                   – Business logic is moved to the LoadPhotosCommand
                   – Business logic is moved to the
                     AddPhotoToCartCommand
                   – RDS data access is moved to the Services repository
         5. Create FSController component to route business events to
            PhotoCommand




                                            y
                               op
                       C
    Figure 5: Identifying New Classes Required for Cairngorm Refactoring

         6. Update View components to databind to ModelLocator data
           ot
         7. Update View components to dispatch business events.
         8. Update Application to create the FSController, Services respository,
            and ModelLocator instances.
    N


        Note: Only one, unique instance of the FSController, Services, and
        ModelLocator are created for the application. In contrast, each business event
    o



        will have its own business command class... this is a 1-to-1 mapping of
        business events to business commands.
    D




6                                                Copyright © 2008 Adobe Systems Incorporated
Reviewing benefits of Cairngorm refactoring
                                        • View code is concise and understandable and “renders” only.
                                        • View classes do not know anything about Controller [Business]
                                          components; except through the use of business events
                                        • Model data is stored and accessed from the ModelLocator.
                                        • All ModelLocator variables support data binding.
                                        • Business components do not know anything about the View classes.
                                        • View components use data binding to render data cached in the
                                          ModelLocator [Model] layer




                                                                         y
                                                             op
                                                     C
                                          ot
                                 N


                                  Figure 6: Benefits Code Simplicity when using Cairngorm MVC
                       o
              D




Copyright © 2008 Adobe Systems Incorporated                                                                  7
Walkthrough 1: Using Cairngorm in a project
           In this walkthrough, you will perform the following tasks:
               • Add the Cairngorm library to the FStop project


           Steps
           Set up the working environment
             1. Unzip the file f3ic_studentFiles_16Jun08.zip to disk. It will
                automatically create an f3ic folder with supplied files in it.
             2. Open Flex Builder.
             3. Select File > Import > Flex Project...
             4. Browse to {installationLocation}/f3ic and select the archive




                                                  y
                f3ic_fstop.zip.




                                     op
             5. Click Finish.

               Note: In the same folder there are staged solutions archived for each each
               walkthrough . Simply import the archive to see the solution.
                              C
           Add the Cairngorm library to the FStop project
             6. Click the project just opened, then select Project > Properties > Flex
                 ot
                Build Path >Library Path.
             7. Select the Add SWC... button and add the Cairngorm library located at
           N

                {installLocation}/f3ic/Cairngorm.swc.
       o
    D




8                                                      Copyright © 2008 Adobe Systems Incorporated
Implementing the ModelLocator
                                        • The ModelLocator is a global singleton repository for shared or global
                                          data
                                             ■ Singleton means that only instance of the class should exist
                                        • Does not load or persist data to a permanent data store
                                        • Does not contain business logic
                                        • Serves as caching and access location only
                                        • Caches custom variables/data specific to application
                                        • Supports data binding for auto-notifications of data changes to views


                                  Example ModelLocator code




                                                                        y
                                        • Be sure the class implements the getInstance() method
                                        • Also contains public variables that hold application data




                                                             op
                                             ■ In example code variables photoData and
                                               purchasedPhotos

pa c ka ge mo d el
{
                                                     C
  i m po r t mx . co ll e ct i on s. A rr ay C ol l ec ti o n;
                                          ot
    [ B in d ab le ]
    p u bl i c cl a ss M o de l Lo ca t or
    {
      s ta t ic p r iv a te v a r __ i ns t an ce : Mo de l Lo c at or = nu ll ;
                                 N


      p ub l ic v a r p ho to D at a: A rr a yC ol l ec ti o n= n ew A r ra yC o ll e ct io n () ;
      p ub l ic va r p ur c ha se d Ph o to s: A rr ay C ol l ec ti o n= ne w A r ra yC o ll e ct io n () ;
                       o



        s ta t ic p u bl i c fu n ct io n g e tI ns t an ce ( ): M od el L oc at o r
        {
                D




          if ( __ i ns ta n ce = = n ul l )
          {
            _ _ in s ta nc e =n ew Mo d el Lo c at or ( );
          }
          re t ur n _ _i n st an c e;
        }
    }
}




Copyright © 2008 Adobe Systems Incorporated                                                                        9
Using the ModelLocator
                                • Access data stored in the ModelLocator via the getInstance()
                                  method

<! [ CD AT A [
 i m po r t mo d el .M o de l Lo ca t or ;

 p r iv at e v a r __ m od el : Mo d el Lo c at or = Mo d el Lo c at or . ge t In st a nc e( ) ;

]] >

                                • Access data via the instance name of the ModelLocator

                            <m x :D a ta Gr i d da t aP r ov id e r= { _ _ mo d el .p h ot oD a ta} />




                                                                 y
                                                     op
                                              C
                                  ot
                           N
                   o
           D




10                                                                    Copyright © 2008 Adobe Systems Incorporated
Walkthrough 2: Building the ModelLocator
                                  In this walkthrough, you will perform the following tasks:
                                        • Create the ModelLocator respository


                                  Steps
                                      1. In the FB Navigator view, open the src directory.

                                  Create the ModelLocator Repository
                                      2. Create a new package called model.
                                      3. Create an ActionScript class called ModelLocator.as.
                                            • Uncheck the “Generate Constructor from super class” checkbox.




                                                                          y
                                      4. Create a static, private variable named __instance, data typed
                                         as ModelLocator, and set it equal to null.




                                                              op
st a ti c p ri v at e v ar _ _ in s ta nc e :M od e lL o ca to r =n ul l ;

                                      5. Create a global accessor function to allow only one ModelLocator
                                                      C
                                         instance to be accessed from anywhere. This function should be called
                                         getInstance().

st a ti c p ub l ic f u nc ti o n g et In s ta nc e () : Mo de l Lo ca t or
                                          ot
{
  i f ( _ _i ns t an ce == nu ll )
  {
                                 N

    _ _i n st an c e= ne w M o de lL o ca to r () ;
  }
  r e tu r n __ i ns ta n ce ;
}
                       o



                                     6. Open FStop.mxml application file.
              D




                                     7. Copy the business variables declared for photoData and
                                        purchasedPhotos model data [see lines 17-18].
                                     8. Return to the ModelLocator.as class.
                                     9. At the top of the class paste the copied code into the ModelLocator.
                                    10. Modify the variables declarations to be public.
                                    11. Remove the [Bindable] tags on each variable.
                                    12. Make the ModelLocator class [Bindable] .
                                    13. Since you copied in the variable declarations, you need to import the
                                        ArrayCollection class.

                                       Note: An easy way to do the import is simply place the cursor after the letter
                                       n from one of the new ArrayCollection() statements, then press
                                       Ctrl-Space.




Copyright © 2008 Adobe Systems Incorporated                                                                        11
14. Be sure the ModelLocator appears as follows.

pa c ka ge mo d el
{
  i m po r t mx . co ll e ct i on s. A rr ay C ol l ec ti o n;

    [ B in d ab le ]
    p u bl i c cl a ss M o de l Lo ca t or
    {
      p ub l ic v a r p ho to D at a: A rr a yC ol l ec ti o n= n ew A r ra yC o ll e ct io n () ;
      p ub l ic va r p ur c ha se d Ph o to s: A rr ay C ol l ec ti o n= ne w A r ra yC o ll e ct io n () ;
      s ta t ic p r iv a te v a r __ i ns t an ce : Mo de l Lo c at or = nu ll ;

        s ta t ic p u bl i c fu n ct io n g e tI ns t an ce ( ): M od el L oc at o r
        {
          if ( __ i ns ta n ce = = n ul l )
          {




                                                                     y
            _ _ in s ta nc e =n ew Mo d el Lo c at or ( );
          }




                                                          op
          re t ur n _ _i n st an c e;
        }
    }
}
                                                  C
                                  15. Save the file.
                                  16. Close the ModelLocator file.
                                       ot
                                N
                       o
                D




12                                                                        Copyright © 2008 Adobe Systems Incorporated
Implementing the ServiceLocator
                                        • The ServiceLocator pattern is used to create a global, singleton registry
                                          to centralize all instances of Flex RDS components used in an
                                          application
                                             ■ HTTPService
                                             ■ WebService
                                             ■ RemoteObject
                                             ■ Custom RDS classes
                                        • Supports easy lookup of services by name
                                        • Should never be used outside the Control layer


                                  Example ServiceLocator code




                                                                         y
                                        • Extends the Cairngorm ServiceLocator class




                                                             op
                                        • Contains RDS tag instantiations

<? x ml v e rs i on =" 1 .0 " e nc o di ng = "u tf - 8" ? >
<r d s: Se r vi c eL oc a to r x ml n s: rd s =" co m .a d ob e. c ai rn g or m .b us i ne ss . *"
                                                      C
 x m ln s :m x= " ht tp : // w ww .a d ob e. c om / 20 06 / mx ml " >

 < m x: H TT PS e rv ic e i d =" ph o to sI n " u rl =" a ss et s /p h ot os . xm l" / >
                                          ot
</ r ds :S e rv i ce Lo c at or >
                                 N

                                  Using the ServiceLocator
                                        • Instantiate the object in MXML to configure and cache the services
                                          repository
                       o



                                      < rd s: S er vi c es xm ln s :r ds = "b us i ne s s. *" / >
              D




                                        • Use the ServiceLocator by calling the getInstance() method and
                                          then use a defined service

pr i va te va r _ _l o ca to r :S e rv ic e Lo ca t or = Se rv i ce Lo c at o r. ge t In st a nc e () ;
va r s er v ic e :H TT P Se rv i ce = __ lo c at or . ge t HT TP S er vi c e( " ph ot o sI n " ) ;




Copyright © 2008 Adobe Systems Incorporated                                                                      13
Walkthrough 3: Building the ServiceLocator
           In this walkthrough, you will perform the following tasks:
               • Create the Services repository


           Steps
             1. In the Navigator view, select the src directory.

           Create the Services respository
             2. Create a new package called business.
             3. In the business package, create an MXML Component named
                Services. This class will extend ServiceLocator.




                                                  y
               Note: The ServiceLocator option will not appear in the drop down list. Simply




                                     op
               type it in.

                             C
                 ot
           N
       o
     D




14                                                     Copyright © 2008 Adobe Systems Incorporated
4. Modify the default namespace entered, xmlns="*", to properly import
                                         com.adobe.cairngorm.business.*. Use the rds prefix.

<r d s: Se r vi c eL oc a to r x ml n s: rd s =" co m .a d ob e. c ai rn g or m .b us i ne ss . *"
 x m ln s :m x= " ht tp : // w ww .a d ob e. c om / 20 06 / mx ml " >

</ r ds :S e rv i ce Lo c at or >

                                      5. Open FStop.mxml application file.
                                      6. Copy the tag declaration for the HTTPService [see line 46].
                                      7. Paste the tag into the Services.mxml class. Paste the code as a child
                                         tag.
                                      8. Remove the result event handler defined in the HTTPService tag.

<m x :H TT P Se r vi ce id =" p ho t os In " u rl = "a s se ts / ph ot o s. x ml " / >




                                                                        y
                                      9. Check to be sure your ServiceLocator appears as follows.




                                                             op
<? x ml v e rs i on =" 1 .0 " e nc o di ng = "u tf - 8" ? >
<r d s: Se r vi c eL oc a to r x ml n s: rd s =" co m .a d ob e. c ai rn g or m .b us i ne ss . *"
 x m ln s :m x= " ht tp : // w ww .a d ob e. c om / 20 06 / mx ml " >
                                                     C
 < m x: H TT PS e rv ic e i d =" ph o to sI n " u rl =" a ss et s /p h ot os . xm l" / >

</ r ds :S e rv i ce Lo c at or >
                                          ot
                                    10. Save and close the file.
                                 N
                       o
              D




Copyright © 2008 Adobe Systems Incorporated                                                                  15
Implementing Cairngorm events
                                • Many events take place in Flex applications, but Cairngorm is only
                                  concerned with Business Events


                            Introducing the concept of Business Events
                                • Flex uses an Event Delegation Model
                                     ■ A system where the responses and reactions to activity in one
                                        component are delegated to one or more different components
                                     ■ This delegation is achieved by dispatching events
                                • Flex has many categories of events
                                     ■ System events: initialize, creationComplete, showEffect
                                     ■ Framework event: click, mouseMove, keyDown




                                                                 y
                                     ■ User events: hideContactDetails, showCatalog




                                                      op
                                     ■ Business events: GetAllPurchasedItems, LoadCatalog,
                                        SubmitOrder, LoginUser
                                     ■ Data Service events: ResultEvent, FaultEvent
                                              C
                                • Custom events can be used to transport or package data to the
                                  recipient(s)
                                • User events are custom events that are delegated to other components in
                                  the View layer
                                   ot
                                • Business events are
                                     ■ Custom events delegated to components in the business [Control]
                           N

                                        layer
                                     ■ Used to announce gestures and activate Command processing
                   o



                            Example Cairngorm event code
           D




                                • Each event should have a unique ID that is exposed statically and passed
                                  to the super constructor
                                • Simple event

pa c ka ge bu s in es s .e ve n ts
{
  i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ;
  p u bl i c cl a ss L o ad P ho to s Ev en t e x te nd s C ai r ng o rm Ev e nt
  {
    s ta t ic p u bl i c va r E VE N T_ I D: St r in g= " lo a dP ho t os ";
    p ub l ic f u nc t io n L oa dP h ot o sE ve n t( )
    {
      su p er ( EV EN T _I D) ;
    }
  }
}




16                                                                    Copyright © 2008 Adobe Systems Incorporated
• Event that uses a value object

pa c ka ge bu s in es s .e ve n ts
{
  i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ;
  i m po r t va l ue Ob j ec t s. Ph o to ;

    p u bl i c cl a ss A d dP h ot oT o Ca rt E ve n t ex t en ds Ca i rn go r mE ve n t
    {
      s ta t ic p u bl i c va r E VE N T_ I D: St r in g= " ad d Ph ot o Ev en t ";
      p ub l ic v a r p ho to : Ph ot o =n u ll ;

        p ub l ic f u nc t io n A dd Ph o to T oC ar t Ev en t (p h ot o: P ho to )
        {
          su p er ( EV EN T _I D) ;
          th i s. p ho to = ph ot o ;
        }




                                                                           y
    }
}




                                                             op
                                  Using a Cairngorm event
                                                      C
                                        • The View layer can create and dispatch Business Events
                                        • The Control layer can create and dispatch Business Events
                                        • Only the Control layer manages and processes Business Events
                                            ot
                                        • Dispatching of Business Events should be considered 1-way to the
                                          business [Control] layer
                                        • Cairngorm events dispatch themselves to the Controller
                                 N


pr i va te fu n ct io n i ni t Ap p () :v o id
{
                       o



  v a r e ve nt : Lo ad P ho t os Ev e nt =n e w L oa dP h ot os E ve n t( );
  e v en t .d is p at ch ( );
}
                D




pr i va te fu n ct io n p ho t oS e le ct e dH an d le r (e ve n t: Ph o to E ve nt ) :v oi d
{
  v a r a dd Ev e nt :A d dP h ot oT o Ca rt E ve n t=
    n ew Ad dP h ot o To Ca r tE ve n t( e ve nt . se le c te d Ph ot o );
  a d dE v en t. d is pa t ch ( );
}




Copyright © 2008 Adobe Systems Incorporated                                                                  17
Walkthrough 4: Building Cairngorm events
           In this walkthrough, you will perform the following tasks:
               • Create the LoadPhotos and AddPhotoToCart business events


           Steps
             1. Select the business package in the Navigator.

           Create the LoadPhotos and AddPhotoToCart Business
           Events
             2. Create a new child package called events.
             3. In the events package, create a new ActionScript class with the following




                                                y
                properties
                    • Filename is LoadPhotosEvent




                                     op
                    • Extends the class
                      com.adobe.cairngorm.control.CairngormEvent
                             C
                 ot
           N
       o
     D




18                                                   Copyright © 2008 Adobe Systems Incorporated
4. Modify the LoadPhotosEvent class so it conforms to a simple Cairngorm
                                         event.

pa c ka ge bu s in es s .e ve n ts
{
  i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ;
  p u bl i c cl a ss L o ad P ho to s Ev en t e x te nd s C ai r ng o rm Ev e nt
  {
    s ta t ic p u bl i c va r E VE N T_ I D: St r in g= " lo a dP ho t os ";

        p ub l ic f u nc t io n L oa dP h ot o sE ve n t( )
        {
          su p er ( EV EN T _I D) ;
        }
    }
}




                                                                        y
                                      5. Save the file.




                                                             op
                                      6. Create another event ActionScript class with the following properties
                                            • Filename is AddPhotoToCartEvent
                                            • Extends the class
                                               com.adobe.cairngorm.control.CairngormEvent
                                                          C
                                            • Exposes an EVENT_ID variable of addPhotoToCart
                                            • Requires a Photo value object as a constructor argument
                                          ot
                                      7. Modify the class so it conforms to a Cairngorm event.

pa c ka ge bu s in es s .e ve n ts
{
                                 N


  i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ;
  i m po r t va l ue Ob j ec t s. Ph o to ;
                       o



    p u bl i c cl a ss A d dP h ot oT o Ca rt E ve n t ex t en ds Ca i rn go r mE ve n t
    {
                D




      s ta t ic p u bl i c va r E VE N T_ I D: St r in g= " ad d Ph ot o To Ca r t" ;
      p ub l ic v a r p ho to : Ph ot o =n u ll ;

        p ub l ic f u nc t io n A dd Ph o to T oC ar t Ev en t (p h ot o: P ho to )
        {
          su p er ( EV EN T _I D) ;
          th i s. p ho to = ph ot o ;
        }
    }
}

                                      8. Save the file.




Copyright © 2008 Adobe Systems Incorporated                                                                      19
Implementing Commands
                                   • The Control layer relies on Commands to manage business logic and
                                     respond to Business Events
                                   • Command features
                                        ■ Each Command class represents a specific business feature with
                                          associated business logic and processing
                                        ■ Commands update the ModelLocator with new data or changes to
                                          existing data
                                        ■ Each Command class represents a specific business feature with
                                          associated business logic and processing
                                   • All Commands have the same entry point to initiate or start business
                                     processing: execute()
                                   • Command implementations have class names to that are equivalent to




                                                                    y
                                     Business Events




                                                         op
                                        ■ LoadPhotosEvent and LoadPhotosCommand


                               Example Command code
                                                 C
                                   • Must contain an execute() method
                                   • That method contains business logic
                                     ot
pa c ka ge     bu s in es s .c om m an d s
{
  i m po r t   bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t;
                              N

  i m po r t   co m .a do b e. c ai rn g or m. c om m an ds . IC om m an d ;
  i m po r t   co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ;
  i m po r t   mo d el .M o de l Lo ca t or ;
                     o



    p u bl i c cl a ss A d dP h ot oT o Ca rt C om m an d i mp le m en t s IC o mm an d
    {
               D




      p ri v at e v ar __ mo d el :M o de l Lo ca t or =M o de l Lo ca t or .g e tI n st an c e( );
      p ub l ic f u nc t io n e xe cu t e( e ve nt : Ca ir n go r mE ve n t) :v o id
      {
        __ m od e l. pu r ch as e dP ho t os .
        ad d It e m( (e v en t a s Ad d Ph o to To C ar tE v en t ). ph o to );
      }
    }
}




20                                                                       Copyright © 2008 Adobe Systems Incorporated
Using the Command
                                        • Used in the Controller where the events are listened for and
                                          corresponding commands are called
                                             ■ Controller built in the next section

ad d Co mm a nd ( Lo ad P ho to s Ev e nt .E V EN T_ I D, L oa dP h ot os C om m an d) ;
ad d Co mm a nd ( Ad dP h ot oT o Ca r tE ve n t. EV E NT _ ID ,A d dP ho t oT o Ca rt C om ma n d) ;




                                                                        y
                                                             op
                                                     C
                                          ot
                                 N
                       o
              D




Copyright © 2008 Adobe Systems Incorporated                                                              21
Walkthrough 5: Building Cairngorm
Commands
           In this walkthrough, you will perform the following tasks:
               • Create the LoadPhotosCommand business component
               • Create the AddPhotoToCart command


           Steps
             1. Select the business package in the Navigator.

           Create the LoadPhotosCommand business component
             2. Create a new child package called commands.




                                                y
             3. In the commands package, create a new ActionScript class with the




                                     op
                following properties
                    • Filename is LoadPhotosCommand
                    • Implements the interface
                      com.adobe.cairngorm.commands.ICommand
                             C
                    • Uncheck the Generate constructor from superclass option
                 ot
           N
       o
     D




               Note: This command will be using the Services repository for RDS and
               the ModelLocator to store the load photo data.




22                                                   Copyright © 2008 Adobe Systems Incorporated
Create instances of the ModelLocator and ServiceLocator
                                      4. In the class, create two alias references to the ModelLocator and
                                         ServiceLocator instances using the respective getInstance()
                                         methods.

pr i va te va r _ _m o de l: M od e lL oc a to r= M od e lL oc a to r. g et I ns ta n ce () ;
pr i va te va r _ _l o ca to r :S e rv ic e Lo ca t or = Se rv i ce Lo c at o r. ge t In st a nc e () ;


                                       Note: If using tag help choose the ModelLocator class you have built, not the
                                       Cairngorm ModelLocator interface.

                                  Modify the execute method
                                      5. In the execute() function use the ServiceLocator to lookup a reference
                                         to the HTTPService instance called photosIn.




                                                                          y
va r s er v ic e :H TT P Se rv i ce = __ lo c at or . ge t HT TP S er vi c e( " ph ot o sI n" ) ;




                                                              op
                                       Note: If using tag help choose the mx.rpc.http.HTTPService class.
                                                      C
                                      6. Manually specify the result handler for the asynchronous
                                         HTTPService call. Use addEventListener to add a result event
                                         handler to the RDS component instance.
                                          ot
se r vi ce . ad d Ev en t Li st e ne r (R es u lt Ev e nt . RE SU L T, on R es u lt s_ l oa dP h ot o s) ;
                                 N

                                       Note: We are not adding a listener for the FaultEvent, because this FStop
                                       application will ignore any errors. Release-quality solutions must anticipate
                                       possible failures in the RDS calls and must plan for Fault event handlers.
                       o



                                      7. Invoke the RDS call to the server to load the photo data for the FStop
                                         application.
              D




                                      s er vi c e. se n d( ) ;

                                  Create the result handler
                                      8. Create another function in the class that is the skeleton for the result
                                         handler. Name the function onResults_loadPhotos() and
                                         datatype the function itself as void. The function should accept a
                                         parameter named event, data typed as ResultEvent

pr i va te fu n ct io n o nR e su l ts _l o ad Ph o to s (e ve n t: Re s ul t Ev en t ): vo i d
{

}

                                      9. Open FStop.mxml application file.




Copyright © 2008 Adobe Systems Incorporated                                                                         23
10. Copy the method body of the photosInHandler() function, lines
                                 22-32.
                             11. In LoadPhotosCommands.as paste the copied code into the method
                                 body for the onResults_loadPhotos() function.
                             12. Modify the photoData.addItem() call in the for loop to use the
                                 photoData reference cached in the ModelLocator repository.

                               _ _m od e l. ph o to D at a. a dd It e m( te m pP h ot o) ;

                             13. Be sure your function appears as follows.

pr i va te fu n ct io n o nR e su l ts _l o ad Ph o to s (e ve n t: Re s ul t Ev en t ): vo i d
{
  v a r p ho to R aw :A r ra y Co ll e ct io n =e v en t. r es ul t .p h ot os . im ag e ;
  f o r( v ar i : in t= 0 ;i < ph ot o Ra w. l en g th ;i + +)
  {




                                                                  y
    v ar te mp P ho t o: Ph o to =n e w P ho to ( );
    v ar ph ot o Fr o mA C: O bj ec t =p h ot oR a w. ge t It e mA t( i );




                                                      op
    t em p Ph ot o .f i le na m e= ph o to F ro mA C .f il e na m e;
    t em p Ph ot o .p h ot og r ap he r =p h ot oF r om AC . ph o to gr a ph er ;
    t em p Ph ot o .d e sc =p h ot oF r om A C. de s c;
    t em p Ph ot o .c a te go r y= ph o to F ro mA C .c at e go r y;
                                              C
    _ _m o de l. p ho t oD at a .a dd I te m (t em p Ph ot o );
  }
}
                                  ot
                             14. Be sure the ArrayCollection and Photo classes are imported to
                                 support the copied code.
                           N


                                Note: The cursor at the end of class name/Ctrl-Space trick helps here.
                  o
           D




24                                                                      Copyright © 2008 Adobe Systems Incorporated
15. Check to be sure your class appears as follows.

pa c ka ge       bu s in es s .c om m an d s
{
  i m po r t     co m .a do b e. c ai rn g or m. b us i ne ss . Se rv i ce L oc at o r;
  i m po r t     co m .a do b e. c ai rn g or m. c om m an ds . IC om m an d ;
  i m po r t     co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ;
  i m po r t     mo d el .M o de l Lo ca t or ;
  i m po r t     mx . co ll e ct i on s. A rr ay C ol l ec ti o n;
  i m po r t     mx . rp c. e ve n ts .R e su lt E ve n t;
  i m po r t     mx . rp c. h tt p .H TT P Se rv i ce ;
  i m po r t     va l ue Ob j ec t s. Ph o to ;

    p u bl i c cl a ss L o ad P ho to s Co mm a nd im pl e me nt s I C om ma n d
    {
      p ri v at e v ar __ mo d el :M o de l Lo ca t or =M o de l Lo ca t or .g e tI n st an c e( );
      p ri v at e v ar __ lo c at or : Se r vi ce L oc at o r=




                                                                        y
        Se r vi c eL oc a to r. g et In s ta n ce () ;




                                                            op
        p ub l ic f u nc t io n e xe cu t e( e ve nt : Ca ir n go r mE ve n t) :v o id
        {
          va r s e rv ic e :H TT P Se rv i ce = __ lo c at or . ge t HT TP S er vi c e( " ph ot o sI n" ) ;
          se r vi c e. ad d Ev en t Li st e ne r (R es u lt Ev e nt . RE SU L T,
            o n Re s ul ts _ lo ad P ho t os );
                                                         C
          se r vi c e. se n d( );
        }
        p ri v at e f un c ti on on Re s ul t s_ lo a dP ho t os ( ev en t :R es u lt E ve nt ) :v oi d
                                          ot
        {
          va r p h ot oR a w: Ar r ay Co l le c ti on = ev en t .r e su lt . ph ot o s. i ma ge ;
          fo r (v a r i: i nt =0 ; i< ph o to R aw .l e ng th ; i+ + )
                                 N

          {
            v a r t em pP h ot o: P ho t o= ne w P ho t o( ) ;
            v a r p ho to F ro mA C :O b je ct = ph ot o Ra w .g et I te mA t (i ) ;
            t e mp P ho to . fi le n am e =p ho t oF ro m AC . fi le n am e;
                        o



            t e mp P ho to . ph ot o gr a ph er = ph ot o Fr o mA C. p ho to g ra p he r;
            t e mp P ho to . de sc = ph o to Fr o mA C. d es c ;
                D




            t e mp P ho to . ca te g or y =p ho t oF ro m AC . ca te g or y;
            _ _ mo d el .p h ot oD a ta . ad dI t em (t e mp P ho to ) ;
          }
        }
    }
}

                                    16. Save the file.




Copyright © 2008 Adobe Systems Incorporated                                                                   25
Create the AddPhotoToCartCommand
                                  17. Create a new ActionScript class in the commands package with the
                                      following properties
                                          • Filename is AddPhotoToCartCommand
                                          • Implements the interface
                                            com.adobe.cairngorm.commands.ICommand
                                          • Uncheck the Generate constructor from superclass option

                                     Note: This command will be using the ModelLocator instance to add the
                                     photo to the photo purchase list.

                                  18. In the class, create an alias reference to the ModelLocator instance using
                                      the getInstance() method.




                                                                          y
pr i va te va r _ _m o de l: M od e lL oc a to r= M od e lL oc a to r. g et I ns ta n ce () ;




                                                           op
                                  19. Modify the execute() function to add the photo to the purchase list
                                        • Cast the event to an instance of AddPhotoToCartEvent

va r p ho t o: P ho to = (e ve n t a s Ad d Ph ot o To C ar tE v en t) . ph o to ;
                                                       C
__ m od el . pu r ch as e dP ho t os . ad dI t em (p h ot o );

                                  20. Be sure class appears as follows.
                                       ot
pa c ka ge       bu s in es s .c om m an d s
{
  i m po r t     bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t;
                                N

  i m po r t     co m .a do b e. c ai rn g or m. c om m an ds . IC om m an d ;
  i m po r t     co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ;
  i m po r t     mo d el .M o de l Lo ca t or ;
  i m po r t     va l ue Ob j ec t s. Ph o to ;
                       o



    p u bl i c cl a ss A d dP h ot oT o Ca rt C om m an d i mp le m en t s IC o mm an d
                D




    {
      p ri v at e v ar __ mo d el :M o de l Lo ca t or =M o de l Lo ca t or .g e tI n st an c e( );

        p ub l ic f u nc t io n e xe cu t e( e ve nt : Ca ir n go r mE ve n t) :v o id
        {
          va r p h ot o: P ho to = (e ve n t a s Ad d Ph ot o To C ar tE v en t) . ph o to ;
          __ m od e l. pu r ch as e dP ho t os . ad dI t em (p h ot o );
        }
    }
}

                                  21. Save the file.




26                                                                         Copyright © 2008 Adobe Systems Incorporated
Implementing the FrontContoller
                                        • The FrontController
                                            ■ Intercepts dispatched business events and forwards each event
                                               instance to the appropriate Command instance for processing
                                            ■ Is a registry of event-to-command mappings
                                            ■ Is the “router” for business events
                                        • The FrontController pattern provides a solution that allows the View
                                          and Control layers to connect using event delegation
                                            ■ Views dispatch business events to the business layer
                                                  – Views are never aware of the FrontController, Commands, or
                                                     Delegates, or the Services repository
                                                  – Views simply render data stored in the Model layer and




                                                                       y
                                                     announce user gestures
                                            ■ Dispatched business events are routed to appropriate business




                                                            op
                                               components


                                  Example FrontController code
                                                     C
                                        • In the FrontController’s constructor use the addCommand() method
                                          to link Business Events and corresponding Commands
                                          ot
pa c ka ge     bu s in es s
{
  i m po r t   bu s in es s .c o mm an d s. Ad d Ph o to To C ar tC o mm a nd ;
                                 N

  i m po r t   bu s in es s .c o mm an d s. Lo a dP h ot os C om ma n d;
  i m po r t   bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t;
  i m po r t   bu s in es s .e v en ts . Lo ad P ho t os Ev e nt ;
  i m po r t   co m .a do b e. c ai rn g or m. c on t ro l. F ro nt C on t ro ll e r;
                       o



pu b li c c la s s FS C on tr o ll e r ex t en ds Fr o nt Co n tr ol l er
               D




  {
    p ub l ic f u nc t io n F SC on t ro l le r( )
    {
      su p er ( );
      ad d Co m ma nd ( Lo ad P ho to s Ev e nt .E V EN T_ I D, L oa dP h ot os C om m an d) ;
      ad d Co m ma nd ( Ad dP h ot oT o Ca r tE ve n t. EV E NT _ ID ,A d dP ho t oT o Ca rt C om ma n d) ;
    }
  }
}




Copyright © 2008 Adobe Systems Incorporated                                                                 27
Using the FrontController
                                • When Cairngorm events are dispatched they are automatically handled
                                  by the FrontController

pr i va te fu n ct io n i ni t Ap p () :v o id
{
  v a r e ve nt : Lo ad P ho t os Ev e nt =n e w L oa dP h ot os E ve n t( );
  e v en t .d is p at ch ( );
}




                                                                 y
                                                     op
                                              C
                                   ot
                           N
                   o
           D




28                                                                    Copyright © 2008 Adobe Systems Incorporated
Walkthrough 6: Building the FrontController
                                  In this walkthrough, you will perform the following tasks:
                                        • Create the FSController to route the business events


                                  Steps
                                      1. Select the business package in the Navigator.

                                  Create the FSController to route the business events
                                      2. In the business package create a new ActionScript class with the following
                                         properties
                                             • Filename is FSController




                                                                         y
                                             • Extends the class
                                               com.adobe.cairngorm.control.FrontController




                                                             op
                                             • Select the Generate constructor from superclass checkbox

                                                      C
                                          ot
                                 N
                       o
              D




                                      3. Use the addCommand() method to register each business event with its
                                         corresponding command.

ad d Co mm a nd ( Lo ad P ho to s Ev e nt .E V EN T_ I D, L oa dP h ot os C om m an d) ;
ad d Co mm a nd ( Ad dP h ot oT o Ca r tE ve n t. EV E NT _ ID ,A d dP ho t oT o Ca rt C om ma n d) ;




Copyright © 2008 Adobe Systems Incorporated                                                                      29
4. Import the classes used.

    i m po r t   bu s in es s .c o mm an d s. Ad d Ph o to To C ar tC o mm a nd ;
    i m po r t   bu s in es s .c o mm an d s. Lo a dP h ot os C om ma n d;
    i m po r t   bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t;
    i m po r t   bu s in es s .e v en ts . Lo ad P ho t os Ev e nt ;

                                   5. Be sure the FSController appears as follows.

pa c ka ge       bu s in es s
{
  i m po r t     bu s in es s .c o mm an d s. Ad d Ph o to To C ar tC o mm a nd ;
  i m po r t     bu s in es s .c o mm an d s. Lo a dP h ot os C om ma n d;
  i m po r t     bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t;
  i m po r t     bu s in es s .e v en ts . Lo ad P ho t os Ev e nt ;
  i m po r t     co m .a do b e. c ai rn g or m. c on t ro l. F ro nt C on t ro ll e r;




                                                                      y
    p u bl i c cl a ss F S Co n tr ol l er e x te n ds F r on tC o nt r ol le r
    {




                                                           op
      p ub l ic f u nc t io n F SC on t ro l le r( )
      {
        su p er ( );
        ad d Co m ma nd ( Lo ad P ho to s Ev e nt .E V EN T_ I D, L oa dP h ot os C om m an d) ;
                                                       C
        ad d Co m ma nd ( Ad dP h ot oT o Ca r tE ve n t. EV E NT _ ID ,
         A d dP h ot oT o Ca rt C om m an d) ;
      }
    }
                                       ot
}

                                   6. Save the file.
                                N
                       o
                 D




30                                                                         Copyright © 2008 Adobe Systems Incorporated
Implementing Delegates
                                        • Each Delegate class
                                             ■ provides a local proxy for a remote service
                                             ■ serves as a contract between client and server development teams
                                             ■ may hide underlying implementation details including
                                                   – Client-side service lookups
                                                   – Server API method invocations
                                                   – Formatting of method arguments
                                                   – Data transformations
                                        • Use of a Delegate allows mock services and dummy data to be used while
                                          server implementations are resolved
                                        • Delegate classes should not be used outside the Control layer




                                                                          y
                                                              op
                                  Understanding the role of a Delegate
                                        • Using Delegate classes hides the details of the Flex client invoking
                                          WebService, RemoteObject, HTTPService, or custom RDS
                                                      C
                                          components to connect to the server tier or the local shared object
                                        • The Delegate is a client-side proxy for one or more remote server APIs
                                        • Each Delegate class may group API functionality by context
                                          ot
                                             ■ OrderDelegate may proxy the API for all order functionality
                                               such as addOrder, updateOrder, cancelOrder etc.
                                             ■ UserDelegate may proxy the API for all user functionality
                                 N


                                               such as login, logout, registerUser, updateUser etc.
                       o
              D




                                  Figure 7: Conceptualization of Delegate API mappings to Server-Tier Business APIs

                                       Note: Delegates are not required to match all the all business service APIs.
                                       Only those client-side proxies required should be matched.



Copyright © 2008 Adobe Systems Incorporated                                                                           31
Implementing a Delegate
                                • A Delegate
                                    ■ is created and invoked by a corresponding Command
                                    ■ defines and configures the Responder for each remote service call
                                    ■ is the only class to directly use the ServiceLocator
                                    ■ may perform data transformations required by a remote service
                                          – Outgoing data may be transformed and aggregated
                                          – Incoming data may be transformed, parsed, and validated
                                    ■ may manage queuing and result-routing for multiple server calls
                                • No specific Delegate interface or parent class is provided by the
                                  Cairngorm MVC framework
                                • Delegates are commonly identified using a Delegate" suffix




                                                               y
                            Implementing a Responder


                                                       op
                                • A mx.rpc.Responder object defines a method to be called when a
                                  remote service call returns a result, and when the remote call fails
                                • The Responder is either
                                              C
                                     ■ an mx.rpc.Responder object, or
                                     ■ a class which implements the mx.rpc.IResponder interface
                                   ot
im p or t m x. r pc .R e sp on d er ;
 ...
va r r es p on d er :R e sp on d er = ne w R es p on d er (o n Re su l t, on Fa u lt );
                           N

pr i va te fu n ct io n o nR e su l t( ev e nt :R e su l tE ve n t) :v o id { .. . }
pr i va te fu n ct io n o nF a ul t (e ve n t: Fa u lt E ve nt ) :v oi d { .. . }
                   o



                            Example Delegate code
            D




pa c ka ge co n tr ol . de le g at e s
{
  p u bl i c cl a ss P h ot o De le g at e
  {
    p ub l ic f u nc t io n P ho to D el e ga te ( )
    {

        }
    }
}

                                • Commonly, a Command will define a Responder to specify how results
                                  from a remote call, made through a Delegate, are to be handled
                                • a Delegate constructor may allow the calling Command to specify a
                                  Responder, caching it for later use




32                                                                  Copyright © 2008 Adobe Systems Incorporated
pa c ka ge co n tr ol . de le g at e s
{
  i m po r t mx . rp c. I Re s po nd e r;
  p u bl i c cl a ss P h ot o De le g at e
  {
    p ri v at e v ar __ re s po nd e r: I Re sp o nd er ;
    p ub l ic f u nc t io n P ho to D el e ga te ( re sp o nd e r: IR e sp on d er )
    {
       _ _ re s po nd e r = r es p on de r ;
    }
  }
}

                                        • a Delegate will use the ServiceLocator to access the specific RDS
                                          instance that will be used to execute the method call

pr i va te va r _ _l o ca to r :S e rv ic e Lo ca t or = Se rv i ce Lo c at o r. ge t In st a nc e () ;




                                                                       y
                                        • Delegates may implement accessors for specific services




                                                            op
                                        • Delegates may have one or more methods that match the server API
                                  Tip: The names of the methods should be present-tense verb forms such as
                                  loadCatalog, updateUser, processOrder, etc.
                                                    C
                                          ot
                                 N
                       o
              D




Copyright © 2008 Adobe Systems Incorporated                                                                  33
Walkthrough 7: Building a Cairngorm
Delegate
                            In this walkthrough, you will perform the following tasks:
                                • Create the PhotoDelegate business component
                                • Modify LoadPhotosCommand to use PhotoDelegate


                            Steps
                              1. Select the business package in the Navigator.

                            Create the PhotoDelegate business component
                              2. Create a new child package called delegates.




                                                                 y
                              3. In the delegates package, create a new ActionScript class with the




                                                      op
                                 following properties
                                     • Filename is PhotoDelegate
                                     • Leave the Generate constructor from superclass option checked
                                              C
                              4. From the commands package, open LoadPhotosCommand.as
                              5. Move the definition and instantiation of __service from
                                 LoadPhotosCommand into PhotoDelegate, along with its
                                 required import statement.
                                  ot

im p or t c om . ad ob e .c ai r ng o rm .b u si ne s s. S er vi c eL oc a to r ;
 ...
                           N


pr i va te va r _ _l o ca to r :S e rv ic e Lo ca t or = Se rv i ce Lo c at o r. ge t In st a nc e () ;

                              6. Declare a private class property named __service, typed as
                   o



                                 HTTPService, and import mx.rpc.http.HTTPService.
           D




im p or t m x. r pc .h t tp .H T TP S er vi c e;
 ...
pr i va te va r _ _s e rv ic e :H T TP Se r vi ce ;

                              7. In the constructor, use the ServiceLocator to assign a reference to
                                 the photosIn service to __service.

__ s er vi c e = _ _l o ca to r .g e tH TT P Se rv i ce ( "p ho t os In " );

                              8. Declare a private class property named __responder, typed to the
                                 IResponder interface, and import mx.rpc.IResponder.

im p or t m x. r pc .I R es po n de r ;
 ...
pr i va te va r _ _r e sp on d er : IR es p on de r ;




34                                                                    Copyright © 2008 Adobe Systems Incorporated
9. Modify the constructor to accept a responder parameter, and assign it
                                         to __responder.

pu b li c f un c ti on Ph ot o De l eg at e (r es p on d er :I R es po n de r )
{
  _ _ se r vi ce = __ l oc a to r. g et HT T PS e rv ic e (" ph o to s In ") ;
  _ _ re s po nd e r = r es p on de r ;
}

                                    10. Declare a public method named loadPhotos, with a void return type,
                                        because the responder will be used to define the service result handler.

pu b li c f un c ti on lo ad P ho t os () : vo id
{
}

                                    11. In loadPhotos(), invoke the send() method on the __service




                                                                       y
                                        reference, assigning the result to a local variable typed as AsyncToken.




                                                            op
va r t ok e n: A sy nc T ok en = _ _s er v ic e. s en d () ;

                                    12. Use the addResponder() method to assign __responder as the
                                                         C
                                        responder for this token’s remote service call.

to k en .a d dR e sp on d er (_ _ re s po nd e r) ;
                                          ot
                                  Modify LoadPhotosCommand to use PhotoDelegate
                                    13. From the commands package, open LoadPhotosCommand.as.
                                 N

                                    14. Comment out all code in the execute() method.
                                    15. In the execute() method, declare and create a local
                                        mx.rpc.Responder object, passing a reference to the
                       o



                                        onResults_loadPhotos method as its first parameter, and null as
                                        its second parameter.
              D




va r r es po n de r :R es p on de r = n ew R e sp on d er (o n Re s ul ts _ lo ad P ho t os , nu l l) ;

                                    16. Next in this method, declare and create a local PhotoDelegate object,
                                        passing responder to its constructor.

va r d el e ga t e: Ph o to De l eg a te = ne w P ho t oD el e ga te ( re s po nd e r) ;

                                    17. Last in this method, invoke the loadPhotos() method on the
                                        delegate.

de l eg at e .l o ad Ph o to s( ) ;

                                    18. Save the file.




Copyright © 2008 Adobe Systems Incorporated                                                                   35
Using the Cairngorm components
            • Once Cairngorm components have been built, you can use them to
              either build a new application or refactor an existing, non-Cairngorm
              application




                                            y
                                 op
                         C
              ot
          N
       o
     D




36                                               Copyright © 2008 Adobe Systems Incorporated
Walkthrough 8: Modifying FStop to use
Cairngorm
                                  In this walkthrough, you will perform the following tasks:
                                        • Modify the FStop application to use your new, custom Cairngorm
                                          components.


                                  Steps
                                      1. Open the FStop.mxml application file.

                                  Modify FStop to use the new Cairngorm components
                                      2. Since the Services repository now has RDS components, delete the




                                                                         y
                                         HTTPService tag on line 46.




                                                             op
                                      3. Since the PhotoCommand now has the business logic for the processing
                                         the response of the LoadPhotos RDS request, delete the function
                                         photosInHandler().
                                      4. Since the ModelLocator now has the variables for the photos and
                                                     C
                                         purchase cart business data, delete lines 17-18.
                                      5. Just after the Script block, instantiate Services to configure and cache
                                         the respository.
                                          ot
<r d s: Se r vi c es x m ln s: r ds = "b us i ne ss . *" / >
                                 N

                                      6. Below the Services instantiation, also instantiate the FSController to
                                         properly route business events to the PhotoCommand business
                                         component.
                       o



<r o ut er : FS C on tr o ll er xm l ns :r o ut er = "b u si ne s s. *" / >
              D




                                      7. To dispatch the LoadPhotos business event, modify the body of the
                                         initApp() function. Simply dispatch an instance of the
                                         LoadPhotosEvent business event. Be sure the code appears as
                                         follows.

pr i va te fu n ct io n i ni t Ap p () :v o id
{
  v a r e ve nt : Lo ad P ho t os Ev e nt =n e w L oa dP h ot os E ve n t( );
  e v en t .d is p at ch ( );
}

                                  Tip: Remember that business events can “self-dispatch” directly to the Controller
                                  layer.




Copyright © 2008 Adobe Systems Incorporated                                                                      37
8. To dispatch the AddPhotoToCart business event, modify the body of the
                                  photoSelectedHandler() function. Dispatch a new business event
                                  as an instance of AddPhotoToCartEvent. Be sure the code appears
                                  as follows.

pr i va te fu n ct io n p ho t oS e le ct e dH an d le r (e ve n t: Ph o to E ve nt ) :v oi d
{
  v a r a dd Ev e nt :A d dP h ot oT o Ca rt E ve n t=
    n ew Ad dP h ot o To Ca r tE ve n t( e ve nt . se le c te d Ph ot o );
  a d dE v en t. d is pa t ch ( );

}

                               9. In the Script block just below the imports, declare a bindable variable to
                                  alias the instance of the ModelLocator repository.




                                                                   y
[B i nd ab l e]
pr i va te va r _ _m o de l: M od e lL oc a to r= M od e lL oc a to r. g et I ns ta n ce () ;




                                                       op
                            Tip: This alias is a convenience solution to allow easy databinding referencing of
                            business data from the ShoppingCart and Gallery tags.
                              10. Update the ShoppingCart tag to use the purchasedPhotos
                                                C
                                  cached in the ModelLocator repository.

<v : Sh op p in g Ca rt x= "6 2 6" y= "1 1 8
                                     ot
   " pu r ch as e dP h ot os = "{ __ m od e l. pu r ch as e dP h ot os } " />

                              11. Update the Gallery tag to use the photoData cached in the
                           N

                                  ModelLocator repository.

<v : Ga ll e ry id =" g al le r y" la be l =" Ga l le r y"
 p h ot oD a ta = "{ __ m od el . ph o to Da t a} "
                   o



 p h ot oS e le c te d= " ph ot o Se l ec te d Ha nd l er ( ev en t )" />
           D




                              12.   Save the changes to FStop.mxml application file.
                              13.   Change the Flex Builder perspective to Flex Debugging.
                              14.   Set breakpoints with your instructor’s guidance.
                              15.   Build and debug the application.




38                                                                      Copyright © 2008 Adobe Systems Incorporated
Summary
                                        • Cairngorm encourages developers to organize source code by roles and
                                          layers.
                                        • Cairngorm is easily implemented with 3 primary classes:
                                             ■ Business Event(s)
                                             ■ Command(s)
                                             ■ FrontController
                                        • Cairngorm solutions may also employ 2 optional classes:
                                             ■ ModelLocator
                                             ■ ServiceLocator
                                        • Using Cairngorm helps developer focus on the MVC mantra:
                                             ■ Views render data from Model and announce user gestures




                                                                         y
                                             ■ Control layer focus on business logic and data persistence.




                                                             op
                                             ■ Control logic updates Model.
                                        • Cairngorm solutions deliver applications where views can be changed
                                          independent of business logic and data access.
                                        • Even simply applications can [and often do-] grow to large applications.
                                                      C
                                          As such, even simply applications can benefit from Cairngorm
                                          architecture implementations.
                                             ■ Cairngorm MVC is not appropriate for libraries or component-
                                          ot
                                                level architectures.
                                        • Cairngorm solutions are easily maintained.
                                 N

                                        • Cairngorm solutions can scale in complexity in well-defined manners.
                       o
              D




Copyright © 2008 Adobe Systems Incorporated                                                                     39
y
          op
         C
         ot
     N
     o
     D




40            Copyright © 2008 Adobe Systems Incorporated
Lab: 1
                                  Objectives
                                  In this lab, you will perform the following tasks:
                                        •   Create a new Cairngorm MVC application from scratch.
                                        •   Create a form to request a patient visitation.
                                        •   Submit the patient visitation request using a business event.
                                        •   Create business components to process the visitation request.




                                                                          y
                                                              op
                                                       C
                                            ot
                                 N
                       o
              D




Copyright © 2008 Adobe Systems Incorporated                                                                 41
Tasks
     This lab exercise will ask you to build a Flex RIA application that allows patient
     visitation information to be submitted.




                                            y
                                op
                        C
     In this lab, you will learn how to do the following:
            ot
         • Configure a blank Cairngorm MVC project
         • Use Business Events to deliver view gestures and changes to the
     N

           business layer.
         • Build a Control layer for your business features
         • Use the Services repository for LiveCycle data services
     o



         • Use the FrontController to connect business components to your views
     D




     Note: This RIA application will not use remote data services to save the
     visitation request to the server tier. That RDS feature will actually be completed
     in subsequent training where you will create a LiveCycle server process and
     configure the application to communicate with the LiveCycle data services.




42                                               Copyright © 2008 Adobe Systems Incorporated
Part 1: Create a new Cairngorm MVC Project
                                  In this part of the lab, you will perform the following tasks:
                                        •   Configure project properties to use the Cairngorm library
                                        •   Create the MVC shell packages
                                        •   Create an empty Services repository
                                        •   Create an empty FrontController implementation
                                        •   Instantiate the Services and FrontController implementations


                                  Steps
                                      1. Close all open projects and then import the f3ic_patientVisits project
                                         from {installLocation}/f3ic.




                                                                          y
                                  Configure project properties to use the Cairngorm library




                                                              op
                                      2.   Select Project > Properties > Flex Build Path > Library Path
                                      3.   Select the Add SWC... option.
                                      4.   Browse to the {installLocation}/f3ic directory.
                                      5.
                                                       C
                                           Choose the Cairngorm.swc file.

                                       Note: If you wish to see the Cairngorm source files download the source from
                                            ot
                                       labs.adobe.com then use the Source Attachment option in the Library Path
                                       screen.
                                 N

                                      6. Click OK to close the Project Properties dialog.

                                  Create the MVC shell packages
                       o



                                      7. Move to the Flex Builder Navigator.
                                      8. In the src folder, create the com.patientvisitations.control
              D




                                         package. Follow these substeps.
                                         1. In the Flex Builder Navigator, Right-Click on the src folder,
                                         2. Select New > Folder from the popup menu.
                                         3. Specify com/patientvisitations/control/
                                  Tip: This is a shortcut to create multiple, nested packages at one time.
                                         4. Click Finish.
                                      9. Create the other shell packages
                                            • com.patientvisitations.control.commands
                                            • com.patientvisiattions.control.delegates
                                            • com.patientvisitations.control.events
                                            • com.patientvisitations.view
                                            • com.patientvisitations.model




Copyright © 2008 Adobe Systems Incorporated                                                                       43
Create an empty Services repository
                              10. Right-Click on the delegates package. Select the New > MXML
                                  Component option.
                              11. Specify a Filename of Services, a Based on value of
                                  ServiceLocator, and click Finish.

                                Note: The New MXML component wizard does not provide options for
                                custom (non- mx Framework) classes. Type in ServiceLocator option
                                for now. Next steps will manually fix the xmlns properly imports the
                                Cairngorm class and the Services extends ServiceLocator.

                              12. Modify the default namespace entered, xmlns="*", to properly import
                                  com.adobe.cairngorm.business.*. Use the rds prefix.

<r d s: Se r vi c eL oc a to r x ml n s: rd s =" co m .a d ob e. c ai rn g or m .b us i ne ss . *"




                                                                  y
 x m ln s :m x= " ht tp : // w ww .a d ob e. c om / 20 06 / mx ml " >




                                                       op
</ r ds :S e rv i ce Lo c at or >

                              13. Save the file.   C
                            Create an empty FrontController implementation
                              14. Right-Click on the control package. Select the New > Actionscript Class
                                  option.
                                    ot
                              15. Specify a filename of PTController.
                              16. Use the Browse... button to specify a superclass of FrontController.
                            N

                              17. Select Finish.
                              18. Save the file.

                            Instantiate the FrontController and Services Repository
                   o



                              19. Right-Click on the src folder.
           D




                              20. Select New > MXML Application.
                              21. Specify the Filename PatientVisitations and the Layout to
                                  vertical.
                              22. Using the MXML tag notations, instantiate the FrontController
                                  and Services classes.

<c o nt ro l :P T Co nt r ol le r
 x m ln s :c on t ro l= " co m .p at i en tv i si t at io n s. co n tr o l. *" />

<r d s: Se r vi c es
 x m ln s :r ds = "c om . pa t ie nt v is it a ti o ns .c o nt ro l .d e le ga t es .* " />

                              23. Save changes.
                              24. Build the project and run it.




44                                                                     Copyright © 2008 Adobe Systems Incorporated
Flex 3: Introducing the Cairngorm MVC Framework
Flex 3: Introducing the Cairngorm MVC Framework
Flex 3: Introducing the Cairngorm MVC Framework
Flex 3: Introducing the Cairngorm MVC Framework
Flex 3: Introducing the Cairngorm MVC Framework
Flex 3: Introducing the Cairngorm MVC Framework

Más contenido relacionado

La actualidad más candente

Elementsorganizer 9 handbuch
Elementsorganizer 9 handbuchElementsorganizer 9 handbuch
Elementsorganizer 9 handbuchWGS
 
Windows phone 8 guide for android developers
Windows phone 8  guide for android developersWindows phone 8  guide for android developers
Windows phone 8 guide for android developersKhai Le
 
Cp r80.30 ga_threat_prevention_adminguide
Cp r80.30 ga_threat_prevention_adminguideCp r80.30 ga_threat_prevention_adminguide
Cp r80.30 ga_threat_prevention_adminguidecoolboyasif
 
What is-android? PDF Document
What is-android? PDF DocumentWhat is-android? PDF Document
What is-android? PDF DocumentJackCrafter
 
Case wx240 tier 3 wheeled excavator service repair manual
Case wx240 tier 3 wheeled excavator service repair manualCase wx240 tier 3 wheeled excavator service repair manual
Case wx240 tier 3 wheeled excavator service repair manualfusjefjjskekmem
 

La actualidad más candente (10)

adj
adjadj
adj
 
Rstutorialbook
RstutorialbookRstutorialbook
Rstutorialbook
 
Elementsorganizer 9 handbuch
Elementsorganizer 9 handbuchElementsorganizer 9 handbuch
Elementsorganizer 9 handbuch
 
Windows phone 8 guide for android developers
Windows phone 8  guide for android developersWindows phone 8  guide for android developers
Windows phone 8 guide for android developers
 
FRX Version 6.7 User Manual and Guide
FRX Version 6.7 User Manual and GuideFRX Version 6.7 User Manual and Guide
FRX Version 6.7 User Manual and Guide
 
6 Daftar Isi
6 Daftar Isi6 Daftar Isi
6 Daftar Isi
 
Cp r80.30 ga_threat_prevention_adminguide
Cp r80.30 ga_threat_prevention_adminguideCp r80.30 ga_threat_prevention_adminguide
Cp r80.30 ga_threat_prevention_adminguide
 
Android tutorial
Android tutorialAndroid tutorial
Android tutorial
 
What is-android? PDF Document
What is-android? PDF DocumentWhat is-android? PDF Document
What is-android? PDF Document
 
Case wx240 tier 3 wheeled excavator service repair manual
Case wx240 tier 3 wheeled excavator service repair manualCase wx240 tier 3 wheeled excavator service repair manual
Case wx240 tier 3 wheeled excavator service repair manual
 

Similar a Flex 3: Introducing the Cairngorm MVC Framework

Developing Adobe AIR 1.5 Applications with HTML and Ajax
Developing Adobe AIR 1.5 Applications with HTML and AjaxDeveloping Adobe AIR 1.5 Applications with HTML and Ajax
Developing Adobe AIR 1.5 Applications with HTML and Ajaxlosalamos
 
Idol Server 7.3 Admin Rev7
Idol Server 7.3 Admin Rev7Idol Server 7.3 Admin Rev7
Idol Server 7.3 Admin Rev7guest0a2cbfba
 
Domino access for ms outlook
Domino access for ms outlookDomino access for ms outlook
Domino access for ms outlooknpshriya
 
ESM 6.5c SP1 Installation and Configuration Guide
ESM 6.5c SP1 Installation and Configuration GuideESM 6.5c SP1 Installation and Configuration Guide
ESM 6.5c SP1 Installation and Configuration GuideProtect724mouni
 
Hfs to zfs migration
Hfs to zfs migrationHfs to zfs migration
Hfs to zfs migrationsatish090909
 
Xen app getting-started-guide
Xen app getting-started-guideXen app getting-started-guide
Xen app getting-started-guidehergamia
 
Fscm91sbil b1109
Fscm91sbil b1109Fscm91sbil b1109
Fscm91sbil b1109shivram2511
 
Force.com fundamentals
Force.com fundamentalsForce.com fundamentals
Force.com fundamentalsmanasystest
 
Adobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler APIAdobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler APIeugeneyh
 
Gambit 2.2-tutorials
Gambit 2.2-tutorialsGambit 2.2-tutorials
Gambit 2.2-tutorialsShiva Uppu
 

Similar a Flex 3: Introducing the Cairngorm MVC Framework (20)

Developing Adobe AIR 1.5 Applications with HTML and Ajax
Developing Adobe AIR 1.5 Applications with HTML and AjaxDeveloping Adobe AIR 1.5 Applications with HTML and Ajax
Developing Adobe AIR 1.5 Applications with HTML and Ajax
 
Idol Server 7.3 Admin Rev7
Idol Server 7.3 Admin Rev7Idol Server 7.3 Admin Rev7
Idol Server 7.3 Admin Rev7
 
Captivate 5 user guide
Captivate 5 user guideCaptivate 5 user guide
Captivate 5 user guide
 
Domino access for ms outlook
Domino access for ms outlookDomino access for ms outlook
Domino access for ms outlook
 
ESM 6.5c SP1 Installation and Configuration Guide
ESM 6.5c SP1 Installation and Configuration GuideESM 6.5c SP1 Installation and Configuration Guide
ESM 6.5c SP1 Installation and Configuration Guide
 
Firstcup
FirstcupFirstcup
Firstcup
 
Hfs to zfs migration
Hfs to zfs migrationHfs to zfs migration
Hfs to zfs migration
 
Xen app getting-started-guide
Xen app getting-started-guideXen app getting-started-guide
Xen app getting-started-guide
 
Adf tutorial oracle
Adf tutorial oracleAdf tutorial oracle
Adf tutorial oracle
 
Fscm91sbil b1109
Fscm91sbil b1109Fscm91sbil b1109
Fscm91sbil b1109
 
Installation
InstallationInstallation
Installation
 
Force.com fundamentals
Force.com fundamentalsForce.com fundamentals
Force.com fundamentals
 
Party merge
Party mergeParty merge
Party merge
 
Manual fet-pro430
Manual fet-pro430Manual fet-pro430
Manual fet-pro430
 
Rst4userguide
Rst4userguideRst4userguide
Rst4userguide
 
Business objects51en
Business objects51enBusiness objects51en
Business objects51en
 
11iadutil
11iadutil11iadutil
11iadutil
 
Adobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler APIAdobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler API
 
ESM_InstallGuide_5.6.pdf
ESM_InstallGuide_5.6.pdfESM_InstallGuide_5.6.pdf
ESM_InstallGuide_5.6.pdf
 
Gambit 2.2-tutorials
Gambit 2.2-tutorialsGambit 2.2-tutorials
Gambit 2.2-tutorials
 

Flex 3: Introducing the Cairngorm MVC Framework

  • 1. Flex 3: Introducing Cairngorm August 2008 y op C ot N o D Copyright © 2008 Adobe Systems Incorporated 1
  • 2. Trademarks Adobe, the Adobe logo, Acrobat, Acrobat Reader, Adobe Type Manager, ATM, XMP, Display PostScript, Distiller, Exchange, Frame, FrameMaker, and PostScript" are trademarks of Adobe Systems Incorporated, 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Adobe, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev, and WebHelp are either registered trademarks or trademarks of Adobe Systems Incorporated and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Adobe Systems Incorporated or other entities and may be registered in certain jurisdictions including internationally. Third-Party Information This guide contains links to third-party websites that are not under the control of Adobe, and Adobe is not responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your y own risk. Adobe provides these links only as a convenience, and the inclusion of the link does not imply that Adobe endorses or accepts any responsibility for the content on those third-party sites. op Copyright © 1997-2008 Adobe Systems Incorporated All rights reserved. C The software described in this manual is provided by Adobe Systems Incorporated under a Adobe Systems Incorporated agreement. The software may be used only in accordance with the terms of the agreement. No part of this publication may be reproduced, transmitted, or translated in any form or by any means, electronic, mechanical, ot photocopying, manual, optical, recording, or otherwise, outside the license agreement accompanying these materials, without the prior written permission of Adobe Systems Incorporated Adobe Systems Incorporated claims copyright in this program and documentation as an unpublished work, revisions N of which were first licensed on the date indicated in the foregoing notice. Claim of copyright does not imply waiver of other rights of Adobe Systems Incorporated and its subsidiaries. o Information in this manual may change without notice and does not represent a commitment on the part of Adobe Systems Incorporated D NOTICE OF LIABILITY The information in these training materials is distributed on as "AS IS" basis, without warranty of any kind, either express or implied. While every precaution has been taken in the preparation of these materials, neither Adobe Systems Incorporated nor its licensors shall have any liability to any person or entity with respect to liability, loss, or damage caused or alleged to be caused directly or indirectly by the instructions contained in these materials or by the computer software and hardware products described herein. Third Edition: Aug 2008, Second Edition: June 2008, First Edition: March 2008 Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA 2 Copyright © 2008 Adobe Systems Incorporated
  • 3. Flex 3: Introducing Cairngorm Introducing Cairngorm Introducing Cairngorm......................................................................................................................................................... 2 Understanding the purpose of Cairngorm..................................................................................................................... 2 Reviewing the benefits of using Cairngorm .................................................................................................................. 3 Learning about the components of Cairngorm ............................................................................................................. 3 Using Cairngorm in Flex RIAs ............................................................................................................................................ 4 Identifying roles of code ................................................................................................................................................... 4 Refactoring code to Cairngorm layers and classes ........................................................................................................ 5 Reviewing benefits of Cairngorm refactoring................................................................................................................ 7 Walkthrough 1:  Using Cairngorm in a project ................................................................................................................. 8 Implementing the ModelLocator......................................................................................................................................... 9 y Example ModelLocator code............................................................................................................................................ 9 Using the ModelLocator ................................................................................................................................................. 10 op Walkthrough 2:  Building the ModelLocator ................................................................................................................... 11 Implementing the ServiceLocator ..................................................................................................................................... 13 Example ServiceLocator code ........................................................................................................................................ 13 Using the ServiceLocator ................................................................................................................................................ 13 Walkthrough 3:  Building the ServiceLocator.................................................................................................................. 14 C Implementing Cairngorm events....................................................................................................................................... 16 Introducing the concept of Business Events................................................................................................................. 16 Example Cairngorm event code..................................................................................................................................... 16 ot Using a Cairngorm event ................................................................................................................................................ 17 Walkthrough 4:  Building Cairngorm events ................................................................................................................... 18 Implementing Commands.................................................................................................................................................. 20 Example Command code................................................................................................................................................ 20 N Using the Command ....................................................................................................................................................... 21 Walkthrough 5:  Building Cairngorm Commands.......................................................................................................... 22 Implementing the FrontContoller ..................................................................................................................................... 27 o Example FrontController code....................................................................................................................................... 27 Using the FrontController .............................................................................................................................................. 28 D Walkthrough 6:  Building the FrontController ................................................................................................................ 29 Implementing Delegates ..................................................................................................................................................... 31 Understanding the role of a Delegate ........................................................................................................................... 31 Implementing a Delegate ................................................................................................................................................ 32 Implementing a Responder ............................................................................................................................................ 32 Example Delegate code ................................................................................................................................................... 32 Walkthrough 7:  Building a Cairngorm Delegate ............................................................................................................ 34 Using the Cairngorm components .................................................................................................................................... 36 Walkthrough 8:  Modifying FStop to use Cairngorm ..................................................................................................... 37 Lab: Tasks .................................................................................................................................................................................. 42 Create a new Cairngorm MVC Project............................................................................................................................. 43 Create a form to request a patient visitation .................................................................................................................... 45 Submit the Visitation Request ............................................................................................................................................ 47 Create the Business Component to Process the Visitation Details ............................................................................... 49 Copyright © 2008 Adobe Systems Incorporated i
  • 4. y op C ot N o D ii Copyright © 2008 Adobe Systems Incorporated
  • 5. Introducing Cairngorm In this module you will preview the use of Cairngorm for Flex. You will be introduced to concepts and components of Cairngorm; without the accompanying in-depth theory and details. You will also convert an existing Flex application to use Cairngorm. y Objectives op After completing this unit, you should be able to: • Understand why Cairngorm is used in Flex development. C • Understand what are the primary components used in Cairngorm. • Understand the use of custom events in Cairngorm. • Understand the impacts of using Cairngorm on Flex applications. ot Topics N In this unit, you will learn about the following topics: • Introducing Cairngorm • Using Cairngorm in Flex RIAs o • Implementing the ModelLocator D • Implementing the ServiceLocator • Implementing Cairngorm events • Implementing Commands • Implementing the FrontContoller • Implementing Delegates • Using the Cairngorm components Copyright © 2008 Adobe Systems Incorporated 1
  • 6. Introducing Cairngorm • Understanding Cairngorm purposes • Review the benefits of using Cairngorm • Learn about the components of Cairngorm Understanding the purpose of Cairngorm • Cairngorm is an approach to organizing and partitioning ■ code and packages ■ component functionality and roles • Cairngorm is a “best-practice” methodology for Flex software design and development y • Cairngorm encourages developers to identify, organize, and separate code based on its roles/responsibilities. op C ot N Figure 1: Mapping Functionality Roles to Cairngorm Layers o • Cairngorm encourages separation of concerns D ■ Model holds data objects and the state of the data ■ Controller process business logic ■ Views render data and announce gestures with events ■ Views communicate with Controller using events ■ Views watch Model with data bindings – Views are graphical user interfaces or visual portions of the Flex application. – Views usually are composites of UI controls or other views. – Views can contain child views – Even <mx:Application /> is a view 2 Copyright © 2008 Adobe Systems Incorporated
  • 7. Figure 2: View Nestngs within the FStop application Reviewing the benefits of using Cairngorm y op • Cairngorm allows designers, component developers, and data-services developers to work in parallel • Cairngorm is best suited for medium to large-size applications • Cairngorm is ideal for team development C • Cairngorm provides the following benefits ■ maintenance is easier ■ debugging is easier ot ■ feature additions and/or changes are easier ■ automated testing of business logic and data access is easier N ■ using mock data-services is easier Learning about the components of o Cairngorm D • Cairngorm has 5 primary components that are used with Flex RIA solutions ■ ModelLocator: a repository for global data and global access ■ Services: a respository of pre-configured RDS components ■ Commands: non-UI components that process business logic ■ Events: custom events that trigger the business objects [Commands] to start processing ■ Controller: component needed to route business events to commands for processing. Copyright © 2008 Adobe Systems Incorporated 3
  • 8. Using Cairngorm in Flex RIAs • Identify Roles of Code • Refactor Code to Cairngorm MVC Layers • Review Benefits of Cairngorm Refactoring Identifying roles of code • Within the source code for a Flex application identify code that has a role- or is responsible for data, GUI, business, or data services. y op C ot N o D Figure 3: Identifying Roles of Code and Color by Stereotype • Using the example illustration [from the FStop application] above, let’s identify specific code “roles”: ■ Inside <mx:Script /> – [Bindable] public var declarations are part of “Data” roles – The remaining is for either business or data access. ■ After <mx:Script /> – These are controls and components instantiated using MXML tag notation. – <mx:HTTPService /> is a non-UI controls in the “Data Access” role 4 Copyright © 2008 Adobe Systems Incorporated
  • 9. – All other <mx: /> tags are view components associated with the “GUI” role – <v: /> tags are custom view components with “GUI” roles Refactoring code to Cairngorm layers and classes • Refactoring code to use Cairngorm can be achieved by y op C ot N o D Figure 4: Mapping code to Cairngorm MVC Layers and Components Tip: While the imports statements in the code above have not been highlighted, the imports will be modified accordingly to support code restructuring. 1. Isolate the “ui” tags in the FStop application file in the View layer 2. Move the “data” code to the ModelLocator in the Model layer 3. Create custom [business] events to communicate from the View layer to the Controller [business] layer. – AddPhotosToCartEvent – LoadPhotosEvent Copyright © 2008 Adobe Systems Incorporated 5
  • 10. 4. Move the “business” code to the Controller layer – Business logic is moved to the LoadPhotosCommand – Business logic is moved to the AddPhotoToCartCommand – RDS data access is moved to the Services repository 5. Create FSController component to route business events to PhotoCommand y op C Figure 5: Identifying New Classes Required for Cairngorm Refactoring 6. Update View components to databind to ModelLocator data ot 7. Update View components to dispatch business events. 8. Update Application to create the FSController, Services respository, and ModelLocator instances. N Note: Only one, unique instance of the FSController, Services, and ModelLocator are created for the application. In contrast, each business event o will have its own business command class... this is a 1-to-1 mapping of business events to business commands. D 6 Copyright © 2008 Adobe Systems Incorporated
  • 11. Reviewing benefits of Cairngorm refactoring • View code is concise and understandable and “renders” only. • View classes do not know anything about Controller [Business] components; except through the use of business events • Model data is stored and accessed from the ModelLocator. • All ModelLocator variables support data binding. • Business components do not know anything about the View classes. • View components use data binding to render data cached in the ModelLocator [Model] layer y op C ot N Figure 6: Benefits Code Simplicity when using Cairngorm MVC o D Copyright © 2008 Adobe Systems Incorporated 7
  • 12. Walkthrough 1: Using Cairngorm in a project In this walkthrough, you will perform the following tasks: • Add the Cairngorm library to the FStop project Steps Set up the working environment 1. Unzip the file f3ic_studentFiles_16Jun08.zip to disk. It will automatically create an f3ic folder with supplied files in it. 2. Open Flex Builder. 3. Select File > Import > Flex Project... 4. Browse to {installationLocation}/f3ic and select the archive y f3ic_fstop.zip. op 5. Click Finish. Note: In the same folder there are staged solutions archived for each each walkthrough . Simply import the archive to see the solution. C Add the Cairngorm library to the FStop project 6. Click the project just opened, then select Project > Properties > Flex ot Build Path >Library Path. 7. Select the Add SWC... button and add the Cairngorm library located at N {installLocation}/f3ic/Cairngorm.swc. o D 8 Copyright © 2008 Adobe Systems Incorporated
  • 13. Implementing the ModelLocator • The ModelLocator is a global singleton repository for shared or global data ■ Singleton means that only instance of the class should exist • Does not load or persist data to a permanent data store • Does not contain business logic • Serves as caching and access location only • Caches custom variables/data specific to application • Supports data binding for auto-notifications of data changes to views Example ModelLocator code y • Be sure the class implements the getInstance() method • Also contains public variables that hold application data op ■ In example code variables photoData and purchasedPhotos pa c ka ge mo d el { C i m po r t mx . co ll e ct i on s. A rr ay C ol l ec ti o n; ot [ B in d ab le ] p u bl i c cl a ss M o de l Lo ca t or { s ta t ic p r iv a te v a r __ i ns t an ce : Mo de l Lo c at or = nu ll ; N p ub l ic v a r p ho to D at a: A rr a yC ol l ec ti o n= n ew A r ra yC o ll e ct io n () ; p ub l ic va r p ur c ha se d Ph o to s: A rr ay C ol l ec ti o n= ne w A r ra yC o ll e ct io n () ; o s ta t ic p u bl i c fu n ct io n g e tI ns t an ce ( ): M od el L oc at o r { D if ( __ i ns ta n ce = = n ul l ) { _ _ in s ta nc e =n ew Mo d el Lo c at or ( ); } re t ur n _ _i n st an c e; } } } Copyright © 2008 Adobe Systems Incorporated 9
  • 14. Using the ModelLocator • Access data stored in the ModelLocator via the getInstance() method <! [ CD AT A [ i m po r t mo d el .M o de l Lo ca t or ; p r iv at e v a r __ m od el : Mo d el Lo c at or = Mo d el Lo c at or . ge t In st a nc e( ) ; ]] > • Access data via the instance name of the ModelLocator <m x :D a ta Gr i d da t aP r ov id e r= { _ _ mo d el .p h ot oD a ta} /> y op C ot N o D 10 Copyright © 2008 Adobe Systems Incorporated
  • 15. Walkthrough 2: Building the ModelLocator In this walkthrough, you will perform the following tasks: • Create the ModelLocator respository Steps 1. In the FB Navigator view, open the src directory. Create the ModelLocator Repository 2. Create a new package called model. 3. Create an ActionScript class called ModelLocator.as. • Uncheck the “Generate Constructor from super class” checkbox. y 4. Create a static, private variable named __instance, data typed as ModelLocator, and set it equal to null. op st a ti c p ri v at e v ar _ _ in s ta nc e :M od e lL o ca to r =n ul l ; 5. Create a global accessor function to allow only one ModelLocator C instance to be accessed from anywhere. This function should be called getInstance(). st a ti c p ub l ic f u nc ti o n g et In s ta nc e () : Mo de l Lo ca t or ot { i f ( _ _i ns t an ce == nu ll ) { N _ _i n st an c e= ne w M o de lL o ca to r () ; } r e tu r n __ i ns ta n ce ; } o 6. Open FStop.mxml application file. D 7. Copy the business variables declared for photoData and purchasedPhotos model data [see lines 17-18]. 8. Return to the ModelLocator.as class. 9. At the top of the class paste the copied code into the ModelLocator. 10. Modify the variables declarations to be public. 11. Remove the [Bindable] tags on each variable. 12. Make the ModelLocator class [Bindable] . 13. Since you copied in the variable declarations, you need to import the ArrayCollection class. Note: An easy way to do the import is simply place the cursor after the letter n from one of the new ArrayCollection() statements, then press Ctrl-Space. Copyright © 2008 Adobe Systems Incorporated 11
  • 16. 14. Be sure the ModelLocator appears as follows. pa c ka ge mo d el { i m po r t mx . co ll e ct i on s. A rr ay C ol l ec ti o n; [ B in d ab le ] p u bl i c cl a ss M o de l Lo ca t or { p ub l ic v a r p ho to D at a: A rr a yC ol l ec ti o n= n ew A r ra yC o ll e ct io n () ; p ub l ic va r p ur c ha se d Ph o to s: A rr ay C ol l ec ti o n= ne w A r ra yC o ll e ct io n () ; s ta t ic p r iv a te v a r __ i ns t an ce : Mo de l Lo c at or = nu ll ; s ta t ic p u bl i c fu n ct io n g e tI ns t an ce ( ): M od el L oc at o r { if ( __ i ns ta n ce = = n ul l ) { y _ _ in s ta nc e =n ew Mo d el Lo c at or ( ); } op re t ur n _ _i n st an c e; } } } C 15. Save the file. 16. Close the ModelLocator file. ot N o D 12 Copyright © 2008 Adobe Systems Incorporated
  • 17. Implementing the ServiceLocator • The ServiceLocator pattern is used to create a global, singleton registry to centralize all instances of Flex RDS components used in an application ■ HTTPService ■ WebService ■ RemoteObject ■ Custom RDS classes • Supports easy lookup of services by name • Should never be used outside the Control layer Example ServiceLocator code y • Extends the Cairngorm ServiceLocator class op • Contains RDS tag instantiations <? x ml v e rs i on =" 1 .0 " e nc o di ng = "u tf - 8" ? > <r d s: Se r vi c eL oc a to r x ml n s: rd s =" co m .a d ob e. c ai rn g or m .b us i ne ss . *" C x m ln s :m x= " ht tp : // w ww .a d ob e. c om / 20 06 / mx ml " > < m x: H TT PS e rv ic e i d =" ph o to sI n " u rl =" a ss et s /p h ot os . xm l" / > ot </ r ds :S e rv i ce Lo c at or > N Using the ServiceLocator • Instantiate the object in MXML to configure and cache the services repository o < rd s: S er vi c es xm ln s :r ds = "b us i ne s s. *" / > D • Use the ServiceLocator by calling the getInstance() method and then use a defined service pr i va te va r _ _l o ca to r :S e rv ic e Lo ca t or = Se rv i ce Lo c at o r. ge t In st a nc e () ; va r s er v ic e :H TT P Se rv i ce = __ lo c at or . ge t HT TP S er vi c e( " ph ot o sI n " ) ; Copyright © 2008 Adobe Systems Incorporated 13
  • 18. Walkthrough 3: Building the ServiceLocator In this walkthrough, you will perform the following tasks: • Create the Services repository Steps 1. In the Navigator view, select the src directory. Create the Services respository 2. Create a new package called business. 3. In the business package, create an MXML Component named Services. This class will extend ServiceLocator. y Note: The ServiceLocator option will not appear in the drop down list. Simply op type it in. C ot N o D 14 Copyright © 2008 Adobe Systems Incorporated
  • 19. 4. Modify the default namespace entered, xmlns="*", to properly import com.adobe.cairngorm.business.*. Use the rds prefix. <r d s: Se r vi c eL oc a to r x ml n s: rd s =" co m .a d ob e. c ai rn g or m .b us i ne ss . *" x m ln s :m x= " ht tp : // w ww .a d ob e. c om / 20 06 / mx ml " > </ r ds :S e rv i ce Lo c at or > 5. Open FStop.mxml application file. 6. Copy the tag declaration for the HTTPService [see line 46]. 7. Paste the tag into the Services.mxml class. Paste the code as a child tag. 8. Remove the result event handler defined in the HTTPService tag. <m x :H TT P Se r vi ce id =" p ho t os In " u rl = "a s se ts / ph ot o s. x ml " / > y 9. Check to be sure your ServiceLocator appears as follows. op <? x ml v e rs i on =" 1 .0 " e nc o di ng = "u tf - 8" ? > <r d s: Se r vi c eL oc a to r x ml n s: rd s =" co m .a d ob e. c ai rn g or m .b us i ne ss . *" x m ln s :m x= " ht tp : // w ww .a d ob e. c om / 20 06 / mx ml " > C < m x: H TT PS e rv ic e i d =" ph o to sI n " u rl =" a ss et s /p h ot os . xm l" / > </ r ds :S e rv i ce Lo c at or > ot 10. Save and close the file. N o D Copyright © 2008 Adobe Systems Incorporated 15
  • 20. Implementing Cairngorm events • Many events take place in Flex applications, but Cairngorm is only concerned with Business Events Introducing the concept of Business Events • Flex uses an Event Delegation Model ■ A system where the responses and reactions to activity in one component are delegated to one or more different components ■ This delegation is achieved by dispatching events • Flex has many categories of events ■ System events: initialize, creationComplete, showEffect ■ Framework event: click, mouseMove, keyDown y ■ User events: hideContactDetails, showCatalog op ■ Business events: GetAllPurchasedItems, LoadCatalog, SubmitOrder, LoginUser ■ Data Service events: ResultEvent, FaultEvent C • Custom events can be used to transport or package data to the recipient(s) • User events are custom events that are delegated to other components in the View layer ot • Business events are ■ Custom events delegated to components in the business [Control] N layer ■ Used to announce gestures and activate Command processing o Example Cairngorm event code D • Each event should have a unique ID that is exposed statically and passed to the super constructor • Simple event pa c ka ge bu s in es s .e ve n ts { i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ; p u bl i c cl a ss L o ad P ho to s Ev en t e x te nd s C ai r ng o rm Ev e nt { s ta t ic p u bl i c va r E VE N T_ I D: St r in g= " lo a dP ho t os "; p ub l ic f u nc t io n L oa dP h ot o sE ve n t( ) { su p er ( EV EN T _I D) ; } } } 16 Copyright © 2008 Adobe Systems Incorporated
  • 21. • Event that uses a value object pa c ka ge bu s in es s .e ve n ts { i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ; i m po r t va l ue Ob j ec t s. Ph o to ; p u bl i c cl a ss A d dP h ot oT o Ca rt E ve n t ex t en ds Ca i rn go r mE ve n t { s ta t ic p u bl i c va r E VE N T_ I D: St r in g= " ad d Ph ot o Ev en t "; p ub l ic v a r p ho to : Ph ot o =n u ll ; p ub l ic f u nc t io n A dd Ph o to T oC ar t Ev en t (p h ot o: P ho to ) { su p er ( EV EN T _I D) ; th i s. p ho to = ph ot o ; } y } } op Using a Cairngorm event C • The View layer can create and dispatch Business Events • The Control layer can create and dispatch Business Events • Only the Control layer manages and processes Business Events ot • Dispatching of Business Events should be considered 1-way to the business [Control] layer • Cairngorm events dispatch themselves to the Controller N pr i va te fu n ct io n i ni t Ap p () :v o id { o v a r e ve nt : Lo ad P ho t os Ev e nt =n e w L oa dP h ot os E ve n t( ); e v en t .d is p at ch ( ); } D pr i va te fu n ct io n p ho t oS e le ct e dH an d le r (e ve n t: Ph o to E ve nt ) :v oi d { v a r a dd Ev e nt :A d dP h ot oT o Ca rt E ve n t= n ew Ad dP h ot o To Ca r tE ve n t( e ve nt . se le c te d Ph ot o ); a d dE v en t. d is pa t ch ( ); } Copyright © 2008 Adobe Systems Incorporated 17
  • 22. Walkthrough 4: Building Cairngorm events In this walkthrough, you will perform the following tasks: • Create the LoadPhotos and AddPhotoToCart business events Steps 1. Select the business package in the Navigator. Create the LoadPhotos and AddPhotoToCart Business Events 2. Create a new child package called events. 3. In the events package, create a new ActionScript class with the following y properties • Filename is LoadPhotosEvent op • Extends the class com.adobe.cairngorm.control.CairngormEvent C ot N o D 18 Copyright © 2008 Adobe Systems Incorporated
  • 23. 4. Modify the LoadPhotosEvent class so it conforms to a simple Cairngorm event. pa c ka ge bu s in es s .e ve n ts { i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ; p u bl i c cl a ss L o ad P ho to s Ev en t e x te nd s C ai r ng o rm Ev e nt { s ta t ic p u bl i c va r E VE N T_ I D: St r in g= " lo a dP ho t os "; p ub l ic f u nc t io n L oa dP h ot o sE ve n t( ) { su p er ( EV EN T _I D) ; } } } y 5. Save the file. op 6. Create another event ActionScript class with the following properties • Filename is AddPhotoToCartEvent • Extends the class com.adobe.cairngorm.control.CairngormEvent C • Exposes an EVENT_ID variable of addPhotoToCart • Requires a Photo value object as a constructor argument ot 7. Modify the class so it conforms to a Cairngorm event. pa c ka ge bu s in es s .e ve n ts { N i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ; i m po r t va l ue Ob j ec t s. Ph o to ; o p u bl i c cl a ss A d dP h ot oT o Ca rt E ve n t ex t en ds Ca i rn go r mE ve n t { D s ta t ic p u bl i c va r E VE N T_ I D: St r in g= " ad d Ph ot o To Ca r t" ; p ub l ic v a r p ho to : Ph ot o =n u ll ; p ub l ic f u nc t io n A dd Ph o to T oC ar t Ev en t (p h ot o: P ho to ) { su p er ( EV EN T _I D) ; th i s. p ho to = ph ot o ; } } } 8. Save the file. Copyright © 2008 Adobe Systems Incorporated 19
  • 24. Implementing Commands • The Control layer relies on Commands to manage business logic and respond to Business Events • Command features ■ Each Command class represents a specific business feature with associated business logic and processing ■ Commands update the ModelLocator with new data or changes to existing data ■ Each Command class represents a specific business feature with associated business logic and processing • All Commands have the same entry point to initiate or start business processing: execute() • Command implementations have class names to that are equivalent to y Business Events op ■ LoadPhotosEvent and LoadPhotosCommand Example Command code C • Must contain an execute() method • That method contains business logic ot pa c ka ge bu s in es s .c om m an d s { i m po r t bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t; N i m po r t co m .a do b e. c ai rn g or m. c om m an ds . IC om m an d ; i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ; i m po r t mo d el .M o de l Lo ca t or ; o p u bl i c cl a ss A d dP h ot oT o Ca rt C om m an d i mp le m en t s IC o mm an d { D p ri v at e v ar __ mo d el :M o de l Lo ca t or =M o de l Lo ca t or .g e tI n st an c e( ); p ub l ic f u nc t io n e xe cu t e( e ve nt : Ca ir n go r mE ve n t) :v o id { __ m od e l. pu r ch as e dP ho t os . ad d It e m( (e v en t a s Ad d Ph o to To C ar tE v en t ). ph o to ); } } } 20 Copyright © 2008 Adobe Systems Incorporated
  • 25. Using the Command • Used in the Controller where the events are listened for and corresponding commands are called ■ Controller built in the next section ad d Co mm a nd ( Lo ad P ho to s Ev e nt .E V EN T_ I D, L oa dP h ot os C om m an d) ; ad d Co mm a nd ( Ad dP h ot oT o Ca r tE ve n t. EV E NT _ ID ,A d dP ho t oT o Ca rt C om ma n d) ; y op C ot N o D Copyright © 2008 Adobe Systems Incorporated 21
  • 26. Walkthrough 5: Building Cairngorm Commands In this walkthrough, you will perform the following tasks: • Create the LoadPhotosCommand business component • Create the AddPhotoToCart command Steps 1. Select the business package in the Navigator. Create the LoadPhotosCommand business component 2. Create a new child package called commands. y 3. In the commands package, create a new ActionScript class with the op following properties • Filename is LoadPhotosCommand • Implements the interface com.adobe.cairngorm.commands.ICommand C • Uncheck the Generate constructor from superclass option ot N o D Note: This command will be using the Services repository for RDS and the ModelLocator to store the load photo data. 22 Copyright © 2008 Adobe Systems Incorporated
  • 27. Create instances of the ModelLocator and ServiceLocator 4. In the class, create two alias references to the ModelLocator and ServiceLocator instances using the respective getInstance() methods. pr i va te va r _ _m o de l: M od e lL oc a to r= M od e lL oc a to r. g et I ns ta n ce () ; pr i va te va r _ _l o ca to r :S e rv ic e Lo ca t or = Se rv i ce Lo c at o r. ge t In st a nc e () ; Note: If using tag help choose the ModelLocator class you have built, not the Cairngorm ModelLocator interface. Modify the execute method 5. In the execute() function use the ServiceLocator to lookup a reference to the HTTPService instance called photosIn. y va r s er v ic e :H TT P Se rv i ce = __ lo c at or . ge t HT TP S er vi c e( " ph ot o sI n" ) ; op Note: If using tag help choose the mx.rpc.http.HTTPService class. C 6. Manually specify the result handler for the asynchronous HTTPService call. Use addEventListener to add a result event handler to the RDS component instance. ot se r vi ce . ad d Ev en t Li st e ne r (R es u lt Ev e nt . RE SU L T, on R es u lt s_ l oa dP h ot o s) ; N Note: We are not adding a listener for the FaultEvent, because this FStop application will ignore any errors. Release-quality solutions must anticipate possible failures in the RDS calls and must plan for Fault event handlers. o 7. Invoke the RDS call to the server to load the photo data for the FStop application. D s er vi c e. se n d( ) ; Create the result handler 8. Create another function in the class that is the skeleton for the result handler. Name the function onResults_loadPhotos() and datatype the function itself as void. The function should accept a parameter named event, data typed as ResultEvent pr i va te fu n ct io n o nR e su l ts _l o ad Ph o to s (e ve n t: Re s ul t Ev en t ): vo i d { } 9. Open FStop.mxml application file. Copyright © 2008 Adobe Systems Incorporated 23
  • 28. 10. Copy the method body of the photosInHandler() function, lines 22-32. 11. In LoadPhotosCommands.as paste the copied code into the method body for the onResults_loadPhotos() function. 12. Modify the photoData.addItem() call in the for loop to use the photoData reference cached in the ModelLocator repository. _ _m od e l. ph o to D at a. a dd It e m( te m pP h ot o) ; 13. Be sure your function appears as follows. pr i va te fu n ct io n o nR e su l ts _l o ad Ph o to s (e ve n t: Re s ul t Ev en t ): vo i d { v a r p ho to R aw :A r ra y Co ll e ct io n =e v en t. r es ul t .p h ot os . im ag e ; f o r( v ar i : in t= 0 ;i < ph ot o Ra w. l en g th ;i + +) { y v ar te mp P ho t o: Ph o to =n e w P ho to ( ); v ar ph ot o Fr o mA C: O bj ec t =p h ot oR a w. ge t It e mA t( i ); op t em p Ph ot o .f i le na m e= ph o to F ro mA C .f il e na m e; t em p Ph ot o .p h ot og r ap he r =p h ot oF r om AC . ph o to gr a ph er ; t em p Ph ot o .d e sc =p h ot oF r om A C. de s c; t em p Ph ot o .c a te go r y= ph o to F ro mA C .c at e go r y; C _ _m o de l. p ho t oD at a .a dd I te m (t em p Ph ot o ); } } ot 14. Be sure the ArrayCollection and Photo classes are imported to support the copied code. N Note: The cursor at the end of class name/Ctrl-Space trick helps here. o D 24 Copyright © 2008 Adobe Systems Incorporated
  • 29. 15. Check to be sure your class appears as follows. pa c ka ge bu s in es s .c om m an d s { i m po r t co m .a do b e. c ai rn g or m. b us i ne ss . Se rv i ce L oc at o r; i m po r t co m .a do b e. c ai rn g or m. c om m an ds . IC om m an d ; i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ; i m po r t mo d el .M o de l Lo ca t or ; i m po r t mx . co ll e ct i on s. A rr ay C ol l ec ti o n; i m po r t mx . rp c. e ve n ts .R e su lt E ve n t; i m po r t mx . rp c. h tt p .H TT P Se rv i ce ; i m po r t va l ue Ob j ec t s. Ph o to ; p u bl i c cl a ss L o ad P ho to s Co mm a nd im pl e me nt s I C om ma n d { p ri v at e v ar __ mo d el :M o de l Lo ca t or =M o de l Lo ca t or .g e tI n st an c e( ); p ri v at e v ar __ lo c at or : Se r vi ce L oc at o r= y Se r vi c eL oc a to r. g et In s ta n ce () ; op p ub l ic f u nc t io n e xe cu t e( e ve nt : Ca ir n go r mE ve n t) :v o id { va r s e rv ic e :H TT P Se rv i ce = __ lo c at or . ge t HT TP S er vi c e( " ph ot o sI n" ) ; se r vi c e. ad d Ev en t Li st e ne r (R es u lt Ev e nt . RE SU L T, o n Re s ul ts _ lo ad P ho t os ); C se r vi c e. se n d( ); } p ri v at e f un c ti on on Re s ul t s_ lo a dP ho t os ( ev en t :R es u lt E ve nt ) :v oi d ot { va r p h ot oR a w: Ar r ay Co l le c ti on = ev en t .r e su lt . ph ot o s. i ma ge ; fo r (v a r i: i nt =0 ; i< ph o to R aw .l e ng th ; i+ + ) N { v a r t em pP h ot o: P ho t o= ne w P ho t o( ) ; v a r p ho to F ro mA C :O b je ct = ph ot o Ra w .g et I te mA t (i ) ; t e mp P ho to . fi le n am e =p ho t oF ro m AC . fi le n am e; o t e mp P ho to . ph ot o gr a ph er = ph ot o Fr o mA C. p ho to g ra p he r; t e mp P ho to . de sc = ph o to Fr o mA C. d es c ; D t e mp P ho to . ca te g or y =p ho t oF ro m AC . ca te g or y; _ _ mo d el .p h ot oD a ta . ad dI t em (t e mp P ho to ) ; } } } } 16. Save the file. Copyright © 2008 Adobe Systems Incorporated 25
  • 30. Create the AddPhotoToCartCommand 17. Create a new ActionScript class in the commands package with the following properties • Filename is AddPhotoToCartCommand • Implements the interface com.adobe.cairngorm.commands.ICommand • Uncheck the Generate constructor from superclass option Note: This command will be using the ModelLocator instance to add the photo to the photo purchase list. 18. In the class, create an alias reference to the ModelLocator instance using the getInstance() method. y pr i va te va r _ _m o de l: M od e lL oc a to r= M od e lL oc a to r. g et I ns ta n ce () ; op 19. Modify the execute() function to add the photo to the purchase list • Cast the event to an instance of AddPhotoToCartEvent va r p ho t o: P ho to = (e ve n t a s Ad d Ph ot o To C ar tE v en t) . ph o to ; C __ m od el . pu r ch as e dP ho t os . ad dI t em (p h ot o ); 20. Be sure class appears as follows. ot pa c ka ge bu s in es s .c om m an d s { i m po r t bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t; N i m po r t co m .a do b e. c ai rn g or m. c om m an ds . IC om m an d ; i m po r t co m .a do b e. c ai rn g or m. c on t ro l. C ai rn g or m Ev en t ; i m po r t mo d el .M o de l Lo ca t or ; i m po r t va l ue Ob j ec t s. Ph o to ; o p u bl i c cl a ss A d dP h ot oT o Ca rt C om m an d i mp le m en t s IC o mm an d D { p ri v at e v ar __ mo d el :M o de l Lo ca t or =M o de l Lo ca t or .g e tI n st an c e( ); p ub l ic f u nc t io n e xe cu t e( e ve nt : Ca ir n go r mE ve n t) :v o id { va r p h ot o: P ho to = (e ve n t a s Ad d Ph ot o To C ar tE v en t) . ph o to ; __ m od e l. pu r ch as e dP ho t os . ad dI t em (p h ot o ); } } } 21. Save the file. 26 Copyright © 2008 Adobe Systems Incorporated
  • 31. Implementing the FrontContoller • The FrontController ■ Intercepts dispatched business events and forwards each event instance to the appropriate Command instance for processing ■ Is a registry of event-to-command mappings ■ Is the “router” for business events • The FrontController pattern provides a solution that allows the View and Control layers to connect using event delegation ■ Views dispatch business events to the business layer – Views are never aware of the FrontController, Commands, or Delegates, or the Services repository – Views simply render data stored in the Model layer and y announce user gestures ■ Dispatched business events are routed to appropriate business op components Example FrontController code C • In the FrontController’s constructor use the addCommand() method to link Business Events and corresponding Commands ot pa c ka ge bu s in es s { i m po r t bu s in es s .c o mm an d s. Ad d Ph o to To C ar tC o mm a nd ; N i m po r t bu s in es s .c o mm an d s. Lo a dP h ot os C om ma n d; i m po r t bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t; i m po r t bu s in es s .e v en ts . Lo ad P ho t os Ev e nt ; i m po r t co m .a do b e. c ai rn g or m. c on t ro l. F ro nt C on t ro ll e r; o pu b li c c la s s FS C on tr o ll e r ex t en ds Fr o nt Co n tr ol l er D { p ub l ic f u nc t io n F SC on t ro l le r( ) { su p er ( ); ad d Co m ma nd ( Lo ad P ho to s Ev e nt .E V EN T_ I D, L oa dP h ot os C om m an d) ; ad d Co m ma nd ( Ad dP h ot oT o Ca r tE ve n t. EV E NT _ ID ,A d dP ho t oT o Ca rt C om ma n d) ; } } } Copyright © 2008 Adobe Systems Incorporated 27
  • 32. Using the FrontController • When Cairngorm events are dispatched they are automatically handled by the FrontController pr i va te fu n ct io n i ni t Ap p () :v o id { v a r e ve nt : Lo ad P ho t os Ev e nt =n e w L oa dP h ot os E ve n t( ); e v en t .d is p at ch ( ); } y op C ot N o D 28 Copyright © 2008 Adobe Systems Incorporated
  • 33. Walkthrough 6: Building the FrontController In this walkthrough, you will perform the following tasks: • Create the FSController to route the business events Steps 1. Select the business package in the Navigator. Create the FSController to route the business events 2. In the business package create a new ActionScript class with the following properties • Filename is FSController y • Extends the class com.adobe.cairngorm.control.FrontController op • Select the Generate constructor from superclass checkbox C ot N o D 3. Use the addCommand() method to register each business event with its corresponding command. ad d Co mm a nd ( Lo ad P ho to s Ev e nt .E V EN T_ I D, L oa dP h ot os C om m an d) ; ad d Co mm a nd ( Ad dP h ot oT o Ca r tE ve n t. EV E NT _ ID ,A d dP ho t oT o Ca rt C om ma n d) ; Copyright © 2008 Adobe Systems Incorporated 29
  • 34. 4. Import the classes used. i m po r t bu s in es s .c o mm an d s. Ad d Ph o to To C ar tC o mm a nd ; i m po r t bu s in es s .c o mm an d s. Lo a dP h ot os C om ma n d; i m po r t bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t; i m po r t bu s in es s .e v en ts . Lo ad P ho t os Ev e nt ; 5. Be sure the FSController appears as follows. pa c ka ge bu s in es s { i m po r t bu s in es s .c o mm an d s. Ad d Ph o to To C ar tC o mm a nd ; i m po r t bu s in es s .c o mm an d s. Lo a dP h ot os C om ma n d; i m po r t bu s in es s .e v en ts . Ad dP h ot o To Ca r tE ve n t; i m po r t bu s in es s .e v en ts . Lo ad P ho t os Ev e nt ; i m po r t co m .a do b e. c ai rn g or m. c on t ro l. F ro nt C on t ro ll e r; y p u bl i c cl a ss F S Co n tr ol l er e x te n ds F r on tC o nt r ol le r { op p ub l ic f u nc t io n F SC on t ro l le r( ) { su p er ( ); ad d Co m ma nd ( Lo ad P ho to s Ev e nt .E V EN T_ I D, L oa dP h ot os C om m an d) ; C ad d Co m ma nd ( Ad dP h ot oT o Ca r tE ve n t. EV E NT _ ID , A d dP h ot oT o Ca rt C om m an d) ; } } ot } 6. Save the file. N o D 30 Copyright © 2008 Adobe Systems Incorporated
  • 35. Implementing Delegates • Each Delegate class ■ provides a local proxy for a remote service ■ serves as a contract between client and server development teams ■ may hide underlying implementation details including – Client-side service lookups – Server API method invocations – Formatting of method arguments – Data transformations • Use of a Delegate allows mock services and dummy data to be used while server implementations are resolved • Delegate classes should not be used outside the Control layer y op Understanding the role of a Delegate • Using Delegate classes hides the details of the Flex client invoking WebService, RemoteObject, HTTPService, or custom RDS C components to connect to the server tier or the local shared object • The Delegate is a client-side proxy for one or more remote server APIs • Each Delegate class may group API functionality by context ot ■ OrderDelegate may proxy the API for all order functionality such as addOrder, updateOrder, cancelOrder etc. ■ UserDelegate may proxy the API for all user functionality N such as login, logout, registerUser, updateUser etc. o D Figure 7: Conceptualization of Delegate API mappings to Server-Tier Business APIs Note: Delegates are not required to match all the all business service APIs. Only those client-side proxies required should be matched. Copyright © 2008 Adobe Systems Incorporated 31
  • 36. Implementing a Delegate • A Delegate ■ is created and invoked by a corresponding Command ■ defines and configures the Responder for each remote service call ■ is the only class to directly use the ServiceLocator ■ may perform data transformations required by a remote service – Outgoing data may be transformed and aggregated – Incoming data may be transformed, parsed, and validated ■ may manage queuing and result-routing for multiple server calls • No specific Delegate interface or parent class is provided by the Cairngorm MVC framework • Delegates are commonly identified using a Delegate" suffix y Implementing a Responder op • A mx.rpc.Responder object defines a method to be called when a remote service call returns a result, and when the remote call fails • The Responder is either C ■ an mx.rpc.Responder object, or ■ a class which implements the mx.rpc.IResponder interface ot im p or t m x. r pc .R e sp on d er ; ... va r r es p on d er :R e sp on d er = ne w R es p on d er (o n Re su l t, on Fa u lt ); N pr i va te fu n ct io n o nR e su l t( ev e nt :R e su l tE ve n t) :v o id { .. . } pr i va te fu n ct io n o nF a ul t (e ve n t: Fa u lt E ve nt ) :v oi d { .. . } o Example Delegate code D pa c ka ge co n tr ol . de le g at e s { p u bl i c cl a ss P h ot o De le g at e { p ub l ic f u nc t io n P ho to D el e ga te ( ) { } } } • Commonly, a Command will define a Responder to specify how results from a remote call, made through a Delegate, are to be handled • a Delegate constructor may allow the calling Command to specify a Responder, caching it for later use 32 Copyright © 2008 Adobe Systems Incorporated
  • 37. pa c ka ge co n tr ol . de le g at e s { i m po r t mx . rp c. I Re s po nd e r; p u bl i c cl a ss P h ot o De le g at e { p ri v at e v ar __ re s po nd e r: I Re sp o nd er ; p ub l ic f u nc t io n P ho to D el e ga te ( re sp o nd e r: IR e sp on d er ) { _ _ re s po nd e r = r es p on de r ; } } } • a Delegate will use the ServiceLocator to access the specific RDS instance that will be used to execute the method call pr i va te va r _ _l o ca to r :S e rv ic e Lo ca t or = Se rv i ce Lo c at o r. ge t In st a nc e () ; y • Delegates may implement accessors for specific services op • Delegates may have one or more methods that match the server API Tip: The names of the methods should be present-tense verb forms such as loadCatalog, updateUser, processOrder, etc. C ot N o D Copyright © 2008 Adobe Systems Incorporated 33
  • 38. Walkthrough 7: Building a Cairngorm Delegate In this walkthrough, you will perform the following tasks: • Create the PhotoDelegate business component • Modify LoadPhotosCommand to use PhotoDelegate Steps 1. Select the business package in the Navigator. Create the PhotoDelegate business component 2. Create a new child package called delegates. y 3. In the delegates package, create a new ActionScript class with the op following properties • Filename is PhotoDelegate • Leave the Generate constructor from superclass option checked C 4. From the commands package, open LoadPhotosCommand.as 5. Move the definition and instantiation of __service from LoadPhotosCommand into PhotoDelegate, along with its required import statement. ot im p or t c om . ad ob e .c ai r ng o rm .b u si ne s s. S er vi c eL oc a to r ; ... N pr i va te va r _ _l o ca to r :S e rv ic e Lo ca t or = Se rv i ce Lo c at o r. ge t In st a nc e () ; 6. Declare a private class property named __service, typed as o HTTPService, and import mx.rpc.http.HTTPService. D im p or t m x. r pc .h t tp .H T TP S er vi c e; ... pr i va te va r _ _s e rv ic e :H T TP Se r vi ce ; 7. In the constructor, use the ServiceLocator to assign a reference to the photosIn service to __service. __ s er vi c e = _ _l o ca to r .g e tH TT P Se rv i ce ( "p ho t os In " ); 8. Declare a private class property named __responder, typed to the IResponder interface, and import mx.rpc.IResponder. im p or t m x. r pc .I R es po n de r ; ... pr i va te va r _ _r e sp on d er : IR es p on de r ; 34 Copyright © 2008 Adobe Systems Incorporated
  • 39. 9. Modify the constructor to accept a responder parameter, and assign it to __responder. pu b li c f un c ti on Ph ot o De l eg at e (r es p on d er :I R es po n de r ) { _ _ se r vi ce = __ l oc a to r. g et HT T PS e rv ic e (" ph o to s In ") ; _ _ re s po nd e r = r es p on de r ; } 10. Declare a public method named loadPhotos, with a void return type, because the responder will be used to define the service result handler. pu b li c f un c ti on lo ad P ho t os () : vo id { } 11. In loadPhotos(), invoke the send() method on the __service y reference, assigning the result to a local variable typed as AsyncToken. op va r t ok e n: A sy nc T ok en = _ _s er v ic e. s en d () ; 12. Use the addResponder() method to assign __responder as the C responder for this token’s remote service call. to k en .a d dR e sp on d er (_ _ re s po nd e r) ; ot Modify LoadPhotosCommand to use PhotoDelegate 13. From the commands package, open LoadPhotosCommand.as. N 14. Comment out all code in the execute() method. 15. In the execute() method, declare and create a local mx.rpc.Responder object, passing a reference to the o onResults_loadPhotos method as its first parameter, and null as its second parameter. D va r r es po n de r :R es p on de r = n ew R e sp on d er (o n Re s ul ts _ lo ad P ho t os , nu l l) ; 16. Next in this method, declare and create a local PhotoDelegate object, passing responder to its constructor. va r d el e ga t e: Ph o to De l eg a te = ne w P ho t oD el e ga te ( re s po nd e r) ; 17. Last in this method, invoke the loadPhotos() method on the delegate. de l eg at e .l o ad Ph o to s( ) ; 18. Save the file. Copyright © 2008 Adobe Systems Incorporated 35
  • 40. Using the Cairngorm components • Once Cairngorm components have been built, you can use them to either build a new application or refactor an existing, non-Cairngorm application y op C ot N o D 36 Copyright © 2008 Adobe Systems Incorporated
  • 41. Walkthrough 8: Modifying FStop to use Cairngorm In this walkthrough, you will perform the following tasks: • Modify the FStop application to use your new, custom Cairngorm components. Steps 1. Open the FStop.mxml application file. Modify FStop to use the new Cairngorm components 2. Since the Services repository now has RDS components, delete the y HTTPService tag on line 46. op 3. Since the PhotoCommand now has the business logic for the processing the response of the LoadPhotos RDS request, delete the function photosInHandler(). 4. Since the ModelLocator now has the variables for the photos and C purchase cart business data, delete lines 17-18. 5. Just after the Script block, instantiate Services to configure and cache the respository. ot <r d s: Se r vi c es x m ln s: r ds = "b us i ne ss . *" / > N 6. Below the Services instantiation, also instantiate the FSController to properly route business events to the PhotoCommand business component. o <r o ut er : FS C on tr o ll er xm l ns :r o ut er = "b u si ne s s. *" / > D 7. To dispatch the LoadPhotos business event, modify the body of the initApp() function. Simply dispatch an instance of the LoadPhotosEvent business event. Be sure the code appears as follows. pr i va te fu n ct io n i ni t Ap p () :v o id { v a r e ve nt : Lo ad P ho t os Ev e nt =n e w L oa dP h ot os E ve n t( ); e v en t .d is p at ch ( ); } Tip: Remember that business events can “self-dispatch” directly to the Controller layer. Copyright © 2008 Adobe Systems Incorporated 37
  • 42. 8. To dispatch the AddPhotoToCart business event, modify the body of the photoSelectedHandler() function. Dispatch a new business event as an instance of AddPhotoToCartEvent. Be sure the code appears as follows. pr i va te fu n ct io n p ho t oS e le ct e dH an d le r (e ve n t: Ph o to E ve nt ) :v oi d { v a r a dd Ev e nt :A d dP h ot oT o Ca rt E ve n t= n ew Ad dP h ot o To Ca r tE ve n t( e ve nt . se le c te d Ph ot o ); a d dE v en t. d is pa t ch ( ); } 9. In the Script block just below the imports, declare a bindable variable to alias the instance of the ModelLocator repository. y [B i nd ab l e] pr i va te va r _ _m o de l: M od e lL oc a to r= M od e lL oc a to r. g et I ns ta n ce () ; op Tip: This alias is a convenience solution to allow easy databinding referencing of business data from the ShoppingCart and Gallery tags. 10. Update the ShoppingCart tag to use the purchasedPhotos C cached in the ModelLocator repository. <v : Sh op p in g Ca rt x= "6 2 6" y= "1 1 8 ot " pu r ch as e dP h ot os = "{ __ m od e l. pu r ch as e dP h ot os } " /> 11. Update the Gallery tag to use the photoData cached in the N ModelLocator repository. <v : Ga ll e ry id =" g al le r y" la be l =" Ga l le r y" p h ot oD a ta = "{ __ m od el . ph o to Da t a} " o p h ot oS e le c te d= " ph ot o Se l ec te d Ha nd l er ( ev en t )" /> D 12. Save the changes to FStop.mxml application file. 13. Change the Flex Builder perspective to Flex Debugging. 14. Set breakpoints with your instructor’s guidance. 15. Build and debug the application. 38 Copyright © 2008 Adobe Systems Incorporated
  • 43. Summary • Cairngorm encourages developers to organize source code by roles and layers. • Cairngorm is easily implemented with 3 primary classes: ■ Business Event(s) ■ Command(s) ■ FrontController • Cairngorm solutions may also employ 2 optional classes: ■ ModelLocator ■ ServiceLocator • Using Cairngorm helps developer focus on the MVC mantra: ■ Views render data from Model and announce user gestures y ■ Control layer focus on business logic and data persistence. op ■ Control logic updates Model. • Cairngorm solutions deliver applications where views can be changed independent of business logic and data access. • Even simply applications can [and often do-] grow to large applications. C As such, even simply applications can benefit from Cairngorm architecture implementations. ■ Cairngorm MVC is not appropriate for libraries or component- ot level architectures. • Cairngorm solutions are easily maintained. N • Cairngorm solutions can scale in complexity in well-defined manners. o D Copyright © 2008 Adobe Systems Incorporated 39
  • 44. y op C ot N o D 40 Copyright © 2008 Adobe Systems Incorporated
  • 45. Lab: 1 Objectives In this lab, you will perform the following tasks: • Create a new Cairngorm MVC application from scratch. • Create a form to request a patient visitation. • Submit the patient visitation request using a business event. • Create business components to process the visitation request. y op C ot N o D Copyright © 2008 Adobe Systems Incorporated 41
  • 46. Tasks This lab exercise will ask you to build a Flex RIA application that allows patient visitation information to be submitted. y op C In this lab, you will learn how to do the following: ot • Configure a blank Cairngorm MVC project • Use Business Events to deliver view gestures and changes to the N business layer. • Build a Control layer for your business features • Use the Services repository for LiveCycle data services o • Use the FrontController to connect business components to your views D Note: This RIA application will not use remote data services to save the visitation request to the server tier. That RDS feature will actually be completed in subsequent training where you will create a LiveCycle server process and configure the application to communicate with the LiveCycle data services. 42 Copyright © 2008 Adobe Systems Incorporated
  • 47. Part 1: Create a new Cairngorm MVC Project In this part of the lab, you will perform the following tasks: • Configure project properties to use the Cairngorm library • Create the MVC shell packages • Create an empty Services repository • Create an empty FrontController implementation • Instantiate the Services and FrontController implementations Steps 1. Close all open projects and then import the f3ic_patientVisits project from {installLocation}/f3ic. y Configure project properties to use the Cairngorm library op 2. Select Project > Properties > Flex Build Path > Library Path 3. Select the Add SWC... option. 4. Browse to the {installLocation}/f3ic directory. 5. C Choose the Cairngorm.swc file. Note: If you wish to see the Cairngorm source files download the source from ot labs.adobe.com then use the Source Attachment option in the Library Path screen. N 6. Click OK to close the Project Properties dialog. Create the MVC shell packages o 7. Move to the Flex Builder Navigator. 8. In the src folder, create the com.patientvisitations.control D package. Follow these substeps. 1. In the Flex Builder Navigator, Right-Click on the src folder, 2. Select New > Folder from the popup menu. 3. Specify com/patientvisitations/control/ Tip: This is a shortcut to create multiple, nested packages at one time. 4. Click Finish. 9. Create the other shell packages • com.patientvisitations.control.commands • com.patientvisiattions.control.delegates • com.patientvisitations.control.events • com.patientvisitations.view • com.patientvisitations.model Copyright © 2008 Adobe Systems Incorporated 43
  • 48. Create an empty Services repository 10. Right-Click on the delegates package. Select the New > MXML Component option. 11. Specify a Filename of Services, a Based on value of ServiceLocator, and click Finish. Note: The New MXML component wizard does not provide options for custom (non- mx Framework) classes. Type in ServiceLocator option for now. Next steps will manually fix the xmlns properly imports the Cairngorm class and the Services extends ServiceLocator. 12. Modify the default namespace entered, xmlns="*", to properly import com.adobe.cairngorm.business.*. Use the rds prefix. <r d s: Se r vi c eL oc a to r x ml n s: rd s =" co m .a d ob e. c ai rn g or m .b us i ne ss . *" y x m ln s :m x= " ht tp : // w ww .a d ob e. c om / 20 06 / mx ml " > op </ r ds :S e rv i ce Lo c at or > 13. Save the file. C Create an empty FrontController implementation 14. Right-Click on the control package. Select the New > Actionscript Class option. ot 15. Specify a filename of PTController. 16. Use the Browse... button to specify a superclass of FrontController. N 17. Select Finish. 18. Save the file. Instantiate the FrontController and Services Repository o 19. Right-Click on the src folder. D 20. Select New > MXML Application. 21. Specify the Filename PatientVisitations and the Layout to vertical. 22. Using the MXML tag notations, instantiate the FrontController and Services classes. <c o nt ro l :P T Co nt r ol le r x m ln s :c on t ro l= " co m .p at i en tv i si t at io n s. co n tr o l. *" /> <r d s: Se r vi c es x m ln s :r ds = "c om . pa t ie nt v is it a ti o ns .c o nt ro l .d e le ga t es .* " /> 23. Save changes. 24. Build the project and run it. 44 Copyright © 2008 Adobe Systems Incorporated