Slides antigos do meu curso de Desenvolvendo aplicações Adobe AIR para Android

1. Desenvolvendo aplicações
Adobe AIR para Android
Eric Cavalcanti
ecavalcanti@gmail.com
@ericoc

2. O que é o Adobe AIR?
Cross-Operation System
Runtime HTML JavaScript Flash Flex
Desktop Smartphones Tablet TV

3. Flash Player x AIR
Ambientes RIA
Flash Browser
Instalado
Air
Desktop
Mobile
TV

4. Flash Player Adobe AIR
Conteúdo dentro do Aplicações Móveis
browser
Games,Vídeo API nativa, funcionalidades
extras
Distribuído na Web como Distribuído para um target
um arquivo SWF específico

5. Flash Platform
Desktop
Netbooks
Android
RIM PlayBook
Apple iOS
Google TV
Televisions
WebOS

6. Conceitos chaves
Operações assíncronas
Mono-Thread
Baseado em vetor
OOP
HTTP, XML, JSON, WebService, AMF...

7. Vetor x Bitmap

8. Adobe AIR para dispositivos
móveis
Aplicações nativas
Android APK Packages
iOS IPA packages
BlackBerry Playbook (beta)

9. AIR para Android
Android 2.2 (Froyo) ou superior
Runtime baixado automaticamente
Adobe Flash Professional CS5.5
Adobe Flash Builder 4.5

10. Recursos
• Camera and microphone
• Accelerometer
• GPS
• StageWebView
• Multitouch and gestures
• Screen orientation / full-screen
• Phone/SMS/e-mail/browser/Android Market integration
• Session cache support restore app state
• Hardware buttons
• Local databases SQLite

11. AIR para iOS
iOS 3 Air SDK 2.0
iOS 4 + Air SDK 2.6

12. E se o Adobe AIR não
estiver instalado?

13. Compilação
.fla
ActionScript .swf
.as files Compiler ActionScript
Bytecode
Project
Files

14. Packaging
apk
adt
ipa

15. Execução
apk
apk
ipa
ipa

16. Ambiente de Desenvolvimento
Flash Professional CS5.5
http://www.adobe.com/products/flash.html
Adobe Flash Builder 4.5
http://www.adobe.com/products/flash-builder.html
Android SDK
http://developer.android.com/sdk/
AIR SDK
http://www.adobe.com/products/air/sdk/

17. AIR SDK
AIR Developer Tool (ADT)
Ferramenta de multi-propósito. Cria pacotes apk, apk-emulator ou apk-debug, certificados
auto-assinados, remove, instala e executa o aplicativo no dispositivo.
AIR Debug Launcher (ADL)
Usado para depurar a aplicação durante o desenvolvimento.
AIR Runtime
Usado para executar e testar a aplicação durante o desenvolvimento, antes de instalar a
aplicação no dispositivo.
Frameworks
Inclui todas as core libraries.

18. Listando os dispositivos
> adb devices
List of devices attached
HT06CP910453
device

19. Criando um dispositivo virtual
Android

20. Instalando o Adobe Air
no Emulador
> adb install Runtime.apk

21. Instalando o Adobe Air
no Dispositivo
> adb install Runtime.apk

22. Configurando o
dispositivo

23. ActionScript 3

24. Declarando variáveis
var nome : String;
var valor : Number;
var cliente : Cliente;

25. for
for (var i:int = 0; i < 5; i++)
{
trace(i);
}

26. for each..in
var myArray:Array = ["one", "two", "three"];
for each (var item in myArray)
{
trace(item);
}
// output:
// one
// two
// three

27. while
var i:int = 0;
while (i < 5)
{
trace(i);
i++;
}

28. do..while
var i:int = 5;
do
{
trace(i);
i++;
} while (i < 5);

29. Classes
package org.firescrum
{
public class Product {
public var name:String;
public var description:String;
public var creationDate:Date;
}
}

30. Métodos
public function soma(num1:int, num2:int):int
{
var resultado:int = num1 + num2;
return resultado;
}

31. Métodos
public function log(mensagem:String):void
{
trace("Log: " + mensagem);
}

32. Cast
var quantityField:String = "3";
var quantity:int = int(quantityField);

33. Eventos
myObject.addEventListener(Event, eventListenerFunction);
myButton.addEventListener(MouseEvent.CLICK,
myClickReaction);
function myClickReaction (e:MouseEvent):void{
trace("I was clicked!");
}

34. Tipos de Projetos Adobe
AIR para dispositivos móveis
Tipo Ferramentas
Flash Professional, Flash
ActionScript Project
Builder, FlashDevelop
Flex Project Flash Builder

35. Flash Professional CS5.5

36. Flash CS5.5 Air para Android
.apk

37. Adobe Flex Framework

38. Flex Slider

39. Flex Slider

40. Flex Hero
Flash Builder Burrito

41. Flash Builder 4.5

42. Flex Mobile Project
Um ActionScript Mobile Project também é um
tipo especial de projeto AIR

43. Auto Orientação
<initialWindow>
<autoOrients>true</autoOrients>
</initialWindow>
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

44. Hello World com
ActionScript Mobile
Project

45. Flex Mobile Project
Um Flex Mobile Project é um tipo especial de
projeto AIR

46. Flex Mobile Project

47. Hello World com Flex
Mobile Project

48. Compilação
ActionScript .swf
ActionScript
Compiler Bytecode
Project
Files

49. Toques e Gestos

50. Eventos do Mouse
MouseEvent
disparados em um click ou toque na tela

51. Eventos de Toque
TouchEvent
disparados quando um ou mais dedos tocam na tela

52. Eventos de Toque
Evento Descrição
TOUCH_BEGIN Inicio de uma ação de toque simples
TOUCH_END Fim de uma ação de toque simples
TOUCH_MOVE Movimento de toque simples
TOUCH_OUT Tocando fora do objeto
TOUCH_OVER Tocando sobre um objeto
TOUCH_ROLL_OVER Passando o dedo sobre o objeto
Ao sair do objeto quando estiver passando o
TOUCH_ROLL_OUT dedo
TOUCH_TAP Toque simples

53. Eventos de Gestos
GestureEvent
disparados quando há uma combinação de eventos de toques que também
suportam coisas como zoom e rotação

54. Eventos de Gestos
Evento Descrição
TransformGestureEvent.GESTURE
Toque com múltiplos dedos, pressionar, arrastar
_PAN
TransformGestureEvent.GESTURE
Rotação com múltiplos dedos
_ROTATE
TransformGestureEvent.GESTURE Arrasto da esquerda para direita, direita para
_SWIPE esquerda, baixo para cima, cima para baixo
TransformGestureEvent.GESTURE
Movimento pinça abrindo ou fechando
_ZOOM
PressAndTapGestureEvent
Pressione com um dedo e toque simples com outro
.GESTURE_PRESS_AND_TAP
GestureEvent.GESTURE_TWO_FI
Toque com dois dedos
NGER_TAP

55. Quantidade máxima de toques
simultâneos suportados pelo
dispositivo
Multitouch.maxTounchPoints

56. Ativando o suporte a toques
e gestos
Multitouch.inputMode = MultitouchInputMode.NONE;
Multitouch.inputMode = MultitouchInputMode. TOUCH_POINT;
Multitouch.inputMode = MultitouchInputMode.GESTURE;

57. Manipulando toques
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
sprite.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
function onTouchBegin(event:TouchEvent) {
trace("touch begin" + event.touchPointID);
}
function onTouchMove(event:TouchEvent) {
trace("touch move" + event.touchPointID);
}
function onTouchEnd(event:TouchEvent) {
trace("touch end" + event.touchPointID);
}

58. Gestos suportado
var gestures:Vector.<string> = Multitouch.supportedGestures;

59. Manipulando gestos
Multitouch.inputMode = MultitouchInputMode.GESTURE;
sprite.addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomHandler);
sprite.addEventListener(TransformGestureEvent.GESTURE_PAN, panHandler);
private function zoomHandler(event:TransformGestureEvent):void
{
var sprite:Sprite = event.target as Sprite;
sprite.scaleX *= event.scaleX;
sprite.scaleY *= event.scaleY;
}
private function panHandler(event:TransformGestureEvent):void
{
var sprite:Sprite = event.target as Sprite;
sprite.x += event.offsetX;
sprite.y += event.offsetY;
}

60. Demo

61. Acelerômetro

62. Utilizando o Acelerômetro
if (Accelerometer.isSupported)
{
var accel:Accelerometer = new Accelerometer();
accel.setRequestedUpdateInterval(200);
accel.addEventListener(Accelerometer.UPDATE, updateHandler);
}
function updateHandler(e:AccelerometerEvent):void {
e.accelerationX;
e.accelerationY;
e.accelerationZ;
e.timestamp;
}

63. Demo

64. Realizando chamadas
var request:URLRequest = new URLRequest
(“tel:812-555-1212”);
navigateToURL(request);

65. Abrindo o browser
var request:URLRequest = new URLRequest
(“http://www.google.com.br”);
navigateToURL(request);

66. Enviando SMS
var request:URLRequest = new URLRequest
(“sms:812-555-1212”);
navigateToURL(request);

67. Enviando E-mail
var request:URLRequest = new URLRequest
(“mailto:myEmailAdress@gmail.com?
subject=GeneratedMail&body=SomeText”);
navigateToURL(request);

68. Demo

69. Geolocalização

70. Utilizando a Geolocalização
if (Geolocation.isSupported)
{
var geo:Geolocation = new Geolocation();
geo.addEventListener(GeolocationEvent.UPDATE, updateHandler);
geo.setRequestedUpdateInverval(1000);
}
function updateHandler(e:GeolocationEvent):void {
e.latitude;
e.longitude;
e.altitude;
e.horizontalAccuracy;
e.verticalAccuracy;
e.speed;
e.heading;
e.timestamp;
}

71. Demo

72. Câmera

73. Utilizando a classe CameraUI
if (CameraUI.isSupported)
{
var cam:CameraUI = new CameraUI();
cam.addEventListener(MediaEvent.COMPLETE, completeHandler);
cam.launch(MediaType.IMAGE);
}
function completeHandler(e:MediaEvent):void {
event.data.file.url;
}

74. Demo

75. Armazenamento
File.ApplicationDirectory
Diretório com permissão para somente leitura onde sua aplicação e assets são instalados
File.ApplicationStorageDirectory
Diretório com permissão para leitura e escrita alocado para armazenar informações da sua
aplicação. Deve ser usado para pequenas informações, como preferências da aplicação. Se sua
aplicação for removida os dados são excluídos.
File.userDirectory
Utiliza o armazenamento externo SD. Use-o para armazenar grande quantidade de dados
como imagens, vídeos e arquivos temporários. Crie o diretório com o nome da sua aplicação
para não conflitar com outras aplicações. Não são excluídos quando a aplicação é removida.
<uses-permission android:name=
"android.permission.WRITE_EXTERNAL_STORAGE" />

76. Armazenamento
Local SharedObject
Esta é um simples e conveniente abordagem para armazenar um
pequena quantidade de dados no dispositivo.
Máximo de 100k
Similar ao conceito de cookies do browser
(sem expirar)

77. Local SharedObject
(Escrevendo)
var so:SharedObject = SharedObject.getLocal("MyApp");
so.data.nome = "Eric";
so.data.sobrenome = "Cavalcanti";
so.flush();

78. Local SharedObject
(Lendo)
var so:SharedObject = SharedObject.getLocal("MyApp");
txtNome.text = so.data.nome;
txtSobrenome.text = so.data.sobrenome;

79. Demo

80. Escrevendo Arquivo
var folder:File = File.applicationStorageDirectory.resolvePath
("tecdam");
if (!folder.exists) {
folder.createDirectory();
}
var file:File = folder.resolvePath("hello.txt");
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.WRITE);
fileStream.writeUTFBytes("Adobe AIR");
fileStream.close();

81. Lendo um Arquivo
var file:File = File.applicationStorageDirectory.resolvePath("tecdam/
hello.txt");
if (!file.exists) {
return;
}
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.READ);
var texto:String = fileStream.readUTFBytes(fileStream.bytesAvailable);
fileStream.close();
trace(texto); // Adobe AIR

82. Excluindo arquivo e
diretório
// Excluindo um arquivo
var file:File = File.applicationStorageDirectory.resolvePath
("tecdam/hello.txt");
if (file.exists) {
file.deleteFile();
}
// Excluindo um diretório
var folder:File = File.applicationStorageDirectory.resolvePath
("tecdam");
folder.deleteDirectory(true);

83. SQLite
Criando o banco de dados
function createDatabase():void {
var file:File = File.applicationStorageDirectory.resolvePath
("myData.db");
if (file.exists) {
trace("I already exist, ready to be used");
} else {
trace("I did not exist, now I am created");
}
}

84. SQLite
Conectando com o banco de dados
var connection:SQLConnection;
connection = new SQLConnection();
try {
connection.open(file);
trace("connection opened");
} catch(error:Error) {
trace(error.message);
}

85. SQLite
Criando uma tabela
var statement:SQLStatement = new SQLStatement();
statement.sqlConnection = connection;
var request:String =
"CREATE TABLE IF NOT EXISTS geography ("
+ "id INTEGER PRIMARY KEY AUTOINCREMENT, country TEXT, city
TEXT )";
statement.text = request;
try {
statement.execute();
} catch(error:Error) {
trace(error.message);
}

86. SQLite
Adicionando, editando ou removendo dados
var statement:SQLStatement = new SQLStatement();
statement.sqlConnection = connection;
var insert:String =
"INSERT INTO geography (country, city) VALUES ('France',
'Paris')";
statement.text = insert;
try {
statement.execute();
} catch(error:Error) {
trace(error.message);
}

87. SQLite
Utilizando parâmetros
var insert:String = "INSERT INTO geography (country, city)
VALUES (?, ?)";
statement.text = insert;
statement.parameters[0] = object.country;
statement.parameters[1] = object.city;
var insert:String = "INSERT INTO geography (country, city)
VALUES (:co, :ci)";
statement.text = insert;
statement.parameters[":co"] = object.country;
statement.parameters[":ci"] = object.city;

88. SQLite
Realizando consultas
var statement:SQLStatement = new SQLStatement();
statement.sqlConnection = connection;
statement.text = "SELECT * FROM geography";
//statement.addEventListener(SQLEvent.RESULT, selectionReceived);
statement.execute();
var result:SQLResult = statement.getResult();
if (result != null) {
var rows:int = result.data.length;
for (var i:int = 0; i < rows; i++) {
var row:Object = result.data[i];
trace(row.id + "" + row.country + "" + row.city);
}
}

89. SQLite
Embedding a database
var embedded:File = File.applicationDirectory.resolvePath
("embeddedDB.db");
if (embedded.exists) {
trace("database was embedded");
var local:File = File.applicationStorageDirectory.resolvePath
("myDatabase.db");
if (!local.exists) {
embedded.copyTo(local);
}
} else {
trace("database was not embedded");
}

90. Mão na massa!
Criar uma aplicação de cadastro de contatos
1. Cadastro, Exclusão e Navegação
1.1. Nome
1.2. E-mail
1.3. Telefone
1.4. Endereço
2. Funções
2.1. Realizar ligação
2.2. Enviar SMS
2.3. Enviar e-mail
2.4. Exibir Endereço no Google Maps

91. Views e navegação

92. Layout
A. ActionBar control B. Content Area

93. Layout
A. ActionBar control B. Content Area C. TabBar control

94. ActionBar
Fornece fácil acesso a funcionalidades importantes
Não pode ter scroll
Pode ser definido globalmente ou para cada View

95. Ocultando o ActionBar
View.actionBarVisible = false

96. Arquitetura simples de uma
aplicação

97. Exemplo
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.HomeView">
</s:ViewNavigatorApplication>

98. Navegação

99. Navegando entre as Views
ViewNavigator
- adiciona uma nova view
pushView()
- vai para a view anterior
popView()
- vai para a primeira view
popToFirstView()
- remove todas as views da
popAll()
pilha

100. Navegando entre as Views
ViewNavigator

101. Passando dados para
uma View
pushView(viewClass:Class,
data:Object = null,
context:Object = null,
transition:ViewTransitionBase = null):void
viewClass especifica o nome da classe de view que será exibida.
data especifica quaisquer dados passados para a view.
context especifica um objeto arbitrário que estará disponível na propriedade
ViewNavigator.context na próxima View.
transition especifica a transição que deve ser usada na mudança para nova view.

102. Acessando os dados enviados pelo
pushView
View.data

103. Exemplo
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Employee View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<s:VGroup>
<s:Label text="{data.firstName}"/>
<s:Label text="{data.lastName}"/>
<s:Label text="{data.companyID}"/>
</s:VGroup>
</s:View>

104. Retornando dados para
uma View
override public function createReturnObject():Object
{
return txtValor.text;
}
protected function button1_clickHandler(event:MouseEvent):void
{
navigator.popView();
}

105. Acessando os dados enviados pelo
popView com
createReturnObject
ViewNavigator.poppedViewReturnedObject.object

106. Exemplo
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"
add="viewAddHandler(event)">
<fx:Script>
<![CDATA[
protected function viewAddHandler(event:FlexEvent):void
{
if (navigator.poppedViewReturnedObject) {
lblValor.text = navigator.poppedViewReturnedObject.object.toString();
}
}
]]>
</fx:Script>
...

107. Arquitetura de uma aplicação
com múltiplas seções

108. Exemplo
<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/
mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<s:ViewNavigator label="Employees" width="100%" height="100%"
firstView="views.EmployeeMainView"/>
<s:ViewNavigator label="Contacts" width="100%" height="100%"
firstView="views.ContactsMainView"/>
<s:ViewNavigator label="Search" width="100%" height="100%"
firstView="views.SearchView"/>
</s:TabbedViewNavigatorApplication>

109. Splash Screen
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.Bairros"
splashScreenImage="@Embed(source='assets/splash.png')"
splashScreenScaleMode="none"
splashScreenMinimumDisplayTime="2000">

110. Menus

111. Menus
<s:viewMenuItems>
<s:ViewMenuItem label="Add" click="itemClickInfo(event);"/>
<s:ViewMenuItem label="Cancel" click="itemClickInfo(event);"/>
<s:ViewMenuItem label="Delete" click="itemClickInfo(event);"/>
<s:ViewMenuItem label="Edit" click="itemClickInfo(event);"/>
<s:ViewMenuItem label="Search" click="itemClickInfo(event);"/>
</s:viewMenuItems>

112. View State

113. Portrait e Landscape
<s:states>
<s:State name="portrait"/>
<s:State name="landscape"/>
</s:states>

114. Data Binding
{...}

115. Item Renderers

116. MXML ItemRenderer
ActionScript ItemRenderer

117. IconItemRenderer
A. iconField B. decorator

118. Demo

119. Charts

120. Obrigado!
Eric Cavalcanti
ecavalcanti@gmail.com
@ericoc