This presentation discusses developing mobile applications using Flex and the Flex SDK. It covers challenges in mobile development, new features in Flex 4.5 for mobile, and new capabilities in Flash Builder 4.5 for mobile development. Example code and a demo mobile app are also presented.

1. Flexemdispositivosmóveis Igor Costa

2. Flexemdispositivosmóveis Sobre o palestrante Fundador /CTO da RIACycle Instrutor Adobe Community Expert

3. Flexemdispositivosmóveis Agenda Desafiosexistentes Novidades do Flex 4.5 SDK paradispositivosmóveis Novidades do Flash Builder 4.5 Demo (Se Murphy deixar) Recursos Surpresas

4. Flexemdispositivosmóveis DesafiosExistentes Interfaces paratelas de tamanhosdiferentes

5. Flexemdispositivosmóveis DesafiosExistentes Hardware com recursoslimitados

6. Flexemdispositivosmóveis DesafiosExistentes Desenhartelaspara as pontas dos dedos Area de toque mínimo:44px.

7. Flexemdispositivosmóveis DesafiosExistentes Desenhartelaspara Multi-toques (Gestos)

8. Flexemdispositivosmóveis DesafiosExistentes Multiplasplataformas

9. Flexemdispositivosmóveis Pros: Fácilintegração com o sistemaoperacional Suporte do Flash Builder paragerarinstalador Componentes do Flex optimizadosparaele. Cons: Segmentação de versões, apenas 2.2 suportada (AIR) Nãotersuportepara APIs nativa (AIR )

10. Flexemdispositivosmóveis Pros: Aeee!!! consegimos Cons: Performance aindaproblemática (AIR 2.6) Flash Builder nãopossuisuportepara Flex apenas AS3.0 ( Versãoteste do FB)

11. Flexemdispositivosmóveis Pros: Fácilintegração com Gestos, Toques, Acelerometros Cons: Algunscomponentes do Flex nãofuncionamperfeitamente Componentes QNIX não tem suporte a MXML

12. Flexemdispositivosmóveis DesafiosExistentes Diferentesformatos Mobile Desktop Tablets

13. Flexemdispositivosmóveis Resultado! Trabalhodobradoou Chama o Chuck Norris!

14. Flexemdispositivosmóveis Adobe AIR run-time

15. Flexemdispositivosmóveis O Atalho da vida real: Escreva um códigopara Desktop ou Mobile.

16. Flexemdispositivosmóveis 1:N

17. Flexemdispositivosmóveis

18. Flexemdispositivosmóveis “Nãosão as espéciesmaisfortes e nem as maisinteligentes quesobrevivem, mas simaquelasquemelhorrespondem as mudanças“. Charles Darwin Desde 1800 játinhaenxergado Adobe AIR

19. Flexemdispositivosmóveis Novidades do Flex 4.5 SDK paradispositivosmóveis

20. Flexemdispositivosmóveis 3 tipos de aplicativos Application (Similar a um documento .flacriado no Flash CS5) <?xml version="1.0" encoding="utf-8"?> <s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> </s:Application>

21. Flexemdispositivosmóveis 3 tipos de aplicativos ViewNavigatorApplication (Navegação entre Views) <?xml version="1.0" encoding="utf-8"?> <s:ViewNavigatorApplicationxmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.HomeView"> </s:ViewNavigatorApplication>

22. Flexemdispositivosmóveis 3 tipos de aplicativos TabbedViewNavigatorApplication (Navegação com Abas) <?xml version="1.0" encoding="utf-8"?> <s:TabbedViewNavigatorApplicationxmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> </s:TabbedViewNavigatorApplication>

23. Flexemdispositivosmóveis Navegaçãopronta entre telas Palavrasmágicas: navigator, FlexGlobals

26. Flexemdispositivosmóveis Componentes de UIe Containers prontosparagestos

27. Flexemdispositivosmóveis Liste Datagroup optimizadospara mobile

28. Flexemdispositivosmóveis importspark.components.LabelItemRenderer; importspark.components.IconItemRenderer; ItemRenders

30. TabBar

32. Flexemdispositivosmóveis Efeitos de transiçãojápadrão: CrossFadeViewTransition ( Fade In/Fade Out) entre telas FlipViewTransition ( Efeito de Flipar, cartaviradas) SlideViewTransition (Porpadrão) Slide Left/Right ZoomViewTranstionmudatelas com zoom entre anterior e próxima.

33. Flexemdispositivosmóveis Layouts jasuportadose optimizados: <s:layout><s:BasicLayout/><s:ViewMenuLayout/><s:VerticalLayout/><s:HorizontalLayout/><s:TileLayout/><s:FormLayout/><s:ConstraintLayout/></s:layout>

34. Flexemdispositivosmóveis Suporte a teclas de atalhonativa : Botão de voltar e Menu nos Views <?xml version="1.0" encoding="utf-8"?> <s:Viewxmlns: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[ importmx.events.FlexEvent; protectedfunctionbackHandler(event:FlexEvent):void { } protectedfunctionmenuHandler(event:FlexEvent):void { } ]]> </fx:Script> </s:View>

35. Flexemdispositivosmóveis Componentes de Texto: •Spark TextArea •Spark TextInput •Spark Label

36. Flexemdispositivosmóveis Skins: Baseadosnaclassespark.skins.mobile.supportClasses.MobileSkin São escritosemActionscript Usam FXG compilado, vocêpodeusar o Flash Catalyst, Illustrator ou Fireworks paracriar FXG.

37. Flexemdispositivosmóveis Novidades do Flash Builder 4.5

38. Flexemdispositivosmóveis Novidades do Flash Builder 4.5 Suporte a criaçãonativa de: Flex Mobile Projects e Actionscript Mobile Projects

39. Flexemdispositivosmóveis Novidades do Flash Builder 4.5 Selecionar a plataforma Mobile alvoparapublicar:

40. Flexemdispositivosmóveis Novidades do Flash Builder 4.5 Escolher a plataforma:

41. Flexemdispositivosmóveis Novidades do Flash Builder 4.5 Detectarrotação da tela Fullscreen e ajustar O aplicativoparadensidades maiores:

42. Flexemdispositivosmóveis Novidades do Flash Builder 4.5 Setarpermissões

43. Flexemdispositivosmóveis Novidades do Flash Builder 4.5 Fix rápido com CTRL+1:

44. Flexemdispositivosmóveis Novidades do Flash Builder 4.5 Auto-complete para metadata:

45. Flexemdispositivosmóveis DEMO 15 min Murphy saia do auditório.

46. Flexemdispositivosmóveis Locaisinsteressantes paravisitar 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 Iconespagos: http://graphicriver.net/item/70-mobile-interface-icons/161513 Iconesgrá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

47. Flexemdispositivosmóveis Aplicativo do Flashcamppara Android OPEN SOURCE

48. Flexemdispositivosmóveis Slides/Códigosem: Dúvidas? @igorcosta @riacycle