Flex Examples

I have started working with Adobe Flex for an application at work. As I start figuring things out, I am going to post little examples. Degrafa is a set of classes created for use with Adobe Flex. As the name might imply, it has to do with creating graphical elements. Flex has graphical drawing, but Degrafa takes it a step further to make it easier and more customizable.

Grid Line Repeater

My first little example. I decided that I might need a grid background in my application. This is strictly for looks and doesn’t have any real functionality. However, I did set it up so that it might be used behind a chart. The number of lines, size of the grid, and spacing of the lines can be adjusted. Also, the grid can be longer than wider, wider than longer, or a perfect square.
View Source

With the upgrade to Flex 4, Degrafa drawing functions seem to have a couple of errors. I can no longer use the line repeater for the line grid, so I came up with on using the spark and sprite elements.
View Source

Egg Timer

I needed a method of visually viewing the background timers for the application. The Application will have multiple timers. One that loads data every 15 minutes and one that changes the grid page every minute. There might be more timers. I wanted to make it so that the user could see that the timers were working and were either close or far from being refreshed. I used the Degrafa circle and elliptical calls to create the timer. Also a little help from the clock example.

With the upgrade to Flex 4, Degrafa drawing functions seem to have a couple of errors. This version of the timer uses Lee Brimelow's wedge drawing script to create the timer arc using sprites. I also used filters to work with the colors and bevels.

View Source

Meter with Percentage Threshold

While going over a project at work, one of the graphs that the project used was a meter that had different threshold levels along with the indicator. Luckily for me, the Degrafa site had a similar meter as an example. However, the example wouldn't be pretty enough for the project. After looking into the example a little more, I also updated it by using a line repeater for the ticks and scaling the item based on 100%. Each tick would represent 10 percent of the total. The user can pass in the minimum value, the maximum value and the current value. The meter would grow to the percentage based off of the values. The user can also pass in the percentage thresholds to show that the meter has reached a certain percentage of the total.

View Source

Simple Data Grid

I was helping out on the Flex community forum and one of the posts needed a little more example than I could give using the forum post tools. So, I decided to create a quick example of a DataGrid using an ArrayCollection for the dataprovider. The ArrayCollection is created dynamically using a randomization selection from two arrays. Then there is an option for updating the list showing which of the items have "Red" as the color value. I also put a couple of other items in the example, including an ItemRenderer for the DataGrid and a button holder for the Panel.

View Source

Leave a Reply