18. September, 2011
Build an iPad app in a few hours.
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.
- Install Appcelerator Titanium Studio
- Update the SDK to 1.8
- Go through the Apple Certification Process to get a new private key, your certificate and a provisioning profile
- Setup a new project in Titanium Studio
- 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.
