Stop the mobile ActionBar from transitioning

I was creating a mobile AIR app and the app was to have an ActionBar at the top and depending on the view that was about to get pushed I didn’t want the ActionBar to have a transition effect. Sounds like a simple request, nope, no can do…

So after a bit of digging into the various classes ( mainly the ViewTransitionBase ) I came across what needed to be changed 🙂 but its a mx_internal so use the following fix with caution.

All of the various effects check the actionBarTransitionMode while they create the effects.  Its just that the actionBarTransitionMode is always set to ACTION_BAR_MODE_FADE_AND_SLIDE and never changes from that value. What’s more the actionBarTransitionMode is a mx_internal  variable so you can’t just call it yourself when creating a new effect.

So here is the fix.

  1. Extend whatever effect you wish to use. e.g. SlideViewTransition
  2. add the following lines to your extended class import import mx.core.mx_internal; and use namespace mx_internal;
  3. Either inside your constructor set the value (if you don’t wish to change it at runtime) or create a setter to modify the value actionBarTransitionMode
Possible values are (these can be found in the ViewTransitionBase class),

ACTION_BAR_MODE_FADE:String = “fade”;

ACTION_BAR_MODE_FADE_AND_SLIDE:String = “fadeAndSlide”;

ACTION_BAR_MODE_NONE:String = “none”;

In my case I set it to ACTION_BAR_MODE_NONE as I didn’t wish to have any transition on the ActionBar.

[ad name=”ad-1″]

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

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

Cross domain policy – Not to be used for release!

Sometimes I like to put something up on my blog that’s more as of a bookmark for myself as I know I’ll want to look it up at some point.  So what I’ve got here is a slack, open cross domain policy.

DO NOT USE THIS IN YOUR PRODUCTION CODE
(unless you really need to and understand why you shouldn’t)

This will get rid of any security issues you may be having while in development.

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
 "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" secure="false"/>
<allow-http-request-headers-from domain="*"
 headers="*" secure="false"/>
</cross-domain-policy>

[ad name=”ad-1″]

IconItemRenderer and LabelItemRenderer, separator lines hardcoded!

Working on a mobile project I needed to create a renderer for a list, so I choose to look at the IconItemRenderer which extends the LabelItemRenderer. These have been optimised for mobile use so it seemed a reasonable place to start. On the whole they seem like good classes to use, but if you’ve ever worked with the Datagrid/DataGridBase in the past you will probably know about the white square which comes about from the hardcoded #FFFFFF values inside the DataGridBase!

Well the IconItemRenderer and LabelItemRenderer have a similar issue. So lets just say you create a list and you wish to skin the list exactly how you like or use it in a tile layout or something other than vertical then you will find some lines above and below your renderers which look out of place. You can’t get rid of them no matter what property styles you set.

The fix is pretty straight forward but why does there have to be some hardcoded values in something that is meant to be very versatile?

So inside the LabelItemRenderer around lines 881 you will see the following. It uses these values to draw separators whether you like it or not.

// separators are a highlight on the top and shadow on the bottom
topSeparatorColor = 0xFFFFFF;
topSeparatorAlpha = .3;
bottomSeparatorColor = 0x000000;
bottomSeparatorAlpha = .3;

So the quickest way of dealing with this is to override the drawBackground function in your own class which is created in LabelItemRenderer. This doesn’t get called from IconItemRenderer so you can quite simple copy the entire function and just remove the separator chunk and do not call super from your function which overrides the drawBackground.

Better still would be to change the hard coded values to styles from a CSS file.

var topSeparatorColor : uint = getStyle( 'topSeparatorColor' );
var topSeparatorAlpha : Number = getStyle( 'topSeparatorAlpha' );
topSeparatorAlpha = isNaN( topSeparatorAlpha ) ? 1 : topSeparatorAlpha;

If you’re setting a Number just remember to check for NaN’s in case you haven’t set a style, uints default to 0 anyway.

[ad name=”ad-1″]

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 &lt; 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″]

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

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