Since I had a day off, I decided to work on converting my old Flex Examples to the new Flex 4.  As stated in a previous post, the new Flex 4 breaks Degrafa and Degrafa seems to be defunct now.  Most of the drawing functions are handled with spark and sprite functions, but little things like arcs and line repeaters are not.  So where before it was easy enough to create a repeating line in Degrafa, now I have to do a loop to create the lines needed.  Well, in this case, instead of drawing lines, I’m drawing rectangles.  While it might seem simple at first just to draw a bunch of rectangles together to create a grid, there is a little trickiness to it.  You can have to account for the size of the total grid, based on the number of columns, rows and the grid box size.  And you also have to use both the column and row count value to draw the correct number of rows and columns and at the right size.  It is all just a matter of thinking about it for a few moments and then having an “ah ha!” moment.  Another little quirk with the components is that when you add a visual element, it puts it in the center of the group component.  On the Egg Timer, I just left it there for now because it worked for what I needed.  I might change it later.  But for the LineGrid, it made for it not to line up correctly.  So, before I start drawing the rectangles, I had to determine the actual 0,0 location first.  It also took a couple tries to make sure I was using the right zero.

// Find the actual 0,0 start
var actualZeroX:int = -1 * ((columnCount * boxSize) * .5);
var actualZeroY:int = -1 * ((rowCount * boxSize) * .5);

One good thing about the new components, is that when you use the declarations, it is the same as creating a set function, which means less code.  I simply added declarations for the column and row counts, then put those values where I need them.  When I use the LineGrid component I add the values I need just like any other attribute.

<components:LineGrid id="lineGrid1" rowCount="5" columnCount="5" boxSize="50" lineThickness="4" lineColor="0x009900" />

Here is the example showing a grid with equal columns and rows and then two other grids with column or rows determined by the size of the application.

At work I upgraded to Flex 4.5 and started updating one of my projects.  I started running into errors with my components that used Degrafa.  Apparently the Degrafa group has stopped working on updates and code in Flex 4 has broken the arc and wedge drawing utilities.  This causes a problem with my Egg Timer component, because it relies on the wedge or arc for the display.  I decided to use the new functions of Flex to create the timer.  Unfortunately, Flex still doesn’t have it’s own wedge or arc drawing utilities.  It does have a curveTo method as part of the Graphics function, but you still have to figure out what point you want to curve to what point.  I initially thought I could just use the Shape function to draw a triangle and an ellipse, join the two together and create a wedge.  However, that was proving to be too much of a pain to do.  Then I found Lee Brimelow’s Action Script Wedge Class (Google Project Code Link).  This made things simple, except for the part where the starting point is at 90° instead of 0.  For me, this wasn’t a big issue, because all I had to do was rotate the Sprite back 90 degrees to put it at the 0 position.  A poster provided other code to fix the issue, but since it was fairly simple to fix, I didn’t bother using the other code.

var timerArc:Sprite = new Sprite();
timerArc.graphics.beginFill(0x000000);
timerArc.graphics.endFill();
timerArc.rotation = -90;
drawWedge(timerArc, 0, 0, timerSize, 360, 0);

Another little quirk with Flex 4 is the Declarations tag. Not completely familiar with everything new in Flex 4, I’m trying my best to try out new features. I figured adding the time defaults to the declarations would help things out.

<fx:Declarations>
<fx:Number id="oneMinute">60</fx:Number>
</fx:Declarations>

Well, not really.  After I had everything working with the wedges and the look of the timer, the Timer function was never reaching the TIMER_COMPLETE function.  After searching the web and trying to figure out why the Timer didn’t work the correct way anymore, I gave up using the Declarations area and moved the variables to the script tag area.  That fixed the issue.

// minutes in seconds
private var oneMinute:Number = 60;
private var twoMinute:Number = 120;
private var fiveMinute:Number = 300;
// timers with delay of 1 second, repeat of minute value
private var oneMinuteTimer:Timer = new Timer(1000, oneMinute);
private var twoMinuteTimer:Timer = new Timer(1000, twoMinute);
private var fiveMinuteTimer:Timer = new Timer(1000, fiveMinute);

To change the size of the timer, just use scaleX and scaleY on the component.  The default size is 50 x 50, which is a good general size, but I can see that there might be a need to make it larger or smaller.

Later I will probably add the multi-color option that shows green when things are still good, yellow when it is close to expiring and then red in the last 5 seconds.  I will also try working skins to see how I can use them with the Sprites.

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

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.

View Source

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. I don’t know what the real name of this meter is, so I am calling it a Percentage Threshold Meter.

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 space between the ticks is determined by the height of the meter (component) divided by 10. This gives me the 10 sections for the 100% reading. I guess I would have to alter the meter is someone wanted to show something being over 100%. If the meter has the space, any value above the maximum number will shoot it out of the meter. I guess that would be good if you wanted to show busting through some number or something. But, they could always have 100% be one of the thresholds and then have the maximum number be over 100%. I also added a low, high and medium number to the ticks.

Another thing I changed was just the general look. I used another meter (capacity indicator) and a previous bar chart that I had created as guidelines for figuring out shades and highlights to make the indicator and the background more roundish. The key was to use RoundedRectangleComplex, which allowed me to round some corners, but not others.

By figuring out the height and maximum and minimum values, I was able to set the threshold percentages relative to the component size. This makes sure that the meter is a certain percentage of the entire graph based on the values. To add a nice little touch, I added the threshold percentages at the spot where the color changes.

The user can pass in the minimum value, the maximum value and the current value. The meter will grow (not animated) 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. The user can also change the threshold colors.

I made an update to my Flex Egg Timer example. The Egg Timer uses Degrafa libraries to create the images. They released beta version 3.1 back in December, which was after I started working on a project that used the Egg Timer. Well, when I created an updated version of the project using the new version of Degrafa, I was getting some very odd looking pie pieces. I was using an EllipticalArc to draw both the white timer and the red background. It gave the effect that the red background was the timer and the white part was the background. The initial arc position was set to 90 (90 degrees) or 12 o’clock on the timer. Then I had to draw the rest of the arc, which would be 360 degrees from that point. Well, the new version of Degrafa didn’t like the 360 degrees from 90, so I figured out that I need to just draw it 359 degrees from 90. It makes the clock start with one tick, but that’s not a big deal, the timer still works since it goes off of a millisecond timer.

The call to the timer still uses 360 degrees divided by the time amount. Apparently it is only the starting angle and arc that causes the issue.

EggTimerOne.setArc(360 - (event.target.currentCount * (360 / oneMinute)));

As the title of the post suggest, I also changed the example to use scaling. Flex and Flash use [w:Vector Graphics] for images. This allows the applications to easily scale due to user screen size. Since I have just started using Flex, I haven’t been working with the scaling like I should be. During the update for the application at work, I changed how things were sized by scaling based on a default size. By grabbing the screen size, I figured out the scale times value for the width and height and then scale the application parts accordingly.

In the Egg Timer example, I am scaling the different timers by a certain number to change the size, instead of altering the height and width. With this method, I can create the component at a certain size and then scale it for it’s needs. The one minute Egg Timer is put into the Application Tool bar and scaled according to the ration used in another application.

 scaleX="1.65" scaleY="1.62"

As I continue to make new components, examples and applications, I will make sure I use this scaling option more often.