1. www.universalmind.com Thomas Burleson

2. Using MVC with Flex & Coldfusion Projects June 27, 2007 See how Coldfusion MVC is similar to Flex MVC…

3. www.universalmind.com Presentation Overview  Introduction  Review the Coldfusion MVC pattern provided in Mach-ii I. See Galleon Forums app as [traditional architecture] II. See migration of Galleon MX [MVC architecture]  Review the Flex MVC framework provided in Cairngorm I. See simple Flex version of Galleon MX [MVC architecture]  Compare Similarities & Differences I. Controller support for registration of Event-Views II. Announcing Events III. Listening for Events  See how business logic can be separated from views in BOTH frameworks.  Review how both frameworks can be used together within one application

4. www.universalmind.com So what is Model-View-Controller (MVC)? Model contain your business data, and manages relationships between your data objects View displays formatted data in controls allows users to “interact with model data” announces user “gestures” using events Controller listens for events processes events [according to configurations] updates model notifies views of model changes Simply a way of writing code and specifying “who does what…” Really simple… don’t be intimidated!

5. www.universalmind.com You will see code SOON … don’t worry! Developers’ version of “show me the money…” or “where’s the beef?”

6. www.universalmind.com Coldfusion MVC pattern provided in Mach-ii Model contain your business data, and manages relationships between your data objects View *.cfm pages that access data from Request scope Supports JavaScript, Spry, etc. announces events using GET/POST http:// /index.cfm?event= Controller Your webapp “registered” listeners for events using /config/mach-ii.xml Listeners remove issues of “scope” and delegate to business layer Listeners insert data into Request scope Controller loads specified view when listeners are “done” Page-Based HTML Solution Mach-ii is a actually another web app that allows custom applications to “register” configurations for their own needs.

7. www.universalmind.com Yeah! Let’s look at code… Traditional Coldfusion Application: Galleon Forums Does not use CFCs Complicated use of Not maintainable No way to call services or business layer directly No central location to configure events and views

8. www.universalmind.com WOW! Much better… MVC Coldfusion Application: Galleon MX Uses Mach-ii Uses CFCs Uses Design templates with editable regions Much simpler than most CFIncludes… allows complete design time rendering. Listener CFCs now call Service CFCs XML configuration file to register listeners, events, and views.

9. www.universalmind.com Super Kewl! Extending Coldfusion Galleon MX Could use ColdSpring for persistence… “under-the-hood” changes do not affect views, listeners, or navigation. Could add different views without affecting core services; listeners can simple aggregate information as needed Remember Our views simply render model data and do NOT know anything about event processing Our listeners and services handle events and do NOT know anything about views.

10. www.universalmind.com Huh? Let’s look at code… Traditional Flex Application: Galleon Flex Does not use MVC framework Makes dataservice calls directly Dataservice calls… huh? Views contain logic for dataservices Not scalable if the views get complicated or if multiple developers want to work on the app. No central location to configure events and views

11. www.universalmind.com MVC Flex Application: Galleon Flex Uses Adobe Cairngorm MVC framework So what is the MVC within Flex? Views are standard Flex composites Model can be same as ColdFusion Model Controller is 3-part: FrontController Commands [and Delegates] Events

12. www.universalmind.com Hang on… here is the code! MVC Flex Application: Galleon Flex Commands (essentially the “controller”) Respond to events. Handle logic and update model Ask delegates to handle remote calls Think of these as proxies directly to the Service CFCs

13. www.universalmind.com MVC Flex Application: Galleon Flex Let’s explore some source code…

14. www.universalmind.com Remember Flex gives us effects and transitions… Why is Flex MVC so much more complicated? 1) Views are nested compositions 2) View relationships are much more complex 3) Events are everywhere & contain custom data  We have application-level events [MVC events] and view-local events  Some events notify other views of state changes  Some events notify the controller of app requests or changes 4) Remote data calls are ASYNCHRONOUS This is a important concept & means coding Flex apps can be fundamentally different from CFML.

15. www.universalmind.com MVC similarities between Flex & Coldfusion  Views render data and announce events 1) Event announcing is different. 2) Flex uses dispatchEvent versus HTML GET/POST i. Flex events dispatched internal to client ii. HTML events dispatched via TCP/IP to server.  Model can be the same 1) “Value Object” (VO) classes can match 1-to-1 2) use Eclipse wizards to auto-generate Flex VOs from CFCs  Controllers are DIFFERENT

16. www.universalmind.com MVC DIFFERENCES between Flex & Coldfusion  Controllers are DIFFERENT  Mach-ii uses mach-ii.xml file  Flex uses FrontController  no xml file  Mach-ii Listeners are special CFCs  Flex Listeners are “Command” classes  Flex DataService calls talk DIRECTLY to Service CFCs (asynchronously).  Mach-ii Events ALL come back to the server.  Flex MVC events may NOT come back to the server (optional).

17. www.universalmind.com Integrating Coldfusion and Flex MVC Apps  Service CFCs are used as the “common” API  Mach-ii Listeners [should] forward requests to Service CFCs  Flex Dataservice calls talk DIRECTLY to Service CFCs (asynchronously) via Flash Remoting.  Flex client-side logic should be related to view interactions  Flex client-side may validate/format model changes  Coldfusion business layers (Services, etc.) validates model changes  Coldfusion business layers access & persist model data  Flex apps may be hosted in complex web pages (e.g. Hybrid Solutions) Used by both apps