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.

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

3. 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

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

8. Native Maps Support
Map type examples:
standard hybrid satellite

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

10. Native Maps Support
title
rightButton
leftButton
pincolor
subtitle

11. Native Maps Support
Android Native Maps

12. Native Maps Support
Showing users current location on map:
- userLocation boolean value

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 coverflow 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.

22. Table View Enhancements
Complete native control Customized Grouped Customized TableView
layout View

23. Table View Enhancements
Custom TableView Search field prior to Example of search result
search in search field

24. Table View Enhancements
Custom TableView on Custom TableView on Example of TableView
Android Android with search field

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!

28. Facebook Connect for Android
Native support for Facebook Connect!

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!