what's great in appcelerator titanium 0.8
DESCRIPTION
This presentation is the "visual release notes" to the latest Appcelerator Titanium 0.8 mobile and developer release. Titanium allows you to build native iphone and android mobile application using web technologies such as Javascript.TRANSCRIPT
![Page 1: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/1.jpg)
You can make an app for that
____
* and now Titanium easier with 0.8!
![Page 2: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/2.jpg)
Introducing Titanium Mobile 0.8
Major feature areas:
✓Support for iPhone Video Recording (3GS)
✓Native Maps Support (iPhone and Android)
✓Native Coverflow View (iPhone Only)
✓Push Notifications (iPhone Only)
✓New Table View Enhancements
✓Facebook Connect for Android
✓Embedded SQLite Databases
![Page 3: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/3.jpg)
Titanium Developer 0.8
Enhanced Android emulator support for testing on multiple releases, skins and 1.6/2.0 support
select SDK version
select Screen
![Page 4: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/4.jpg)
Video Recording Support
Uses same API as Camera with expanded options.
Titanium.Media.showCamera({success:function(media,details) {},cancel:function() {},error:function(error) {
! if (error.code == Titanium.Media.NO_VIDEO)! {! }
},allowEditing:true,mediaTypes: Titanium.Media.MEDIA_TYPE_VIDEO,videoMaximumDuration:10000,videoQuality:Titanium.Media.QUALITY_HIGH
});
New Error Code
Specify media type, duration in ms and video quality
Media types can be single value or array of values
![Page 5: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/5.jpg)
Video Recording Support
Uses same API as Camera with expanded options.
Titanium.Media.showCamera({success:function(media,details) {},cancel:function() {},error:function(error) {
! if (error.code == Titanium.Media.NO_VIDEO)! {! }
},allowEditing:true,mediaTypes: Titanium.Media.MEDIA_TYPE_VIDEO,videoMaximumDuration:10000,videoQuality:Titanium.Media.QUALITY_HIGH
});
New Error Code
Specify media type, duration in ms and video quality
Media types can be single value or array of values
![Page 6: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/6.jpg)
Native Maps Support
Support for creating a new native Map view.
var mapview = Titanium.Map.createView({mapType: Titanium.Map.HYBRID_TYPE
});
Maps are a native view similar to TableView, GroupedView, WebView, etc.
Once you create a view, you need to add it to the window and then show it.
Titanium.UI.currentWindow.addView(mapview);Titanium.UI.currentWindow.showView(mapview);
![Page 7: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/7.jpg)
Native Maps Support
Maps allow you to control a number of configurable options. Configuring the map type:- mapType
Titanium.Map.HYBRID_TYPETitanium.Map.SATELLITE_TYPETitanium.Map.STANDARD_TYPE
- mapview.setMapType(type)
option on create
programatic API
![Page 8: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/8.jpg)
Native Maps Support
Map type examples:
standard hybrid satellite
![Page 9: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/9.jpg)
Native Maps Support
Configuring the map region coordinates:- region
{latitude, longitude, latitudeDelta, longitudeDelta}
- mapview.setLocation(obj)
option on create (object with key/values)
programatic API
![Page 10: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/10.jpg)
Native Maps Support
leftButton
title
subtitle
rightButton
pincolor
![Page 11: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/11.jpg)
Native Maps SupportAndroid Native Maps
![Page 12: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/12.jpg)
Native Maps Support
Showing users current location on map:- userLocation boolean value
![Page 13: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/13.jpg)
Native Maps Support
Adding annotations (pins) to map:- annotations
{latitude,longitude,title,subtitle,pincolor, animate,leftButton,rightButton}
Titanium.Map.ANNOTATION_REDTitanium.Map.ANNOTATION_GREENTitanium.Map.ANNOTATION_PURPLE
array of objects with each row having properties
annotations is property of Titanium.Map.createView
3 built-in pin colors
![Page 14: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/14.jpg)
Native Maps Support
Maps support events:- click - with event properties:
title - title supplied in pinsource - click region (leftButton, rightButton, etc)
- regionChanged - with event properties:longitudelatitude
Click events are only for annotation clicks
Fired when the region of the map changes
![Page 15: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/15.jpg)
Coverflow View (iPhone)
New Coverflow View:
Native coverflow view which supports images (local or remote)
Supports swiping gestures, reflection, etc
![Page 16: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/16.jpg)
Coverflow View (iPhone)
Create view similar to other views:
Titanium.UI.currentWindow.addView(view);Titanium.UI.currentWindow.showView(view);
var view = Titanium.UI.createCoverFlowView({images:images,backgroundColor:'#000'
});
View takes array of images and optional backgroundColor
Once you create a view, you need to add it to the window and then show it.
![Page 17: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/17.jpg)
Coverflow View (iPhone)
Images can be changed dynamically:
And view fires click events:
And ‘change’ events when an image is changed.
view.addEventListener('click',function(evt){! ! ! ! ! !// evt.index is the index of image clicked
});
view.setURL(index,url);
![Page 18: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/18.jpg)
Coverflow View (iPhone)
Coverflow instance has selected property:
Which indicates which image is selected (or the main visible image)
You can also set the selected to change it:
view.selected
view.selected = 2;
![Page 19: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/19.jpg)
Push Notifications (iPhone)
Device support for push notifications:
Titanium.Network.registerForPushNotifications({types:[
Titanium.Network.NOTIFICATION_TYPE_BADGE,Titanium.Network.NOTIFICATION_TYPE_ALERT,!Titanium.Network.NOTIFICATION_TYPE_SOUND
],success: function() {deviceid},error: function() {},callback: function(e) {}
});
type of notifications you want
callback which is called when a notification is received
success is invoked with your device id that needs to be sent to Apple APNS
![Page 20: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/20.jpg)
Push Notifications (iPhone)
Current limitations:- You will need to take the client device ID from the success call and store it remotely (via web service call) to use when pushing notifications to Apple APNS- You will need to push your own events to Apple APNS
Appcelerator will be offering a fully integrated push service in the near future. In the meantime, we recommend Urban Airship.
![Page 21: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/21.jpg)
Table View Enhancements
So many native improvements:- New native render template capability- Support for native search field and searching capabilities- Support for complete control of background, cells, etc.
![Page 22: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/22.jpg)
Table View Enhancements
Complete native control layout
Customized Grouped View
Customized TableView
![Page 23: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/23.jpg)
Table View Enhancements
Custom TableView Search field prior to search
Example of search result in search field
![Page 24: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/24.jpg)
Table View Enhancements
Custom TableView on Android
Custom TableView on Android
Example of TableView with search field
![Page 25: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/25.jpg)
Table View templating
There is a new native templating feature that’s modeled after CSS for layout. This provides high performance native rendering.
First create a “template” for the layout specification:
This tells the layout engine how to construct the layout region.
var template = {selectedBackgroundColor:'#fff',backgroundColor:'#fff',rowHeight:100,layout:[
{type:'image', left:10, top:5, width:50, height:50, name:'photo'},{type:'text', fontSize:16, fontWeight:'bold', left:70, top:2, width:200, height:30, color:'#576996', name:'user'}
]};
![Page 26: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/26.jpg)
Table View templating
Second, apply the template mapping in the data object:
In each data row, you map data properties to the names you specified in your template. In the above example, photo will maps to the spec:
var data = [{photo:'images/fred.png', user:'Fred Smith'},{photo:'images/lucy.png', user:'Lucy Smith'}
];
{type:'image', left:10, top:5, width:50, height:50, name:'photo'},
name property maps to the property in each data row
types supported in 0.8 are image, text -- more types will be supported as needed
use CSS properties to specify layout - similar to relative positioning in CSS
each data row can override spec values too!
![Page 27: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/27.jpg)
Table View templating
Lastly, apply the template when you create your Table View:
This will inform the native layer that it should use your template specification to render each row.
var tv = Titanium.UI.createTableView({! template:template,! data:data}, function(eventObject){});
native templating will be expanded in 0.9 to include more components and a pure “native” view -- for increased performance!
![Page 28: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/28.jpg)
Facebook Connect for AndroidNative support for Facebook Connect!
![Page 29: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/29.jpg)
Custom Keyboard Toolbar For textfields and textareas, you can now specify a keyboard toolbar to show on top of your keyboard. (iPhone only)
var textfield = Titanium.UI.createTextField({id:'textfield',height:30,keyboardToolbar:[clear,flexSpace,prev,fixSpace,next],keyboardToolbarColor:'#900',keyboardToolbarHeight: 40,width:300
});
Normal buttons created via Titanium.UI.createButton
![Page 30: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/30.jpg)
Pre-load your Database With 0.8, you can now install your pre-loaded database into your app using the following command:
var db = Titanium.Database.install('testdb.db','quotes');
If your database is already installed, this will simply return an instance to it. So it’s safe to call each time.
![Page 31: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/31.jpg)
Beyond 0.8 to 0.9
Our main objective for 0.9 is going to be focus on performance, optimization, performance and optimization.
We have a number of very specific performance optimizations we’re ready to make:
- loading performance- on-going rendering speed- compiler speedups and detection and removal of dead code- reduction of need for extra web views- faster javascript execution
0.9 is targeted for end of year - 2009 - just in time for new years hacking!
![Page 32: What's great in Appcelerator Titanium 0.8](https://reader033.vdocuments.site/reader033/viewer/2022052822/554f5e73b4c9058a148b45f2/html5/thumbnails/32.jpg)
We need your help !
- Please, please, please report issues and problems to support.appcelerator.net -- we can’t fix it if we don’t know about it!
- If we’re missing something or you can’t use Titanium because of something, please tell us. We want to support it if we can.
- Please tell everyone about Appcelerator and follow us @appcelerator on twitter!
If you’re interested in contributing to Appcelerator, please check out http://github.com/appcelerator and send us an email at [email protected] to get involved!