Many computer scientists and software engineers will be familiar with this task, learning a brand new language to complete your project in. It happens all the time in our field. It actually happens so often that we take for granted the skill which allow us to accomplish such a task. The other day I was helping a colleague out while they were attempting to learn the Flex 3 and Actionscript 3. A lot of what he was doing was counterproductive to his learning of the language. In his defense, he is an old school developer who learned a lot of OOP (Object Oriented Programming) languages and not a lot of scripting ones, so while he was going through these little trial programs he was creating he was implementing OOP methods of design that have no place in a Flex/Actionscript world. What follows is a basic guideline on how to acclimate yourself to a new language when it is needed.

1 – Know your terrain

It is important to know what kind of language you are dealing with before you start coding in it. The type of language will determine what mindset you need to be in to code within it. Coding in JavaScript is not the same as coding in C++. JavaScript is a series of functions that a called as needed, usually by some other language like HTML or the GWT. First thing to do is figure out what coding style your language falls within. Is it a scripting language like PHP or JavaScript, an OOP language like C++ or Java, a functional language like LISP, or maybe it is a hybrid of several of these like many of the new languages are these days. Once you know, do a little research into how these languages are developed in the real world, or draw upon your own experiences with a language similar to the one you are trying to learn. This may seem like a pointless endeavor at the start, but by completing this step you will have a much deeper understanding of your new language and where it is coming from.

2 – The concepts are the same

There is a set list of things that most programming languages can do. Loops, If statements, Function declaration, resource importing, class creation, variable declaration, etc. These concepts and techniques are used across all code and are used a multitude of times in all code. It is important to figure out how these commonly used coding techniques are implemented in your new language at the start. Many are fairly standard across all languages, but sometimes there are little nuances that can trip up even the most experienced coder. By figuring out how these basic things are done up front, you will save yourself hours of research time later.

3 – Testing the waters

When starting a new language it is always good to try it out a little. Now that you know the basics of how to use your new language and what kind of language it is, write some test projects. Try to do the basics first, the so called “Hello World” applications. Run thru any tutorials that are provided in order to get a better understanding of how the code is actually implemented on screen. Also, take this time to familiarize yourself with the development environment. It took me a long time to figure out how to use Eclipse coming from .NET once I moved away from C++ development and started developing Java and Actionscript. The environments were similar, so I didn’t take the time to learn the Eclipse environment right off and suffered for about 3 months before sitting down and teaching myself how it all worked.

4 – Conceptualize

Now that you have learned the basics of your new language and its environment, get a little more advanced. You are most likely learning this new language for a specific project or set of projects. If you already know what these projects are going to do, write some small proof of concept projects that allow you to get more specific with the new language. These projects will help you to understand how your new project at work will work within the new language. As an example, when learning Flex and Actionscript I knew that a lot of the GUI’s I would be coding were going to need Drag Drop functionality, so I made a few simple projects that taught me how to manipulate the data in a Drag Drop format and how to create my own Drag Drop managers for those elements which didn’t have it already built in.

5 – R & D baby

At this point you should be feeling quite comfortable with your language. It is no longer new and scary like it was when you started step one. You are now ready to really start using the language in the real world. You should be comfortable using the simple concepts of the language, as well as some of the more advanced aspects. More importantly though, you should have a good idea about how your project is going to be coded and developed within the language.

Using these simple guidelines you should be able to learn any language you will ever encounter. Remember that there is no set amount of time it will take to learn a new language however. A language could take you a week to learn, but take others days or even weeks to get to the same level. It is also important to remember that you do not know everything about the language, few people every really do. Always know that the internet is vast and resources such as forums, blogs, guides, and help documents can give you the solution to most any problem, or at the very least point you in the right direction.

I know it has been awhile since part one, but here is part two of Creating Custom Components and Item Renderers with Flex 2.

Item renderers are a tricky subject. They are like custom components, but are far more involved. They live inside components that are children of the List class (i.e. DataGrid, List, Horizontal List, Tile List). The best way to think of them is that for every row in your List there will be an instance of that item renderer in that list.

Here is a list of important things to note about the item renderer:

• Access to parent objects is dependent on how you implemented the Item renderer
• It’s very hard to access the item renderer from outer code, the parent application or the parent document.
• It is easy to access outer code from the item renderer
• Any code the item renderer wants to access must be public type
• If you create your item renderer in its own file you access the parent with parentDocument.publicVar
• If you create your item renderer in line you access the parent with outerDocument.publicVar
• Calling parentApplication.publicVar will give the item renderer access to anything at the Application level and lower (any components declared between the application tags)

I know all this seems confusing now, so lets jump into some quick examples to help you better understand how all this communication flows and to familiarize yourself with the two ways to create item renderers.

The following tutorial will show you how to create a simple item renderer using a custom component. I will not be going over inline item renderers. Inline item renderers tend to be messy and are far too confusing to create a good tutorial with. I do not use them if they can be at all avoided in real world applications.

First lets create a new project called ItemTest as you usually would. Once that is complete open ItemTest.mxml and add a DataGrid by dragging it onto the screen. This is where we will display our Item Renderer. Give the DataGrid an id of dgItemData, a width of 600 and height of 400. Switch to source view, your code should look like this:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:DataGrid x="10" y="10" id="dgItemData" height="400" width="600">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

At this point we want to get some data for our datagrid. Right-Click on your project and select New->File. Give the file a name of sampleData.xml. Copy the text below and paste it into sampleData.xml:


<root>
<Song>
<Artist>Taproot</Artist>
<Title>Again and Again</Title>
<Album>Gift</Album>
</Song>
<Song>
<Artist>Gorillaz</Artist>
<Title>Last Living Souls</Title>
<Album>Demon Days</Album>
</Song>
<Song>
<Artist>All That Remains</Artist>
<Title>Whispers (I Hear You)</Title>
<Album>The Fall of Ideals</Album>
</Song>
</root>


Now we need to connect the DataGrid to the sampleData.xml. I won’t go too far into this part, as there will be a tutorial on these later, but copy and paste the HTTPService below into ItemTest.mxml:

<mx:HTTPService id="srvData" url="./sampleData.xml" resultFormat="e4x" method="GET" useProxy="false" result="dgItemData.dataProvider = XML(srvData.lastResult).Song;"/>

ItemTest.mxml should now look like this in the source view:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTTPService id="srvData" url="./sampleData.xml" resultFormat="e4x" method="GET" useProxy="false" result="dgItemData.dataProvider = XML(srvData.lastResult).Song;"/>
<mx:DataGrid x="10" y="10" id="dgItemData" height="400" width="600">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

The code above will send out an HTTP GET request over port 80 for the file sampleData.xml. As I set the url to ./sampleData.xml it will automatically fill in the rest of the url to be whatever domain the application is running from. Its result will be in the e4x format (xml), and upon the result event it will assign our datagrid’s dataprovider with its data. The data will read, for every Song element in the root of the result creates a row in the datagrid.

Now let’s create the Item Renderer. Right-click on the created project, go to new, and create a new MXML component. Give it a filename of MyItem, base it on VBox, give it a width of 400 and a height of 100.

Now switch over to design view of your component. You should see a blank, white rectangle 400 pixels wide and 100 high. Lets add some content to our item renderer. Two Text components and a button should do the trick. Drag and drop two text components and a button from the Components List onto the VBox in that order. Give the top text an id of txtCom1 and the bottom text an id of txtCom2. Give the button an id of btnInfo and a label that says ‘Click Me’. If you view your source code it should look like this:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="100">
<mx:Text text="Text" id="txtCom1"/>
<mx:Text text="Text" id="txtCom2"/>
<mx:Button label="Click Me" id="btnInfo"/>
</mx:VBox>
For aesthetics let’s center them in the VBox. Go to Design view and select the VBox of your item renderer and set its Horizontal Align to center.

Save your changes and now we can begin to link these components together. First we will need to create some ActionScript functions to call the data. Insert the following into your ItemTest.mxml file in between the Application tags:

<mx:Script>
<![CDATA[
import mx.controls.Alert;
//Run on the creationComplete event of the application
private function init():void
{
srvData.send();
}
//Called by the itemRenderer button when it is clicked
public function itemClick(title:String, artist:String, album:String):void
{
Alert.show(title + " - " + artist + " - " + album, "Song Info", Alert.OK, this);
}
]]>
</mx:Script>

Add the init(); function to the Application creationComplete event. To do this add the following line to the Application tag:
creationComplete="init();"
Your code for the ItemTest.mxml file should look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
//Run on the creationComplete event of the application
private function init():void
{
srvData.send();
}
//Called by the itemRenderer button when it is clicked
public function itemClick(title:String, artist:String, album:String):void
{
Alert.show(title + " - " + artist + " - " + album, "Song Info", Alert.OK, this);
}
]]>
</mx:Script>
<mx:HTTPService id="srvData" url="./sampleData.xml" resultFormat="e4x" method="GET" useProxy="false" result="dgItemData.dataProvider = XML(srvData.lastResult).Song;"/>
<mx:DataGrid x="10" y="10" id="dgItemData" height="400" width="600">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Go back to your item renderer, MyItem.mxml and switch to source view. From here we need to set btnInfo to call the function we just created, itemClick, in the parent application. Add the following to the button’s tag:

click="parentApplication.itemClick(data.Title, data.Artist, data.Album);"

We also need to set the text. Add the following text values to your two text components:

text="{data.Title}"
text="{data.Artist}"

Your code in MyItem should now look like this:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="100">
<mx:Text text="Text" id="txtCom1" text="{data.Title}"/>
<mx:Text text="Text" id="txtCom2" text="{data.Artist}"/>
<mx:Button label="Button" id="btnInfo" click="parentApplication.itemClick(data.Title, data.Artist, data.Album);"/>
</mx:VBox>

What the above code just did was say that for every item renderer created there will be a button called btnInfo created. When clicked, this button will send the following data to the public function itemClick in the parent application. The variable data holds all information contained in the row that the item renderer is in.

Switch back to ItemTest.mxml source view.

Now we need to set the item renderer. In the first DataGrid column, Column 1, remove the datafield, it is not needed when setting an item renderer. Modify it to look like the following instead:

<mx:DataGridColumn itemRenderer="MyItem" headerText="Column 1" width="400"/>

What this means is that for every row in this column display an instance of the Component MyItem. Also at this point give Column 1 a width of 400. Set the datafield for Column 2 to Album and Column 3 to Artist. Your datagrid should now look like this:

<mx:DataGrid x="10" y="10" id="dgItemData" height="400" width="600">
<mx:columns>
<mx:DataGridColumn itemRenderer="MyItem" headerText="Column 1" width="400"/>
<mx:DataGridColumn headerText="Column 2" dataField="Album"/>
<mx:DataGridColumn headerText="Column 3" dataField="Artist"/>
</mx:columns>
</mx:DataGrid>

Give the code a run. You should now see this in your main screen:

Still confused on item renderers? Don’t worry, they are by far the toughest concept to grasp when starting out with Flex and Actionscript. It took me a few tries creating them before I finally understood how they worked.

In my opinion the best way to think of them is this. Assume you have set the item renderer of a column in a datagrid. Your datagrid’s data provider contains 10 rows of information that would normally be displayed without an item renderer. Once you add the item renderer, there will still be 10 rows of information, only in the column with the item renderer you will see 10 distinct instances of your item renderer. Each item renderer instance in the 10 rows has a data variable which holds all data of that row. To explain the data variable lets look above real quick. The first item renderer in the first row of the datagrid dgItemData is a unique instance of the component MyItem and has a data variable. The data variable has access to the following information based on the sampleData.xml file which is the provider for the datagrid dgItemData:

<Song>
<Artist>Taproot</Artist>
<Title>Again and Again</Title>
<Album>Gift</Album>
</Song>

So by saying data.Artist we are really saying ‘Taproot’.

That is it for the Custom Components and Item Renderers tutorials. I am going to try and get these tutorials out on a more timely basis, probably one every week or two. I already know that the next tutorial will be on HTTPServices, XML, and using both to create a simple RSS Reader. As always, please feel free to comment what you think of the tutorial, anywhere I stated something wrong, or any helpful tips you may have for others.

Erich out.

One of the largest issues in the Software Industry is poor code. While many blame the languages being used, I blame the developer. While I prefer to code in object oriented languages (mainly C#) there are a lot of programming languages now a days (PHP for one.... and yes I know its object oriented) that lead to unmaintainable code. Many times the code can be so confusing, and compiles with no standards, that it is impossible for even the person who wrote it to understand what’s going on. PHP might not be the perfect language for OOP, it can still be made readable and maintainable.

In the software industry, everyone has their own standard. One of my partners and I get in lively debates all the time about which standard is best. While part of being a software engineer is being able to adapt, its still nicer when you can look at a method or variable and know exactly what its protection level is. Or the fact that all the code is not in one line, and commented. Hell, no variables that are one letter. int i = 1 WHAT? These are all things that hurt our industry as a whole.

What does all this mean? Well in short we need a Professional Engineers (PE) Exam for Software Engineers. Software is becoming an integrated system in society, much like a building or a bridge. The other engineering industries such as a structural engineer or civil engineer require that engineers working on the above mentioned building or bridge be licensed. This adds a level of professional responsibility. Something that does not exist in our industry.

One great example of the lack of professional responsibility is the case of the Air-Traffic Control System at the Los Angeles Airport. To summarize the problem, air traffic controllers at LAX Air-Traffic Control lost communication with over 800 planes. The communication systems shut down unexpectedly on September 21, 2004. Further worsening the situation, the backup system which was supposed to come online in the event of a failure such as this crashed within 1 minute of coming online. A postmortem of the issue revealed that the system had a countdown ticker that removes time in milliseconds. The system starts with just over 4 million milliseconds. Once it runs out, the system shuts down. This took only 50 days. They restart the system every 30 days to avoid this issue.

While this might be acceptable to someone, I honestly can't see how it is. A professional software engineer would have engineered a self sustaining system that didn't require constant maintenance. Poor design lead to something that could have meant 1000 of lives.

Another example stems again from the airline industry. While this issue had no lives at risk, the financial implications where huge. 200 million dollars to be exact. Denver's Airport Baggage handling system had major software issues which forced delays in opening the new airport. At first what was supposed to open on Halloween slipped month to month to month, until in June when the Airports planners met again determining they did not know when the baggage system would be stable enough to open the airport. They estimated an average 1 million dollar a day loss due to the software issues. Such large scale issues should never have happened. Professional ethics should have prevented this. When 100 million dollar projects are in play ethics is rarely in anyone’s vocabulary.

For these reasons (and many more) a Professional License is needed in the Software Engineering community. Without it, the community will continue to become a "to the lowest bidder" industry that puts out spotty products and becomes the car mechanic of the technology industry.

And like the current professional engineers exam, this is not something that should be optional to practice Software Engineering as a profession. Currently there are two levels, Engineer-in-training (EIT) and Professional Engineer (PE). Whether or not that model is the best for Software Engineering is yet to be seen. However, just like the current PE exams, your EIT allows you to practice, just under the supervision of PE's. This allows not only more competency in the industry, but an on-the-job training in how to be a professional, in ethics and practice.

I can only wish that before people die from needless computer issues, that our industry will regulate itself in such a way to add, if not all, some of what I mentioned above.

Part 1 - Custom Components

You can download this tutorial here for easier use
Flex 2 - Custom Components and Item Renderers[DOC]
Flex 2 - Custom Components and Item Renderers[PDF]

When coding in Flex there are many times where the GUI elements that they provide are just not enough. Adobe realized this and came up with a simple way to create custom components. These components can be used like Buttons and Datagrids, or as display objects, i.e. Item Renderers, within any element that is based off the List class. Yet, these concepts are among the most confusing to implement correctly for new users. Hopefully by reading this two part series on how to create Custom Components and Item Renderers new users to Flex will feel more at ease implementing these concepts in their own code.

First let’s break down how Custom Components work. We will deal with Item Renderers later. When you are in Design Mode in your builder right-click on your project and go to:

New->MXML Component or go to File->New->MXML Component

From here a window will appear this is where you will set the name of your new component class and what base class you are overriding, the default being a Canvas. Lets keep this first one simple and just call it TestComponent and leave the class being overridden as Canvas.
When you click finish you will see that a new .mxml file has been added to your project source called TestComponent.mxml . You will also notice that under the components tab there will now be a new option in the Custom folder called TestComponent that you can add to your project like any other mxml GUI element.

Open the TestComponent.mxml file and take a look at the source code. You will see that there are two mxml tags, <mx:Canvas ..> and </mx:Canvas>. From here on all code that you add will go between these two tags. Go back to source view.

Now, lets add some GUI elements to the Canvas to help you understand how these things work. Drag two buttons onto the canvas. Make their labels Alert 1 and Alert 2. Set their click listeners to call the function alertApplication(event); don’t worry, we will be writing this next.

Just a quick check, if you switch to the source view of your component you should see something like this:

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

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400? height=”300?>

<mx:Button x=”10? y=”10? label=”Alert 1? click=”alertApplication(event);”/>

<mx:Button x=”10? y=”40? label=”Alert 2? click=”alertApplication(event);”/>

</mx:Canvas>

Lets change the size of the canvas to a width of 100 and a height of 100 as well. Your top line should now read:

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” width=”100? height=”100?>

All good? Ok, so now that we have our buttons lets get that function in there. I have already written it for you below, please copy the mx:Script into your source code between the last <mx:Button> and </mx:Canvas> tags.

<mx:Script>

<![CDATA[

import mx.controls.Button

import mx.controls.Alert;

private function alertApplication(me:MouseEvent):void

{

//the button that called the Mouse Event CLICK

var tempButton:Button = new Button();

//Obtain the button that called CLICK from the Mouse Event

tempButton = me.target as Button;

//Show an Alert to confirm the click

Alert.show(”Clicked on ” + tempButton.label + ” in component ” + this.id, “Component Clicked”, Alert.OK, this);

}

]]>

</mx:Script>

Now your entire component should look like this in the source view:

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

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400? height=”300?>

<mx:Button x=”10? y=”10? label=”Alert 1? click=”alertApplication(event);”/>

<mx:Button x=”10? y=”40? label=”Alert 2? click=”alertApplication(event);”/>

<mx:Script>

<![CDATA[

import mx.controls.Button;

import mx.controls.Alert;

private function alertApplication(me:MouseEvent):void

{

//the button that called the Mouse Event CLICK

var tempButton:Button = new Button();

//Obtain the button that called CLICK from the Mouse Event

tempButton = me.target as Button;

//Show an Alert to confirm the click

Alert.show(”Clicked on ” + tempButton.label + ” in component ” + this.id, “Component Clicked”, Alert.OK, this);

}

]]>

</mx:Script>

</mx:Canvas>

Now to actually use the component you have just created. Open the main mxml file of your project in design mode. In the components list should be a folder at the top called Custom containing a component called TestComponent. Click and drag two of these components onto your application. Give the first an ID of MyCom1 and the second an ID of MyCom2. Also note how in the application you cannot specifically select the two buttons contained within the component. Their properties can only be changed back in the TestComponent.mxml file. In the source view of your application you should see these two tags:

<ns1:TestComponent x=”10? y=”10? id=”MyCom1?>

</ns1:TestComponent>

<ns1:TestComponent x=”10? y=”118? id=”MyCom2?>

</ns1:TestComponent>

Give this code a run and click the buttons. If everything went right you should see Alert Windows popup every time you click a button telling you what button was clicked and the id of the component that the button is contained.

Some things you may want to keep in mind while using custom components.

1 – Once you have added a custom component there are two main ways to access code outside your component. The first is parentDocument. Calling parentDocument will give you access to the mxml file that contains the custom component. For example if you add a customComponent1 to customComponent2 and then add customComponent2 to the main application, calling the parentDocument from customComponent1 will only give you access to the public objects and data contained in customComponent2. Calling parentDocument from customComponent2 will give you access to all that is public in the Application itself.

Calling parentApplication from any component at any level will always give you access to the main application file and all public objects and data that it contains.

In the code, the above calls would looks something like this:

parentDocument.somePublicObject…

parentDocument.somePublicFunction();

parentApplication.somePublicObject…

parentApplication.somePublicFunction();

2 – Any component, custom or preexisting, can be used as an item renderer. The best way to think of how they will display in the code is that for every row contained in the List based code an item renderer will be created and displayed in that row containing all that row’s information in the components data object. 3 – The tags for custom components in the mxml are not prefixed with a <mx, instead that are defaulted to <ns1. This ns1 stands for namespace1. If you were to look at the Application tag in your mxml tag after adding a custom component you would see that a new attribute has been set called xmlns:ns1=”*”.

So that is the skinny on custom components. I know that I am not a great technical writer, so please feel free to comment about any errors I may have stated, or maybe just helpful tips and tricks on creating these things. Next time I will go over Item Renderers, but I strongly urge you to become familiar with Custom Components first before diving into them since the manipulation of Custom Components is the core of dealing with Item Renderers.

QUICK NOTE ON EVENT SETTING: Adding event as a parameter to any event listener, E.G. myEventFunction(event), will automatically send the appropriately formatted event as a parameter to the function specified. If this event listener is declared in the MXML tags, <mx:Button ID=”myButton” click=”myEventFunction(event);”/>, of the program then it is not possible to remove the listener from the object at any point. However, is the listener is added in Actionscript, myButton.addEventListener(MouseEvent.CLICK, myEventFunction), then it can be removed later but the correctly formatted event object will automatically be sent as a parameter if done this way.

You can download this tutorial here for easier use
Flex 2 - Custom Components and Item Renderers[DOC]
Flex 2 - Custom Components and Item Renderers[PDF]