Anyway good news, finally Google can index SWF files with external resources.  This news came out a few days back, but due to my blog needing fixed (it was breaking FF – wordpresses fault:( ) and other things going on blah blah…

Well here is the annoucement from Google - http://googlewebmastercentral.blogspot.com/2009/06/flash-indexing-with-external-resource.html I have yet to try this out, but if it works as it say it does then great. another bonus for using Flex.

Well after the unfortunate news that the company I work for are no longer wishing to partake in the RIA party that’s changing the way we look at and use the web/desktop and hence are making myself redundant. I’m looking at this as a great opportunity to expand my knowledge so that I can work with as many forward thinking companies as possible that deal with Flex/Actionscript/AIR or for that matter any RIA technology.
Also I should now have more time to create and sell my own components, of which I had a cracking idea this morning (more on this later hopefully).

Hect I’ll event look at Silverlight or JavaFX if I get the time or the chance. So anyone out there fancy taking on a new contractor with 4 years+ experience in Flex as well as a bunch of other languages I’ve used along the way before I even heard of Flex.

Feel free to contact me at this address.

I’m going to continue to post hints and tips on anything I do as well as posting any new components so watch this space and feel free to contact me if you need any work done in the UK, remote working is always an option as well.

First of if you haven’t got one already, create a uiltily class so features that you use regulary across projects (you could turn this file into a SWC and reference that in you various projects – now that I think about it I explain this as simple tip #3 )

So inside your utility class place the following code

public static function get randomColour() : uint {
	return Math.random() * uint.MAX_VALUE;
}

Then lets just say you require a random colour for anything just call Utility.randomColour, no brackets, no = signs. Because you’ve set the function as a getter using the function name will be enough. This method also means that you don’t need to remember the max/min values for a colour. The uint min and max values are the same as the the min/max values for colours.

e.g.

<mx:Canvas backgroundColor="{Utility.randomColour}"
   width="600"
   height="600">

Utility is the name of the class that holds my utility functions.

I’m sure most folk will have struggled to think of what project they last used a generic function ABC in as they could do with using it for project XYZ and would rather spend 30 mins searching for said function rather than rewrite it.

Well as explained below is a way to stop this from happening and hopefully save you a heap of time.

• Step 1

  – Create a library project.

• So using flexbuilder, go to File->New->Flex Library Project.
• This will create an empty library project.

• Step 2

  – add in your Utilty class to the library project.

• To do this add/create a Utility actionscript file that contains your static functions. Save, and this should then automaticlaly create a SWC file inside the library bin folder. (If it hasn’t and the file added has no errors then check the project properties to make sure the newly added file is being included – see pic)

• Step 3

  – add the reference of the newly created SWC file to any project you intend to use it in.

• So go to your project you wish to use the SWC with, then select the projects properties and inside ‘Flex build path’ select ‘Add SWC’.
• Browse to the the previous library project and select the SWC from its bin folder.

You are now done, any time you update the code in the library project, those changes will be reflected in any project that references the SWC file automatically.

Below is a simple soloution using actionscript to solve this.

First I should state that you need to use the AdvancedDataGrid even if you only need a normal DataGrid.  This is because the AdvancedDataGrid has a method called drawHighlightIndicator(…), which as you’d expect from the name draws the highlight.  Normally this is a single colour, but with a little overriding you’ll be able to change this.

Below is the main snippet of code from the extended AdvancedDataGrid.

override protected function drawHighlightIndicator(  indicator:Sprite, x:Number, y:Number,
	width:Number, height:Number, color:uint,  itemRenderer:IListItemRenderer):void
{
	//The indicator is the highlight, so grab its graphics and clear them
	var g:Graphics = Sprite(indicator).graphics;
	g.clear();
 
	var xPos : Number = 0;
	var yPos : Number = 0;
	//loop through the number of columns in the datagrid
	for(var i : uint = 0; i < this.columnCount; i++){
		//get a random colour
		g.beginFill(randColour);
		//draw the rectanlge that fills the first column
		g.drawRect(xPos, y, this.columns[i].width, height);
		//update the starting X position so that it starts at the begin of the
		//next column
		xPos = xPos + this.columns[i].width;
	}
	g.endFill();
}

using the above you could create a DataGrid like the below which has some left hand columns in light purple and the rest in white. Then on highlight that same light purple colour is used for the white cells and the existing light purple becomes a slightly darker purple.

Check out this link to see a very simple/colourful demo. As ever right click app for full source code.

Live

Well the folk at Mozilla (or whoever tests the plugins) have just changed its status to LIVE yeh.
check it out here http://addons.mozilla.org/addon/11823
You can also check out the original post with a list of all the included sites here.

What has a hidden entrance, is dark, damp and a just bit fousty (for any non Scottish readers - definition ) and takes quite a while to warm up?

Answer:

SoTR09
Yes, the Scotch on the Rocks 09 event held in Edinburgh was in a building called ‘The Caves’.  Oddly enough for a venue there was no sign outside to say that you were in the right place and on Friday there was a reasonable amount of rain.  So inside the main venue area you could see the water slowly runnning down the walls and the occasional drip noise coming from the corridor. The heaters didn’t come on till half way through the day but the tea & beers made up for that.

So what about the day, well I’m not a coldfusion guy, actually I’ve never touched a line of coldfusion.  But I didn’t go to learn or find out about coldfusion, I went to see if there was any tip bits about flex.  Serge was doing a talk on the new Flash builder and Flash catalyst, plus there was the another talk that involved both flex (lifecycle) and coldfusion.

It was nice to see Flash catalyst in action and during some of the talks they did this cool thing with webservices as if it was just something that was just known.  What was done was to import a WSDL (webservice) then once you see the list of methods available and while in design view, drag a method onto a datagrid and flash builder automaticly populated the datagrid with the returned result fields.

Something cool, other than Catalyst

Maybe this isn’t a cool thing to most people, nobody in the room seemed to notice, maybe because they were pretty much all coldfusion devs!?  But I thought that it was pretty neat. Should save a heap of time typing, plus just like you can with AMF you can now specify a return type for the WSDL.  Great new additions to Flash Builder. (In order to set up the datagrid automatically you need to specify the return type before dragging it onto the datagrid)

Best thing you could do would be to try yourself, download Flash Builder here, then create a new project, then find a WSDL that you wish to test something like this weather WSDL, choose the menu in Flashbuilder ‘Data’ -> ‘Connect to Webservice’. Follow the wizard then play around with the services.  Try things like setting the return type (create your own object), or right click one of the methods and ‘generate form’.  Very good additions.

If you’re into coldfusion then I’d definitely recommend SoTR. Last year (08) had more flex than this year (09), so if you’re also into flex then keep an eye on it. Scotch on the Rocks

This made me a tad curious, was this a bug with the beta, I doubted that as that would have been a major issue.  So i figured it must have been for a reason, and it was.  A very good reason it turned out!

Due to the large number of new component classes and the different namespaces, Flash Builder will now only show the recommended components when using auto complete (unless you press Ctrl + Space, then you cycle through various options such as ‘show all’).  This I like. Great idea and a great way to get those folk set in their ways to find out more about the new classes.

So what is recommended in place of the old VBox?  This took a little while of searching Google, but I’ve found this article in the Adobe Dev Connection, http://www.adobe.com/devnet/flex/articles/flex3and4_differences_04.html.  This lists the old versus new and shows that the VBox is now replaced by the VGroup.

So there you go, should you not find the class in the auto complete help to start with, press Ctrl + Space then check out the above link to find out what you should really be using.

Well just to see if I could, I set about and extended the FormItem class so that I could add an image/icon.

After a quick look at the source code of the FormItem you can see that it only has two children. One, the label and two, the indicator. So if you do wish to add anything else you’re going to have to extend the FormItem.

Thankfully the FormItem is based on the Container which makes adding anything fairly straight forward. I prefer to do any extending in actionscript but you could do the below in MXML with a bit of actionscript code at the same time.

There are 3 steps you need to make.

1. Override the createChildren method
2. Set the image source
3. Override the label

Override the createChildren

protected override function createChildren():void {
    super.createChildren();
    //you could move the image creation into a seperate function when and if the imagesource has been set
	//but for this example I've kept it simple.
	this.image = new Image();
	image.width = 16;
	image.height = 16;
	//again I've hardcoded these values for simplicity
	//You could if you wanted to create a versitile custom component load these values in from a CSS file
	image.setStyle('verticalCenter', 0 );
	image.setStyle('left', 5 );
	image.source = _imageSource;
	this.rawChildren.addChild(image);
	//bind the string property to the image source property.
	BindingUtils.bindProperty(image, 'source', this, 'imageSource');
}

from the above code you’ll see that all I’ve done is create an image, set its various properties and add it to the form.

most of this could and probably should be moved to a separate function (but for this demo I haven’t) so that you only add the image if it is actually required.  Also the style settings should come from a CSS file but for simplicity of the demo I haven’t done this.

Set the image source

private var _imageSource : String = '';
 
[Bindable]
public function get imageSource() : String {
	return _imageSource;
} 
 
//Sets the imageSource and I've added a number of spaces at the start to offset the 
//width of the image.
//The overall form width will be calculated from the width of the label (this is done inside the FormItem) 
public function set imageSource(str : String) : void {
  _imageSource = str;
  if(_imageSource.length > 0){//setting the label (not using _label) will resize the form/formItems
  //add spaces to the trimed version to make sure you don't end up with 100's of spaces at the start.
	label = "   " + StringUtil.trim(_label);
  } else {
	label = StringUtil.trim(_label);
  }
}

In the above code you can see that I set the variable _imageSource (which bound to the images source – see first snippet of code).  If the source is not “” then I add spaces to the label, make sure you set label and not _label.  This makes sure that the label width gets recalcualted.

Override the label

//Sets the label.
//If the imageSource has been set already then this will add spaces to the label
public override function set label(str : String) : void {
  _label = str;
  if(_imageSource.length > 0){
	_label = "   " + str;
  } else {
	_label = StringUtil.trim(str);
  }
  // call the super last, this will also force the remeausing of the formItem and Form
  super.label = _label;
}

The above code is very similar to the setter that set the imageSource but this time it sets _label then makes sure that the super function gets the new label.

Check out the simple demo here. (Right click for source)

You can check out the app here.

After a comment/question from the previous post asking about something I didn’t explain, I thought that it deservered its own post rather than just an edit of the original.

So the question was how do you get the circular effect, and how do you do ‘(… %)’ in the legend?

The effect

Firstly set up the effect

<mx:SeriesInterpolate id="doughnut" duration="1000" />

Then whatever ID you have given your pie series you’d do the following (I called my one ‘seriesOne’)

seriesOne.setStyle('showDataEffect', doughnut);

(I did this set up in the script block on creation complete or show + I nulled the effect/DP’s on hide so that you get the full effect each time)

If you wish to get the full opening of the circle effect then the data must be empty to start with as the effect just changes between the current and the new values.

The second part of the question was to do with the labels on the legend.  This one is all to do with how you set up your dataprovider for the pie chart.

The label

I start of with loading in the data from an XML file (if you use some HTTP tool you should be able to see the data).  It goes something like the following

<chartOne>
  <chartName>blah</chartName>
  <data>
    <section>
      <name>item 1</name>
      <value>37.55</value>
    </section>
    <section>
      <name>item 2</name>
      <value>13.33</value>
    </section>               
  </data>
</chartOne>

As you’ll see from the data there is no ‘%’. So what I do is when I load the data I construct an object VO (value object).

This VO contains the name, item and a label.  The label is just the name + ‘(‘ + value +’%)’.  Then the arrayCollection I use for the dataprovider is just a collection of these object VO’s.

Essentially my VO is this,

var obj : Object =new Object();
obj.name = 'item 1';
obj.value = 37.55;
obj.label = obj.name + '(' + obj.value +'%)';

The legend looks at the data for the pie chart and sees the label property and uses that as it is.

This may make you ask about the datatip for the actual pie chart as it doesn’t contain the brackets. Well for that I had to implement a dataTipFunction.

This function took the form,

private function returnToolTip(hitData:HitData):String {
    return hitData.item.name + ' ' +hitData.item.value + '%';
}

and you just can set this in the MXML of the pie chart.

Well hopefully thats explained in a reasonable way, I’d love to open the entire source for this but without reworking it (commercial reasons) I can’t.

Check out part one of the blog here.