Use seu laptop e veja como criar uma app colaborativa e social com um só código fonte usando a tecnologia da Adobe, o Adobe Flex 4.6. Crie apps para Androids, IOS, BlackBerry Playbook e, com este mesmo código, uma App Desktop. Conheça os desafios e as facilidades que o Flex traz para uma nova classe de desenvolvedores Web/Mobile/Desktop. Oficineiro Igor Costa Tem 12 anos de experiência no mercado de software. É co-fundador da RIACycle, empresa brasileira dedicada a criar apps para web/mobile e a ensinar uma vasta rede de desenvolvedores. Palestrante assíduo, já particiou de vários eventos como o iMasters Intercon, Campus Party, Just Java, Flash Camp Brasil, Flex for Kids, Flex Mania, Flash Open Source Conference, faculdades, etc.

1. Adobe Flex
três plataformas e um só código fonte

2. Adobe Flex
três plataformas e um só código fonte
Quem fala?!
Fundador /CTO da RIACycle
Initial Committer Apache Flex
Adobe Community Expert
Blackberry Developer Champion
@igorcosta @riacycle

3. Adobe Flex
três plataformas e um só código fonte
Agenda
Desafios existentes no mundo Mobile
Por que Flex usar o Flex?
Novidades do Flex 4.6 SDK para dispositivos móveis
Novidades do Flash Builder 4.6
Demo (Se Murphy deixar)
Recursos
Surpresas

4. Adobe Flex
três plataformas e um só código fonte
Mais é só um App
Eu quero um App simples,
barato e que rode em todas as plataformas

5. Adobe Flex
três plataformas e um só código fonte
Desafios Existentes
Interfaces para telas de tamanhos diferentes

6. Adobe Flex
três plataformas e um só código fonte
Desafios Existentes
Hardware com recursos limitados

7. Adobe Flex
três plataformas e um só código fonte
Desafios Existentes
Desenhar telas para as pontas dos dedos
Area de toque mínimo:44px.

8. Adobe Flex
três plataformas e um só código fonte
Desafios Existentes
Desenhar telas para Multi-toques (Gestos)

9. Adobe Flex
três plataformas e um só código fonte
Desafios Existentes
Plataformas diferentes

10. Adobe Flex
três plataformas e um só código fonte
Desafios Existentes
Diferentes formatos
Mobile Tablets Desktop

11. Adobe Flex
três plataformas e um só código fonte
Desafios Existentes
DPI diferentes
133dpi ~ 275 dpi

12. Adobe Flex
três plataformas e um só código fonte
Resultado!
Trabalho dobrado ou
Chama o Chuck Norris!

13. Adobe Flex
três plataformas e um só código fonte
Por que Adobe Flex?

14. Adobe Flex
três plataformas e um só código fonte
Por que é Open-source

15. Adobe Flex
três plataformas e um só código fonte
Por que agora é um projeto Apache
http://incubator.apache.org/flex/

16. Adobe Flex
três plataformas e um só código fonte
Por que É Ubiquo.

17. Adobe Flex
três plataformas e um só código fonte
API consistente
Por que tem
Entre PC/Web/Mobile

18. Adobe Flex
três plataformas e um só código fonte
uma variedade
Por que tem
de componentes UI
prontos.

19. Adobe Flex
três plataformas e um só código fonte
Por que Integra
com bibliotecas
nativas do aparelho

20. Adobe Flex
três plataformas e um só código fonte
Por que é rápido em dispositivos

21. Adobe Flex
três plataformas e um só código fonte
Por que pode
ser escrito em
Actionscript 3.0 e MXML

22. Adobe Flex
três plataformas e um só código fonte
Adobe AIR run-time

23. Adobe Flex
três plataformas e um só código fonte
O Atalho da vida real:
Escreva um código para Desktop ou Mobile.

24. Adobe Flex
três plataformas e um só código fonte
*.bar *.ipa *.apk

25. Adobe Flex
três plataformas e um só código fonte

26. Adobe Flex
três plataformas e um só código fonte
“Não são as espécies mais fortes e nem as mais inteligentes
que sobrevivem, mas sim aquelas que melhor respondem as
mudanças“.
Charles Darwin
Desde 1800 já tinha enxergado Adobe AIR

27. Adobe Flex
três plataformas e um só código fonte
Novidades do Flex 4.6 SDK
para dispositivos móveis

28. Adobe Flex
três plataformas e um só código fonte
3 tipos de aplicativos
Application (Similar a um documento .fla criado no Flash CS5)
<?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.CPBR5HomeView" applicationDPI="240">
<fx:Declarations>
</fx:Declarations>
</s:ViewNavigatorApplication>

29. Adobe Flex
três plataformas e um só código fonte
3 tipos de aplicativos
ViewNavigatorApplication (Navegação entre Views)
<?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>

30. Adobe Flex
três plataformas e um só código fonte
3 tipos de aplicativos
TabbedViewNavigatorApplication (Navegação com Abas)
<?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:TabbedViewNavigatorApplication>

31. Adobe Flex
três plataformas e um só código fonte
Navegação pronta entre telas
Palavras mágicas: navigator, FlexGlobals

32. Adobe Flex
três plataformas e um só código fonte
Suporte a todas as APIs do Flash Player*
Suporte a todas as APIs do Adobe AIR*
• Exceto APIs específicas para Desktop/Web (Ex. Nativeprocess apenas Desktop)
• Se você leu aqui é por que você é curioso(a). Faça-me perguntas no final!

33. Adobe Flex
três plataformas e um só código fonte
Componentes de UI e
Containers prontos para gestos

34. Adobe Flex
três plataformas e um só código fonte
Componentes de UI e
Containers prontos para gestos

35. Adobe Flex
três plataformas e um só código fonte
List e Datagroup
optimizados para mobile

36. Adobe Flex
três plataformas e um só código fonte
import spark.components.LabelItemRenderer;
import spark.components.IconItemRenderer;
ItemRenders

37. Adobe Flex
três plataformas e um só código fonte
Componentes preparados para Mobile
• Busy Indicator
• TabBar
• ButtonBar

38. Adobe Flex
três plataformas e um só código fonte
Suporte a auto-rotação
nos Containers:

39. Adobe Flex
três plataformas e um só código fonte
Efeitos de transição já padrão:
CrossFadeViewTransition ( Fade In/Fade Out) entre telas
FlipViewTransition ( Efeito de Flipar, carta viradas)
SlideViewTransition (Por padrão) Slide Left/Right
ZoomViewTranstion muda telas com zoom entre anterior e próxima.

40. Adobe Flex
três plataformas e um só código fonte
Suporte a teclas de atalho nativa : Botão de voltar e Menu nos Views
<?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"
menuKeyPressed="menuHandler(event)"
backKeyPressed="backHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function backHandler(event:FlexEvent):void
{
}
protected function menuHandler(event:FlexEvent):void
{
}
]]>
</fx:Script>
</s:View>

41. Adobe Flex
três plataformas e um só código fonte
Componentes de Texto:
•Spark TextArea
•Spark TextInput
•Spark Label

42. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6

43. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Suporte a criação nativa de:
Flex Mobile Projects e
Actionscript Mobile Projects

44. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Selecionar a plataforma Mobile
alvo para publicar:

45. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Escolher a plataforma:

46. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Detectar rotação da tela
Fullscreen e ajustar
O aplicativo para densidades
maiores:

47. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Garantir permissões

48. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Fix rápido com CTRL+1:

49. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Auto-complete
para metadata:

50. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Native Extensions

51. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
O que são Native Extensions?

52. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
a Habilidade de acessar APIs
nativas,junto com a tecnologia Flex

53. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
C++ Objective-C Java
Nativo.ane
.bar .ipa .apk

54. Adobe Flex
três plataformas e um só código fonte
DEMO
15 min
Murphy saia do auditório.

55. Adobe Flex
três plataformas e um só código fonte
Locais insteressantes
para visitar
Adobe Mobile Devcenter : http://www.adobe.com/devnet/flex.html
Blackberry Dev portal : http://us.blackberry.com/developers/tablet/
Safari guide-lines: http://developer.apple.com/library/safari/navigation/
Android Dev Portal: http://developer.android.com
Icones pagos: http://graphicriver.net/item/70-mobile-interface-icons/161513
Icones grátis: http://blog.roamdesign.co.uk/?p=272
Inspiração e coleção de wireframes: http://www.flickr.com/groups/mobileui/pool/
Mozilla UI Touch : https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen

56. Adobe Flex
três plataformas e um só código fonte
* Primeiro lugar no desafio FlashCamp Brasil
de melhor Software Open-source com Flex
OPEN SOURCE

57. Adobe Flex
três plataformas e um só código fonte
Slides/Códigos em:
Dúvidas?
@igorcosta
@riacycle