Archive for January, 2010

Custom Preloader DownloadProgressBar

The DownloadProgressBar is the thing you see while the SWF is being downloaded. It also shows a progress bar while the application is being initialized. The one we ship is pretty vanilla and boring to watch if you have a large SWF that takes a long time to download or initialize.
You can create custom ProgressBars by implements IPreloaderDisplay on a Sprite and doing whatever you want in it. The trick is that you can’t use Flex classes since they haven’t been downloaded or initialized yet, and you can’t probably don’t want to do asynchronous things like load images since you’re already in the process of getting the SWF over the network.
I’ve posted two different prototypes of custom DownloadProgressBars. Remember, these are prototypes so they probably have bugs and were only tested on FIreFox on the Mac but the I just want to give you an idea of things that are possible.
The first one displays a set of “slides” the user can read while the application is starting up. The ones in the demo are ugly, but are there to give you an idea of what capabilities I was able to code up in as little code as possible. You can’t use embedded fonts since that will take too long to download. You probably don’t want to use bitmaps either because of their size. But you can draw filled shapes and add text and format that text to some degree. Yeah, you could try to mimic as much of FXG or SVG as possible, but again, that will probably take too much code.
An interesting feature of the SlideShow preloader is that it gets its slide data from the HTML wrapper. That way the slide data isn’t baked into a SWF and you don’t have to make an additional network call to get the slide data. If you add some server logic, you can generate different slide data in the wrapper based on any other knowledge you have of the user without having to change the SWF.
I haven’t gotten the SlideShow demo to work on Safari. I’m not sure if it is because Safari doesn’t handle XML or because there is something I haven’t configured in Safari. I could re-write the wrapper to use appended strings instead of XML if I really wanted to make sure it worked on Safari.
Run SlideShow Demo
Download Source
The second one displays a screen capture taken just before the application was last shut down. It leverages the onBeforeUnload in a custom HTML wrapper. As the application shuts down, it saves its state and a screen snapshot in a local SharedObject. On startup, the custom ProgressBar grabs the snapshot and displays it right away so it appears the app is up quickly. In the demo, I purposely blur the snapshot so the user knows not to try to interact, but you don’t have to do that if you don’t want to. Then as the application finishes up, it restores the UI widgets to their last state based on the data stored in the SharedObject and then the application can be used again. You will need to run the demo twice (or refresh the page after making some changes) to see the snapshot in use.
Run SnapShot Demo
Download Source

Coloring Text in MenuBar

Apparently, some folks want the text in a menu bar to change when you rollover or select it to show a menu. I’m not sure why the default menuBarItemRenderer doesn’t respond to textRollOverColor and textSelectionColor, but here are the modifications I made to get it to work. Usual caveats apply.
Download Source
Run Demo

Spark DateField and ColorPicker

We also ran out of time to do a Spark-based DateField/DateChooser and ColorPicker. It is on the list for future releases. I was able to hack a DateField and ColorPicker using all Spark components. I have no idea if the version we ship in the future will look anything like this at all and I’m sure there are bugs, but it will give you an idea of the flexibility and consistency in the Spark architecture. The components on the left are the ones I created, the ones on the right are the old mx versions.
Usual caveats apply.
Run Demo
Download Source

CheckBoxes in DataGrid With CheckBox Header

So many folks want to know how to put a checkbox in the DataGrid header and have it do select-all/deselect-all. Here’s how I would do it, including how to make the checkbox appear tri-state when only some things are selected.
Usual caveats apply.
Run Demo
Download Source

Constrained Drag and Drop

I’ve seen a few questions about how to restrict drag and drop so you can’t just drag something anywhere. I had some spare cycles so I put this together. There are probably several ways to do this, but I chose to delay the mouseMove handler to run after the DragManager has done its work, and reposition the dragImage and cursor in the mouseMove handler.
Download Source
Run Demo
You should be able to create variants that only allow vertical movement or don’t allow the dragImage outside of a certain rectangle.
Usual caveats apply. And yes, it isn’t a real game and doesn’t handle overlaying tiles.