Use seu laptop e veja como criar uma app colaborativa e social com um só código fonte usando a tecnologia da Adobe, o Adobe Flex 4.6. Crie apps para Androids, IOS, BlackBerry Playbook e, com este mesmo código, uma App Desktop. Conheça os desafios e as facilidades que o Flex traz para uma nova classe de desenvolvedores Web/Mobile/Desktop.
Oficineiro
Igor Costa
Tem 12 anos de experiência no mercado de software. É co-fundador da RIACycle, empresa brasileira dedicada a criar apps para web/mobile e a ensinar uma vasta rede de desenvolvedores. Palestrante assíduo, já particiou de vários eventos como o iMasters Intercon, Campus Party, Just Java, Flash Camp Brasil, Flex for Kids, Flex Mania, Flash Open Source Conference, faculdades, etc.
2. Adobe Flex
três plataformas e um só código fonte
Quem fala?!
Fundador /CTO da RIACycle
Initial Committer Apache Flex
Adobe Community Expert
Blackberry Developer Champion
@igorcosta @riacycle
3. Adobe Flex
três plataformas e um só código fonte
Agenda
Desafios existentes no mundo Mobile
Por que Flex usar o Flex?
Novidades do Flex 4.6 SDK para dispositivos móveis
Novidades do Flash Builder 4.6
Demo (Se Murphy deixar)
Recursos
Surpresas
4. Adobe Flex
três plataformas e um só código fonte
Mais é só um App
Eu quero um App simples,
barato e que rode em todas as plataformas
5. Adobe Flex
três plataformas e um só código fonte
Desafios Existentes
Interfaces para telas de tamanhos diferentes
26. Adobe Flex
três plataformas e um só código fonte
“Não são as espécies mais fortes e nem as mais inteligentes
que sobrevivem, mas sim aquelas que melhor respondem as
mudanças“.
Charles Darwin
Desde 1800 já tinha enxergado Adobe AIR
28. Adobe Flex
três plataformas e um só código fonte
3 tipos de aplicativos
Application (Similar a um documento .fla criado no Flash CS5)
<?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.CPBR5HomeView" applicationDPI="240">
<fx:Declarations>
</fx:Declarations>
</s:ViewNavigatorApplication>
29. Adobe Flex
três plataformas e um só código fonte
3 tipos de aplicativos
ViewNavigatorApplication (Navegação entre Views)
<?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>
30. Adobe Flex
três plataformas e um só código fonte
3 tipos de aplicativos
TabbedViewNavigatorApplication (Navegação com Abas)
<?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>
31. Adobe Flex
três plataformas e um só código fonte
Navegação pronta entre telas
Palavras mágicas: navigator, FlexGlobals
32. Adobe Flex
três plataformas e um só código fonte
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!
33. Adobe Flex
três plataformas e um só código fonte
Componentes de UI e
Containers prontos para gestos
35. Adobe Flex
três plataformas e um só código fonte
List e Datagroup
optimizados para mobile
36. Adobe Flex
três plataformas e um só código fonte
import spark.components.LabelItemRenderer;
import spark.components.IconItemRenderer;
ItemRenders
37. Adobe Flex
três plataformas e um só código fonte
Componentes preparados para Mobile
• Busy Indicator
• TabBar
• ButtonBar
38. Adobe Flex
três plataformas e um só código fonte
Suporte a auto-rotação
nos Containers:
39. Adobe Flex
três plataformas e um só código fonte
Efeitos de transição já padrão:
CrossFadeViewTransition ( Fade In/Fade Out) entre telas
FlipViewTransition ( Efeito de Flipar, carta viradas)
SlideViewTransition (Por padrão) Slide Left/Right
ZoomViewTranstion muda telas com zoom entre anterior e próxima.
40. Adobe Flex
três plataformas e um só código fonte
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>
41. Adobe Flex
três plataformas e um só código fonte
Componentes de Texto:
•Spark TextArea
•Spark TextInput
•Spark Label
42. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
43. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Suporte a criação nativa de:
Flex Mobile Projects e
Actionscript Mobile Projects
44. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Selecionar a plataforma Mobile
alvo para publicar:
45. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Escolher a plataforma:
46. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Detectar rotação da tela
Fullscreen e ajustar
O aplicativo para densidades
maiores:
47. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Garantir permissões
48. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Fix rápido com CTRL+1:
49. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Auto-complete
para metadata:
50. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
Native Extensions
51. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
O que são Native Extensions?
52. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
a Habilidade de acessar APIs
nativas,junto com a tecnologia Flex
53. Adobe Flex
três plataformas e um só código fonte
Novidades do Flash Builder 4.6
C++ Objective-C Java
Nativo.ane
.bar .ipa .apk
55. Adobe Flex
três plataformas e um só código fonte
Locais insteressantes
para visitar
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
Icones pagos: http://graphicriver.net/item/70-mobile-interface-icons/161513
Icones grá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
56. Adobe Flex
três plataformas e um só código fonte
* Primeiro lugar no desafio FlashCamp Brasil
de melhor Software Open-source com Flex
OPEN SOURCE
57. Adobe Flex
três plataformas e um só código fonte
Slides/Códigos em:
Dúvidas?
@igorcosta
@riacycle