Give us a call 203-379-0773
Check out our Angular Book Series.

Spark Forms - 7/152011 - Episode 106 - Flextras Friday Lunch

Today I take a look at the Spark Form tag, introduced in Flex 4.5.

Flextras Friday Lunch is a short demo followed by open Q&A that occur the first and third Friday of every month at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

Building a Mobile ItemRenderer in Flex

Whenever I talk to people about renderers, and building renderers for Flex, I get stuck on what exactly to talk about. A renderer , is just a component. Building a renderer is no different than building any other Flex component. Yet, still people seem to get confused.

I think part of the confusion comes from the fact that people aren't used to using the Flex Component LifeCycle to build components. They do a lot in MXML and don't become intimate with what is going on under the hood. MXML masks a lot of details.

When building renderers for mobile, Adobe recommends that we build in ActionScript. I think the difference between building components in ActionScript and MXML is what gives people the "deer in headlight" look. It's become like a second hat at Flextras, because all our components are all ActionScript. This post will give you the steps to create a mobile optimized renderer. We're going to extend the LabelItemRendererclass and add a radio button to it.

Create the Class!

I outlined the steps to create a custom renderer in my previous blog post on the topic, but to reiterate:

  • In createChildren() create your renderer's children.
  • In measure() use your children to determine the measuredWidth and measuredHeight of the component
  • In layoutContents(), position and size your children.
  • Add an event listener for the dataChange event. In that event handler, make the changes needed to the component, such as updating the labelDisplay.

For the purposes, of this post, I'm going to take a step back even further. Start by creating the class:

package com.flextras.renderers.SimpleRadioButtonRenderer{
 import spark.components.LabelItemRenderer;
    
 public class SimpleRadioButtonRenderer extends LabelItemRenderer{
  public function SimpleRadioButtonRenderer(){
   super();
  }
 }
}

Since this class extends the LabelItemRenderer it already has a label to display text. But, we'll need a variable for the RadioButton:

protected var radioButton : RadioButton;

The class is created, now let's look at the createChildren() method.

Create the RadioButton

The createChildren() method is a Flex Component LifeCycle method that runs during the component's creation. It is used to create the component's children. In this case, we'll use it to create the new radio button:

override protected function createChildren():void{
 super.createChildren();
 radioButton = new RadioButton();
 addChild(radioButton);
}
Yes, it is really that simple. Since we're calling super, we don't have to worry about creating the labelDisplay component, as the parent handles that.

Position and Size the Children

The next step in our component creation is to position and size the children. For the purposes of this demo, the code will just place the label first, and the radio button all the way to the right. The radio button will size to fill up all the space it needs; and the label will take up the remaining space. All this code will be implemented in the layoutContents() method. Here is a blank method signature:

override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void{
}

First, let's calculate the size of the radio Button. We want to size the radio button to give it as much space as it needs, so we can use the getPreferredHeight() and getPreferredWidth() methods. These are helper methods implemented in the LabelItemRenderer.

var radioButtonWidth : Number = getElementPreferredWidth(radioButton);
var radioButtonHeight : Number = getElementPreferredHeight(radioButton);

Of course, now that we have the size, we want to set the size. To do that, we use the setElementSize() method, another helper method implemented in LabelItemRenderer. The concept is borrowed from the MobileSkin.

setElementSize(radioButton, radioButtonWidth, radioButtonHeight);

Next, we calculate the size of the label. For the width, we can just use the unscaledWidth minus the space for the radio button:

var labelWidth:Number = unscaledWidth-radioButtonWidth;

For the label's height, we can make use of the getElementPreferredHeight() method:

var labelHeight:Number = getElementPreferredHeight(labelDisplay);;

Finally, set the actual size:

setElementSize(labelDisplay, labelWidth, labelHeight);

The last piece of this is to position the two elements in relation to each other. The label is easy we can just position that at 0,0:

setElementPosition(labelDisplay,0,0);

The X position of the radio button is a bit more difficult. It is not a known value, and we have to calculate it based on the label. Since we want to position he radio button to the right of the label, we want to use the label's width to offset the x position of the radio button. Here is the code:

setElementPosition(radioButton, labelDisplay.x + labelDisplay.width ,0);

Although it wouldn't matter in this example, I like to use the label's X position in the calculation. If we change the X position of the label the radioButton will automatically reposition itself. It's a trick I used a lot when creating MXML Skins for a recent consulting client.

Things can get a lot more complicated, especially if you want to accommodate for different styles for padding and gaps in the layout, and alignment of items. Look at the layoutContents method in LabelItemRenderer for a sample of this.

Set the Selected State of the RadioButton

There is one last thing we'll need to do for this renderer. We need to update the selected state of the radio button based on the selection. Renderers are reused as you scroll through a list; and the elements of the renderer always need to be aware of the data they display. To do this, we'll listen to the dataChange event. I'll add the listener in the constructor:

public function SimpleRadioButtonRenderer(){
 super();
 this.addEventListener(FlexEvent.DATA_CHANGE, onDataChange);
}

The LabelITemRenderer class has a selected property, which automagically keeps track of whether or not the renderer is selected or not. We can use that property to keep the selected state of the radio button in sync:

protected function onDataChange(event:FlexEvent):void{
 this.radioButton.selected = this.selected
}

Conclusions

I hope this post gives you a better understanding of how to build ActionScript renderers. It's not hard. Just create your new children in createChildren(), size and position them in layoutContents(), and use a dataChange event listener to change your children based on the actual data. Here is the code, and the sample:

For a production quality sample, I'd definitely devote some more time to tweaking the layout, and accommodating for padding styles. But, I hope this helps you understand the concepts.

Creating a Custom Flex Formatter - 3/18/2011 - Episode 97 - Flextras Friday Lunch

Today we talk about custom formatters, list scrolling optimization, and MVCS command chaining.

Flextras Friday Lunch is a short demo followed by open Q&A that occur the first and third Friday of every month at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

Creating a Custom Cursor in Flex

When creating the Flextras Friday Lunch episodes, I try to jump into areas of Flex that I don't otherwise touch upon. Last week that was creating custom cursors. The cursor, of course, is the mouse pointer image, and the Flash Player supports creating custom cursors. Flex has some default cursors, such as a busy cursor it will use. But, it's pretty easy to create a custom cursor and this post will show you how.

First create your cursor

Anything that you can embed in a Flex Application can be used as a custom cursor. In my examples I used a gif of the Flextras Logo, and an animation I created in Flash Professional. You could also use a PNG file, SVG file, or Sprite. The syntax is the same for any format, though. You can use the standard embed code, like this:

[Embed(source="assets/Flextras_Logo3.gif")]
private var waitCursorFlextras:Class;

I'm a programmer at heart, so creating animations and graphics are not my area of expertise. Nevertheless I wanted to create an animated cursor, so I opened up Flash Professional, a tool I spend very little time in. Using the drawing tools I created an animated alien ship (or a circus tent if you prefer). As the animation moves the colors reverse themselves.

Once I created the animation, I published it to a SWF. Unfortunately, Flex could not use that SWF and gave me a transcoding error. To export my Flash library assets, I had to right click on the library item and select export as swf.

It wasn't obvious to me how to put multiple library assets in a single SWF that Flex could use, although I know it is possible. One of the attendees of last week's session told me I needed to use the Flex Component Toolkit for Flash to make that happen. He was right.

To use the Flex Component Toolkit, I just had to select the symbol in Flash Professional and then choose "Convert Symbol to Flash Component" from the command menu. Once I did that, I was able to use File Publish to create a SWF that can be used in Flex.

Second change the Cursor

Now that you've created the cursor using whatever the tools of your choice are, you just have to tell the Flash Player to change it. Flex provides a class to help, called the CursorManager. The CursorManager consists primarily of static methods, one of which is a setCursor method. Use it like this:

cursorID = CursorManager.setCursor(waitCursorFlextras);

This code will change the cursor to the Flextras logo, which we had previously embedded in the SWF.

Removing the Cursor

The return value of the CursorManager is an integer. You can use use this value to remove this cursor with the removeCursor method:

CursorManager.removeCursor(cursorID);

That will put you back to the original cursor.

Final Thoughts

That's it! I updated my sample from last week's Flextras Friday Lunch session to include the SWF created using the Flex Component Kit for Flash. It also includes the library items I manually exported. Here is the final App, with source code:

Be careful on clicking the two larger cursors. They appear to be too big to actually find the button to unclick them.

Has anyone used this in a production app? What strange things have you done with the cursors?

Custom Flex Cursors - 2/18/2011 - Episode 95 - Flextras Friday Lunch

This time I talk about creating custom cursors in Flex. Conversations also touches on changes to the ColdFusion product manager and once again touch on tablets and mobile devices.

Flextras Friday Lunch is a short demo followed by open Q&A that occur the first and third Friday of every month at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

Creating FXG Art

I'm modified my Flextras Friday Lunch approach a bit this year. Instead of doing live sessions every week, I'm going to be doing live sessions the first and third Friday of every month. On the second and fourth Friday, I'll be doing formal blog write ups about the topics I covered in the session. There are various reasons for this, one is that I love writing and have not done a lot of it since I started podcasting. The second is that I think some more textual content may help search engines find Flextras better. For some reason we haven't been showing up in search engines all that much.

Last week's Flextras Friday Lunch presentation was on FXG, the Flash Graphics format, so that is the topic of today's blog post.

What is FXG?

FXG is the Flash Graphics Format, modeled closely after the Flash Player's graphics model. It allows you to easily represent vector shapes in an XML format. Many of Adobe's creative tools, such as illustrator and Photoshop allow you to export designs you create as FXG files. Those files can then be used in Flex applications. FXG includes a lot of native shapes, such as lines, ellipses (Circles), and rectangles that you can combine together. There is also a path component that lets you create new shapes. I decided to use the path component to try to create a triangle.

Creating a Right Triangle

An empty, FXG file will start something like this:

<?xml version='1.0' encoding='UTF-8'?>
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">
</fxg:Graphic>

Give it an FXG extension and Flash Builder will recognize it as a Flex Component when using it in a Flex Application. First I added the path tag:

<fxg:Path x="10" y="10" data="M 10 10 L 10 100 L 100 100 L 10 10">

This positions the path at position 10, 10 inside the component. With a path, you define the data points that make up your path. The data attribute does that. Each element of the data attribute starts out with a command, defined in the docs and some other value or collection of values as defined by the command.

The first command I used was M, or move. The second command I use is L, or draw a line. Both M and L accept a single coordinate, with X and Y values. This confused me a bit. How can you create a line segment with only a single coordinate point? Any given line segment needs two points to draw. The answer is something that I call the invisible cursor (the docs call it the Pen Position). When processing the path, the system always knows the location of the cursor. When creating a line the line is created from the current point--whatever that is--to the new one you specify.

So, the first data point is an M which moves the invisible cursor to position 10, 10. I'm not sure why this was needed, but I got a compile time error if the M was not there. I assume the invisible cursor location does not default to anything, so the M specifies the default.

Next, to create our right triangle, I drew three lines. The first goes from 10 10 (the invisible cursor location) to 10, 100. This draws the left side of the triangle. The next point is 100, 100 which draws the bottom side of the triangle. The final point, 10,10 draws the hypotenuse completing the triangle.

It is worth nothing that the coordinate points are created using the Flex Coordinate system, which means 0,0 is at the top left corner of the graphic. This confused me a bit, as that is not the way you graph things in high school geometry where the 0,0 position is at the bottom left corner.

I was so excited with my right triangle, I used the same approach to create an isosceles triangle. Check out the sample and source code from last week's Flextras Friday Lunch episode. I added a Fill to the triangle to color it white, and a blue outline using the stroke tag. This was primarily copied from the start sample I found in the FXG docs.

Using Libraries to Create A Sun Component

My next step was to try something a bit more adventurous. Using my isosceles triangle I experimented with rotation and libraries to create a sun component.

If you're a programmer, like me, then you probably know what a library is. It is a set of code that you want to reuse. The FXG format offers a library tag, which you can use to define a single shape--or collection of shapes--and then reuse multiple times in your FXG file. I took my isosceles triangle and created it as a library in a new FXG component named sun.fxg:

<fxg:Library>
<fxg:Definition name="Triangle">
<fxg:Group>
<fxg:Path x="10" y="10" data="M 50 0 L 0 100 L 100 100 L 50 0"/>
</fxg:Group>
</fxg:Definition>
</fxg:Library>

The library tag has a definition tag, with a name, Triangle. You'll use that name later in the component. Inside the definition is a group. The group is just a collection of different FXG elements, although in this case I only defined one. I keep the code truncated, but rest assured that the path has a fill and a stroke. I picked some yellow colors off a color chart which seemed to look good together--to my programmer's eye anyway.

Now that I had the triangle, I could easy create a bunch of instances of it. I rotated each one 20 degrees to make a circle:

<fxg:Triangle rotation="0" />
<fxg:Triangle rotation="20" />
<fxg:Triangle rotation="40" />
<fxg:Triangle rotation="60" />
<fxg:Triangle rotation="80" />
<fxg:Triangle rotation="100" />
<fxg:Triangle rotation="120" />
<fxg:Triangle rotation="140" />
<fxg:Triangle rotation="180" />
<fxg:Triangle rotation="200" />
<fxg:Triangle rotation="220" />
<fxg:Triangle rotation="240" />
<fxg:Triangle rotation="260" />
<fxg:Triangle rotation="280" />
<fxg:Triangle rotation="300" />
<fxg:Triangle rotation="320" />
<fxg:Triangle rotation="340" />
<fxg:Triangle rotation="360" />

The rotation property here is similar to the rotationZ property built into UIComponent. FXG graphics did not seem to have individual rotation properties for X, Y, and Z variables.

Finally, I wanted to add some color to the center of my circle. I did that with an ellipse tag:

<fxg:Ellipse width="110" height="110" x="-55" y="-55">
<fxg:fill>
<fxg:SolidColor color="#fafad2"/>
</fxg:fill>
</fxg:Ellipse>

I just did some trial and error to figure out where to position the ellipse in relation to empty circle in the middle of the sun. By putting this component first in the FXG file, I did not have to size it perfectly because the Triangle instance will be placed on top of the circle, covering up any overlap.

Be sure to check out the results of my experiments and the final source code.

Lessons Learned

:

FXG can also be a powerful way to use vector graphics with the Flash Platform, and I'm glad I spent some time to get familiar with it. These are some of my final thoughts:

  • FXG was not designed to be written by hand. It is very tedious and time consuming. If you want to use FXG, I strongly suggest looking into one of the creative suite tools and experimenting with how they can create FXG. (Or just hire a designer and be done with it). Flash Builder provides no code hinting or even code coloring for the FXG files, which adds to the inconvenience.
  • I couldn't find a way to use an FXG graphics defined in a separate file. There does not seem to be a reuse architecture similar to what we find with Flex components. This bugs the programmer in me, but I'm not sure how much it bothers designers. Of course, there is no reason you couldn't create a Flex or ActionScript Component that sizes and positions different FXG elements in relation to each other.

Finally, I leave with you off with this scene I put together, by hand using FXG.

Check out the source code.

I tried to recreate the mountain from the 360|Flex Denver blog badge. To an extent I think I succeeded.

FXG - 2/4/2011 - Episode 94 - Flextras Friday Lunch

This time I delve into FXG, the Flash XML Graphics format used by many of the creative suite products. We talk about the Spark AutoCompleteComboBox, Flextras licensing, the online Flex Meetup Group, and the upcoming onslaught of tablets.

Flextras Friday Lunch is a short demo followed by open Q&A that occur the first and third Friday of every month at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

MX DataGrid Hidden Gems - 1/14/2011 - Episode 92 - Flextras Friday Lunch

This time we talk about some features of the Flex DataGrid such as locked columns and rows, and draggable columns.

Then we discuss podcasts, writing encapsulated code, and ActionScript libraries for building apps.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

Shared Objects in Flex - 1/07/2011 - Episode 91 - Flextras Friday Lunch

This time, I demonstrate how to use Flash Player Shared Objects from inside Flex. The conversation talks about BlazeDS problems, tweening engines, learning ColdFusion, document creation from Flex, the rash of Tablets from CES, and my office curtains

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

Event Bubbling - 11/12/2010 - Episode 86 - Flextras Friday Lunch

This time I talk about Event bubbling in Flex. We also touch on memorable Max sessions, binding approaches, and setting up local web aliases.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

More Entries