Category: Flex

Anything about flex. From tutorials, examples, links to breaking news.

Simple tip #5 Create function to call any function with unknown args

Simple tip #5 Create function to call any function with unknown args

The other day I wanted to create a function in a class that would take a Function as a parameter and an Array of arguments.  Much like callLater() does, but not doing the whole queuing thing until the next frame.

So how do you call a function that may have any number of arguments. Well here is the code and it should speak for itself.

 protected function checkSomethingThenCallOtherFunction(
    method : Function, args : Array = null ) : void
 {
    if( something.length < someMaxLimit )
    {
        method.apply( null, args );
    }
    else
    {
        //do something else
    }
}

So how easy is that? Pass in the function and an array of arguments, that’s all.

Previous Tip

Next Tip

[ad name=”ad-1″]

Linear and Radial gradients – visually explained

Linear and Radial gradients – visually explained

I was playing around with some code recently (Flex 4 code) and I went to create a simple background and not having Catalyst or similar to output a fxg file I went to create my own gradients with some code. After a couple of goes and not getting anything resembeling what I expect I decided to write a quick explorer.

I’ve done something similar ages ago with flex 3, so I thought I’d do this with flex 4 and perhaps look to expand it as an example of reskining an app with different skins. (source code may follow when I do this)  So here is the first step. A simple explorer to help understand the values that are used to make a Linear or Radial gradient along with the entries that make the look how they look.

I think it should be self explanatory, but if not just post a comment.

Follow the link to open the explorer.

Explorer screenshot

[ad name=”ad-1″]

Additional compiler arguments – debug only code

Additional compiler arguments – debug only code

Many times you look something up, do it once and think cool I’ll remember that as it’s simple. Then 1 year later you’ve forgotten the syntax and you can’t find that help/blog page where you learned about it the first time.
Well I needed to add in some debug code that would only be there for debugging, and the last thing I want to do when building a release version is to scan through the code to remove it. So the ideal way is to use a conditional compiler argument.

So in Flashbuilder, under the project properties and then the Flex compiler properties you’ll see something like this

Compiler Arguments
Example for custom arguments

So if you had the following defined, -define=CONFIG::DEBUG,true -define+=CONFIG::SOMETHING_ELSE,false

Then in code you could do the following.

    CONFIG::DEBUG
    private var test : Boolean;

    CONFIG::SOMETHING_ELSE
    private function somethingElse() : void
    {

    }

The variable and function code will only be included if the compiler argument is true. So in the above example if you called the function ‘somethingElse()’ then this would generate a build error as somethingElse() doesn’t exist. Change the argument to true and it will build fine.

[ad name=”ad-1″]

Simple tip #4 (GOTCHA) – Datagrid borders

Simple tip #4 (GOTCHA) – Datagrid borders

More of a gotcha than a simple tip.

I was customising a DataGrid with various skin parts the other day (Flex 3) and could I get the borderskin to show, heck no! Its been a while since I had to create a DG from scratch so I’d obviously blacked out any previous pain with using the dammed DG.

Anyway why would the borderskin not show? I tried a simple solid border, nope. I tried a custom png graphic taken from Fireworks for the DG’s border, nope. I tried a programmatic skin border and guess what nope – nothing.  The issue was that I had the background alpha set to 1 (which is pretty normal!) and I had set the alternate row colours.

Setting the background alpha to something less than 1 revealed the border so I ended up fudging it by creating the programmatic skin border by whatever the borderThickness is outside the size of the DG.  
So if the DG was meant to be 400px wide and borderThickness was 2, I made the DG 396px wide and drew the border outside that area.  This is what I’ve expect to happen automatically.

Can’t believe I’ve missed this/forgotten this before. Crappy DG.

Previous Tip

Next Tip

[ad name=”ad-1″]

Google, RSLs and indexing

Google, RSLs and indexing

A while back I posted an article on Google giving errors with indexing SWF files that used the RSL framework feature to reduce the overall size of your SWF. It seemed to me very odd that you have Adobe trying to push the use of RSL’s as well as bumming up the great work that they’ve done with Google to index SWFs but not mentioning that fact that Google couldn’t index a SWF with an RSL. This lead people to see errors when they tried to find their app in a Google search.  See this for details http://kennethsutherland.com/2009/04/27/google-and-swfs/

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.

[ad name=”ad-1″]

Doom and gloom or a new beginning

Doom and gloom or a new beginning

Redundancy… world shrinking economy… depression… company cutbacks… is this a bleak time or is it a time to make and face new challenges in the RIA world (particularly in the Flex and Actionscript areas)?

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.
[kml_flashembed fversion=”10.0.22″ movie=”/flex/contact/Contact.swf” targetclass=”flashmovie” useexpressinstall=”true” publishmethod=”static” width=”300″ height=”50″]

Get Adobe Flash player

[/kml_flashembed]

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.

[ad name=”ad-1″]

Simple tip #2 – random colours

Simple tip #2 – random colours

Their are so many times I’ve used a random colour in my apps (mainly for testing) that I thought I’d add this way of using a getter method with actionscript to simplify the process.

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.


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

Previous Tip

Next Tip

[ad name=”ad-1″]

Simple tip #3 – Utility SWC (library project)

Simple tip #3 – Utility SWC (library project)

Do you frequently use simple actionscript functions in more than one project. Perhaps you’ve got a function to do tracking, parse strings to dates, or return a random colour etc.

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.

Previous Tip

Next Tip

[ad name=”ad-1″]

Show dual coloured highlight for a DG

Show dual coloured highlight for a DG

If you have a datagrid that has different coloured columns, then why should you have to do with only using a single colour for the highlight.

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.

Twin DG colour example

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

[ad name=”ad-1″]

Flex Collection search – live

Flex Collection search – live

When I was setting up my blog, one of the first things I found out about was creating custom searches using Google. So I promptly set up a custom search that had a list of my favourite and most frequently visited flex sites and at the same time if those sites didn’t have the info I required any search that was directed to the ‘web’ rather than the ‘flex collection’ would be weighted to sites that had AS3, Flex, or Adobe related info.
After a little bit more research I managed to create an OpenSearch plugin from the custom Google search, and after that turned it into a firefox plugin.  See the ‘how to’ here on creating your own custom search and firefox plugin.

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.

[ad name=”ad-1″]