设置ActionBar在不同平台上Button的样式（Setting ActionBar Button style based on platform ）

The typical iOS application has beveled buttons in the ActionBar. On Android, the buttons are flat. There is a property on ActionBar called defaultButtonAppearance which can be set to beveled or normal. By default it is set to normal. You can use CSS Media Queries to set the button style based on platform. This feature was introduced in Flex 4.5 and it works on desktop and mobile applications. The supported media features are application DPI (160, 240, 320) and platform (IOS, Android, QNX, Windows, Macintosh).

Here’s how you can switch between beveled and non-beveled buttons between Android and IOS:

<fx:Style>
	@namespace s "library://ns.adobe.com/flex/spark";
	@media (os-platform: "Android")
	{
		s|ActionBar
		{
			defaultButtonAppearance: normal;
		}
	}
	@media (os-platform: "IOS")
	{
		s|ActionBar
		{
			defaultButtonAppearance: beveled;
		}
	}
</fx:Style>

You would declare your media queries in the Style block of your main application mxml file. You can also declare them in any custom MXML components but the usual rules of CSS declarations apply. You can set type or class selectors in the main application file but only class selectors in custom components.

If you haven’t tried media queries yet, check it out. It’s an easy way to set styles for different devices without having to create a new theme or SWF for each.