DeanLogic

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.

One of the ways I like to debug my Flex applications is putting a TextArea item that is visible when needed to display certain items that usually would be display in a trace.  The benefit of this little trick is that I can see what is going on without having to go through Flex Builder.  Also, I happened to create a web service debugging application and it displayed the error and result text from the web service.  When displaying either debug or general result information, it is helpful if the TextArea scrolls up to show the latest information added.  I found code on the to do this in Flex 3, but things changed in Flex 4.  So I did a little searching and found some code that had a little too much code.  There is a warning at the bottom of that post which states the API at the time was in Beta.  Maybe adding event listeners is the more correct way to automatically scroll the TextArea, but it certainty isn’t the quickest way.  Since the Flex 3 version was fairly simple, I took what I saw there and applied it in the way the old method worked.

The first thing is that the scroller is now it is own component within the TextArea.  So, you first have to access that withing the TextArea.  Then you need to choose either the vertical or horizontal scrollbar.  Since I set the width and the words automatically wrap, I only need the vertical scrollbar.  Then you get the value of the scrollbar, which you can read or set.  The key is to set the scrollbar to its maximum position, which in the case of a vertical scoller would show the bottom of the TextArea.  You change this value with the valueCommit function, that allows you to change things after a value is added.  Just don’t change the content value or you go into a loop.

<s:TextArea id="fooText" width="200" height="200"
valueCommit="fooText.scroller.verticalScrollBar.value = fooText.scroller.verticalScrollBar.maximum" />

Unfortunately, it doesn’t seem to scroll completely down to the bottom completely.  I’ve created a little application to show text being added to the TextArea.  Every 10 seconds a random set of words will be added to each of the TextAreas.  As the amount of text increases, the TextArea with the dynamic scroller will scroll down, while the other TextArea just increases the scroller size.  To generate the random words, I used a few quotes from the Mark Twain quote site.  From those quotes, I used a script to convert the phrase words into an array. I modified the examples in order to pass in the array that I want to add the words to and get back a new array of words.  From there I used a basic random number in range script to get a random number of words.  Once I had the random number of words, I just grabbed that many words in a loop from the Array.  Finally, I adjusted the first word to make sure it had the first letter as upperCase and the rest of the words to lowerCase.

public static function getArrayFromString(inputPhrase:String, sourceArray:Array):Array {
var reg:RegExp = /\W/i;
var wordsAsArray:Array = inputPhrase.replace(reg, "").split(" ");

for(var w:int=0; w < wordsAsArray.length; w++){
sourceArray.push(wordsAsArray[w].toString());
}

return sourceArray;
}

public static function upperCase(str:String) : String {
var firstChar:String = str.substr(0, 1);
var restOfString:String = str.substr(1, str.length);

return firstChar.toUpperCase() + restOfString.toLowerCase();
}

Here is the example. When the text expands past the available area for the first time, bot TextAreas look the same.  When the next random phrase is created, then the difference is more apparent.

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.