The Space For App Developers

Below is the third episode of my HTML5 for App Developers series. In this episode, I cover how you can debug your JavaScript applications inside of Eclipse.

Debugging is available through a set of plugins that are available for Eclipse from the ChromeDevTools project on Google Code. So, you will need either Google Chrome or Chromium to make it all work.

Below you will find the second episode of my HTML5 for App Developers series. In this episode, I cover how you can use Eclipse, which is a free and open source IDE, to do your HTML5, JavaScript, and CSS work.

In the video, I point out a small bug that comes with Mac version of Eclipse. To download the patch you can use this link. You can find Eclipse itself here; I encourage you to download the Eclipse IDE for JavaScript Web Developers version.

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>