New Flex Style Explorer: Jam-Packed with New Features

I’m extremely excited to be able to announce that a new version of the Flex Style Explorer is available, and it has a ton of cool new features that should make users much more productive. Some of the more notable features include Export All CSS functionality, an advanced (photoshop-style) color picker, inclusion of additional components, support for styleName styles, and improved navigation.

preview.jpg

A complete list of the new features are as follows:

Continue reading…

Designing More Usable Applications with Flex UI Capabilities

MAX2006.png

I wanted to thank everyone for attending Albert and I’s presentation. We both really enjoyed the feedback and response that we received (Especially when Albert dropped the F*Bomb).

So… Over the next week or so I will make sure that we post all of the files from our presentation. Including the source files from the Flash based “Paper Prototype” and the Flex Project. In the meantime, if you have anything encouraging to say about our preso or have questions, please feel free to drop us a comment or a note.

Thanks Again!

~
Brett Rampata

Oh… one more thing. What happened in Vegas stays in Vegas. ;)

Rich Text Editor with Disclosable Controls in Flex 2

I recently worked on a project that called for the use of the Rich Text Editor control. In our case it was determined that some users would never had the need to format their text. In fact, I’d venture to say in most cases were a Rich Text Editor is called for in an RIA, there are a subset of users or use-cases where those controls are not required.

For that reason, there’s a property called “showControlBar” which allows you to show or hide the control. However, there’s no out-of-the-box affordance for setting this property at runtime. What follows is a simple example that adds a child to the Rich Text Editor that shows and hides the control bar.

It should be said, as always, the following example was created by myself, and I am a User Experience Consultant, not a developer. So, this should be seen as an example of good User-Experience pattern, but should not be seen as a best-practive recommendation for development. For starters, it would have probably been good to componentize it. But, is a simple example with just a few lines of code anway.

To download the source, click here.

Continue reading…

Enable Smoothing on Images for scaling in Flex 2

While I can’t claim any credit for the solution – most of the credit goes to my colleague from Adobe Consulting Flex Architect Brian O’Conner, and the alternative approach comes from Roger Gonzalez from the Flex Team – I recently came across a small issue. By default, when you embed or load an image in Flex, “smoothing” is set to false. This makes sense since most of the images you’d probably want in their native size, and you’d want pixel perfect. But, when you want to scale the image, either up or down, or rotate the image, the image is rendered with the “nearest neighbor” scaling method. You can read more about the issue in the flash player at Tinic Uro’s Blog. As you can see in the example that follows, the results of this are less than beautiful.

After a little trial and error on my own part, I got some help from the experts, and got a simple solution for enabling smoothing on an image in Flex.

Continue reading…

Yahoo Maps QuickTip: Measure Mileage for an Exercise Route

Okay, so this is admittedly off-topic from the usual Adobe Consulting fare, but I recently discovered a nice feature of Yahoo Maps Beta that’s a bit hidden that may be of interest to those who exercise and like to measure mileage of new routes.

Continue reading…

Run the Flex Style Explorer Inside of Flex Builder

It’s been a while since Flex 2 was officially released, but I’m finally getting around to writing about this. Of course, many of you have probably noticed that the release version of the Flex Style Explorer is now linked directly from the start page in Flex Builder. But, I also wanted to point out that its quite possible to run the style explorer directly in Flex Builder in it’s own tab, as shown in the image below:

styleExplorer_inFlexBuilder.jpg

Continue reading…

Oh, Apollo!  ( Technical Overview and 21 Questions )

Update: The Breeze recordings from the Developer Week sessions are officially up. You can view them here: Adobe Developer Week (06/06).

As part of Adobe Developer Week, Luis Polanco spoke yesterday on Adobe Apollo, the cross OS runtime that allows developers to leverage their existing web development skills to build and deploy desktop RIAs. He gave a good overview of how Apollo works, and even showcased some demo applications.

It was great to see the eSeminar at maximum attendance; it shows that more people are beginning to realize the potential of the new platform, or are at the very least, curious to see what all the fuss is about. In either case, I’m almost certain that most everyone left the seminar thinking about the possibilities. In the coming days a recording of the session should be released, but till then, I thought to share some of the take-aways here.

Continue reading…

Continuous Integration in Flex

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

Time-based Flex 2 UI: If time were a color, what color is it now?

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

timeBasedUI.jpg

Beyond Styling: Applying Filters on Flex Components

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:

<mx:Label label="Label">
   <mx:filters>
      <flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" />
   </mx:filters>
  </mx:Label>

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!

filtersOnComponents.jpg