Blog

  • Flex 2 WebService & Cairngorm 2 Example

    *** Update: 8.14.2007: The code in this article is out of date. Please refer to the new entry instead. ***

    ws_icon.jpgThis example utilizes Amazon’s search webservice in the Cairngorm 2 application framework. You can go to Amazon.com and register for a free API key. Once you do, you just plug into this example’s constant file, and she’ll work for you too if you when you compile. This example application allows you to search for books on Amazon.com by keywords.

    The events are debatable in their place in the package structure. They extend CairngormEvent, thus implying they fire commands, but you could reuse events. Also, I am not very good at E4X so please do not use that as an example of E4X usage.

    Here’s basically how she works:

    1. App boots up, shows first state
    2. user types in some keywords, clicks the Search button
    3. this fires the doSearch event handler
    4. the doSearch handler creates a CairngormEvent, and dispatches it
    5. the Controller has mapped that type of event to a Command, and thus it runs the command, passing it the event
    6. the Command looks at the event type in the execute function and decides what to run, in this case, searchBooks, passing the event’s data to the function
    7. search books creates the Business Delegate, and calls its method
    8. the Delegate gets the WebService from the ServiceLocator, fires off the WebService, and waits for a response
    9. if the response is successful, it parses the E4X XML via a Factory to a list of Book ValueObjects
    10. finally, it calls the responder’s onResult function
    11. Since the Command is the Responder, he gets the data, and sets it to the ModelLocator and updates the applications state
    12. The View’s are bound to the state variable and book list in the ModelLocator, so they immediately have their bindings fire
    13. This causes the main app to change state, and show the results DataGrid
    14. The results DataGrid is bound to the books list in the ModelLocator, and shows the results.

    * Note: I haven’t got my serial for Flex Builder 2 yet, so the App & View Source will time out after a day. The source, however, is good forever.

    Flex 2 WebService & Cairngorm 2 Example – App | View Source | Source ZIP

    BTW, I fixed my Atom feeds, thanks to those who let me know they were busted. If I don’t know it’s broke, I can’t fix it.

  • Flex Chronicles #21: Faceless Children in Cairngorm 2

    Not sure the best title, but close enough. You cannot have faceless children be involved in the event bubbling phase for event propagation to fire off Commands via the FrontController. The solution is to have them extend a DisplayObject of some sort, typically UIComponent.

    Why? A few reasons.

    To define faceless children, they are class instances that do not extend a DisplayObject; something that has ties to the DisplayList and thus can be visible. An Object can’t be a seen, but a Sprite can for example. You can define class instances or MXML tags within View components as children of that component / class. If they do not extend a DisplayObject, to me, they are defined as faceless children.

    Event bubbling is referring to how, when a event is dispatched from a deeply nested view, it’ll go up the DisplayList in a vertical fashion, like a squirrel climbing down a branch of a tree to the trunk (only he’s going down… you get the gist). He doesn’t go side-ways to other branches, but rather keeps going to the parent of the braches. Event bubbling is similar. If you dispatch an event with bubbling to true, it’ll do this. This is a great feature.

    It’s also considered rude to do this and bad practice. Another View could have an event of the same name (since event types are still just Strings), and you could inadvertently fire something further up the chain that didn’t ever think of canceling events.

    The justifiable times are when you want a deeply nested View to fire off a Command in Cairngorm 2. In Cairngorm 1, you’d use a special class to do this, EventBroadcaster. This has been ditched in Flex 2 for the, now intrinsic, EventDispatcher class. Cairngorm events are indistinguishable from regular events. The FrontController determines what fires off a Command. This is nice and has good performance gains.

    However, it implies that only UIComponents can fire off Commands. Purists may irk at this, but whatever. MXML at least makes this really transparent. If I do , you can’t immediately tell what it’ll look like visually compared to for example. As long as she extends UIComponent, it’ll work just fine since that’s pretty much a requirement for being put in a UIComponent; you must also be a UIComponent.

    Now, granted, you could manually capture the events in the View that hosts these faceless children, and then forward on the event… but um… dude, we have bubbling. Again, one could argue the performance overhead of extending a visual object merely for the sake of preventing writing 3 lines of additional code. :: shrugs :: To each their own.

    Bottom line, if your class merely extends EventDispatcher, and dispatches a bubbling event with the intent of firing off a Cairngorm Command via the FrontController, it won’t work. If you make it extend UIComponent, it will.

  • Can Flex be Design Driven?

    I met up with Kenny Bunch, his wife, his brother Phillip, and Dave Buhler yesterday after work. Our goal was to hang out, and talk tech. Kenny’s pretty well known down here in Atlanta, mainly because of his Turner & CNN contacts. His programmer background also adds a unique perspective on things since he’s worked in a few different types of environments. He now does his own thing.

    One interesting point he brought up was in explaining how parts of Turner (Cartoon Network) work in regards to Flash Development. He was describing how projects are design driven, stemming from the fact they are in the entertainment industry. As such, designers typically have the final say on how things are made, and the design drives the project. I understood what he was saying, as my first job in the industry was with one such type of firm.

    What I didn’t think about was how he described it. Design Driven projects don’t really mean much to designers; they are designing things, duh. To programmers, however, it means a lot. I’ve gone the opposite direction. As my projects grew in scope, so to did the driving forces behind them. More and more became business driven, and finally database driven. Where I am at today is a total 180 degrees from where I was 6 years ago.

    Before it was, “PSD ownz ju!”; the design comp is the end all be all. You build what’s in the design. Now, most of my projects “work” based on how the database is designed, directly correlated to whatever business we’re building things for. The design is from signed off mockups. These mockups, however, don’t drive the project per say. You can sign off on mockups, and say that the “application needs to work like what’s designed in the mockups”, but you don’t CODE to the mockups; you code to the whatever the server-side developers and you the client developer work out. This, of course, all stems from how the database is designed. Granted, there is tons of leeway, and things you can do on the middle tier, and client to help simplify things, but bottom line, the db is the driver.

    Client’s, however, don’t see db, middle tier, or even some client level programming changes. They either see a new bug, working functionality, or a design change. Thus, it’s easier for them to equate progress with visual changes which unfortunately is in direct contention with how db driven projects are made. It’s easier in Rich Internet Applications because we have more of a design presence than Visual Basic or .NET applications for example. Visual changes are more apparent, contribute to good experiences, and have immediate, and a visually, recognizable presence.

    It made me wonder if Flex could ever be used in a design driven environment. For example, I’ve seen some mention of Flash Developers who have entertained the idea of utilizing Flex Builder 2 as their primary coding tool for ActionScript, but will use Flash primarily for the actual building of the application. It makes sense once Flash 9 is released since Flash 8 only supports ActionScript 3 and Flex Builder 2 only supports ActionScript 3 (unless you go download Blaze, the Flash 8 update that has AS3 support in an alpha format).

    Back in the day, we’d all use Flash MX 2004 to compile a SWF with our components in it. We’d then spend the rest of our development in Eclipse using a FAME setup. This was really desirable, mainly because of the speeds which incremental compiling gave us (1 second vs. 1 minute and a half for 1 line of code being changed) and better code debugging tools. Flex Builder 2 has the same thing, so it’s only natural to want those things. You can use Flash Development Tool now, no doubt.

    At the time, we did have a pretty much design driven project. It was still equally driven by DB, backend, and other functional needs to, so in retrospect, I’d say we were all on equal footing pretty much stemming from the fact that all matter, and have equal relevance in product development.

    Anyway, I just thought it curious. I know Flex 2’s main goal is adoption; getting traditional developers involved via the low barrier of entry. The flipside is seeing if traditional Flash Developers coming from design driven environments can somehow adopt Flex into their workflow.

    In building a prototype game, it’s really not too bad. You still have to use 2 tools, using Flash for the actual design & animation, but since assets can now be mapped to classes, it’s cake to get ’em into ActionScript only projects (no Flex components or MXML). Furthermore, you can use an ANT script to ensure the latest compiled SWF assets are copied to your various directories for embedding into other SWF’s, or for use at runtime.

    This comes back to the fact that the perceptions of the Flex developer community will take awhile. When they look at it, they see a lot less things to worry about: no memory pointer crap, no browser or OS related issues, and the ability to talk to ANY backend all simultaneously.

    When a designer looks at it, they see the ability for their designs to look as intended. Their fonts, transparency, and layout all exact on any browser and any platform. They don’t have to design for the lowest common denominator like they do with web design, and this prevents compromising their vision.

    The latter is one of the great facets of the Rich in Rich Internet Application that I fear will be a long while before traditional development shops recognize what they are ALSO getting in addition to a ubiquitous, predictable, and lightweight runtime engine.

    I think Flex developer shops (aka former Java dev shops, w00t!) will perceive this as not a problem. Most designs in my experience are conservative, and done with minimalist implementation in supporting to not even acknowledging the customer’s brand.

    This is total opposite from how traditional design work is done. A disturbing parallel is how a lot of people interpret Interaction Design, Information Architecture, and Designers as the same role. If you are a smaller company, that makes total sense, but that doesn’t make it ok.

    Maybe the aforementioned benefits, ubiquity, predictability, and lightweight are in fact “good enough” in a pragmatic sense for traditional developers coming to Flex. While I feel I can clearly convey the benefits of good design to those I work with and the clients I have, to them, they are more interested in functionality vs. presentation. Again, this stems from the fact that they are NOT in the entertainment industry. I still think there is room for serious growth, and designer integration. Gamers’ would get it…

    Obviously, I don’t think X-Men: The Last Stand design style should be implemented into Enterprise applications. Maybe 2Advanced, though, their new design is off the hook! The point here is that you DO have those kind of design capabilities, in addition to all the other developer benefits of the Flash Player. I say you should take advantage of them. Use them to beat your competition. If you don’t have qualified designers on staff, contract them out and/or hire them and involve them in your development process (in the initial spec stages, not the implementation ones).

    Microsoft’s Expression is going to have the same problem, only worse so. At least Adobe‘s products work in both markets. Your designer can use Photoshop and Flash whilst your developer can use Flash and Flex. Some of these apps have serious seniority, placement, and strong designer / developer followings. Expression (Sparkle and Acrylic), have neither, although, again they both stem from (now) the same company.

    The only catalyst I can see for change is Breeze, the ultimate Rich Internet Application. Good design, good functionality, and extremely useful to boot. Frankly, I think the bar can, and should, be set higher on the design front. We have capabilities others don’t; let’s all use them to a competitive advantage.

  • Flex Chronicles #20: DataTips & CellRenderers

    A data tip is a tooltip that shows for text in a datagrid column that does not fit. So, if you have a “Name” column in your datagrid, and the person’s name is “Pimp Double-G Booty-licious Birdman”, but the column is only 20 pixels wide, the text will clip. If showDataTips is true on the datagrid’s column, it’ll show a tooltip when you hover over that row. It only shows for cells where the text is too big.

    Windows XP does this for example when the folder name is too small to fit into Explorer. You can hover your cursor over the folder, and it’ll show the full folder name.

    The problem is, the DataGridRow class specifically does NOT implement dataTips if the DataGridColumn has a cellRenderer. The fix is to set the cellRenderer’s toolTip value in it’s setValue function.

    I’m not sure how this is handled for itemRenderer’s in Flex 2, but I’m sure it’s similiar as is the fix if needed.