Introducing Cairngorm
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Introducing Cairngorm

  • 1,766 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,766
On Slideshare
1,766
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
75
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 49. Part 2: Create a form to request a patient visitation In this part of the lab, you will perform the following tasks: • Create a view component to request a patient visit • Use the view component in the application Steps Create a view component to submit the visitation request 1. Create a package com.patientvisitations.view.visits 2. Create a New > MXML Component called VisitRequestForm. y Follow these substeps to build the form. op 1. Extend the Form class. 2. Specify width and height of 100%. Tip: The following steps can be easily accomplished using the MXML Editor’s Design mode and the Components view to drag controls onto the Form’s stage area. C 3. Add a TextInput field to the Form ot 1. Specify a TextInput ID of txtPatientID 2. Specify a FormItem label Patient ID: 4. Add a TextInput field to the Form N 1. Specify a TextInput ID of txtFirstName 2. Specify a FormItem label First Name: 5. Add a TextInput field to the Form o 1. Specify a TextInput ID of txtLastName D 2. Specify a FormItem label Last Name: 6. Add a Button control to the Form 1. Specify a Button label of Submit 2. Add a click event handler to the button <m x :B ut t on la be l =" Su b mi t " cl i ck =" o nR e qu es t Vi si t () " /> Copyright © 2008 Adobe Systems Incorporated 45
  • 50. 7. Create a script section with an empty onRequestVisit() event handler. < mx :S c ri pt > <! [C D AT A[ p ri va t e fu n ct i on o n Re qu e st V is it ( ): vo i d { } ]] > < /m x: S cr ip t > 8. Save changes. Use the view component in the application y 9. Open the PatientVisitations.mxml application file. op 10. As the last child tag in <mx:Application />, insert a tag instance of the RequestVisit form. < vi si t s: Vi s it R eq ue s tF or m x ml ns : vi si t s= "c om . pa ti e nt v is it a ti on s .v i ew .v i si ts . *" /> C 11. Save changes. 12. Build the project and run it. ot N o D 46 Copyright © 2008 Adobe Systems Incorporated
  • 51. Part 3: Submit the Visitation Request In this part of the lab, you will perform the following tasks: • Create a business event to deliver patient details to the business layer • Gather the patient details from VisitRequestForm • Dispatch the details to the business layer Steps Create a business event to deliver patient details to the business layer 1. Create a com.patientvisitations.control.events.visits y package. op 2. In the visits package, create a SavePatientRequest business event. Follow these substeps. 1. Create a New > Actionscript Class. 2. Specify a filename SavePatientRequestEvent. C 3. Select the CairngormEvent as the superclass. 4. Select Finish. ot 3. In the source for this new event, create a static variable EVENT_ID. st a ti c p ub l ic v a r EV E NT _ ID :S t ri ng = "s a ve Pa t ie nt R eq u es t" ; N 4. Create a public variable for the patient’s ID, firstname, and lastname pu bl i c va r p a ti en t ID :S t ri ng = "" ; o pu bl i c va r f i rs tN a me :S t ri ng = "" ; pu bl i c va r l a st Na m e: St r in g= " "; D 5. Modify the constructor to require patientID, firstName and lastName parameters. Also use the EVENT_ID in the constructor. pu b li c f un c ti on Sa ve P at i en tR e qu es t Ev e nt ( p a ti en t ID : St ri n g, f i rs tN a me : St ri n g, l a st Na m e: S tr in g ) { s u pe r (E VE N T_ ID ) ; t h is . pa ti e nt ID = pa t ie nt I D; t h is . fi rs t Na me = fi r st Na m e; t h is . la st N am e= l as t Na me ; } Copyright © 2008 Adobe Systems Incorporated 47
  • 52. 6. Save changes. Gather the patient details from the RequestVisit form 7. Open the VisitRequestForm.mxml view component 8. In the onRequestVisit() method body, create and an instance of the SavePatientRequestEvent class. va r e ve n t: S av eP a ti ne t Re q ue st E ve nt = nu l l; ev e nt =n e w S av eP a ti ne t Re q ue st E ve nt ( tx t Pa ti e nt ID . te x t, t xt F ir st N am e .t ex t ,t xt L as t Na me . te xt ) ; Dispatch the visit details to the business layer 9. Invoke the self-dispatching feature [of business events] to transport the visit details to the business layer. y e ve nt . di sp a tc h () ; op 10. Save changes. C ot N o D 48 Copyright © 2008 Adobe Systems Incorporated
  • 53. Part 4: Create the Business Component to Process the Visitation Details In this part of the lab, you will perform the following tasks: • Create a SavePatientRequestCommand business component to process the details of the patient visit request. • Register the SavePatientRequestCommand with the FrontController. Steps Create a Command to process patient visit details y 1. In the com.patientvisitations.control.commands package, create a Command implementation that will be used to process op patient visit details. Follow these substeps. 1. Create a New > Actionscript Class. 2. Specify a filename SavePatientRequestCommand. C 3. Select Add... button to add com.adobe.cairngorm.commands.ICommand interface. 4. Uncheck the option for Generate constructor from superclass. ot 5. Select Finish. 2. In the method body for SavePatientCommand::execute(), forward the event to the savePatientRequest() method. N pu b li c f un c ti on ex ec u te ( ev en t :C ai r ng o rm Ev e nt ): v oi d { o sa v eP a ti en t Re qu e st (e v en t a s S av eP a ti e nt Re q ue st E ve n t) ; } D 3. Create a private method called savePatientRequest() that requires a SavePatientRequestEvent parameter. 4. In the savePatientRequest(), insert a Alert.show() statement to display the event details. pr i va te fu n ct io n s av e Pa t ie nt R eq ue s t ( ev e nt :S a ve P at ie n tR eq u es t Ev en t ): v o id { A l er t. s ho w ( ev e nt . pa ti e nt ID + “ “ + ev en t .f i rs tN a me + “ “ + ev e nt . la st N am e + “ i s sc h ed ul e d f or a vi si t ”) ; } Tip: Be sure that you import the mx.controls.Alert class. 5. Save the file. Copyright © 2008 Adobe Systems Incorporated 49
  • 54. Register the Command with the FrontController 6. Open the FrontController implementation class com.patientvisitations.control.PTController. 7. Register the command with the SavePatientReqauestEvent business event (and import accordingly). pu b li c f un c ti on PT Co n tr o ll er ( ) { a d dC o mm an d (S av e Pa t ie nt R eq ue s tE v en t. E VE NT _ ID , Sa v eP a ti en t Re qu e st Co m ma n d) ; } 8. Save the file. 9. Build project and run. 10. In the PatientVisitations application, complete the form and select the y Submit button. op C ot N o D 50 Copyright © 2008 Adobe Systems Incorporated