Enviar búsqueda
Cargar
Flex 3: Introducing the Cairngorm MVC Framework
•
1 recomendación
•
623 vistas
Título mejorado por IA
lo mo
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 54
Descargar ahora
Descargar para leer sin conexión
Recomendados
Introducing Cairngorm
Introducing Cairngorm
Jairo Gatjens
AccuProcess Modeler User Guide
AccuProcess Modeler User Guide
D S
Analysis tekla
Analysis tekla
Pongsathorn Wongsan
Junit tutorial
Junit tutorial
Main Uddin Patowary
Manual Adobe Photoshop Cs4
Manual Adobe Photoshop Cs4
Jose Martinez
Portal application development using Websphere Portlet Factory
Portal application development using Websphere Portlet Factory
Dacartec Servicios Informáticos
Oman_VIS_Telecom_Provider_Search_v1_For_ROP_User
Oman_VIS_Telecom_Provider_Search_v1_For_ROP_User
Ankur Gupta
Diapositivas m12 34 [CURSO JAVA]
Diapositivas m12 34 [CURSO JAVA]
Hack '
Recomendados
Introducing Cairngorm
Introducing Cairngorm
Jairo Gatjens
AccuProcess Modeler User Guide
AccuProcess Modeler User Guide
D S
Analysis tekla
Analysis tekla
Pongsathorn Wongsan
Junit tutorial
Junit tutorial
Main Uddin Patowary
Manual Adobe Photoshop Cs4
Manual Adobe Photoshop Cs4
Jose Martinez
Portal application development using Websphere Portlet Factory
Portal application development using Websphere Portlet Factory
Dacartec Servicios Informáticos
Oman_VIS_Telecom_Provider_Search_v1_For_ROP_User
Oman_VIS_Telecom_Provider_Search_v1_For_ROP_User
Ankur Gupta
Diapositivas m12 34 [CURSO JAVA]
Diapositivas m12 34 [CURSO JAVA]
Hack '
adj
adj
Kotresh Munavallimatt
Rstutorialbook
Rstutorialbook
Aravindharamanan S
Elementsorganizer 9 handbuch
Elementsorganizer 9 handbuch
WGS
Windows phone 8 guide for android developers
Windows phone 8 guide for android developers
Khai Le
FRX Version 6.7 User Manual and Guide
FRX Version 6.7 User Manual and Guide
90 Minds Consulting Group
6 Daftar Isi
6 Daftar Isi
Miftah Saiful 'Arifin
Cp r80.30 ga_threat_prevention_adminguide
Cp r80.30 ga_threat_prevention_adminguide
coolboyasif
Android tutorial
Android tutorial
HarikaReddy115
What is-android? PDF Document
What is-android? PDF Document
JackCrafter
Case wx240 tier 3 wheeled excavator service repair manual
Case wx240 tier 3 wheeled excavator service repair manual
fusjefjjskekmem
Developing Adobe AIR 1.5 Applications with HTML and Ajax
Developing Adobe AIR 1.5 Applications with HTML and Ajax
losalamos
Idol Server 7.3 Admin Rev7
Idol Server 7.3 Admin Rev7
guest0a2cbfba
Captivate 5 user guide
Captivate 5 user guide
Printer Chiewchan
Domino access for ms outlook
Domino access for ms outlook
npshriya
ESM 6.5c SP1 Installation and Configuration Guide
ESM 6.5c SP1 Installation and Configuration Guide
Protect724mouni
Firstcup
Firstcup
PrinceGuru MS
Hfs to zfs migration
Hfs to zfs migration
satish090909
Xen app getting-started-guide
Xen app getting-started-guide
hergamia
Adf tutorial oracle
Adf tutorial oracle
César Augusto Castillo Farfán
Fscm91sbil b1109
Fscm91sbil b1109
shivram2511
Installation
Installation
azarudeen26
Force.com fundamentals
Force.com fundamentals
manasystest
Más contenido relacionado
La actualidad más candente
adj
adj
Kotresh Munavallimatt
Rstutorialbook
Rstutorialbook
Aravindharamanan S
Elementsorganizer 9 handbuch
Elementsorganizer 9 handbuch
WGS
Windows phone 8 guide for android developers
Windows phone 8 guide for android developers
Khai Le
FRX Version 6.7 User Manual and Guide
FRX Version 6.7 User Manual and Guide
90 Minds Consulting Group
6 Daftar Isi
6 Daftar Isi
Miftah Saiful 'Arifin
Cp r80.30 ga_threat_prevention_adminguide
Cp r80.30 ga_threat_prevention_adminguide
coolboyasif
Android tutorial
Android tutorial
HarikaReddy115
What is-android? PDF Document
What is-android? PDF Document
JackCrafter
Case wx240 tier 3 wheeled excavator service repair manual
Case wx240 tier 3 wheeled excavator service repair manual
fusjefjjskekmem
La actualidad más candente
(10)
adj
adj
Rstutorialbook
Rstutorialbook
Elementsorganizer 9 handbuch
Elementsorganizer 9 handbuch
Windows 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 Guide
6 Daftar Isi
6 Daftar Isi
Cp r80.30 ga_threat_prevention_adminguide
Cp r80.30 ga_threat_prevention_adminguide
Android tutorial
Android tutorial
What 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 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 Ajax
losalamos
Idol Server 7.3 Admin Rev7
Idol Server 7.3 Admin Rev7
guest0a2cbfba
Captivate 5 user guide
Captivate 5 user guide
Printer Chiewchan
Domino access for ms outlook
Domino access for ms outlook
npshriya
ESM 6.5c SP1 Installation and Configuration Guide
ESM 6.5c SP1 Installation and Configuration Guide
Protect724mouni
Firstcup
Firstcup
PrinceGuru MS
Hfs to zfs migration
Hfs to zfs migration
satish090909
Xen app getting-started-guide
Xen app getting-started-guide
hergamia
Adf tutorial oracle
Adf tutorial oracle
César Augusto Castillo Farfán
Fscm91sbil b1109
Fscm91sbil b1109
shivram2511
Installation
Installation
azarudeen26
Force.com fundamentals
Force.com fundamentals
manasystest
Party merge
Party merge
shameem_fics
Manual fet-pro430
Manual fet-pro430
Marco Knopfler Paes
Rst4userguide
Rst4userguide
ali lemssefer
Business objects51en
Business objects51en
Chandan Behura
11iadutil
11iadutil
Deepti Singh
Adobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler API
eugeneyh
ESM_InstallGuide_5.6.pdf
ESM_InstallGuide_5.6.pdf
Protect724migration
Gambit 2.2-tutorials
Gambit 2.2-tutorials
Shiva 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 Ajax
Idol Server 7.3 Admin Rev7
Idol Server 7.3 Admin Rev7
Captivate 5 user guide
Captivate 5 user guide
Domino access for ms outlook
Domino access for ms outlook
ESM 6.5c SP1 Installation and Configuration Guide
ESM 6.5c SP1 Installation and Configuration Guide
Firstcup
Firstcup
Hfs to zfs migration
Hfs to zfs migration
Xen app getting-started-guide
Xen app getting-started-guide
Adf tutorial oracle
Adf tutorial oracle
Fscm91sbil b1109
Fscm91sbil b1109
Installation
Installation
Force.com fundamentals
Force.com fundamentals
Party merge
Party merge
Manual fet-pro430
Manual fet-pro430
Rst4userguide
Rst4userguide
Business objects51en
Business objects51en
11iadutil
11iadutil
Adobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler API
ESM_InstallGuide_5.6.pdf
ESM_InstallGuide_5.6.pdf
Gambit 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
Descargar ahora