The Space For App Developers

Beyond Plain Old HTML Objects

iOS style buttons in Flex 4.5 mobile applications

with 5 comments

Ever wondered how you can make Flex 4.5 ActionBar buttons look like native buttons on iOS? This is actually very simple to achieve, what you need are just a few lines of CSS code. Checkout the snippet below:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
 
@media(os-platform:"IOS")
{
	s|ActionBar
	{
		defaultButtonAppearance:beveled;
	}
 
	.backButton
	{
		skinClass:ClassReference("spark.skins.mobile.BeveledBackButtonSkin");
	}
}

As you can see in the code above I also used CSS media queries to have the proper style and skin class applied only when running on iOS devices. Below you can see the end result:

The code that implements the view above is as simple as this:

 
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="iOS buttons">
 
	<s:navigationContent>
		<s:Button label="Back" styleName="backButton"/>
	</s:navigationContent>
 
	<s:actionContent>
		<s:Button label="Button"/>
	</s:actionContent>
 
</s:View>

Written by Piotr Walczyszyn

May 27th, 2011 at 3:29 pm

Posted in Examples

Tagged with , , ,

«
»

5 Responses to 'iOS style buttons in Flex 4.5 mobile applications'

Subscribe to comments with RSS or TrackBack to 'iOS style buttons in Flex 4.5 mobile applications'.

  1. Great example! I’m looking for buttons with this aspect for my apps. Thanks!!

    Francisco

    27 May 11 at 5:36 pm

  2. With Flex4.5 I am developing the mobile application. i want diffrent-diffrent skins based on the platform(i.e. Diffrent for Android, iOS and black berry). Is that possible with flex 4.5.

    Amit

    21 Jul 11 at 9:30 am

  3. @Amit yes this is possible, this is exactly what I’m doing in this example. The media query selects iOS as a platform and assigns different button skin to it.

    Piotr Walczyszyn

    21 Jul 11 at 12:27 pm

  4. You guys should check out e-skimo.com. They have a component set that attempts to match both iOS and Android. Looks pretty good IMO.

    Bryce

    16 Aug 11 at 3:31 pm

  5. This is work only in .. in the it doesn’t work…

    Chi kheang

    18 Oct 11 at 12:12 pm

Leave a Reply