The Gold Hold

I’ve known about AS3’s lack of block-scoping since I first got those weird duplicate variable definition warnings. We’ve all seen them many times, especially when we take a vacation to the land of C++ or Java. What do you mean duplicate variable? I declared that in an IF statement or a different loop? Well for the first time it actually caused me some grief today rather than just annoyance, albeit briefly.

I declared a String inside a FOR loop, knowing that in AS3 object references are initialized to null. I wrote logic around this fact, thinking I knew what was going on and trying to be slightly more efficient by not initializing to empty String if I don’t need it, etc. It went something like this:


var i:int;
var n:int = 20;
for(i=0;i {
  var str:String;

  if(…something)
  {
    str = “return from some function”;
  }

  if(str)
  {
    //some more logic here;
  }
}


So what’s wrong with this? Well I wrote it with the only thought in my head being that AS3 initializes String’s to null, so each pass through the loop, str would be initialized to null, it could possibly be set to some non-null String, I’ll check for that and execute some code or move on. Unfortunately I overlooked the fact that AS3 does NOT support block scoping, which basically means all variable declarations are pulled out to the top of their containing function; therefore, str would be initialized to null when entering the function, but would not be re-initialized to null on each iteration of the loop. After each iteration str retained it’s previous value, which defeated the logic that loop was based on.

Easy fix? Yeah! Initialize str to null. Or just rewrite the logic, but this was way easier.

  var str:String = null;


This looks a bit redundant when reading the code as it makes it seem like I’m intializing to the default value, but due to the fact that the declaration does not actually happen inside the loop, I’m simply resetting str to null on each pass.

I’m highly considering pulling all of my variable declarations out to the top of the function definition when working in AS3. This does not fit into my normal coding conventions, but it’s more in line with what is actually happening in compiled code, and may serve as a reminder to avoid future pitfalls. It’d also get rid of those pesky duplicate variable definitions…

So your Flex app loads a bunch of data into models, configures sections of the application based on user permissions, all kinds of user-specific setup. What’s the best way to handle resetting the views and models when the current user switches or logs out?

In a current project I had the idea of redirecting to an HTML page that handles the login process, this way the SWF is unloaded, and on successful login reloaded(hopefully from cache). Well, if the login screen is embedded in the Flex app your life can be made even easier by redirecting the user to the same page your app was loaded from. Part of our deploy process renames the html-template for our application to index.html, so the process looks something like this:


private function logout():void
{
  var appURL:String = Application.application.url;
  navigateToURL(new URLRequest
      (appURL.substring(0,appURL.lastIndexOf("/"))),'_self');
}


Since the application SWF is hopefully cached, this has the effect of just looking like you took the user back to the normal login screen, except the application has been completely reloaded and as a programmer you can be lazy and get back to writing that sweet 3D Rotating List and not have to worry about things like resetting data models, etc.

There’s always plenty of debate around RIA plugin penetration and new version adoption. Friend and fellow Flex junkie Travis Collins has whipped up some javascript and Flex charting to track plugin versions for Flex and Silverlight. You can even sign up on his site to get the Javascript to embed on your own pages and track visitors to your site, really useful for internal IT debates or even just to make sure your apps are targeting an audience who stays up to date!

Check it out here

I have no idea how much of my Flex career has been spent debugging why Bindings aren’t firing ‘correctly’ in a project, but I know I’ve banged my head against this specific problem a few times now.

A lot of the time I declare an ArrayCollection and whatever sort or filterFunction I need on it, and from that point forward I don’t want to reassign that reference to a new ArrayCollection or one returned from a service call because I don’t want to reapply the sort or FilterFunction.


   myAC = new ArrayCollection();
   var acSort:Sort = new Sort();
   acSort.fields = [new SortField("name", true)];
   myAc.sort = attSort;


If I detect a change on a data model or get some new data in a callback, I’ll swap out or modify the underlying Array in the ’source’ property of the ArrayCollection, and then call refresh() when I’m finished so any components bound to the ArrayCollection will be notified of the update


private function update(newData:ArrayCollection):void
{
   myAC.source = newData.source;
   myAC.refresh();
}

private function getText(ac:ArrayCollection):String
{
   return ac.length.toString() + ‘ item(s)’;
}

<mx:Text id=”myText” text=”{getText(myAC)}” />


Great right? Sort and filterFunction are maintained, and components should update due to the refresh. Well, not exactly. If myAC is the dataProvider for a data driven component such as a List or DataGrid we’re in good shape, because when setting the dataProvider these components register for the COLLECTION_CHANGE event, which the refresh() will trigger. However, simple data-binding will NOT fire when this event is dispatched due to a refresh. There are many ways to work around this, one of which is to listen for the COLLECTION_CHANGE event on myAC when creating it and update component text, update variables, whatever you need to do in the listener. You could also keep a Bindable Boolean variable around and toggle it whenever data is updated, and then use that as a parameter to any functions that need to be called to update your components.


[Bindable] private var _dataUpdated:Boolean;
private function update(newData:ArrayCollection):void
{
   myAC.source = newData.source;
   myAC.refresh();
   _dataUpdated = !_dataUpdated;
}

private function getText(updateFlag:Boolean):String
{
   return myAC.length.toString() + ‘ item(s)’;
}

<mx:Text id=”myText” text=”{getText(_dataUpdated)}”/ >


In the example above the function ‘getText’ will be called whenever the _dataUpdated Boolean is toggled. This example is overly simplified because I could have just bound my text directly to the myAC.length property, which WILL work, but I wanted to illustrate that binding to the myAC reference will only fire if that reference is changed to a new ArrayCollection, NOT if refresh() is called.

There are probably at least a dozen other ways to work around this particular Binding issue, but there’s a quick one if you need it!

Way too much to catch up on now that MXNA(AXNA now?) is back online. I stumbled across this post looking for a sliding effect and thought I’d post some code I’ve used in a few projects. One solution suggested in the comments was the PagedList component from the FIG, which I’ve also used.

Anyways, here’s a quick and dirty example of how to achieve this using Move effects on the children of a TabNavigator.

SlidingTabNav

I’ve seen the idea of a “drawer” to hold buttons, menus, etc on a few websites and applications in the past. I don’t really have an urgent need for this in any applications I’m currently working on, but wanted to explore the idea anyways. This is far from production code and is meant only to be a starting point for anyone who may need a similar component in their applications.

That being said, here’s a simple demo, view source enabled:

Drawer Demo

Let’s talk about the components that bring this together

DrawerMenu

This is the simple Application that holds all our pieces. Its layout is absolute so we can get the overlay effect.  We’ve got a Panel representing the content of the Application, followed by a VBox that is our ‘Drawer’. This VBox holds four components that are AutoHideButtons, which we’ll talk about next.

AutoHideButton

The idea of the Drawer is to provide quick access to menus/tools in an Application, and it needs to get itself out of the way to conserve space. I decided to try out a component that would hold an icon and text, but would hide the text until it was hovered. I had more plans for this but decided I’d leave it in this rough state until I had a real need for it. It accepts “iconClass” as a style and “text” as a property. Explore the code and feel free to comment if you want me to explain the details.

RoundedRightBorder

I’ve been exploring programmatic skins, specifically border skins, in Flex lately. This class allows the right side of a component to be curved. In the example I use this on the AutoHideButtons and the VBox that is holding them. It exposes a “curveRadius” style that is not really accurately named as the drawing code is rough, but you should be able to tweak that number to get the desired look.

Check it out, comment, and hack away!

I think I mentioned this earlier, but my group currently consists of exactly zero designers. Our company has been lucky in the past to have a few engineers with a creative flare that can hack their way through a halfway decent user experience. Well, now we’re starting to take on more projects within the company, and we need to staff up appropriately. I’m trying to read everything I can get my hands on about Designer/Developer workflow, and if anyone is reading this I’d LOVE to hear back about how other groups have established workflows and how it’s worked out for them.

One slight difference I see between our projects and projects that I hear about is the sheer size. We’re probably six months into development of our Flex-based network mangement application, and I’m trying to imagine what would be different if we had a designer on board. What kind of work would the designer do on a day-to-day basis? Do we have enough work on our various projects to keep the designer busy? I don’t think we’re really interested in bringing in a consultant or a short-term contractor because we really want to establish some consistency in our user experience and grow this team from the ground up to handle the User Interface for any public-facing applications our company builds. I just need help envisioning/establishing an appropriate workflow that keeps everyone productive, happy, and focused.

Comments and emails to danny@thegoldhold.com are appreciated.

Flash Lite has been around for a while, so Adobe is definitely present in the mobile market, but what about the next generation of mobile applications? At 360Flex I attended the “What’s coming up in Flex 4″ session where Deepa Subramaniam spoke about their plans to support Flex on mobile devices in a future version of the Flash Player. Adobe is obviously still in the brainstorming stage trying to figure out how to attack that problem, so it seems like Microsoft thinks they might have found an opening to get some Silverlight adoption.

Doug McCune has a discussion on his blog about Silverlight apps this week, so seems to be a hot topic.

It’ll be interesting to see how this plays out with the growing number of new mobile technologies. When I had a Motorola Q smartphone there were a ton of great 3rd party apps written in the .NET Compact Framework. Google’s now entered the market with their Android platform, and of course J2ME has some serious market share.

Flex obviously let’s us do a lot of really awesome visual, immersive UIs. Unfortunately, sometimes we just have to make a component that Joe Schmoe user is familiar with so he can get his daily work done using the applications we create. One of the first things I found myself needing that Flex didn’t provide was a simple data grid with a column of selection checkboxes. Sure multi-select lists are good, but not all end users know to hold CTRL or Shift while making selections.

Disclaimer: This was one of the first custom components I ever made, and it’s not well documented. It needs to be rewritten, I just haven’t gotten around to it. I see requests for this on FlexCoders every once in a while, so decided to post what I’ve got in hopes that the community can expand on it.

(Update) - The things we learn!

This seems to be a popular topic today. Another post on FlexCoders was followed up by a blog post from Alex Harui with his implementation

Reading through it reminded me how much of an ineffecient hack my code was, so I updated it to be very similar. Only real addition is the ability to select/deselect all items with a header checkbox. Updated code and sample below.

CheckboxDataGridSample.mxml

CheckboxDataGrid.mxml

Try it out (may be slow to load…)

Sitting in the lobby of a very decent hotel in Atlanta with some downtime is the perfect time to finally launch a blog. The conference is 360Flex, very small and cozy. Bar was also WAY too small and cozy for all the developers crammed in there. I drank my share of free beer last night, so I decided to head back to the Omni and found an awesome little corner with a panoramic view of ATL and a power outlet. Score.

This site will be geared towards RIA development with a focus on Flex. After developing in Flex since the Flex 2 Beta, I feel I might have enough to write about. The first day of sessions here at 360Flex is over, so everyone here knows at least as much as I do. If you were in attendance please navigate away now for fear of boredom. Actually, stick around and improve my upcoming code examples in the comments.

About the Author:

Not going to fill up the sidebar with this, but here’s the scoop. I do application development, and mostly RIA these days, for a fairly large enterprise company. I do some light contracting on the side with my newly acquired Flex skills. I am NOT a designer, although my company has yet to hire one, so my team has to fake it way too often. I live in Alabama, possibly one of 3 Flex developers in the entire state, pay is good and cost of living is cheap. After getting our company to accept Flex as the De facto UI technology for new projects, we’re slowly growing a competent team. I find myself mostly answering architectural questions as we progress on our projects, so I crawl FlexCoders and the various Flex blogs to try and determine best practices for all the various challenges we face. I think that’s good enough for now and I’ve got an 8:30 session to hit up tomorrow morning, more about current projects and some code samples from things I’ve tackled coming up.