What's great in Appcelerator Titanium 0.8
- 1. You can make an
____
app for that
* and now Titanium easier with 0.8!
- 2. 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
- 4. 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) New Error Code
! {
! }
},
allowEditing:true,
mediaTypes: Titanium.Media.MEDIA_TYPE_VIDEO, Specify media type,
videoMaximumDuration:10000, duration in ms and
videoQuality:Titanium.Media.QUALITY_HIGH video quality
});
Media types can be single value or array of values
- 5. 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) New Error Code
! {
! }
},
allowEditing:true,
mediaTypes: Titanium.Media.MEDIA_TYPE_VIDEO, Specify media type,
videoMaximumDuration:10000, duration in ms and
videoQuality:Titanium.Media.QUALITY_HIGH video quality
});
Media types can be single value or array of values
- 6. 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);
- 7. Native Maps Support
Maps allow you to control a number of
configurable options.
Configuring the map type:
- mapType option on create
Titanium.Map.HYBRID_TYPE
Titanium.Map.SATELLITE_TYPE
Titanium.Map.STANDARD_TYPE
- mapview.setMapType(type) programatic API
- 9. Native Maps Support
Configuring the map region coordinates:
- region option on create (object with
key/values)
{latitude, longitude,
latitudeDelta, longitudeDelta}
- mapview.setLocation(obj) programatic API
- 13. Native Maps Support
Adding annotations (pins) to map:
array of objects with each
- annotations row having properties
{latitude,longitude,title,subtitle,pincolor,
animate,leftButton,rightButton}
annotations is property of Titanium.Map.createView
Titanium.Map.ANNOTATION_RED
Titanium.Map.ANNOTATION_GREEN
Titanium.Map.ANNOTATION_PURPLE
3 built-in pin colors
- 14. Native Maps Support
Maps support events: Click events are only
for annotation clicks
- click - with event properties:
title - title supplied in pin
source - click region (leftButton, rightButton,
etc)
- regionChanged - with event properties:
longitude
Fired when the region
latitude of the map changes
- 15. Coverflow View (iPhone)
New Coverflow View:
Native cover��ow view
which supports images
(local or remote)
Supports swiping
gestures, reflection, etc
- 16. Coverflow View (iPhone)
Create view similar to other views:
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.
Titanium.UI.currentWindow.addView(view);
Titanium.UI.currentWindow.showView(view);
- 17. Coverflow View (iPhone)
Images can be changed dynamically:
view.setURL(index,url);
And view fires click events:
view.addEventListener('click',function(evt){
! ! ! ! ! !
// evt.index is the index of image clicked
});
And ‘change’ events when an image is changed.
- 18. Coverflow View (iPhone)
Coverflow instance has selected property:
view.selected
Which indicates which image is selected (or the
main visible image)
You can also set the selected to change it:
view.selected = 2;
- 19. Push Notifications (iPhone)
Device support for push notifications:
Titanium.Network.registerForPushNotifications({
types:[
Titanium.Network.NOTIFICATION_TYPE_BADGE, type of
Titanium.Network.NOTIFICATION_TYPE_ALERT,! notifications you
Titanium.Network.NOTIFICATION_TYPE_SOUND
want
],
success: function() {deviceid},
error: function() {}, success is invoked with your device id
callback: function(e)
that needs to be sent to Apple APNS
{
}
});
callback which is called when a
notification is received
- 20. 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.
- 21. 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.
- 25. 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:
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'}
]
};
This tells the layout engine how to construct the layout region.
- 26. Table View templating
Second, apply the template mapping in the data object:
each data row can override spec values too!
var data = [
{photo:'images/fred.png', user:'Fred Smith'},
{photo:'images/lucy.png', user:'Lucy Smith'}
];
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: use CSS properties to specify layout -
similar to relative positioning in CSS
{type:'image', left:10, top:5, width:50, height:50, name:'photo'},
types supported in 0.8 are
name property maps to the
image, text -- more types will
property in each data row
be supported as needed
- 27. Table View templating
Lastly, apply the template when you create your Table View:
var tv = Titanium.UI.createTableView({
! template:template,
! data:data
}, function(eventObject)
{
});
This will inform the native layer that it should use your
template specification to render each row.
native templating will be expanded in 0.9 to include more components
and a pure “native” view -- for increased performance!
- 29. 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
- 30. 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.
- 31. 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!
- 32. 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 info@appcelerator.com to get
involved!