On a recent client engagement, my colleagues and I were challenged with implementing continuous integration on a Flex project. For those unaware or uncertain, continuous integration, as defined by Martin Fowler, is a software development practice where members of a team integrate their work frequently, usually each person integrates at least daily – leading to multiple integrations per day. Each integration is verified by an automated build (including test) to detect integration errors as quickly as possible.
With well written unit tests and automated building (on code check-ins), we were able to produce reliable builds with reduced risk; bugs were spotted sooner and were considerably easier to remove. In addition, continual deployment allowed for QA to get to new features faster, and receiving their feedback earlier in the process made for a very collaborative development cycle.
Paul Barnes-Hoggett has a thorough write up of the process that we followed; it’s a good read, and easy to follow should you decide to implement the same.
Here’s to best practices, stress free development, and quality deployment!
Read the article at eyefodder.com
I read an interesting comment on a blog post recently discussing the possibility of a doing mathematical operations on colors in the UI, and not one to shy away from a fun challenge, I cooked up the following example of a time-based user interface in flex, as shown in the below example.
There are two things going on here. First, the background color is chosen from a pre-defined set of colors based on the day of the week. Come back tomorrow, and the background color will be different.
But, the more fun part is the second piece, which is something I’ve mused about in the past before… “if time were expressed as a color, what color would it be right now”. So, follow me on this. The time is expressed as such: Hour is represented by a percentage of red, where 24 equals a full value (so, x / 24 converted to a hex value). Same goes for minutes (Green), and seconds (blue). All put together, a full time with hours, minutes, and seconds, becomes the RGB value. So, 12:00:00 a.m. is black and 23:59:59 is white, 12:30:30 is grey, and so forth.
View the Example (Flash 9 Player Required)
Download the Source Code
This is documented in the livedocs, but I also wanted to give some examples of how you can apply filters to components to further achieve your desired look-and-feel. Want a drop-shadow on a button or a label? Want your text to look chiseled, or maybe your combo-box looking nicely chiseled? What an inner-shadow on a text input? Or maybe you just wantd a an area that looks beveled, or inset. This is all possible with filters in flex, as shown in the image below.
Not only is it possible, but it’s incredibly simple. A label with a drop-shadow is as simple as the following:
<flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" />
So, I’ve provided a sample mxml file that shows some nice uses of filters.
View the Example
Download the MXML
Once again, here’s to Flex apps that don’t look like flex apps!
As an experiment in CSS Styling, and to show off some of the new features of flex 2 styling, I’ve created a Mac OS X looking style sheet for Flex 2. It’s not perfect, but to the untrained eye, it’s pretty close. There are no images or skins used in this, it’s strictly CSS. With the next transparency features, and highlights, there’s a huge variety of look-and-feel that’s possible. Here’s to more flex apps that don’t look like flex apps!
Click here to download the the CSS and source to the below example
Click here to view an example application with the os x css file
(Flash Player 9 required)
[UPDATE] Thanks to all who pointed out some of the errors (I should have test on a PC first ). I’ve replaced the the swf and the zip. Apparently there’s a bug with embedding an image declaratively in the application tag, so I used a workaround for that. Also, the fonts should be showing now… but that has surfaced another bug (which I’ll file)… embedding a font and then apply a drop shadow to it makes the font disappear until you rollover it, so you’ll see some words missing until you rollover.
Just a quick note that with today’s release of Flex 2 Beta 3, the Beta 3 version of the Flex 2 Style Explorer is also available.
In addition to some bug fixes, both in flex and in the Style Explorer, you’ll notice a few additions, my favorite of which is the fillColors property added to application (no more loading background swfs to define the background gradient).
Other changes to the Style Explorer include:
- Application: added fillColors property
- Application: added fillAlphas property
- Application: swfs embedded as the background image now reference the symbol within the swf, rather than the swf itself
- Tab: added backgroundAlpha property
- LinkBar: added disabledColor, and exampled of disabled item
- ScrollBars: added a horizontal scrollbar in the sandbox
- DateChooser: added dropShadowEnabled property
- MenuBar: added highlightAlphas property (note, this behaves differently from highlightAlphas on other components, and defines the highlight on rollover, not the highlight area in the resting state.
- Several components: added dropShadowColor property
- Several components: there are also a couple of other naming conventions that have changed between beta 2 and beta 3, so keep an eye for those.
As always, feedback is welcome and encouraged. If you find something not working, or feel that something is missing, please let us know.
Lastly, the Flex Style Explorer has found a new home.
[Update: the style explorer… the style is at its final home on adobe.com]
Click here to run the style explorer from its new home. (view source is also enabled from this location)
Click here to download the Style Explorer
Adding to our previous work, I’ve created styleable bar chart class for Flash Lite 2.0, with properties for bar colors, background colors, highlights, shadows, data tips, labels, chart height, chart size, chart placement, whether its horizontal or vertical, and other fun stuff. Again, all you need to do is figure out how to get the array of data onto the phone (whether it be loadVars, or whatever). Once it’s on, all you need to do is assign the data to the chart class and tell the chart to draw itself.
Some of the things you can produce via styling it are as follows:
Download it here
Seeings as we’re all about the Explorer’s here, I thought I’d point out some great work that others have done. Kinglong has a great Gradient Explorer. Anyone whose spent a little time trying to programmatically draw a gradient with the gradientFill function in actionScript knows what a headache it can be trying to get the right parameters to draw the right gradient. Enter Kinglong’s gradient explorer. Create your gradient and copy and paste the code. Sweet!
[Update] Andreas Weber of MotionDraw also has a fantastic GradientTweenEditor that goes a bit farther to include code for 2D gradients, and gradient tweens