iPhone app development...using JS and HTML instead of Objective C? Freakin' amazing!

I had to try this; check out NimbleKit. I dabble in iPhone development, and have already gone through the rigor of Objective C, but I mean...JS and HTML?

NimbleKit touts, "NimbleKit is the fastest way to create applications for iPhone and iPod touch.You don't need to know Objective-C or iPhone SDK. All you need is to know how to write an HTML page with Javascript code."

I'm dubious to say the least; write in one language, compile to another completely different environment, is something I've seen blow up more than once. But then again, I was dubious of the Google Web Toolkit, and that worked really well when I needed it. With that said, let's give it a try. I downloaded the installer, which adds a new project type to your XCode iPhone Applications project templates:



Firing it up brings you to the dev interface for the project. It looks more or less like a regular app, with the addition of a the NimbleKit supporting binaries, like libNimbleKit.a, the NKit.js library, and an HTML folder in the project explorer. The page of interest to me is located in that HTML folder, called main.html, and we see it includes the NKit.js file.



So, let's compile and run the project on the iPhone (I'm a registered developer) using just the default HTML text in the emulator...BONK! NimbleKit wants you to register NimbleKit, and initialize it with the serial number they send you in order to test on the iPhone. I'm not inclined to do that at this point but, it did show that NimbleKit will deploy the app to the iPhone without issue; I actually see the icon on the iPhone and everything exactly as you'd expect. The pic below is a screenshot from the iPhone:



So, for now we're using the emulator. My confidence is building though, if this thing really pans out I might just register and get a serial number. Right now though, there's very little documentation and only one tutorial. I think I'll wait for another rev to commit.

There's a tutorial showing how to build a simple "Radio" application, but what I think I'm going to do is just try to knockout a hello world that loads an image. Right off the bat, you can see that, while you use JS and HTML as your "MainView", which is what you put UI items on. Let's try to add a button, and an image control, so that when we click the button, the image loads. Nothing fancy, but this gets us through creating and positioning UI elements, hooking up events, and UI elements that react based on the result of that event (in this case, a button click). This is a basic exercise I try in any UI development environment I come across.

In Objective C, the code might look like this; this is the implementation class, I'll leave out the interfaces and whatnot. Note that in the NimbleKit project, I don't have to worry about the separate interface and implementation objects, I just work right on that HTML page directly.

- (void)loadView 
{
 [ super loadView ];
 
 mainView = self;
 
 btn = [ UIButton buttonWithType: UIButtonTypeRoundedRect ];
 btn.frame = CGRectMake ( 110, 10, 100.0, 20.0 );
 [ btn setTitle: @"Load Pic" 
    forState: UIControlStateNormal ];
 [ btn addTarget: self action: @selector(btnClicked:) forControlEvents: ( UIControlEventTouchDown ) ];
   
 [ self.view addSubview: btn ];
}

- (IBAction) btnClicked:(id)sender
{
 /*
 UIAlertView *alert = [ [UIAlertView alloc] 
        initWithTitle:@"Hello DevX" message:   
        @"iPhone, here I come!"  
        delegate:self cancelButtonTitle:@"OK" 
        otherButtonTitles:nil, nil];
 [alert show];
    [alert release];
  */
 img = [ UIImage imageNamed: @"cat.jpg" ];
 CGSize imageSize = img.size;
 myImageView = [ [ UIImageView alloc ] initWithImage: img ];
 myImageView.frame = CGRectMake ( 0, 100, imageSize.width, imageSize.height );

 [ mainView.view addSubview: myImageView ];
 [ myImageView release ];
 
}

So, let's try and port that same idea into NimbleKit. Although there's no documentation, I saw in the video and in the screenshot on the home page that the UI elements are preceded with "NK". Those aren't native iPhone framework names...hmm, where do I get the object names? My guess would be, since you do this all in a JS script tag, I'd need to look in the nkit.js file, and sure enough, that's where I found what I was looking for; NKButton, and supporting methods.

function NKButton()
{
 this.init = NKPlaceNativeButton;
 this.show = NKShowNativeButton;
 this.hide = NKHideNativeButton;
 this.setTitle = NKSetNativeButtonTitle;
 this.setImage = NKSetNativeButtonImage;
 this.id = CallNKitAction("NKCreateButton?sync=yes");
}
function NKSetNativeButtonImage(imageName)
{
 CallNKitAction("NKSetNativeButtonImage?image="+imageName+"&id="+this.id);
}

function NKSetNativeButtonTitle(title)
{
 CallNKitAction("NKSetNativeButtonTitle?title="+title+"&id="+this.id);
}

function NKPlaceNativeButton(x, y, width, height, callback)
{
 CallNKitAction("NKPlaceNativeButton?x="+x+"&y="+y+"&width="+width+"&height="+height+"&callback="+callback+"&id="+this.id);
}

function NKShowNativeButton()
{
 CallNKitAction("NKShowNativeButton?id="+this.id);
}
function NKHideNativeButton()
{
 CallNKitAction("NKHideNativeButton?id="+this.id);
}

So, with this info in hand, I tried to write out the JavaScript. Doing "var btn = new NKButton ( ), and setting the properties every which way, didn't make a native button appear. Ok, I'll go with a NKNavigationController instead; this worked as expected, a nav controller appeared on the top of the emulator screen with a button, and a test event handler that shows an NKAlert worked. So far so good.

It then dawned on me that I wasn't thinking about this right; I'm supposed to be using HTML and JS, not trying to figure out how the standard iPhone SDK applies. So, let's shift thinking: I'll still use the NKNavigationController (though based on what I can see, the button should have worked...DOCS PLEASE!), but I'll also add a button under it that does the same thing; clicks and makes the image appear. For the image, I'll just put in an HTML "img" tag, with no "src" attribute specified. When I click either the button in the nav bar, or the standard HTML button, I'll call a JS function to load the image. Here's my code:

<html>
<head>
</head>
<body>
<script type="text/javascript" src="NKit.js"></script>

<script type="text/javascript">
var navController = new NKNavigationController ( );
navController.setTitle ( "Testing NimbleKit" );
navController.setStyle ( "black" );
navController.addNavigationItem ( "Image", "showImage" );

function showImage ( )
{
 img.src = "cat.jpg";
}

</script>

<input type="button" value="Load Image", onClick="showImage ( )" />
<img id="img" src="" />

</body>
</html>

And I will be freakin' damned...they both worked perfectly. Screenshots below. I gotta say, I'm stunned. The potential for this development kit is pretty staggering when you think about it. The developer of NimbleKit has essentially put basic iPhone development into the hands of every basic web page developer.

You think there's a lot of apps in the iPhone store NOW...just wait 'til this gets out!

As always, thanks for visiting.