Upload
igor-costa
View
1.174
Download
1
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
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