Software, Fitness, and Gaming – Jesse Warden

Blog

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

  • I Need An Office

    I’ve been working from home for a year and a half now, and I’ve had enough. It’s time for an office.

    Yeah, I know, I used to brag about how cool it was, and how nice it was to work in pajamas. The conveniences are still there mind you. I can always be available for FedEx, phone guys and plumbers, and accepting various other deliveries. I spend 2 minutes making coffee, and that is the gist of my “getting ready” in the morning. I don’t have to drive to work, and suffer the 3 hours a day sitting in a hot car, wasting money on gas, and robbing myself of 3 weeks of my life a year. All that stress during the commute is never accumilated. I’m in my home environment, in my personal office, with copious amounts of food (sometimes) in comfortable surroundings. My puppy dogs are asleep at my feet. What setting could be better to code in?

    And that’s the problem. It’s my home, not my work.

    A friend of ours once diagnosed her majesty and I with a problem. She noticed my gaming systems in the bedroom, with the bed aimed at the TV, and all of her majesty’s toys next to the bed. This wasn’t a bedroom, but where her majesty and I relaxed. You are supposed to do that in the living room if you have one. It was just nice to be relaxed while I played games and could spend time with her majesty while she knit or blogged or whatever. However, it cost us sleep. I already have mild insomnia, and she can’t sleep if I’m not sleeping. We were bluntly told to only sleep in the bedroom; if I wanted to play games, if she wanted to knit or blog, or if either of us wanted to watch a movie or TV, we’d have to do so in the living room.

    So, I moved all of our shiz, and we re-arranged, the bed to not face the TV. We moved the TV out, too. Within 2 weeks, I was finding it easier to sleep, and other positive things came from the living room situation as well. In short, it was an appropriate use of rooms.

    I think I’m not using my office appropriately. Although it’s my “man cave”, it harbors a lot of negativity. All the pain, frustration, and anger of my day stays there. I’m not very good at dropping things either. That attitude is what helps me spend hours solving a simple problem. It’s also a curse, though, when working from home. You can’t “leave it at work”. It’s one thing to discuss your day to get it off your chest; it’s another to return to the room to finishing working. I’ve even found myself some days dreading going into the room. This is the same room that inspires me to create, the same room that has Flex 2 & Flash 8 installed on my gaming box… and I even hesitate? Do you see the horror of the situation?

    When her majesty comes home from work, the home becomes a different place. She “lives here” while I’m working. It’s hard to switch modes. I’ve done it, but it robs me of distraction sometimes. If she catches me at a stopping point, or when I’m merely merging & checking code in, it’s really not a big deal at all. But if I’m in the middle of debugging, or on the phone, conversing with co-workers, or talking to clients… it’s rough. I want to be the house husband, but I need to be working. Taking a break is hard because so near to the end of the day, it’s hard to keep the momentum going if you haven’t started something cool at like 3:00.

    I always thought working from home would be awesome. I remember reading Sean Voisen’s experience about he was lonely, and wanted to be on a team in person. Hah! Dude, I so was not going to be lonely, and I can still work with a team I thought. Yeah, but you can never leave the tribulations elsewhere, you never have a sanctuary, and work is always a click away. Without a proper balance, you end up like me, blogging when you should be passed out exhausted. Don’t get the wrong idea; the good and great days I have at work do propagate into the house hold, but they don’t belong there. They belong at work.

    I had her majesty do reacon last week, and I did some searching today. A wide vareity of places are available, but I’m taking my boss’ advice, and only getting what I’m excited about. I was planning on getting the cheapest place I could find, but he said I’d hate it, and I believe him after playing it out in my mind.

    One thing that won’t change is telecommuting. I’ll still telecommute to work. We have consultants all over the place, and my team and I can still collaborate, kick arse, and take numbers regardless of where we are. If a client needs me on site, I can do that too. For the day to day operations, I’ll need a new base of operations, and it’s not my home.

    I think in the meantime, I’ll fix the regenerated Alienware laptop, and head to the local mom and pop donut & sandwhich shop to work at a few times a week. They have the fastest wireless I’ve ever seen, and overpriced sandwhiches. Being forced to get dressed daily will be weird, but something’s gotta give.

    Any office buying advice?

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