When Binding won’t work with your ArrayCollection

July 22nd, 2008

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!

Creating a Sliding effect

May 9th, 2008

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

Application Drawer

April 10th, 2008

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!

Building an RIA Workflow?

March 6th, 2008

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.

Silverlight beating Flex to mobile devices?

March 4th, 2008

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.

Checkbox DataGrid Component

February 28th, 2008

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…)

I found the internet

February 25th, 2008

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.