Debugging facebook apps locally (web based ones)

If  you’re wanting to develop a facebook app then there is loads of helpful stuff out there to get you going. Specifically I’d start here if you’re interested http://www.adobe.com/devnet/facebook.html.

But what they don’t tell you is how to debug your app without you having to FTP your files each time you change something. (If your facebook app is based on AIR and not a web app, then this doesn’t matter).

  • Firstly log into facebook and go to your app settings, it will probably look like the below. What you are looking for is the ‘website with facebook login’. This is used by facebook when your app logs in ( you’d never have guess that! ). Anyway if this doesn’t match the url of where your app is deployed then you will NOT be able to log in.

    Change it to your local URL, in my case I’ve made it http://localhost/facebookLoginTest/index.html
    The important bit is the localhost as my actual app isn’t run from index.html but when I set up the app on facebook I just put that in.
  • Now that your app can login you will now be able to debug, but the default settings in Flashbuilder don’t output your files to your localhost. So this is the second part to getting everything to work.

    I’ve highlighted the two bits you need to change which is inside your projects properties (right click and select ‘Flex Build Path’).

    Change the output folder to push your output files to the folder inside your webserver. I use XAMPP to setup my webserver etc

    Also update the output folder URL, once changed when you hit debug it will load whatever URL is in that box + the html page. So as you can see I’ve changed my output folder URL to http://localhost/facebookLoginTest/ which when I run/debug my app gives me http://localhost/facebookLoginTest/FacebookTestApp.html?debug=true

That’s it.

[ad name=”ad-1″]

Searching a string – do you need to start with a period?

Today I had to write some code to search for text that matched various file extensions, this should have been a no brainer of a task. But like some things that sound stupidly simple it caught me out.

If you have a string and you use the search method then when it finds something it will return the position. If it doesn’t then it will return -1. So far so good.

Now I could go into huge detail (I did, but it ended up to wordy/dull, so I just deleted it!).
So if you EVER have to search for a string and your string starts with a period ‘.’ then add a double backslash ‘\’.
If you don’t then the period will match anything! e.g. you want to match ‘.ra’ and the string contains the word brain then ‘brain’.search( ‘.ra’ ) DOES NOT return -1!

use ‘\.ra’ for correct results.

Not sure why ‘.ra’ doesn’t work, maybe it’s treating the string like a regEx, I know search can take both a string and a regEx so maybe its not looking at its type and guessing that it should be a regEx?? You can’t step into the code either to see why, so just use the \

Very annoying!

Previous Tip

[ad name=”ad-1″]

Updating bindings when you only change a property inside an Object

Its quite a common thing with Flex and actionscript projects to create an Object and inside that object it will have many properties.  Something in your view will be bound to the object so that the view changes with the object. So long as you change the entire object this will work fine.

Where this doesn’t work is if you change a property inside the object.

So if we have something like this

[Bindable]			
private var myObject : ObjectDataVO;
 
<view:SomeComponent
...
data="{ myObject }"
...
/>

When we set myObject to something the view component gets updated (great so far).
Lets say the myObject has a property text and the view component uses this to display some visual label, then somewhere in the app I change that property, myObject.text = “something else”;
The binding will not trigger as I haven’t actually changed the myObject, just a property inside it.

So how do we fire the binding manually? Well there is the BindingManager class (note this is an excluded class so you’ll not see it in the autocomplete ).
So in this example if I changed the myObject.text property then I could call

BindingManager.executeBindings( this, ‘myObject.text’, myObject );

This would fire of the binding as if the actual myObject had changed so anything listening in will now get updated.

[ad name=”ad-1″]

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″]

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.

Get Adobe Flash player

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″]

FormItem, adding an icon

Adding an icon to a form item is (yet another) one of those really annoying things in flex. I’m sure its something that loads of people wish to do but you can’t.

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)

[ad name=”ad-1″]

Exploding pie charts, part 2

In one of my first blogs I demoed a pie chart that made each of the wedges from the pie explode out the way when its item in the legend was rolled over by the mouse.
The pie chart also had a nice effect when it was shown in that it filled up in a circular manor.

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.

[ad name=”ad-1″]

Dates, how many days? (DateValidator)

It’s been a while since I last looked at this, and it annoys me that there isn’t a simple function to do this. So if you are wishing to find out how many days are in a month for a given year then feel free to use the below.

Of course it’s going to be virtually the same result for most years, but I still think it should be a function inside the Date class (or maybe a DateUtil class).

Start off with a standard Switch statement as all months (apart from February) have a fixed number of days.  This of course isn’t exactly rocket science but how do we figure out how many days February has?

Well the solution still isn’t rocket science but I like it, if you create a DateValidator and you give it a date of 29/02/2003 (yes this is a UK date – date at the start) and get it to validate that, then it will fail as 2003 isn’t a leap year. So February for 2003 must only have 28 days.

That’s it.  You could of course just divide the year by 4 and check to see if there is a modulus of 0, if so then it is a leap year.  If you chose to use this approach you’d need to make sure that the date range you are using doesn’t include anything unusual (I’m not sure how constant the leap year really is, if it’s anything like the clocks going forward or back 1 or 2 hours then you’re best just using the internal date validation). The flash player gets its time from the operation system, so (AFAIK) its rules for working out if a date is valid is also comes from the operating system.

the below code also shows an example of using the DateValidator that doesn’t use the month/date/year input, which is another reason why I like it.

public function getNumberOfDaysInMonth(month : Number, year : Number) : Number{
 
  switch(month){
 
    case 0://January
    case 2://March
    case 4://May
    case 6://July
    case 7://August
    case 9://October
    case 11://December
    return 31;
    break;
 
    case 3://April
    case 5://June
    case 8://September
    case 10://November 
    return 30;
    break;
 
    case 1://February
    return getNumberOfDaysInFebruary(year);//
    break;
 
    default:
    return 0;//should never reach this - if it does then 0 is an error
  }
}
 
private function getNumberOfDaysInFebruary(year  : Number ) : Number {
 
  var isValid : DateValidator = new DateValidator();
  isValid.inputFormat = "DD/MM/YYYY";
  isValid.allowedFormatChars = "/";
  var result : ValidationResultEvent = isValid.validate("29/02/"+ year);
  if(result.results == null ){//29th is a valid date
    return 29;
  } else {//29th is NOT a valid date
    return 28;
  }
}

[ad name=”ad-1″]

Custom Class & Custom Itemrenderer

Today (not for the first time – but it’s been a while) I needed to create a custom class that took a custom itemRenderer.

Having used itemRenderers for ages I thought it was going to be straight forward, but I’d forgotten a few little bits of info needed to implement them from scratch (i.e. not using say a menu or datagrids itemRenderers). It’s all very well to just give a flex component a class name in the MXML but how does the class that contains the itemrenderer implement it?

Test app

So I created a very small test app to make sure that I could create a custom itemRenderer for my custom class.

  • Step 1, create the custom itemRenderer.  For the test I just made this a Canvas and made it 100% * 100% and the background colour was red.
  • step 2, display the class that you are going use as an itemRenderer as a normal display object (place custom class inside a Canvas)
  • step 3, create a custom class that will take and display an itemRenderer. Once created assign your new custom itemRenderer to the new custom class.
  • View the test app, all going well you should now see two instances of your itemRenderer. One is the actual class as a displayObject and the other as an itemRenderer inside your custom class.

I’ve placed my small test app here purely so that you can look at the source code (right click app).  The app does NOTHING and is not interactive, it’s just to show the source code and how to make sure you set things up correctly.

 

Once you’ve looked at the code this bit will make sense.

  • step 1 & 2, display a canvas in the top left. This canvas contains only the custom class that is to be used as an itemRenderer.  This just proves that the itemRender will display what you think it should.
  • step 3,  create a custom class that will contain your itemRenderer. Then place custom class into app and set the itemRenderer to your custom itemRenderer class.  

All you need to do now is create a itemRenderer slighty more complex than a red box, but as long as it’s a DisplayObject then its going to be the same.

That’s it, as ever feel free to comment (especially if you’ve found this helpful).

[ad name=”ad-1″]

Tiles and the packing problem

On more than one occasion in the past I’ve been wishing to create a custom component that is totally dynamic so that I don’t have to worry about hardcoding any sizes.
So lets just say I have a list/tilelist and it contains pictures. Normally what I’d do is make sure that the pictures are a set size and I’d just make the list dynamic in one direction so it may end up showing 4.5 tiles which is normally fine as it’s a scrollable list.

But what if you have a list that will only ever contain say 10 items and you wish to use as much of the users screen as possible then each time the user changes the screen size you need to work out the optimal size of a tile/item.

Check out the demo here. This actually took me quiet a while to figure out how to do, I think the function to work out the size has gone through several iterations. (the example is based on the Tile class as that handles the layout and lets me do the nice animation moves when one tile moves around the screen on resize)

Here is the actionscript code that will work out the optimal size. I know that this function can be optimised further, but this will do to show you how its done. (possible optimisations: SQRT is not a nice function to call for the processor, use it sparingly, reducing number by just -1 each time isn’t great either, could reduce it by larger amounts then swing back a forth until I get the best fit).

//total number of tiles
var tile_count : Number = numberOfSlides;
//height of rectangle
var b : Number = unscaledHeight;
//width of rectanlge
var a : Number = unscaledWidth;
 
//divide the area but the number of tiles to get the max area a tile could cover
//this optimal size for a tile will more often than not make the tiles overlap, but
//a tile can never be bigger than this size
var maxSize : Number = Math.sqrt((b * a) / tile_count);
//find the number of whole tiles that can fit into the height
var numberOfPossibleWholeTilesH : Number = Math.floor(b / maxSize);
//find the number of whole tiles that can fit into the width
var numberOfPossibleWholeTilesW : Number = Math.floor(a / maxSize);
//works out how many whole tiles this configuration can hold
var total : Number = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;
 
//if the number of number of whole tiles that the max size tile ends up with is less than the require number of
//tiles, make the maxSize smaller and recaluate
while(total &lt; tile_count){
	maxSize--;
	numberOfPossibleWholeTilesH = Math.floor(b / maxSize);
	numberOfPossibleWholeTilesW = Math.floor(a / maxSize);
	total = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;
}
 
return maxSize;

If anyone else has a solution or knows of a better solution using actionscript (or anything else for that matter) I’d love to see it as although this works I’m thinking there must be a faster solution.

Looking at links like the following http://www.combinatorics.org/Surveys/ds7.html these problems can be pretty complicated!

[ad name=”ad-1″]