Software, Fitness, and Gaming – Jesse Warden

Category: Flex

  • Binding in the Trenches

    It’s 7:50 pm on Sunday, and I’m still working. I figured I’d share why I’m debugging like crazy instead of relaxing.

    Bindings.

    For those of who know of Flex 2, Adobe’s tool for programmers to create Rich Internet Applications, it has this one feature that sets it apart from Flash, and incidentally, it’s brother Spry shares. It allows you to put a variable surrounded by curly brackets, and at runtime, anytime that variable changes, it’ll update whatever variable is being set to it. So, for a TextField, you can bind a global text property to the TextField’s text property, like so:

    <mx:Label text="{message}" />

    And when you update the message variable, the Label’s text property will automatically be updated. Utilizing Cairngorm, a lightweight MVC application architecture for Flex, you can take this concept a step further using ModelLocator. This is basically a global (static) class that holds global data. You can have your Views’ (your visible forms) bind to these variables. Anyone who updates the ModelLocator (in this case the Model) has suddenly updated the entire app. Nice!

    …that is, until something goes wrong. These bitches are hard as nuts to debug. It’s even worse when you are binding to a nested property, or a set of forms and their children all bind to the same thing. Through copious refactoring, the parent view is the only one who actually binds to the ModelLocactor. The rest using public getter / setters, and use their internal private variable (Flex 1.5 only has public / private, not protected like Flex 2) for the binding. This makes it easier to debug, but not awesome. You know you’re in deep shit when you’re forms start getting updates, 1 frame later mind you, and have a COPY, not a reference of a ValueObject. Yes, that’s right, I said a COPY, not a reference. Array’s and Objects in general are always passed around in Flash by ref, so naturally I’m freaking out.

    Anyway, what I have learned from this? Two things. Common literary rule is to ensure all lists have at least 3 entries, but I’m using 2 I feel they are important.

    1. Make the top level View use ModelLocator for binding; all children can propagate internal copies. If you have a View that uses ModelLocator, and his parent uses ModelLocator also, your code sucks, fix it. Refactor it into a binding tag, binding to a getter / setter, or a public property. You’ll thank me when you go to debug and you KNOW who’s setting who, and when.
    2. Handle null. If you’re View can’t handle null, it sucks. The old saying is a good acid test for your View; Garbage In, Garbage Out. If you throw a ValueObject at a form for example to edit it, and bind to the changes, fine. If it takes a null, and disables itself, fantastic. If you’re View can’t take a null, you know what you have to refactor.

    On a lighter note, in the free milliseconds I’ve had in the past month to play with states & transitions in Flex has taught me another 2 things:

    • States and Transitions are the bomb. It makes your View’s much more flexible, allows you better control over user eye tracking (look here sucka), and good integration with event handling.
    • Flex without Flash blows – Flash & Flex together can make some phat interfaces. AS3 & Component powah, Flash funk; good stuff.

    I’ll be showing some of the cool stuff you can do with the above August 3rd here in the ATL, August 14th in New York City, and October 23rd (ish) at MAX in Vegas. Hope to see you at one of ’em and make you go, “Awww… hell yeah!”.

    …and back to the mutha-fD)($Ring grind.

  • Non-Selectable TextArea for Flex 2

    Bloke on the Flexcoders list needed a TextArea that wasn’t selectable. Editable didn’t work because you could still select text, and it showed the i beam cursor. Enabled didn’t work because it colored the text the wrong way, and forced him to use custom styling (or CSS selectors). TextArea doesn’t have a selectable property, and since it extends Sprite, not TextField, there is no property to hide. It utilizes mx.core.UITextField via composition, and the textField property is protected, so you CAN access it via inheritance. This example here shows how to override the selectable property and end up with a non-selectable TextArea.

    Non-Selectable Text Area – App | Source

    Zidane iPod, anyone?

  • Flex Chronicles #22: Embedding Fonts in a Button

    There are a few dark little secrets to the Button control in Flex 2 that can trip a designer up. It took me 2 1/2 hours to figure this shiz out so I just HAVE to blog it. I’m running on fumes, and this is the 3rd blog entry in the past 30 minutes, but my fingers never tire; they’re always willing to move furiously. They know I have words I need to get out, and fast because there is so much to do and so little time. My head feels like lead… it keeps swaying… wtf, am I at sea?

    The mx.controls.Button class utilizes a mx.core.UITextField for it’s text label. This class basically wraps TextField, and add some CSS & measurement support so it’s easier to work with. By default, a Button’s label is bold.

    This may seem minor, but if you try to embed a font, and apply the style to the button, it won’t work. You’ll apply the same style to Label’s, and see it work just fine, and go, ‘WTF?“. You can use a horrible hack, and utilize the mx_internal namespace, call getTextField on the Button, and call embedFonts on it to true. You can then apply this to every event a Button emits, and duct tape that mofo into submission. This looks & works horrible.

    The problem stems from the fact that when you are embedding a font, you aren’t always embedding the bold version of it. Some fonts don’t have bold equivalents, and some are specifically to be made bold, but aren’t seen as bold by some tools. Lame.

    The fix? 3 lines of CSS.

    Let me stop and just say right quick that Flex 2’s implementation of CSS is off the hook! It’s come a long way from Flex 1.5. I spent 4 hours the other day in CSS. That’s right… 4 hours in Firefox & CSS skinning & incorporating a design. Not MXML, not ActionScript, but CSS! Insanity. It feels so much like web design, but… something’s different… oh yeah, I know! My design actually, you know, works the same in every browser and looks like I intended with no compromises!

    Anyway, you overwrite the Button’s main style attributes. You ensure he’s embedding fonts, you set his font weight to normal, and you set his default font, like so:

    Button
{
	embedFonts: true;	
	fontWeight: normal;
	fontFamily: oldSkool;
}

@font-face
{
	src:url("PAPYRUS.TTF");
	fontFamily: oldSkool;
}

    This is a big deal because a lot of components use Button. You’ll have the same font problems with them as well, such as TabBar/TabNavigator, and LinkButton/LinkBar to name a few. Doing the above vs. using a custom style ensures that all LinkButtons and Tab’s will now use your font. w00t!

    :: collapses ::

  • 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.