• Like
  • Save
What's great in Appcelerator Titanium 0.8
Upcoming SlideShare
Loading in...5
×
 

What's great in Appcelerator Titanium 0.8

on

  • 13,011 views

This presentation is the "visual release notes" to the latest Appcelerator Titanium 0.8 mobile and developer release. ...

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.

Statistics

Views

Total Views
13,011
Views on SlideShare
12,941
Embed Views
70

Actions

Likes
7
Downloads
106
Comments
0

3 Embeds 70

http://www.slideshare.net 68
http://www.mefeedia.com 1
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

What's great in Appcelerator Titanium 0.8 What's great in Appcelerator Titanium 0.8 Presentation Transcript

  • You can make an ____ app for that * and now Titanium easier with 0.8!
  • 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
  • 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
  • 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
  • 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
  • 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);
  • 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
  • Native Maps Support Map type examples: standard hybrid satellite
  • 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
  • Native Maps Support title rightButton leftButton pincolor subtitle
  • Native Maps Support Android Native Maps
  • Native Maps Support Showing users current location on map: - userLocation boolean value
  • 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
  • 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
  • Coverflow View (iPhone) New Coverflow View: Native coverflow view which supports images (local or remote) Supports swiping gestures, reflection, etc
  • 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);
  • 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.
  • 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;
  • 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
  • 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.
  • 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.
  • Table View Enhancements Complete native control Customized Grouped Customized TableView layout View
  • Table View Enhancements Custom TableView Search field prior to Example of search result search in search field
  • Table View Enhancements Custom TableView on Custom TableView on Example of TableView Android Android with search field
  • 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.
  • 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
  • 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!
  • Facebook Connect for Android Native support for Facebook Connect!
  • 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
  • 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.
  • 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!
  • 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!