Posted on by JesterXL

Flex Example: HTTPService & Cairngorm 2.2

ws_icon2.jpgPreface

Cairngorm 2.2 was released on labs today. Upon reading Eric’s blog entry, I noticed they fixed a WebService bug. Hoping it was the one that sabotaged my original example, I downloaded and implemented. It did fix it, but Amazon had since changed their XML format, thus ruining it anyway. While perusing Amazon’s developer API docs, I noticed they had a REST implementation (variables on a URL string) as well as their web service implementation. I always like using REST implementations over web services because they are just easier to debug and the code makes more sense looking at it in my opinion.

So, I’ve modified my old WebService example that utilized Cairngorm 2.1. This one uses HTTPService instead, and Cairngorm 2.2. I only changed 1 line of code for the Cairngorm update; score for backwards compatibility.

Introduction

This is a simple Flex 2 example application that fetches books from Amazon.com. It shows how to use the Cairngorm 2.2 MVC micro-architecture with an HTTPService. It utilizes Amazon’s developer API, so if you don’t have web developer API ID with them, you’ll need one to compile this example yourself. If you just want to use it, scroll to the bottom. The code that’s changed from the original example is updating this example to use HTTPService instead of WebService . Additionally, my E4X skills have improved (a tad… *ahem*) since I wrote the last example, so I updated that factory code as well to be a little cleaner. Hopefully you’ll see how easy it is to parse XML using E4X. Finally, I removed all of the source code for Cairngorm and just use their SWC. You then just link this to your project:

  1. Click the project
  2. Go to Project > Properties
  3. Select Flex Build Path on the left
  4. Click the Library Path tab on the right
  5. Click the Add SWC button
  6. Click Browse, and navigate to where your example is on your computer
  7. Choose the Cairngorm.swc, click Open, and then click OK, and finally OK

For flow of the application and more context, read the original entry.

Flex 2 HTTPService & Cairngorm 2.2 Amazon Example – App | View Source | ZIP

21 Replies to “Flex Example: HTTPService & Cairngorm 2.2”

  1. Pingback: Jesse Warden - Flash, Flex, and Component Developer

  2. Dude,

    Just wanted to say thanks. I have been struggling with Cairngorm for awhile and everything kind of clicked when going through your example.

    Cheers
    Jeremy

  3. Hi Jesse,

    I’ve just upgraded to MyEclipse 5.5, using Flex Builder 2 plug-in and am having trouble with your DebugWindow in AmazonFactory.as. But if I comment those three lines out, I get compilation errors everywhere DebugWindow is mentioned (even on line 43 of the main MXML file, where it gets created).

    I would appreciate if you could help me out. I’m new to Flex and Cairngorm. Thank you in advance,

    Chris.

  4. Hi Jesse,

    First up it was nice to meet you at webdu in Sydney a few months back, soon as I get on to lite I

  5. Regarding the use of a Delegate passing itself as a responder vs. using one vs. composition is merely one of style.

    Regarding why you make the call vs. the Delegate, that’s easy. One litmus test to see if you’ve done Cairngorm ‘correctly’ is when your back-end changes, what changes on the client? If anything beyond the Services.mxml, ValueObjects, and/or Delegates change, you did it wrong.

    If your server moves location or changes how it works, you can change this in your single Services.mxml. If you’re data model changes, you change your ValueObjects, and refactor the Commands and Views that use them as necessary. If the services require different parameters or return a different format, you modify how your are parsing data in your Delegates and/or factories within your Delegates.

    These are all valid changes. However, changing your Commands is not. Commands are technically your Controller code. Most Commands in Cairngorm spend their days setting and updating data models. For small projects, or early on in big ones, these changes are small… say 1 line of code where you set a parsed server ArrayCollection to something in the ModelLocator.

    As your app grows, however, your Commands get more complex, and end up doing the most important work in your app. As such, it is imperative they are small in size, easy to read, and simple in execution. Removing service calls and server response parsing to ValueObjects removes a significant amount of code and ‘other things to do’ from your Commands. Now, a GetPersonCommand can typically be reduced to 1 line of code:

    ModelLocator.getInstance().currentPerson = personVO;

    Most of my apps, though, do more than that, even with the gets (the R in CRUD). A lot of people look at the Command at this point, and go, ‘Dude… it’s a new class file and 40 lines of code to basically run 1 line of code… WTF?’. While Cairngorm isn’t perfect, repeat after me: ‘There is nothing wrong with simple, readable code.’

    Again, if your server messaging changes, and you have to change your Commands, you did it wrong. Delegates shield you from the back-end mess, especially early on the project when crap doesn’t work, or is changing. You can even make fake Delegates while waiting on the server guys to get their act together and your Commands just assume they are talking to a real server. The most unlikely scenario, although most dramatic is, ‘We are changing from using AMFPHP and PHP to WebServices and .NET’. Again, if you did it right, even in that scenario, the only thing that should change is your Delegates (and Services.mxml obviously, but it’s just 1 file).

  7. hi Jesse,
    I was trying to get your example run in flex builder 2.0.1 but i get errors regarding the DebugWindow, even where its declared. Can you please help me fix this.

  8. Hi Jesse,
    I have tried this in flex 2.0.1, but i get error in regard to the DebugWindow, even where its declared. Can you please help me on this.

  9. Hi jesse,

    I just fixed up the doe to work, the debugwindow mxmxl was missing in the zip file and the structure for com folder wasnt completed.You got to add the adobe folder of cairngrom2.2 (from its source) in the com folder.

  10. Hi Jesse,

    nice example!

    In the source code you wrote the following regarding states and state variables in the ModelLocator:
    // Mutator (setter) used as a state watcher
    // I hate state variables, but am in a time crunch
    so I wonder… what would be your favourite way of handling states in Cairngorm ?

  12. Jesse,

    Nice one there…

    @Mohammed, pls can you help with the link to the debugwindow.mxml (or should i b asking jesse for that) or any place i can get it. Also i quite dont get what you mean by the com folder not being complete. which folder/file is missing? i think his structure pretty has all the app needs. Thanx in advance.

  13. where can i get debugwindow.mxml??? i had the same issues as Jesse…regarding debug window. now as i moved the mxml file to the root folder the errors are gone but the application does not run. from where do i add the debug.mxml?

  14. Updated: I packaged DebugWindow.mxml into a new ZIP, updated a method on DebugWindow, as well as including the Cairngorm.swc. If you are using Flex 3, it’ll automatically link it for you. Sorry for the hassle.

  15. thanks a ton Jester . well just wanted to know…Is it the same ZIP on this page? and if i am using flex 2 is there gonna be any problem??

  17. Hi!! im new to flex and cairngorm both.

    i was just implementing the code in flex 2. do we have to register in amazon.com ? because when i implement the mxml application it just shows the background..no data grid and no search buttons. can u help me out?

  21. If you wrote this today, would you of still done it in cairngorm? If so, why?

    I’m new to flex development and a lot of people have pushed me into using the cairngorm design pattern, but it seems overkill to me.

Comments are closed.