Titanium é um framework open source que permite construir aplicações móveis e desktop nativas usando JavaScript, HTML e CSS. Ele suporta plataformas como iOS, Android, BlackBerry e Windows e permite reuso de código entre plataformas. O framework fornece APIs para elementos de interface, armazenamento local, multimídia e serviços como geolocalização e mapas.
1. TITANIUM
Eric Cavalcanti
ecavalcanti@gmail.com
@ericoc
2. Apoiada pela Storm Ventures, Sierra Ventures e eBay.
Appcelerator Inc. foi fundada em 2006 por especialista em
desenvolvimento web.
3. O QUE É O TITANIUM?
Titanium é um framework open source para construir
aplicações móveis (ou desktop) nativas usando tecnologias
web abertas (JavaScript - opcionalmente HTML e CSS)
4. POR QUE NATIVA?
O usuário já está acostumado em utilizar aplicações nativas em
seu dispositivo
O tempo de resposta de uma UI nativa é menor
Aumentamos consideravelmente a probabilidade de aprovação
por lojas mais criteriosas
5. PLATAFORMA SUPORTADAS
Desktop
Win 32
Mac OS X (Intel)
Linux
Mobile
iPhone/iPod (3.1 ou mais recente)
Android (1.6 ou mais recente)
iPad
BlackBerry
6. LICENÇA
SDKs e Titanium Studio – open source e free
Licença Apache 2.0
Serviços comerciais de treinamento e suporte
Outros serviços comerciais como o Analytics
13. FUNDAMENTOS
Uma aplicação Titanium é um programa JavaScript que é
interpretado em tempo de execução no dispositivo
Não roda dentro de um browser
Webkit JavaScriptCore no iOS
Rhino no Android / BlackBerry (em breve V8 no Android)
14. CROSS-PLATFORM
Cross-platform != “Write Once, Run Everywhere”
100% de reuso de código não visual
Boa parte do código de UI é reusada, dependendo do design
Melhor experiência do usuário em cada plataforma
Titanium é “Write Once, Adapt Everywhere”
15. TITANIUM FEATURES
Native User Experience Multimedia
Native performance + Native UI Camera, video camera,
(tables, animations, gestures…etc.) streaming/device audio/video
Location-based services Analytics
Augmented reality, geo-location, Custom analytics baked into every
compass, native maps application, track usage patterns
and adoption
Social sharing Titanium+Plus
Authenticated access to Facebook, Encrypted database, ecommerce,
Twitter, Yahoo YQL. ads, barcode scanners, custom
Native email/address book analytics, in-app purchase
Data Development tools
Local SQLite data store, web Create, test, and publish your app
services, lightweight key/value using the same tools across
store platforms
17. PRÉ-REQUISITOS
Mac OS X 10.6 (Snow Leopard) ou 10.7 (Lion)
Windows XP (todas edições, exceto Starter Edition)
Windows 7
Ubuntu Linux 10.04
iOS SDK
Android SDK
18. TITANIUM STUDIO E SDKS
Titanium Studio é uma IDE baseada no eclipse que
interage com vários scripts Python contidos no
Titanium SDK
Os scripts interagem com
as ferramentas nativas de
cada plataforma
22. RECURSOS ESPECÍFICOS DE
CADA PLATAFORMA
Android: intents, background services, hardware menu button
iOS: routes in map, pre-built animations, custom fonts, Cocoa UI
APIs específicas de cada plataforma são implementadas em
namespace específicos para a plataforma.
Ex. Titanium.Android.Menu
25. PARA DESENVOLVEDORES
WEB...
Uma “window” seria similar a uma “página”
Uma “view” seria similar a uma “div”
O namespace TI.UI fornece vários componentes visuais (buttons,
text field, pickers, maps, scroll views)
27. TABLEVIEW
var win1 = Titanium.UI.createWindow({
" backgroundColor:"#fff"
});
var dados = [
" " {title:"Row 1 - simple row"},
" " {title:"Row 2 - with child", hasChild:true},
" " {title:"Row 3 - with detail", hasDetail:true},
" " {title:"Row 4 - with check", hasCheck:true},
" " {title:"Row 5 - red background", backgroundColor:"#f00"}
" ];"
var table1 = Titanium.UI.createTableView({
" data:dados
});
win1.add(table1);
win1.open();
28. TABELAS AGRUPADAS
var table1 = Titanium.UI.createTableView({
" style:Titanium.UI.iPhone.TableViewStyle.GROUPED
});
var section1 = Titanium.UI.createTableViewSection();
section1.headerTitle = "Hello";
var row1 = Titanium.UI.createTableViewRow({title:"Hello 1"});
var row2 = Titanium.UI.createTableViewRow({title:"Hello 2"});
section1.add(row1);
section1.add(row2);
var section2 = Titanium.UI.createTableViewSection();
section2.headerTitle = "Hello2";
var row3 = Titanium.UI.createTableViewRow({title:"Hello 3"});
var row4 = Titanium.UI.createTableViewRow({title:"Hello 4"});
section2.add(row3);
section2.add(row4);
table1.setData([section1,section2]);
29. TABLEVIEW EDITÁVEIS
SOMENTE NO IOS
// create table view
var tableview = Titanium.UI.createTableView({
data:data,
editable:true,
top:50
});
tableview.editing = true;
tableview.editing = false;
30. SCROLLABLEVIEW
Permite o scroll horizontal de uma ou mais views através do
gesto slider
var image1 = Ti.UI.createImageView({
image:'image1.jpg'
});
var image2 = Ti.UI.createImageView({
image:'image2.jpg'
});
var image3 = Ti.UI.createImageView({
image:'image3.jpg'
});
var win = Ti.UI.createWindow({
backgroundColor:'black'
});
var scrollView = Ti.UI.createScrollableView({
views:[image1, image2, image3],
showPagingControl:true,
pagingControlHeight:30
});
win.add(scrollView);
win.open();
35. DADOS LOCAIS
Titanium.App.Properties
Ideal para armazenar configurações da aplicação
Titanium.Filesystem
Utilizado para manipulação do sistema de arquivos
Titanium.Database
Permite o acesso local a banco de dados SQLite
39. API DE ÁUDIO
Executa arquivo de som local ou remoto (Sound)
Suporte a stream de áudio (Audio Player)
Suporte a gravação de áudio (no android via intent)
40. EXECUTANDO
AUDIO
var win = Ti.UI.createWindow({
backgroundColor:'#FFF'
})
var sound = Ti.Media.createSound({
url:'music/u2.mp3'
});
var button = Ti.UI.createButton({
title:'Play Sound',
width:250,
height:35
});
button.addEventListener('click', function(e){
sound.play();
})
win.add(button);
win.open();
41. API DE VÍDEO
Executa arquivos de vídeo local
Suporte a stream de vídeo (somente no iOS)
Suporte a captura de vídeo (no android via intent)
42. EXECUTANDO
VÍDEO
var win = Ti.UI.createWindow({
backgroundColor:'#000'
});
var video = Ti.Media.createVideoPlayer({
url:'video/movie.mp4',
backgroundColor:'#000'
});
// No android você não adiciona o video player na
window
if (Ti.Platform.osname != 'android') {
win.add(video);
}
win.open();
video.play();