Easy Application Development for the iphone

Most Developers who are new to the stormy currents of iphone development in Objective-C would stay at the shores for quite some time before they get their boats wet and start sailing.
But with Jiggy at hand, development for the iphone would be a walk in the park for most developers who are familiar with Javascript. It's really nice to use such a flexible and powerful language to script your applications.
Since Jiggy runtime wraps native Objective-C API for you. You won't even need a compiler or the tool chain to start developing. All you'll need is a browser on your machine and a jailbroken iphone with jiggy runtime and jiggy (ide) installed and you can start writing your native applications in javascript. (You can get Jiggy from here)

What you have to do

Run jiggy on your iphone, that would start its own web server that you can log on to from your browser by going to the url shown on jiggy screen and typing the user name and password (both are "jiggy" initially)
Now you can write, save and run your application form your browser ide.

What actually happens

Running the application actually runs a 17K bootstrap executable called jiggy (of course) which is included with every Jiggy application you write. this executable loads the Jiggy runtime and evalutes and executes your javascript code which should be in main.js file.
Jiggy Runtime is a collection of Jigglins ( Objective-C dynamic libraries that expose part of the Objective-C API to Javascript)
Jiggy Runtime can be extended by building new Jigglins that expose more of the native API.

An example

A Hello world marquee application.

// main.js
Plugins.load( "UIKit" );
include( "marquee.js" )
var window = new UIWindow( UIHardware.fullScreenApplicationContentRect );
window.setHidden( false );
window.orderFront();
window.makeKey();
window.backgroundColor = [ 1 , 1 , 1 , 1 ];
var mainView = new UIView();
window.setContentView( mainView );
var bounds = [0,0,window.bounds[2],20]
var delay = 4
var marquee = new Marquee( "Hello World", mainView, bounds, delay )
marquee.onStop = function() { marquee.start() }
marquee.start()

Well since the UIKit plugin does not provide Marquee constructor I had to write one myself and include it before using it in main.js.
But the good news is I wrote it in Javascript.

I made use of components already provided by the UIKit plugin namely UIScroller, UITextLabel, UIFrameAnimation and Animator.

Here's the trick.

A UITextLabel holds the text and using an animation it crosses the width of it's container view, a UIScroller.

The animation starts with the text label totally hidden beyond the right border of the scroller and stops when it totally disappears beyond the left border.

The delay passed to UIFrameAnimator should be the total time of the animation in seconds.

So that delay for the Marquee, the time taken by text in the marquee to cross the width of the scroller, had to be corrected before passing it to the animation constructor.
If you're interested here's the source.

// marquee.js
function Marquee(text, parent, bounds, delay, onStop) {
   var me = this
   var scroller = new UIScroller(bounds)
   var label = new UITextLabel([bounds[2], 0, bounds[2], bounds[3]])
   label.text = text
   scroller.addSubview(label)
   parent.addSubview(scroller)
   var startFrame = label.frame
   startFrame[2] = label.textSize[0]
   label.frame = startFrame
   this.delay = delay ? delay : 10
   this.onStop = onStop ? onStop : null
   var scroll
   var correctDelay = function(delay) {
      var w = scroller.bounds[2]
      return delay * (label.frame[2] + w) / w
   }
   this.start = function() {
      var endFrame = startFrame
      endFrame[0] = -endFrame[2]
      scroll = new UIFrameAnimation( label , 3, startFrame , endFrame )
      scroll.onStop = this.onStop
      Animator.addAnimation(scroll, correctDelay(me.delay), true)
   }
}

If you're interested in a more complete Marquee constructor check this one out.

// marquee.js
function Marquee(text, parent, bounds, delay, onStop) {
 var ana = this
 var parentView = parent ? parent : null
 bounds = bounds ? bounds : [0, 0, window.bounds[2], 20]
 var scroller = new UIScroller(bounds)
 scroller.backgroundColor = [ 0 , 0 , 0 , 0 ];
 scroller.setScrollingEnabled(false)
 var label = new UITextLabel([bounds[2], 0, bounds[2], bounds[3]])
 label.backgroundColor = [ 0 , 0 , 0 , 0 ];
 var fontSize = bounds[3] * 0.75
 fontSize = fontSize > 76 ? 76 : fontSize
 label.setFont(new Font("Trebuchet MS", 0, fontSize))
 label.color = [ 1 , 1 , 1 , 1 ]
 label.centerHorizontally = true
 scroller.addSubview(label)
 if (parentView)
  parentView.addSubview(scroller)
 var startFrame = label.frame
 var curve = 3
 this.delay = delay ? delay : 10 
 this.onStop = onStop ? onStop : null 
 var scroll
 var scrolling = false
 var updateSize = function() {
  startFrame[2] = label.textSize[0]
  label.frame = startFrame
 }
 this.setText = function(text)
 {
  label.text = text
  updateSize()
 }
 if (text)
  this.setText(text)
 var correctDelay = function(delay) {
  var w = scroller.bounds[2]
  return delay * (label.frame[2] + w) / w
 }
 this.start = function() {
  if (!scrolling) {
   var endFrame = startFrame
  endFrame[0] = -endFrame[2]
  scroll = new UIFrameAnimation( label ,
  curve , startFrame , endFrame )
  scroll.onStart = function() { 
   scrolling = true
  }
  scroll.onStop = function() { 
   scrolling = false
   label.frame = defaultFrame
   if (ana.onStop)   
    ana.onStop()
  }
  Animator.addAnimation(scroll,
  correctDelay(ana.delay), true)
  }
 }
 this.stop = function() {
  if (scrolling)
   Animator.stopAnimation(scroll)
 }
 this.getLabel = function () { return label }
 this.setParentView = function(parent) {
  if (parent) {
   if (parentView)
    scroller.removeFromSuperview()
   parent.addSubview(scroller)
   parentView = parent
  }
 }
 this.setBackgroundColor = function(color) {
  scroller.backgroundColor = color
 }
 this.setColor = function(color) {
  label.color = color
 }
 this.setFont = function(font) {
  label.setFont(font)
  updateSize()
 }
 this.removeFromSuperview = function() {
  scroller.removeFromSuperview()
 }
}