18. September, 2011

Build an iPad app in a few hours.

Von webfraggle

The challenge:
„We need a small iPad app. Just four buttons, every button opens a video. Today!“
I thought, „OK“. I had only a freshly installed Mac and an Apple developer account.

  1. Install Appcelerator Titanium Studio
  2. Update the SDK to 1.8
  3. Go through the Apple Certification Process to get a new private key, your certificate and a provisioning profile
  4. Setup a new project in Titanium Studio
  5. Code and test the app

And I love Appcelerator Titanium because these few lines had done the job:

Titanium.UI.setBackgroundColor('#000');
Titanium.UI.orientation = Titanium.UI.LANDSCAPE_LEFT;
win = Titanium.UI.createWindow({  
    title:'win1',
    backgroundColor:'#fff',
    navBarHidden:true,
    fullscreen:true
});
win.orientationModes = [ Titanium.UI.LANDSCAPE_LEFT ];

var videoPlayer = Titanium.Media.createVideoPlayer({
      backgroundColor:'#000',
      movieControlMode:Titanium.Media.VIDEO_CONTROL_FULLSCREEN,
      scalingMode:Titanium.Media.VIDEO_SCALING_ASPECT_FIT,
      autoplay:false,
      visible:false
});

videoPlayer.addEventListener('complete',function(e)
{
		videoPlayer.stop();
		videoPlayer.hide();
		Ti.UI.iPhone.hideStatusBar();
		win.hideNavBar();
});

var bg = Titanium.UI.createImageView({image:'img/bg.png',top:0,left:0,width:1024,height:768});
win.add(bg);

var button = Titanium.UI.createButton({
   backgroundImage:'img/btn.png',
   width: 442,height:228,top:155,left:65
});

var button2 = Titanium.UI.createButton({
   backgroundImage:'img/btn2.png',
   width: 442,height:228,top:155,left:519
});

var button3 = Titanium.UI.createButton({
   backgroundImage:'img/btn3.png',
   width: 442,height:228,top:398,left:65
});
var button4 = Titanium.UI.createButton({
   backgroundImage:'img/btn4.png',
   width: 442,height:228,top:398,left:519
});

button.addEventListener('click',buttonClicked);
button2.addEventListener('click',buttonClicked);
button3.addEventListener('click',buttonClicked);
button4.addEventListener('click',buttonClicked);
win.add(button);
win.add(button2);
win.add(button3);
win.add(button4);
win.add(videoPlayer);
win.open();
Ti.UI.iPhone.hideStatusBar();
win.hideNavBar();

function buttonClicked(e)
{
   var videoUrl = "";
   switch (e.source)
   {
   		case button:
   			videoUrl = 'videos/video01.mp4';
   		break;
   		case button2:
   			videoUrl = 'videos/video02.mp4';
   		break;
   		case button3:
   			videoUrl = 'videos/video03.mp4';
   		break;
   		case button4:
   			videoUrl = 'videos/video04.mp4';
   		break;
   }
	showVideo(videoUrl);
}

function showVideo(w)
{
	videoPlayer.setUrl(w);
	videoPlayer.show();
	videoPlayer.play();
}

And the whole job was only done in about two hours.