Developing native mobile applications using javascript in titanium appcelerator

1. TITANIUM
APPCELERATOR

2. ●
What is it?
Appcelerator Titanium is a platform for developing mobile, tablet and desktop
applications using web technologies.
●
Supports the following platforms:
- iPhone
- Android (since June 2009)
- iPad (since April 2010)
- BlackBerry (since April 2013 – still in beta)
- Tizen (April 2013)
- Windows, Mac and Linux (Desktop) (starting January 20, 2012, was
discontinued and became a separate, community-driven project. It is also
renamed to TideSDK )

3. ●
Titanium SDK
The Titanium SDK provides community developers with an unmatched ability
to create quality native, mobile web or rich hybrid applications to all platforms
from a single code base, using JavaScript. With over 5,000 APIs, Titanium allows
you to deliver an immersive user experience at a fraction of the time compared
with traditional native platforms, and without compromise.

4. PROS:
- Faster development of native applications, than writing in the native language
- Reuse 60% - 90% of development code when supporting multiple platforms
- No language barrier (iPhone – C , Android – Java)
- Modules (own market)
- over 5000 APIs avaliable
CONS:
- Some developers have reported that although working with Titanium gives fast
results, making Titanium well suited for prototyping, here are issues around
differences in behaviour of the API cross-platform, stability and memory
management
- Documentation could be improved

5. ●
Titanium IDE
- Eclipse-based
- Integrated mobile backend as service (MbaaS)
- On-device debugging
- MVC framework (Alloy)
- Easy mobile app deployment
- Advanced Code Assist

6. Exemplu standard:
var MapModule = require('ti.map');
var win = Titanium.UI.createWindow();
var mountainView = MapModule.createAnnotation({
latitude:37.390749,
longitude:-122.081651,
title:"Appcelerator Headquarters",
subtitle:'Mountain View, CA',
pincolor:MapModule.ANNOTATION_RED,
myid:1 // Custom property to uniquely identify this annotation.
});

7. var mapview = MapModule.createView({
mapType: MapModule.NORMAL_TYPE,
region: {latitude:33.74511, longitude:-84.38993,
latitudeDelta:0.01, longitudeDelta:0.01},
animate:true,
regionFit:true,
userLocation:true,
annotations:[mountainView]
});
win.add(mapview);
// Handle click events on any annotations on this map.
mapview.addEventListener('click', function(evt) {
Ti.API.info("Annotation " + evt.title + " clicked, id: " +
evt.annotation.myid);
});
win.open();

8. Exemplu Alloy XML Markup:
alloy.js:
// Loads the map module, which can be referenced by Alloy.Globals.Map
Alloy.Globals.Map = require('ti.map');
app/views/index.xml:
<Alloy>
<Window>
<!-- Use the Alloy.Globals.Map namespace to create a map module view -->
<View id="mapview" ns="Alloy.Globals.Map" onClick="report" />
</Window>
</Alloy>

9. app/controllers/index.js:
function report(evt) {
Ti.API.info("Annotation " + evt.title + " clicked, id: " + evt.annotation.myid);
}
// API calls to the map module need to use the Alloy.Globals.Map reference
var mountainView = Alloy.Globals.Map.createAnnotation({
latitude:37.390749,
longitude:-122.081651,
title:"Appcelerator Headquarters",
subtitle:'Mountain View, CA',
pincolor:Alloy.Globals.Map.ANNOTATION_RED,
myid:1 // Custom property to uniquely identify this annotation.
});

10. $.mapview.region = {
Latitude:33.74511,
Longitude:-84.38993,
LatitudeDelta:0.01,
LongitudeDelta:0.01
};
$.mapview.addAnnotation(mountainView);
$.index.open();