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

StateGroups – finally found a use for them

State groups? Ever looked at them and though they look really useful but then can’t find a good use for them!
Well last year (yes its taken a while to finish of this post – hopefully its worth it), while developing some mobile apps I came across a great use for them. At the time their were also very few examples of using stategroups on-line and none in a practical setting.
So here goes, lets see how they’re done and where would be good to use them.

  • The problem
  • Mobile apps can have 1 of 3 DPI settings and this will change how your app looks. (320 DPI, 240 DPI and 120 DPI).
    So we can think of each of these DPI’s as a state.
    Then we can have a view and like most views you will use states. For example to have “Edit mode on” and “Edit mode off”.

  • That give is 2 different groups of states
  • Group 1 is the DPI setting.
    Group 2 is the view mode.

  • Soloution
  • I always like to see working examples of something, bit like a picture & a 1000 words.
    So below is a test app to change the values of and of course it has source code to view.


Click to open state group examples

I’ve also included below what I consider to be the important bits of the code to understand.
Check out the source code of the app for more detail.

<s:states>
	<!-- use these stategroups for setting values in components -->
	<s:State name="editOn" stateGroups="editIsOn" />
	<s:State name="editOff" stateGroups="editIsOff" />
	<s:State name="one" stateGroups="lowDPI" />
	<s:State name="two" stateGroups="medDPI" />
	<s:State name="three"  stateGroups="highDPI" />
 
	<!-- These are the usfull states -->
	<s:State name="editOn160" stateGroups="editIsOn,lowDPI" />
	<s:State name="editOn240" stateGroups="editIsOn,medDPI" />
	<s:State name="editOn320" stateGroups="editIsOn,highDPI" />
	<s:State name="editOff160" stateGroups="editIsOff,lowDPI" />
	<s:State name="editOff240" stateGroups="editIsOff,medDPI" />
	<s:State name="editOff320" stateGroups="editIsOff,highDPI" />	
</s:states>
<s:Label
	text.lowDPI="low DPI"
	text.medDPI="med DPI"
	text.highDPI="high DPI"
 
	text.editOff="edit Off"
	text.editOn="edit On"
	/>
<s:Label
	text.editOff120="edit Off 120"
	text.editOff240="edit Off 240"
	text.editOff360="edit Off 360"
 
	text.editOn120="edit On 120"
	text.editOn240="edit On 240"
	text.editOn360="edit On 360"
 
	text.editOn="edit On"
	text.editOff="edit Off"
 
	text.one="one"
	text.two="two"
	text.three="three"
	/>
 
<s:Label
	text.one="one"
	text.two="two"
	text.three="three"
 
	text.editIsOff="edit is Off"
	text.editIsOn="edit is On"
	/>

These are the various combinations of states you can use together, and the list of the actual states.
For example you can’t set text.one and text.lowDPI on the same component.

Hopefully this will give you a bit of insight into how and where to use stateGroups. Very useful tool under specific circumstances.

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

Flash Builder – Webservices – SoTR

Question:

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

[ad name=”ad-1″]

Where’s the VBox?

I resisted installing gumbo until it reached public beta, and having just done so started up a project only to find that using the auto complete VBox amongst others seemed to have disappeared.  Although using the VBox tag worked in exactly the same way as previously.

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.

[ad name=”ad-1″]