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óveisIgor Costa

2. FlexemdispositivosmóveisSobre o palestranteFundador /CTO da RIACycleInstrutorAdobe Community Expert

3. FlexemdispositivosmóveisAgendaDesafiosexistentesNovidades do Flex 4.5 SDK paradispositivosmóveisNovidades do Flash Builder 4.5Demo (Se Murphy deixar)RecursosSurpresas

4. FlexemdispositivosmóveisDesafiosExistentesInterfaces paratelas de tamanhosdiferentes

5. FlexemdispositivosmóveisDesafiosExistentesHardware com recursoslimitados

6. FlexemdispositivosmóveisDesafiosExistentesDesenhartelaspara as pontas dos dedosArea de toque mínimo:44px.

7. FlexemdispositivosmóveisDesafiosExistentesDesenhartelaspara Multi-toques (Gestos)

8. FlexemdispositivosmóveisDesafiosExistentesMultiplasplataformas

9. FlexemdispositivosmóveisPros:Fácilintegração com o sistemaoperacionalSuporte do Flash Builder paragerarinstaladorComponentes do Flex optimizadosparaele.Cons:Segmentação de versões, apenas 2.2 suportada (AIR)Nãotersuportepara APIs nativa (AIR )

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

11. FlexemdispositivosmóveisPros:Fácilintegração com Gestos, Toques, AcelerometrosCons:Algunscomponentes do Flex nãofuncionamperfeitamenteComponentes QNIX não tem suporte a MXML

12. FlexemdispositivosmóveisDesafiosExistentesDiferentesformatosMobileDesktopTablets

13. FlexemdispositivosmóveisResultado!TrabalhodobradoouChama o Chuck Norris!

14. FlexemdispositivosmóveisAdobe AIR run-time

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

16. Flexemdispositivosmóveis1:N

17. Flexemdispositivosmóveis

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

19. FlexemdispositivosmóveisNovidades do Flex 4.5 SDKparadispositivosmóveis

20. Flexemdispositivosmóveis3 tipos de aplicativosApplication (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óveis3 tipos de aplicativosViewNavigatorApplication (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óveis3 tipos de aplicativosTabbedViewNavigatorApplication (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óveisNavegaçãopronta entre telasPalavrasmágicas: navigator, FlexGlobals

24. FlexemdispositivosmóveisSuporte a todas as APIs do Flash Player*Suporte a todas as APIs do Adobe AIR*Exceto APIs específicaspara Desktop/Web (Ex. Nativeprocessapenas Desktop)

25. Se vocêleuaqui é porquevocê é curioso(a). Faça-me perguntasno final!FlexemdispositivosmóveisComponentes de UIe Containers prontosparagestos

26. FlexemdispositivosmóveisComponentes de UIe Containers prontosparagestos

27. FlexemdispositivosmóveisListe Datagroupoptimizadospara mobile

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

29. FlexemdispositivosmóveisComponentespreparadospara MobileBusy Indicator

30. TabBar

31. ButtonBarFlexemdispositivosmóveisSuporte a auto-rotaçãonos Containers:

32. FlexemdispositivosmóveisEfeitos de transiçãojápadrão:CrossFadeViewTransition ( Fade In/Fade Out) entre telasFlipViewTransition ( Efeito de Flipar, cartaviradas)SlideViewTransition (Porpadrão) Slide Left/RightZoomViewTranstionmudatelas com zoom entre anterior e próxima.

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

34. FlexemdispositivosmóveisSuporte 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óveisComponentes de Texto:•Spark TextArea•Spark TextInput•Spark Label

36. FlexemdispositivosmóveisSkins:Baseadosnaclassespark.skins.mobile.supportClasses.MobileSkinSão escritosemActionscriptUsam FXG compilado, vocêpodeusar o Flash Catalyst, Illustrator ou Fireworksparacriar FXG.

37. FlexemdispositivosmóveisNovidades do Flash Builder 4.5

38. FlexemdispositivosmóveisNovidades do Flash Builder 4.5Suporte a criaçãonativa de: Flex Mobile Projects eActionscript Mobile Projects

39. FlexemdispositivosmóveisNovidades do Flash Builder 4.5Selecionar a plataforma Mobilealvoparapublicar:

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

41. FlexemdispositivosmóveisNovidades do Flash Builder 4.5Detectarrotação da telaFullscreen e ajustarO aplicativoparadensidadesmaiores:

42. FlexemdispositivosmóveisNovidades do Flash Builder 4.5Setarpermissões

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

44. FlexemdispositivosmóveisNovidades do Flash Builder 4.5Auto-completepara metadata:

45. FlexemdispositivosmóveisDEMO15 minMurphy saia do auditório.

46. FlexemdispositivosmóveisLocaisinsteressantesparavisitarAdobe Mobile Devcenter : http://www.adobe.com/devnet/flex.htmlBlackberry Dev portal : http://us.blackberry.com/developers/tablet/Safari guide-lines: http://developer.apple.com/library/safari/navigation/Android Dev Portal: http://developer.android.comIconespagos: http://graphicriver.net/item/70-mobile-interface-icons/161513Iconesgrátis: http://blog.roamdesign.co.uk/?p=272Inspiraçã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óveisAplicativo do Flashcamppara AndroidOPEN SOURCE