rabidGadfly » Flex

Flex Optimization Tip: Evaluate Your Setter Parameter

rabidgadfly — Thu, 10 Mar 2011 18:37:39 +0000

Flash Builder makes it easy to generate getters and setters from a variable definition. Just select the variable, right-click and choose Source > Generate getters/setters.

The generated code is simple; the getter returns the value and the setter sets the value:

private var _myData:String;

public function get myData():String {
    return _myData;
}

public function set myData(value:String):void {
   _myData = value;
}

Oftentimes in Flex, however, changing a variable is a trigger that causes other code to run or update. But why would you want this extra processing to occur if the value that is being assigned hasn’t changed?

Instead, add a quick comparison:

public function set myData(value:String):void {
    if(_myData != value) {
       _myData = value;
    }
}

Note that you would use ObjectUtil.compare rather than equality to compare complex Objects:

public function set myObjectData(value:Object):void {
    if(ObjectUtil.compare(_myObjectData,value) != 0 ) {
       _myObjectData = value;
    }
}

Obviously, depending on the complexity and size of the objects, and the amount of work to be done after an update, comparing Objects may not make sense in all circumstances. That’s a judgement call you can make based on your particular code.

Swiz ‘Could not get a reference to class’ Gotcha

rabidgadfly — Mon, 28 Feb 2011 14:56:03 +0000

I’ve been implementing Swiz framework in my most recent Flex project. It’s worked great so far, but this one error sidetracked me for an hour or so:

"Could not get a reference to class for YourEvent.YOUR_EVENT_TYPE. Did you specify its package in SwizConfig::eventPackages?"

Obviously, the first thing to do when receiving this message is to make sure you specified the event package in SwizConfig::eventPackages. Once that’s confirmed, you ensure that the event has been imported, then try cleaning your project(s).

At this point it starts getting frustrating and you could easily start going off the rails moving code around and making crazy modifications. Before you get to that point, make sure you’re actually dispatching the event somewhere in your code. If you aren’t, then the event isn’t included when the application is compiled. Since it never gets included, Swiz cannot get a reference to it when the application runs.

This can happen when refactoring and moving events around a little at a time. If you’re like me, you do a little testing along the way to make sure everything continues to work properly. That’s when you can wind up in a case where you may be listening for an event that you haven’t yet written the dispatch code for.

It may seems like an occurrence that may happen once in a blue moon (Mmmm…Blue Moon), but it’s already happened to me twice in the span of a couple of weeks.

Unusual Flex Problem? Check Your Metadata!

rabidgadfly — Thu, 24 Feb 2011 18:46:31 +0000

I’ve been working with Flash Builder 4 every day for about six months now, and I love it. Overall, Flash Builder is a great programming environment offering helpful debugging tools, plenty of useful keyboard shortcuts, code-hinting and completion, and error feedback on compilation issues.

The compilation errors can be SO helpful that you rely on them as guides. When refactoring code the errors tell you where you need to go to fix affected code. And if you use metadata correctly, the errors can tell you when you’ve forgotten to include a required component.

As helpful as the metadata, code-hinting and error-checking is, it’s not quite perfect; and it’s these little imperfections that can set you off on an afternoon-long detour. Reason being, while metadata can help enforce rules and enhance code-hinting, and while error-checking can point out problems with your code, metadata itself is not error-checked.

Enter my problem…

I added a skin state and skin parts to an existing component and couldn’t for the life of me figure out why the component class would not update the content of the text fields I had placed in the skin. I’d done this several times before but this time it just wouldn’t work.

I made sure I had defined the skin parts in my component, I traced and debugged for several hours, I googled and traversed several blogs, I read through the Adobe online help reading in-depth descriptions of getCurrentSkinState, invalidateSkinState, and attachSkin.

Finally, it dawned on me. I scrolled once again up to the section of my component where I defined the skin parts and looked closely at the meta data definition. Sure enough, there was the problem. I had type “Skinpart” instead of “SkinPart”. I forgot to capitalize the P. No warnings, no errors; just a bunch of text fields in the skin and variables in the component that were acting appropriately on their own, but were not connected in any way.

It took about a half hour to remove all of the ridiculous code I had added to try to compensate for that lowercase p. In the end, I walk away with a better knowledge of Flex skins, and hopefully an ability to recognize that issue sooner in the future.

Create Flex Arrow Buttons Using Spark Path

rabidgadfly — Fri, 12 Nov 2010 02:33:40 +0000

Path is a Flex 4 drawing class that fills a shape using coordinates you provide. It’s very simple once you get the hang of it, and if you add some filters you can come up with a pretty nice looking image. In this post I’m going to show you a quick overview of how to draw a custom arrow using Path that can be used as a button as seen in this sample:

You can right-click the sample to view or download the source.

After creating a new Flex 4 Web Application project, I create a new MXML skin named NextButtonSkin based on spark.components.Button. While my button will use the states and functionality of a Spark button, it will use none of the look so I delete most of the default Button MXML. ( If you want more detail on button skinning you can take a look at my Create Your Own Image Buttons post. ) The remaining button skin code looks like this:

Notice that the code above doesn’t even contain a button because I’m going to create my own graphic to use as a button. To start, I add a Graphic containing a Path and a fill. I don’t draw my arrow first because, without a fill, I won’t be able to see the arrow I’m going to draw. At this point my Graphic code looks like this:

Now I can begin drawing my arrow. When creating a path, picture your image on grid paper. The lines you draw will run along the grid lines and the fill will color in the middle for you, something like this:

The arrow is defined inside the data property of the Graphic and each segment includes a segment type and x/y coordinates relative to the end point of the previous segment. I’m only going to use a few of the possible segment types, but if you want to see the full list you can check them out here.

Since I don’t have an end point when I start off, the first command I put in there, “m 5 20″, will tell the application that the segment I’m drawing will start 5 pixels in and 20 pixels down from the top of the Graphic area. If I were drawing the arrow on paper this would mean I was putting my pencil to paper 5 grid squares in and 20 down.

From there I want to draw a horizontal line 15 pixels long and extending to the right of my starting point. “h 15″ accomplishes the task. If I wanted the line to extend to the left, I would enter “h -15″. From that point I want to draw a line, slightly diagonal, that will be the beginning of the arrow head. There’s no “d” for diagonal, so I have to tell it to draw a line to a certain point. In this case, I enter “l -3 -8″ which draws a line from the end point of my horizontal line and extending 3 pixels to the left and 8 pixel up. Get the idea?

The finished arrow code looks like this:

That’s it! My “Next” arrow is done. I follow the same process for the Previous button. Then, I add them to my default page, which ends up looking like this:

The skinClass attribute of the Buttons contains the name of the MXML skin files where I drew the buttons. That’s all there is to it.

To view or download the complete source, right-click on the app at the top of this post and click “View Source”.

-rG

Create Your Own Image Buttons In Flex 4

rabidgadfly — Thu, 30 Sep 2010 13:34:51 +0000

The more I use Flex the more I love its extensibility. Being able to extend, view, or copy the native Flex code makes my job so much easier. Here’s a short tutorial demonstrating how it can help. I promise there isn’t much typing involved, but if you just want to skip to the coding and view the final source you can do so by right-clicking the finished help button at the bottom of the post and clicking “View Source”.

Flex doesn’t offer an image button, but let’s say you need one for an application that requires a question mark help button. Here’s one way to do it:

Quick Note: The following tutorial assumes that you’re using Flash Builder 4. If you’re using another coding environment, the code will remain the same but you may have to modify some of the specified shortcuts or menu options.

First, create a new project named ImageButtonExample.

Next, create an “images” folder under “src”.

You’re going to need some help button images so you can create your own or you can use these:

The three buttons are for three button states: up, over, and down. Save them into the “images” folder you just created as helpnormal.png, helpover.png and helpdown.png. Make sure you refresh your images folder after saving the images into it so your images are recognized by the application. If you forget this step you will receive errors indicating that Flex can’t find the files.

Next, create a new package named myClasses where you can store the classes you create (best practice is to store your classes in their own package). [ Right-click "src" and then select New > Package then enter myClasses in the Name field and click Finish ].

Now create a new ActionScript Class in the myClasses package. Call your new Class ImageButton and tell it to use spark.components.Button as its Superclass. [ Right-click myClasses then select New > ActionScript Class. Enter ImageButton in the Name field and spark.components.Button in the Superclass field then click Finish ].

What you end up with should look like this:

package myClasses
{
	import spark.components.Button;

	public class ImageButton extends Button
	{
		public function ImageButton()
		{
			super();
		}
	}
}

For the most part, the Spark Button handles almost everything your button needs. I’ll come back to the need for extending a little later.

For now create a new package named mySkins by following the same procedure you used to create myClasses above.

Create a new Skin for your Button in mySkins named HelpButtonSkin using ImageButton as its Host Component. [ Right-click mySkins then select New > MXML Skin. Enter HelpButtonSkin in the Name field and myClasses.ImageButton in the Host Component field then click Finish ].

What you’ve been given there in your new Skin is the skin tothe Flex Spark Button. This can be very handy if you just want to make a few small changes. For this project, however, you’ll be using very little of that code. So, instead of telling you everything you need to remove, I’m just going to give you the end result:

Basically, you’re replacing everything between the closing states tag and the closing SparkSkin tag with a Rectangle and three BitmapImages. What you’re doing is creating a hit area for the button by defining a rectangle with an alpha of .1 . This will not be visible but will register when someone rolls over its area. This will allow for some margin of error around your button.

Next, you’re embedding the three help button images in the skin. They won’t all appear at the same time because you’ve told them in which states they should appear by using the includeIn property. The possible states you can used are defined just above the added code. They were put there automatically by Flex because you based the Skin on a Button.

Now open the application mxml file that was created automatically when you created the project. It’s probably under (default package) and it’s probably named ImageButtonExample.mxml . Just above the closing Application tag, insert your ImageButton component using “mySkins.HelpButtonSkin” as its SkinClass. [ Enter an opening tag ("<") and begin typing "ImageButton". A dropdown should appear while you're type and it should contain myClasses:ImageButton. DoubleClick it. That will not only complete the component name for you, it will also add myClasses as a namespace in the opening Application tag. After ImageButton enter skinClass="mySkins.HelpButtonSkin" and then close the tag. ]

Your application file should look like this:

Now, save all files and run your application. You should see the normal help image in the upper left corner of your browser. If you hover over it and click it, it will change images to the appropriate state image. Pretty slick!

The one thing that’s lacking at this point is the hand cursor. By default, when you roll over a Spark Button the arrow remains. Luckily, we’ve already extended the button so we can quickly add that last bit of functionality!

Open ImageButton.as and just below the “super()” line add a new line that says “this.buttonMode=true;” so that your class now looks like this:

package myClasses
{
	import spark.components.Button;

	public class ImageButton extends Button
	{
		public function ImageButton()
		{
			super();
			this.buttonMode = true;
		}
	}
}

Now run your application again and mouse over your button.

Presto, a hand cursor! You’ve now created your own image button that you can easily reuse or enhance. Great job!

To view the source , right-click on the finished help button below and then click “View Source”:

-rG

Update: Creating the ImageButton class is not a necessity, but I think it makes a good example of how to extend a class and modify it for your own purposes. In this particular case, you could use the Spark Button instead of ImageButton in ImageButtonExample.mxml. To get the hand cursor to show up you can specify buttonMode=”true” as a property in the tag, like this: .

How to Style Items in a Flex 4 Spark List

rabidgadfly — Fri, 24 Sep 2010 16:38:25 +0000

I’ve often heard it said that while Flex has a knack for making difficult tasks easy, it also has the same knack for making seemingly easy tasks difficult. While I agree that on occasion it seems that way up front, I usually find that the solution isn’t usually difficult, just difficult to find.

That was the case I found when recently working with the Spark List Component. Dynamically assigning an ArrayList as a Spark List’s data provider was a quick task and everything worked as expected. I was thrilled. Now I just had to tweak the spacing between the list items and I’d be finished. Easy, right? Ultimately the answer is yes. However, arriving at the solution took me a couple of hours!

The Spark List component automatically adds cool rollover and select effects. It also allows you to change rollover colors, set the width, and adjust the font size with simple attributes. What it doesn’t let you do so easily is set the spacing between list items. ( Note that I’m referring to a dynamically populated List, not one in which you define each item individually where you have the luxury of modifying the attributes of each item ).

Here’s some code to demonstrate the situation:

The code above populates a Spark List with months. Very quick and easy! But now I want to close up the space between the months. Simple padding or gap attribute on the list, right? Nope. lineheight? No. Custom VerticalLayout? Uh uh. Google? Majority of results show examples where each item is defined manually…that doesn’t help either.

The answer it turns out is to define a custom ItemRenderer. This is used to tell the results how they should render when displayed. Common sense, right? And it’s pretty easy to do too:

You can style the output any way you like by styling the label in the ItemRenderer. Note that if your data source contains multiple “fields” with property names, you’ll need to tweak the label text value slightly to reflect the property name of the value you’ll be displaying. So, instead of {data}, you would use something like {data.propertyName}.

Bonus tip: For reusability and flexibility you can define the the ItemRenderer as a separate MXML file and assign it to the itemRenderer property of the Spark List. Even better, you can add the Label style to a style sheet and use it throughout your application.

-rG

Font Embedding with Flex 4

rabidgadfly — Sat, 01 May 2010 00:41:56 +0000

I’ve been noodling around a bit with Flash Builder 4 lately. After creating a few simple apps I decided to look into font embedding. There are quite a few posts to be found via Googling about embedding fonts in Flex. Some are very good, others not so much, but I think I managed to compile the info into a useful example. My goal was to create custom font swfs, load them into flex, and then apply them to a text field through the use of some type of selector.

1. Create the Font SWF

The first step is to use Flash to create a font swf. To do so, create a new Flash document and add a dynamic text field to the stage. Select the text field and choose the font you want to use in your Flex application. Next, click the Character Embedding button from the Property panel and choose the characters that you want available to your Flex application. Choose only the characters you need as each extra character will add unnecessary size. Finally, publish the swf and place a copy in your Flex application folder.

Make a font swf for each font you want to use in your Flex application then close Flash.

2. Embed the Font SWF

The next step is to pull those font swfs into your Flex application and create classes, or styleNames, for them. This is done inside the fx:Style tag (mx:Style in Flex 3)


		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";

		@font-face	{
			src: url("fonts/calvin.swf");
			font-family: "Calvin and Hobbes";
		}
		@font-face {
			src:url("fonts/lcd.swf");
			font-family:"LCD";
		}
		@font-face {
			src:url("fonts/ransom.swf");
			font-family:"RansomNote";
		}

		.calvin {font-family: "Calvin and Hobbes";}
		.lcd {font-family: "LCD";}
		.ransom {font-family: "RansomNote";}

Note that the font-family is the name of the font as listed in the Flash IDE. Once this is done I can assign the styleNames “smack”, “square”, and “curlz” to an mx:Text field and it will be presented in that font, something like this:

If you stop here you will have a text field using your embedded font.

3. Create a Font Selector

We can take this an additional step by adding a radio button group and a simple function to allow dynamic switching between fonts:

Note that, as an id for each radiobutton I used the class name they will invoke. This will allow me to use only one line of code in one function to assign the appropriate styleName to my text field:

The finished product looks something like this:

Right-click on the swf and then click “View Source” to view or download the source.

Flex Camp Boston

rabidgadfly — Tue, 06 Nov 2007 17:33:16 +0000

My good friend and ColdFusion Guru Brian Rinaldi of RemoteSynthesis fame is organizing his first conference. Flex Camp Boston will take place on December 7, 2007 at Bentley College in Waltham, MA. For a $10 admission charge you’ll hear from an impressive group of speakers on a wide array of Flex-related topics. Not a good enough deal for you? Well, they’re throwing in parking and lunch too!

This is a great opportunity to meet with some of the leaders of the Flex Community. Take advantage of it!

-rG

Populate a Flex Accordion with XML

rabidgadfly — Fri, 11 May 2007 12:39:22 +0000

I’ve been spending a lot of time lately learning Flex. So far I think it’s fantastic. I’m amazed at how easy it is to put together a nice looking dynamic application with so little code.

One stumbling block I had to get over was populating an accordion component with data from an XML document. I started off with a tab bar which was pretty easy, but I felt the accordion would be a better fit for my application so I started looking into the available samples.

Unfortunately, all of the samples I encountered either used static data or a data grid which I didn’t need. So I cracked my knuckles and set off to figure it out the old-fashioned way…without help from the web.

It was easy enough to populate the accordion sections with the XML, however, I was working with a list of videos and I wanted the video to begin playing when its title was clicked in the accordion. When I worked with the tab bar I just used separate states for each video type (commercials, demos, trailers) which allowed me to always use the same id name and data provider.

With the accordion I didn’t feel that states were necessary and I preferred to place it all in the same state if possible. I ended up assigning the appropriate node to each accordion and dynamically changing the video source when a different video type was selected. My accordion looks something like this (srv is an HTTPService reference to my video.xml file):

You can see that my dataProvider changes to a different node for each accordion section. I initially attempted to use the same id for each section but received an error stating that I couldn’t use the same id more than once. That meant that I had to come up with a way to dynamically change my video source based on the accordion section that was open.

I achieved the swap with a variable and a short function:

To complete the picture, my VideoDisplay looks like this:

As you can see I defined my VideoDisplay source as the value of my vidSource variable which gets updated by the chgVidSource function that is called when the accordion section changes. This is achieved by defining itemClick in each accordion section’s List tag to send the chgVidSource function the url of the selected video.

To further clarify the code, here is a sample of the xml format I used:



	
	  Montgomery Mini Mall
	  minimall.flv
	


	
	  Playable Demo
	  demo.flv
	


	
	  Transformers
	  tf07.flv

Hope that helps! If anyone has suggestions on how to do this differently please let me know. I’m pretty green with Flex and I’m always looking for a better way.

-rG