Several people have asked how the glossy panels on the Flex Style Explorer were done, and while I’ve attempted to explain it in the comments, I thought I’d go a step further and include source code for such a design, rather than attempting to explain it again in words.
So, included is an mxml file showing a styled panel with the appropriate asset for the reflection.
Click here to download the mxml and asset
While it’s nothing ground-breaking, I wanted to show a quick example of how to create a Yahoo Map with dynamic markers using coldfusion and LoadVars() in Flash. The coldfusion script pulls the data from an SQL database and passes it on to the flash app to plot as many markers as there are data entries. It may not be the cleanest, but it’s a quick solution.
I’ve also included a text file, in case you don’t have coldfusion and a database set up, that would be similar to what might be passed on to the flash app. So, you can also play around with the text file if you don’t want to set up a database and coldfusion.
UPDATE: I’ve included another swf for those without Flash authoring. This swf points to the cfm file for everything, including the app-ID. Also, the map auto-centers inself based on the first address in the events.
Click here to download the file..
Click here to download the .fla-less swf and cfm. (no flash authoring required)
While you can go pretty far in visual design of Flex components using straight CSS, there are some limitations. It an attempt to address those limitations, I’ve created a programmatic skin set for Flex that can be easily customized with CSS for effects such as the screenshot below:
This issue has come up with a few clients, which is, how do you round the corners on a container. Of course, by default, the container itself is invisible, but in these instances the client has given a box, an hbox, or a vbox a different background color in order to use it as a graphical element, as in the example below. Many have found, with some frustration, that if you simply set cornerRadius to a value other than 0, the corners are still squared off.
The reason this is happening is that cornerRadius is actually a property of the container border, and by default containers have no border. In order to use the cornerRadius property on a container, you need to set the borderStyle to solid. Note in the example below how changing the borderStyle automatically reflects the cornerRadius property on the container. Want the cornerRadius, but you don’t want a border? simply set the borderThickness to zero, and as long as the borderStyle is set to solid, the corners will still be rounded. Similarly, applying a drop shadow to the container also requires the borderStyle be set to “solid”. Hope that helps.
One of the great things about Flex is the “mouseOver” event that pretty much any component, including containers, has available. What this means is that we can trigger almost any event without requiring a mouse click. Why and when would you want to do such a thing? Imagine, for example, a list with details, as shown in the flex application below.
Just a quick note that we’ve recently published an article on the Macromedia Developer Center (DevNet) related to the Flex Style Explorer. In addition to the things that have already been mentioned here, there’s also an analysis of the Designer-Developer workflow, and how the Flex Style Explorer can help to bridge that gap. To view the full article, go to http://www.macromedia.com/devnet/flex/articles/style_explorer.html
Recently had an engagement where we were tasked with accurately simulating a Microsoft Windows application with Flex. In the process, we created a Windows XP skin for Flex Components that we’re now offering up to the Flex community as a whole.
The Flex Style Explorer has been public now for several weeks, and weâ€™ve already gotten a lot of great feedback. Some of those suggestions have been implemented in this update (with many more to follow).
Macromedia Consulting is happy to share our initial version of the Flex Style Explorer.
This application grew out of our experience working with other visual designers and user-experience professionals who were tasked with creating visual designs for Flex applications, and were often asking for some tool to help them in that pursuit.