Easy Application Development for the iPhone

20Nov

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 can be like 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 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; this should start its own web server that you can log onto 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 from 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.
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 the delay for the Marquee, the time taken by text in the marquee to cross the width of the scroller, has 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()
    }
}

Comments

1 software developers wrote: on Tuesday, October 27, 2009:

Quite inspiring,

Some great advice here for developemnt on the iphone,

Thanks for sharing this,

Keep up the good work

eSpace

Blogs