Before working at Pongo, I worked for 13 years at Hasbro where a significant amount of my time was spent building out their media portals using ColdFusion and Flash. The portals allowed viewing of videos, playing games, and reading online comic books. I also spent a good deal of time working with my friend and fellow blogger Dan Gaspar creating a ColdFusion/Model Glue API which provided access to our data to facilitate both internal and external development.

While my main focus has been within the Adobe stack; Flash, Flex, and ColdFusion, I also have experience in PHP, JQuery, JavaScript, and several other web technologies. I have worked with frameworks and I’m familiar with MVC concepts.

If you know of anyone in the Massachusetts or Rhode Island area that is looking for a developer please contact me or feel free to pass along my information. In addition to myself, there will be three other hard-working developers looking for work.

Thanks much!
Glenn Gervais

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.

"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.

I’m new to ORM so I started out by creating a simple project with all components contained under the same application. It was a small struggle to get past the new terminology and occasional mistakes and/or omissions in the online documentation, but a few hours and several expletives later, I was up and running.

My next step was to apply the method to an existing site. The major difference being that I wanted my ORM object definitions to be inaccessible externally. This required creating a ColdFusion mapping, which I created using the CF Administrator.

I set everything up and ran a test page which replied with an error: “Hibernate mapping for … component not found.”

After several hours of Googling, combined with a lot of trial and error, I discovered that in order to use Hibernate with a CF mapping, the mapping must application level. Once I deleted my mapping from CF Admin and added it to my Application.CFC, the error stopped and my results appeared.

One other note to keep in mind when configuring your ColdFusion application to use Hibernate: ORM settings must go in Application.CFC instead of the old-school Application.cfm.

-rG

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.

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:

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
			 minWidth="48" minHeight="48"
			 alpha.disabled="0.5">

	<!-- host component -->
	<fx:Metadata>
		<![CDATA[
		/* @copy spark.skins.spark.ApplicationSkin#hostComponent 	*/
		[HostComponent("spark.components.Button")]
		]]>
	</fx:Metadata>

	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>

	<!--- Your arrow will start after this line --->

	<!---- Your arrow will end above this line ----->

</s:SparkSkin>

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:

<!--- Your arrow will start after this line --->

<s:Graphic>
	<s:Path data="">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xfd1901" color.down="0xAF220D" />
				<s:GradientEntry color="0xa70d12" color.down="0xAF220D" />
			</s:LinearGradient>
		</s:fill>
	</s:Path>
</s:Graphic>

<!---- Your arrow will end above this line ----->

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:

<!--- Your arrow will start after this line --->

<s:Graphic>
	<s:Path data="m 5 20
			h 15
			l -3 -8
			l 18 14
			l -18 14
			l 3 -8
			h -18
			v -12">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xfd1901" color.down="0xAF220D" />
				<s:GradientEntry color="0xa70d12" color.down="0xAF220D" />
			</s:LinearGradient>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="0xAF220D" weight="1" alpha=".8" alpha.disabled="0"  alpha.up="0"/>
		</s:stroke>
	</s:Path>
</s:Graphic>

<!---- Your arrow will end above this line ----->

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:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

	<s:Button skinClass="PrevButtonSkin" buttonMode="true" left="25" top="25" />
	<s:Button skinClass="NextButtonSkin" buttonMode="true" left="100" top="25" />

</s:Application>
 

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

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:

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
			 minWidth="48" minHeight="48"
			 alpha.disabled="0.5">

	<!-- host component -->
	<fx:Metadata>
		<![CDATA[
		/* @copy spark.skins.spark.ApplicationSkin#hostComponent 	*/
		[HostComponent("myClasses.ImageButton")]
		]]>
	</fx:Metadata>

	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>

	<s:Rect left="0" right="0" top="0" bottom="0" >
		<s:fill>
			<s:SolidColor color="0xffffff" alpha="1" />
		</s:fill>
	</s:Rect>

	<s:BitmapImage source="@Embed('images/helpnormal.png')" includeIn="up, disabled"/>
	<s:BitmapImage source="@Embed('images/helpover.png')" includeIn="over"/>
	<s:BitmapImage source="@Embed('images/helpdown.png')" includeIn="down"/>

</s:SparkSkin>

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:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:myClasses="myClasses.*"
			   minWidth="955" minHeight="600" >

	<myClasses:ImageButton skinClass="mySkins.HelpButtonSkin"  />

</s:Application>

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: <s:Button buttonMode=”true” skinClass=”mySkins.HelpButtonSkin” />.

Full description:

Company: Pongo Resume

Position Title: Development Specialist

Type: Full Time

Overview:
Pongo Resume is a premier, full-service online resource for job seekers. Privately held and headquartered in Northborough, Massachusetts, Pongo was honored in 2009 as one of the Inc. 5000 fastest growing private U.S. companies. Pongo Resume has more than 5 million registered users and averages well over a half-million unique visitors per month. The Pongo Resume web site provides users with all the tools, templates, and support needed to write professional resumes and cover letters, ace tough interviews, and secure a great job. Our users generate over 100,000 resumes per month.

Responsibilities:
We are seeking a bright, hard working, and self-motivated, mid to senior level Web Application Developer utilizing web technologies such as Flex, ColdFusion, jQuery and XML. You will work closely with all members of the Pongo team.

• Build and maintain highly scalable and dynamic web applications utilizing Flex, ColdFusion, jQuery and SQL Server.
• Develop reusable code and interaction with business logic database.
• Support and maintain existing application functionality through version releases and bug fixes.
• Adhere to rigid coding standards and best practices when developing applications.
• Brainstorm solutions and execute details to deliver end to end solutions.

Minimum Qualifications:
• Proven experience developing dynamic applications that blend interactive GUIs developed in Flex, ColdFusion and jQuery with SQL Server databases.
• Solid understanding of object-oriented programming techniques.
• Experience with object-oriented and services-oriented architectures and methodologies.
• Experience with Flex and ColdFusion frameworks such as Mach II, Fusebox, Coldbox and Mate, a plus.
• Experience with Content Management Systems, such as Mura, a plus.
• Must be detailed-oriented and possess a strong drive to deliver quality, consistent results in a timely manner.
• Ability to handle multiple projects simultaneously.

Contact:

Please send cover letter, resume, and salary requirements to:

jobs-DEV@pongoresume.com

Pongo Resume provides a friendly and collaborative working environment which encourages personal and professional growth.

Benefits include medical (HMO), dental, long -and short-term disability, free lunch Fridays, 401K, 15 PTO days, 10 paid holidays, closed between Christmas and New Year’s with pay.

Good Luck!

Glenn

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:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	preinitialize="preinitHandler(event)"  >
	<fx:Script>
		<![CDATA[
		import mx.collections.ArrayList;
		import mx.events.FlexEvent;

		[Bindable]
		private var monthsList:ArrayList;

		protected function preinitHandler(event:FlexEvent):void {
			monthsList = new ArrayList(["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November","December"]);
		}
		]]>
	</fx:Script>

	<s:List id="months" dataProvider="{monthsList}" />
</s:Application>

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:

<s:List id="months" dataProvider="{monthsList}" >
	<s:itemRenderer>
		<fx:Component>
			<s:ItemRenderer>
				<s:Label text="{data}" paddingTop="3" paddingBottom="3" fontSize="11" />
			</s:ItemRenderer>
		</fx:Component>
	</s:itemRenderer>
</s:List>

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