Flex em dispositivos móveisIgor Costa

Flex em dispositivos móveis

Fundador /CTO da RIACycleInstrutorAdobe Community Expert

Sobre o palestrante

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

Flex em dispositivos móveis

Interfaces para telas de tamanhos diferentes

Desafios Existentes

Flex em dispositivos móveis

Hardware com recursos limitados

Desafios Existentes

Flex em dispositivos móveis

Desenhar telas para as pontas dos dedos

Desafios Existentes

Area de toque mínimo:44px.

Flex em dispositivos móveis

Desenhar telas para Multi-toques (Gestos)

Desafios Existentes

Flex em dispositivos móveis

Multiplas plataformas

Desafios Existentes

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 )

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)

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

Flex em dispositivos móveis

Diferentes formatos

Desafios Existentes

Mobile DesktopTablets

Flex em dispositivos móveis

Trabalho dobrado ou Chama o Chuck Norris!

Resultado!

Flex em dispositivos móveis

Adobe AIR run-time

Flex em dispositivos móveis

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

Flex em dispositivos móveis

1:N

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

Flex em dispositivos móveis

Novidades do Flex 4.5 SDKpara 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)

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)

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)

Flex em dispositivos móveis

Navegação pronta entre telas

Palavras mágicas: navigator, FlexGlobals

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!

Flex em dispositivos móveis

Componentes de UI e Containers prontos para gestos

Flex em dispositivos móveis

Componentes de UI e Containers prontos para gestos

Flex em dispositivos móveis

List e Datagroupoptimizados para mobile

Flex em dispositivos móveis

ItemRenders

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

Flex em dispositivos móveis

Componentes preparados para Mobile

• Busy Indicator• TabBar• ButtonBar

Flex em dispositivos móveis

Suporte a auto-rotação nos Containers:

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.

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>

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>

Flex em dispositivos móveis

Componentes de Texto:

•Spark TextArea•Spark TextInput •Spark Label

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.

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

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

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Selecionar a plataforma Mobilealvo para publicar:

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Escolher a plataforma:

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

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

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Setar permissões

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Fix rápido com CTRL+1:

Flex em dispositivos móveis

Novidades do Flash Builder 4.5

Auto-completepara metadata:

Flex em dispositivos móveis

DEMO15 min

Murphy saia do auditório.

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

Flex em dispositivos móveis

Aplicativo do Flashcamp para Android

OPEN SOURCE

Flex em dispositivos móveis

Dúvidas?

Slides/Códigos em:

@igorcosta@riacycle