47
Flex em dispositivos móveis Igor Costa

Flex em dispositivos móveis

Embed Size (px)

DESCRIPTION

Palestra realizada no Flashcamp Brasil sobre Flex em dispositivos móveis.Presentation given on FlashcampBrasil about Flex on Mobile devices, if you're english man, May not understand nothing. But you can check out the source code at

Citation preview

Page 1: Flex em dispositivos móveis

Flex em dispositivos móveisIgor Costa

Page 2: Flex em dispositivos móveis

Flex em dispositivos móveis

Fundador /CTO da RIACycleInstrutorAdobe Community Expert

Sobre o palestrante

Page 3: Flex em dispositivos móveis

Flex em dispositivos móveis

Desafios existentesNovidades do Flex 4.5 SDK para dispositivos móveisNovidades do Flash Builder 4.5Demo (Se Murphy deixar)RecursosSurpresas

Agenda

Page 4: Flex em dispositivos móveis

Flex em dispositivos móveis

Interfaces para telas de tamanhos diferentes

Desafios Existentes

Page 5: Flex em dispositivos móveis

Flex em dispositivos móveis

Hardware com recursos limitados

Desafios Existentes

Page 6: Flex em dispositivos móveis

Flex em dispositivos móveis

Desenhar telas para as pontas dos dedos

Desafios Existentes

Area de toque mínimo:44px.

Page 7: Flex em dispositivos móveis

Flex em dispositivos móveis

Desenhar telas para Multi-toques (Gestos)

Desafios Existentes

Page 8: Flex em dispositivos móveis

Flex em dispositivos móveis

Multiplas plataformas

Desafios Existentes

Page 9: Flex em dispositivos móveis

Flex em dispositivos móveis

Pros:

Fácil integração com o sistema operacionalSuporte do Flash Builder para gerar instaladorComponentes do Flex optimizados para ele.

Cons:

Segmentação de versões, apenas 2.2 suportada (AIR)Não ter suporte para APIs nativa (AIR )

Page 10: Flex em dispositivos móveis

Flex em dispositivos móveis

Pros:

Aeee!!! consegimos

Cons:Performance ainda problemática (AIR 2.6)Flash Builder não possui suporte para Flex apenas AS3.0 ( Versão teste do FB)

Page 11: Flex em dispositivos móveis

Flex em dispositivos móveis

Pros:

Fácil integração com Gestos, Toques, Acelerometros

Cons:

Alguns componentes do Flex não funcionam perfeitamenteComponentes QNIX não tem suporte a MXML

Page 12: Flex em dispositivos móveis

Flex em dispositivos móveis

Diferentes formatos

Desafios Existentes

Mobile DesktopTablets

Page 13: Flex em dispositivos móveis

Flex em dispositivos móveis

Trabalho dobrado ou Chama o Chuck Norris!

Resultado!

Page 14: Flex em dispositivos móveis

Flex em dispositivos móveis

Adobe AIR run-time

Page 15: Flex em dispositivos móveis

Flex em dispositivos móveis

O Atalho da vida real:Escreva um código para Desktop ou Mobile.

Page 16: Flex em dispositivos móveis

Flex em dispositivos móveis

1:N

Page 17: Flex em dispositivos móveis

Flex em dispositivos móveis

Page 18: Flex em dispositivos móveis

Flex em dispositivos móveis

“Não são as espécies mais fortes e nem as mais inteligentesque sobrevivem, mas sim aquelas que melhor respondem as mudanças“.

Charles DarwinDesde 1800 já tinha enxergado Adobe AIR

Page 19: Flex em dispositivos móveis

Flex em dispositivos móveis

Novidades do Flex 4.5 SDKpara dispositivos móveis

Page 20: Flex em dispositivos móveis

Flex em dispositivos móveis

3 tipos de aplicativos

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"></s:Application>

Application (Similar a um documento .fla criado no Flash CS5)

Page 21: Flex em dispositivos móveis

Flex em dispositivos móveis

3 tipos de aplicativos

<?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>

ViewNavigatorApplication (Navegação entre Views)

Page 22: Flex em dispositivos móveis

Flex em dispositivos móveis

3 tipos de aplicativos

<?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>

TabbedViewNavigatorApplication (Navegação com Abas)

Page 23: Flex em dispositivos móveis

Flex em dispositivos móveis

Navegação pronta entre telas

Palavras mágicas: navigator, FlexGlobals

Page 24: Flex em dispositivos móveis

Flex em dispositivos móveis

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!

Page 25: Flex em dispositivos móveis

Flex em dispositivos móveis

Componentes de UI e Containers prontos para gestos

Page 26: Flex em dispositivos móveis

Flex em dispositivos móveis

Componentes de UI e Containers prontos para gestos

Page 27: Flex em dispositivos móveis

Flex em dispositivos móveis

List e Datagroupoptimizados para mobile

Page 28: Flex em dispositivos móveis

Flex em dispositivos móveis

ItemRenders

import spark.components.LabelItemRenderer;import spark.components.IconItemRenderer;

Page 29: Flex em dispositivos móveis

Flex em dispositivos móveis

Componentes preparados para Mobile

• Busy Indicator• TabBar• ButtonBar

Page 30: Flex em dispositivos móveis

Flex em dispositivos móveis

Suporte a auto-rotação nos Containers:

Page 31: Flex em dispositivos móveis

Flex em dispositivos móveis

Efeitos de transição já padrão:

CrossFadeViewTransition ( Fade In/Fade Out) entre telasFlipViewTransition ( Efeito de Flipar, carta viradas)SlideViewTransition (Por padrão) Slide Left/RightZoomViewTranstion muda telas com zoom entre anterior e próxima.

Page 32: Flex em dispositivos móveis

Flex em dispositivos móveis

Layouts ja suportados e optimizados:

<s:layout> <s:BasicLayout/> <s:ViewMenuLayout/> <s:VerticalLayout/> <s:HorizontalLayout/> <s:TileLayout/> <s:FormLayout/> <s:ConstraintLayout/> </s:layout>

Page 33: Flex em dispositivos móveis

Flex em dispositivos móveis

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>

Page 34: Flex em dispositivos móveis

Flex em dispositivos móveis

Componentes de Texto:

•Spark TextArea•Spark TextInput •Spark Label

Page 35: Flex em dispositivos móveis

Flex em dispositivos móveis

Skins:

Baseados na classe spark.skins.mobile.supportClasses.MobileSkin São escritos em ActionscriptUsam FXG compilado, você pode usar o Flash Catalyst, Illustrator ou Fireworkspara criar FXG.

Page 36: Flex em dispositivos móveis

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Page 37: Flex em dispositivos móveis

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Suporte a criação nativa de: Flex Mobile Projects eActionscript Mobile Projects

Page 38: Flex em dispositivos móveis

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Selecionar a plataforma Mobilealvo para publicar:

Page 39: Flex em dispositivos móveis

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Escolher a plataforma:

Page 40: Flex em dispositivos móveis

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Detectar rotação da telaFullscreen e ajustarO aplicativo para densidades maiores:

Page 41: Flex em dispositivos móveis

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Setar permissões

Page 42: Flex em dispositivos móveis

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Fix rápido com CTRL+1:

Page 43: Flex em dispositivos móveis

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Auto-completepara metadata:

Page 44: Flex em dispositivos móveis

Flex em dispositivos móveis

DEMO15 min

Murphy saia do auditório.

Page 45: Flex em dispositivos móveis

Flex em dispositivos móveis

Adobe 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.comIcones pagos: http://graphicriver.net/item/70-mobile-interface-icons/161513Icones grá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

Locais insteressantespara visitar

Page 46: Flex em dispositivos móveis

Flex em dispositivos móveis

Aplicativo do Flashcamp para Android

OPEN SOURCE

Page 47: Flex em dispositivos móveis

Flex em dispositivos móveis

Dúvidas?

Slides/Códigos em:

@igorcosta@riacycle