Olá pessoal,

Me deparei com um problema com o Android SDK 4.0 lançado essa sistema e vi que muita gente está sofrendo com o mesmo problema que eu. Um crash inesperado na inicialização do AVD com a seguinte mensagem: “This application has requested the Runtime to terminate it in an unusual way. Please contact the application’s support team for more information.”

Essa semana tivemos o lançamento do Android 4.0 pela Google. Eu particularmente me identifico muito com o Android, possuo a alguns anos smartphones que rodam o sistema e sou instrutor de um curso de Android SDK em parceria com a RIACycle. Não sou um doido varrido pelo Android, mas realmente gosto de todo o seu ecossistema. Pelo fato de eu gostar tanto, desenvolver em cima da plataforma e por ser instrutor do SDK, já fui fazendo o download do novo SDK para conferir um pouco da nova versão Ice Cream Sandwich.

Alguma coisa foi alterada no ADB que algumas das minhas imagens antigas simplesmente não eram mais executadas, sempre dava o mesmo erro na hora de inicializar. Para resolver o problema, eu tive que reduzir a quantidade de memória disponibilizada para a emulação, por padrão, sempre utilizei 1GB, mas só funcionou com 512MB.

Outra situação que está fazendo crash independente da quantidade de memória, é quando eu adiciono na configuração do Hardware a propriedade “Camera Support”, sempre dá crash e não consigo iniciar o emulador.

E por fim, o último problema que eu tive foi com a opção “Launch from snapshot”. Todas as tentivas no Android 4.0 deram erro, sempre tive que iniciar com a opção “Wipe user data” selecionada.

Bom pessoal, tirei algumas telas para que vocês possam conferir a imagem para desenvolvimento. Por enquanto é isso!

Boas vindas

Aplicativos

Aplicativos

Widgets

Discador

Navegador

Navegador

Status do celular

Email

Recebendo ligação

Atendendo Ligação

Ligação Atendida

SMS

Notification Bar

Espero ter ajudado quem está com dificuldades com o novo ADB.

Um abraço e até a próxima

O iPhone, lançado por volta de 2007, foi revolucionario em relação a experiencia do usuário e naturalmente criou-se um novo nicho de mercado para desenvolvimento de aplicações. A App Store(loja virtual onde os aplicativos da Apple são disponibilizados) já pagou mais de 2 bilhões de dolares aos seus desenvolvedores e com a chegada do iPad, esse número tende a crescer muito. Então se você quer entrar nesse nicho de mercado, precisa saber do que precisa para criar seus aplicativos para rodar no sistema operacional movél da Apple, o iOS(antes da chegada do iPad, era simplesmente iPhone OS), no qual rodam o iPhone e iPad, portanto vamos iniciando com Adobe AIR for iOS.

Antes de começar, precisamos de alguns esclarecimentos em relação a como irá funcionar seu aplicativo feito com Adobe AIR rodando no iOS. Você só podera criar aplicativos com Adobe AIR, não é possivel criar aplicativos que rodem no navegador com o Flash Player.

Você só podera criar aplicativos com Adobe AIR, não é possivel criar aplicativos que rodem no navegador com o Flash Player.

Sem Flash Player no iOS =õ(

Com o runtime do Adobe AIR, temos o mesmo problema, não é possivel instalar o runtime do Adobe AIR da maneira que estamos acostumados a fazer no desktop ou no Android.
O que a Adobe fez foi criar uma ferramenta usando o Low Level Virtual Machine (LLVM) que permite que você converta seu aplicativo feito em Adobe AIR para um aplicativo nativo do iOS. A Adobe mudou o modo de compilação completamente para que seu aplicativo pudesse rodar no iOS, do modo JIT (Just in Time) para o AOT (Ahead-of-Time) permitindo que seu aplicativo em Adobe AIR pudesse ser convertido para um aplicativo nativo do iOS.

A Adobe mudou o modo de compilação completamente para que seu aplicativo pudesse rodar no iOS, do modo JIT (Just in Time) para o AOT (Ahead-of-Time) permitindo que seu aplicativo em Adobe AIR pudesse ser convertido para um aplicativo nativo do iOS.

LLVM é um sistema modular, o sistema compilador flexível que é amplamente utilizado em uma variedade de projetos. A principal razão que a Adobe escolheu o LLVM é a sua flexibilidade e aplicabilidade para o desenvolvimento do iOS. LLVM já é utilizado no projeto Alchemy(Alchemy = C/C++ com ActionScript 3.0).

A criação de aplicativos para iOS usando a Flash Platform só é possivel a partir do iOS 3.0 ou superior.

Ferramentas de desenvolvimento
Adobe Flash CS5 Professional – Com a atualização do Packager for iPhone, você pode a partir do Adobe Flash CS5(com o Packager for iPhone instalado), criar seus aplicativos para o iOS(iPhone/iPad), teremos um novo profile chamado “AIR for iOS”, gerando o arquivo ja com o tamanho padrão de 320×480. Por enquanto não existem componentes pré-programados para iOS e não é recomendado usar os já existentes no Flash.

Adobe Flash Builder 4 (burrito) – A Adobe disponilibizou juntamente com o Flash Builder 4 (burrito), o SDK do Flex versão 4.5, com componentes otimizados para dispositivos moveis, no entanto, esses componentes ainda estão sendo otimizados para rodarem no iOS e serão disponibilizados numa futura versão do Flash Builder, mas você pode criar tranquilamente um projeto ActionScript(usando somente ActionScript 3.0 sem o SDK do Flex) e usar o compilador por linha de comando(ADT).

Qualquer editor de texto – Você pode usar qualquer editor de texto salvando na extensão .as ou seu editor ActionScript favorito.

Distribuição
Você pode gerar o instalador do seu aplicativo pelo Flash Builder(próximas versões), Flash CS5(com o Packager for iPhone instalado) ou por linha de comando usando o ADT. É gerado um aplicativo com a extensão .ipa. A distribuição pode ser feita atraves da App Store, para se tornar um publisher da App Store, basta pagar a inscrição de 99 dolares. Acompanhe esse tutorial sobre como publicar seu aplicativo na App Store.

Acompanhe alguns tutoriais:
Developing for iOS using Flash Professional
Optimizing content for Apple iOS devices
Guide for Apple App Store submissions
Saving state in AIR applications for iOS devices
Using screen orientation APIs for smartphone application development

Nos proximos artigos, mostrarei como usar alguns recursos do AIR for iOS

EU VOU!!!

Em abril teremos a segunda versão do Flash Camp Brasil, com certeza é o maior evento sobre a plataforma Flash ocorrido no Brasil, reunindo os maiores profissionais e especialistas do Brasil e do mundo especialmente para mostrar ao publico brasileiro as ultimas novidades da plataforma Flash, é um evento obrigatorio tanto para designers quanto desenvolvedores além de uma otima oportunidade de aumentar seu networking.
O evento acontecerá em macéio, e contaremos com palestrantes nacionais e internacionais, e muitos workshops para que voce possa aproveitar o maximo o que o evento tem para oferecer.
Entre os temas discutidos teremos:

• Anúncios inéditos trazidos por empregados e evangelistas da Adobe
• Flash em dispositivos móveis (AIR/BlackBerry/Android/iOS/Flex etc)
• Plataformas e App Stores disponíveis no mercado
• Novos métodos de geração de negócios e pagamentos
• Aplicações Flex no mundo corporativo, focadas em produtividade e ROI
• Adobe MAX 2010 Recap, novidades da maior conferência Adobe no mundo
• Fluxos de trabalho com a Flash Platform
• Molehill, o futuro do Flash Player focando em 3D para Games e Rich Internet Applications
• Flash na TV e em aparelhos multitouch
• A importância do design e User Experience (UX) em projetos interativos
• Apresentações de agências premiadas como Seagulls Fly (USA e São Paulo), Gringo (São Paulo), Adobe (USA e Brasil), Dedo US e University of California San Diego (UCSD)
• Tecnologias e novidades que facilitam a vida de designers e developers
• Plataformas de publicações como revistas e jornais em dispositivos móveis
• E-learning e transmissão de vídeo
• Estratégias de Social Media e uso de APIs públicas (Facebook, Linkedin, Twitter, Flickr, Google, PayPal, etc)

Não perca tempo e faça já sua inscrição para o Flash Camp Brasil
http://www.flashcampbrasil.com.br

Veja minha experiencia no primeiro Flash Camp Brasil

No post anterior vimos como mudar a posição dos componentes PodWindow utilizando apenas o container PodManager. Hoje vou mostrar como você pode alterar a aparência da aplicação e do componente PodWindow aplicando as técnicas de skinning do Flex 4.

Comece criando uma nova classe skin para a aplicação em com.rectius.examples.view.assets.AdvancedPodExampleSkin, conforme o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="normal" />
    s:states>
?
    <s:Rect id="backgroundRect"
            left="0" right="0" top="0" bottom="0">
        <s:fill>
            --- @private
            <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
            -->
            <s:RadialGradient>
                -- First color is the inside -->
                <s:GradientEntry alpha="1" color="#9EC993" />
                -- Second color is the outside -->
                <s:GradientEntry alpha="1" color="#5F9653" />
            s:RadialGradient>
        s:fill>
    s:Rect>
?
    <s:Path
        data="   m 0 0
        l 1600 0
        l 0 100
        c -300 -25 -300 50 -1600 50
        z">
        <s:fill>
            <s:RadialGradient>
                -- First color is the inside -->
                <s:GradientEntry alpha=".6" color="#75A06A" />
                -- Second color is the outside -->
                <s:GradientEntry alpha=".6" color="#4B7343" />
            s:RadialGradient>
        s:fill>
    s:Path>
?
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        s:layout>
        --- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup"
                width="100%" height="100%"
                minWidth="0" minHeight="0"/>
    s:Group>
?
s:Skin>

Agora altere a classe skin da sua application:

<?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"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   xmlns:components="com.rectius.examples.pod.components.*"
   xmlns:view="com.rectius.examples.view.*"
   skinClass="com.rectius.examples.view.assets.AdvancedPodExampleSkin"
   width="100%" height="100%">
?
    <s:Group
        left="0" right="0"
        top="0" height="30"
        clipAndEnableScrolling="true">
        <s:Rect left="0" right="0"
                top="0" bottom="0">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry
                        color="#858585" ratio=".2" />
                    <s:GradientEntry color="#676767"  />
                s:LinearGradient>
            s:fill>
        s:Rect>
        <s:Label
            text="rDashboard"
            fontWeight="bold" color="0xCCCCCC"
            left="5" verticalCenter="0" />
        <s:List
            id="podMinimizedList" left="100" verticalCenter="0"
            skinClass="com.rectius.examples.pod.assets.skins.PodListMinimizedSkin"
            itemRenderer="com.rectius.examples.pod.assets.itemrenderer.PodListItemRenderer"
            dataProvider="{podManager.minimizedPods}">
            <s:layout>
                <s:HorizontalLayout
                    paddingBottom="3" paddingLeft="2"
                    paddingTop="3" paddingRight="2" />
            s:layout>
        s:List>
    s:Group>
?
    <components:PodManager id="podManager"
        skinClass="com.rectius.examples.pod.assets.skins.PodManagerHorizontalSkin"
        left="10" right="10" top="40" bottom="15">
?
        <components:firstElements>
            <view:ChartProfit
                width="100%" height="100%"
                title="Profit"/>
            <view:ChartExpenses
                width="100%" height="100%"
                title="Expenses" />
        components:firstElements>
?
        <components:secondElements>
            <view:ChartWidget
                width="100%" height="100%"
                title="Widget"/>
        components:secondElements>
?
    components:PodManager>
?
s:Application>

Rode a aplicação. O resultado deverá ser esse:

Em seguida vamos crar a classe skin com.rectius.examples.pod.assets.skins.PodWindowAdvancedSkin para o componente PodWindow:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodWindow")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="maximized" />
        <s:State name="minimized" />
        <s:State name="default" />
        <s:State name="inactiveWithControlBar" stateGroups="inactiveGroup" />
        <s:State name="inactive" stateGroups="inactiveGroup" />
        <s:State name="disabled" />
        <s:State name="normal" />
    s:states>
?
    --- drop shadow can't be hittable so it stays sibling of other graphics @private-->
    
?
    
                    <s:Label
                        id="titleDisplay"
                        maxDisplayedLines="1"
                        left="9" right="36"
                        top="1" bottom="0"
                        minHeight="30"
                        verticalAlign="middle"
                        fontWeight="bold" color="0xE6E6E6" />
?
                    --- layer 4: moveArea -->
                    --- @copy spark.components.TitleWindow#moveArea -->
                    <s:Group id="moveArea"
                        left="0" right="45"
                        top="0" bottom="0"
                        buttonMode="true"/>
?
                    <s:Button
                        id="minimizeButton"
                        buttonMode="true"
                        skinClass="com.rectius.examples.pod.assets.skins.PodWindowMinimizeButtonSkin"
                        width="15" height="15"
                        right="25" top="7" />
?
                    <s:Button
                        id="maximizeButton"
                        buttonMode="true"
                        skinClass="com.rectius.examples.pod.assets.skins.PodWindowMaximizeButtonSkin"
                        skinClass.maximized="com.rectius.examples.pod.assets.skins.PodWindowRestoreButtonSkin"
                        width="15" height="15"
                        right="7" top="7" />
?
            s:Group>
?
            --- @copy spark.components.SkinnableContainer#contentGroup -->
            <s:Group
                id="contentGroup"
                width="100%" height="100%"
                minWidth="0" minHeight="0"
                clipAndEnableScrolling="true">
            s:Group>
?
        s:Group>
?
    s:Group>
?
s:Skin>

Modifique o componente PodWindow para setar a nova classe skin com.rectius.examples.pod.assets.skins.PodWindowAdvancedSkin:

<?xml version="1.0" encoding="utf-8"?>
<components:PodWindow
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:components="com.rectius.examples.pod.components.*"
    skinClass="com.rectius.examples.pod.assets.skins.PodWindowAdvancedSkin"
    width="100%" height="100%">
components:PodWindow>

O resultado final será esse:

Your browser does not support iframes.

Espero que tenham gostado. Até a próxima!

Em conversa com o Beck Novas (@becknovaes), a respeito de interfaces, ele fez uma observação muito interessante sobre os Widgets do Mac, sabe aquele botão de + para acrescentar novos Widgets? Pois bem, ele sobe e se torna o botão de fechar x, porém ele faz isso apenas rolando, é um efeito interessante. Estávamos discutindo isso para uma aplicação, e resolvi fazer um teste no Catalyst e mostrar como é possível usar tais recursos fugindo do tradicional do Flex.
Espero que gostem do resultado, eu direcionei o botão no sentido horário, mas o ideal e você rotacionar no sentido anti-horário para que ele pareça deslizar pela “parede” e volte no sentido horário…

Enfim, se não entendeu nada, assista ao Screencast.

AppleStyle

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

In the yesterday’s post I released the source code of a Dashboard application that uses custom Spark components. Today I’ll show how to change its layout through Flex 4 skinning techniques.
Analyzing the source code you are gonna realize that this application has 2 custom Spark components: PodManager and PodWindow. Today we’ll focus in the implementation of the PodManager component, which is responsible to manage the PodWindow instances, define where it can be instantiated and for the Dashboard features.

Below you can see how to instantiate the PodManager component, define its skin class and also how you can split the PodWindow instances into two content areas, firstElements e secondElements :

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
    components:firstElements>
?
    <components:secondElements>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:secondElements>
?
components:PodManager>

And the result is the same you’ve already seen in the last post:

And If you wanna change the PodWindow’s layout, displaying it horizontally? Just do this:

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:firstElements>
?
components:PodManager>

The above code shows that you don’t need to change the component skin to change its layout, fot that you can just intantiate all PodWindow in the same content area, into firstElements. But why the PodWindow instances are being displayed horizontally? Why don’t vertically? In order to understand it let’s analyse the skin class of the PodManager component:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:VGroup width="100%" height="100%">
        <s:HGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:HGroup id="secondContainer"
            width="100%" height="100%"/>
    s:VGroup>
?
s:Skin>

The PodWindow instances are being displayed horizontally because the container firstContainer is a HGroup. Let’s turning over the PodWindow’s orientation by creating a new skin class called PodManagerHorizontalSkin :

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:HGroup width="100%" height="100%">
        <s:VGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:VGroup id="secondContainer"
            width="100%" height="100%"/>
    s:HGroup>
?
s:Skin>

And that’s the result:

Let’s instantiate again PodWindow components into the content area secondElements:

<components:firstElements>
    <view:ChartProfit
        width="100%" height="100%"
        title="Profit"/>
components:firstElements>
?
<components:secondElements>
    <view:ChartExpenses
        width="100%" height="100%"
        title="Expenses" />
    <view:ChartWidget
        width="100%" height="100%"
        title="Widget"/>
components:secondElements>

And that’s the final result:

Hope you enjoy it!

No post de ontem liberei o código fonte de um componente Spark customizado para Dashboard. Hoje vou mostrar como podemos alterar facilmente seu layout utilizando para isso as técnicas de skinning do Flex 4.
Quem fez o download do código fonte do projeto pôde observar que nesse exemplo temos 2 componentes Spark customizados: O componente PodManager e o componente PodWindow.

Hoje vou focar no componente PodManager, que é responsável por gerenciar as janelas PodWindow, definir as áreas de conteúdo onde podemos instancia-las e também por implementar as funcionalidades do dashboard. Abaixo podemos ver o componente PodManager sendo instanciado, sua classe skin e também as instâncias do componente PodWindow divididos em suas 2 áreas de conteúdo firstElements e secondElements :

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
    components:firstElements>
?
    <components:secondElements>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:secondElements>
?
components:PodManager>

O resultado é aquele que você já viu:

E se você quiser que as 3 PodWindow fiquem dispostas lado a lado no sentido horizontal? Faça isso:

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:firstElements>
?
components:PodManager>

Veja pelo código acima que não foi preciso nem mesmo alterar o skin, bastou definir todas as intâncias de PodWindow na mesma área de conteúdo firstElements. Mas por quê as janelas ficaram dispostas horizontalmente e não verticalmente? Para isso vamos analisar o skin do componente PodManager:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:VGroup width="100%" height="100%">
        <s:HGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:HGroup id="secondContainer"
            width="100%" height="100%"/>
    s:VGroup>
?
s:Skin>

As PodWindow ficaram dispostas horizontalmente pois o container firstContainer é um HGroup. Vamos criar agora um novo skin chamado PodManagerHorizontalSkin para inverter esse comportamento:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:HGroup width="100%" height="100%">
        <s:VGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:VGroup id="secondContainer"
            width="100%" height="100%"/>
    s:HGroup>
?
s:Skin>

E o resultado será:

Vamos agora instanciar novamente elementos na área de conteúdo secondElements:

<components:firstElements>
    <view:ChartProfit
        width="100%" height="100%"
        title="Profit"/>
components:firstElements>
?
<components:secondElements>
    <view:ChartExpenses
        width="100%" height="100%"
        title="Expenses" />
    <view:ChartWidget
        width="100%" height="100%"
        title="Widget"/>
components:secondElements>

e o resultado final será esse:

Espero que tenham gostado. Até a próxima!

Durante essa semana estive pesquisando mais a fundo sobre a criação de componentes no Flex 4, tirando algumas dúvidas que eu ainda tinha, e principalmente desenvolvendo vários deles para adicionar em minha biblioteca pessoal.

Esse exemplo aí de baixo é um componente Flex 4 para trabalhar com Dashboard. Se houver interesse, na semana que vem eu libero um tutorial explicando alguns conceitos sobre a criação de componentes, skin e também o seu código-fonte.

A utilização do componente na minha application ficou assim:

<components:PodManager
id="podManager" left="10" right="10" top="40" bottom="15"
skinClass="com.rectius.examples.pod.assets.skins.PodManagerSkin">
?
    <components:topElements>
            <view:ChartExpenses
            width="100%" height="100%" title="Expenses" />
    components:topElements>
?
    <components:bottomElements>
            <view:ChartProfit
            width="100%" height="100%" title="Profit"/>
            <view:ChartWidget
            width="100%" height="100%" title="Widget"/>
    components:bottomElements>
?
components:PodManager>

E o resultado é esse aqui:

Your browser does not support iframes.

Até a próxima pessoal!

Ontem a Adobe lançou a última versão do Adobe Flash Player, a 10.2, essa versão recebeu atenção especial com relação a exibição de conteudo de video (com a nova classe StageVideo), visando melhorar a performance e diminuir o consumo de CPU. Foram lançadas as versões para Mac, Windows e Linux.
Entre outras novidades temos a opção de usar fullscreen em multiplas tela e também a possibilidade de usar cursores personalizados.
Atualize seu Flash Player e acompanhe o resto das novidades diretamente do blog dos produtores do Flash Player.
E para quem é desenvolvedor, segue o link das versões debugger do Flash Player 10.2 http://www.adobe.com/support/flashplayer/downloads.html

Já temos há algum tempo a possibilidade de criar aplicativos para Android com a Flash Platform, usando o Adobe AIR ou Flash Player. Além disso o Android vem se tornando a cada dia mais popular, diariamente surgem varios aparelhos cada vez mais poderosos rodando o sistema operacional do Google e a Android Market foi reformulada para facilitar os usuarios e desenvolvedores.
Um detalhe importante é que não são todas as versões do Android que suportam o Adobe AIR e o Flash Player, é necessario que o smartphone tenha o Android 2.2(Froyo) ou posterior, e as versões do AIR deve ser a 2.5 ou Flash Player 10.1.

O desenvolvimento de aplicativos com a Flash Platform para o Android só é possivel a partir do Android 2.2(Froyo) e usando Adobe AIR 2.5 e Flash Player 10.1

Ferramentas de desenvolvimento
Adobe Flash CS5 Professional – É possivel desenvolver aplicativos para Android usando o Adobe Flash CS5 Professional, na ultima versão foi adicionado um profile “AIR for Android”, gerando o arquivo ja com o tamanho padrão de 480?800. Por enquanto não existem componentes pré-programados para Android e não é recomendado usar os já existentes no Flash.

Adobe Flash Builder 4 (burrito) – A Adobe disponilibizou juntamente com o Flash Builder 4 (burrito), o SDK do Flex versão 4.5, com componentes otimizados para dispositivos moveis, para quem se recordar, a Adobe tinha um projeto de uma versão do Flex para mobile chamado “Slider”, em virtude do rápido crescimento do processamento do smartphones atuais, a Adobe decidiu juntar esse projeto ao SDK padrao do Flex.

Qualquer editor de texto РVoc̻ pode usar qualquer editor de texto salvando na extenṣo .as ou seu editor ActionScript favorito.

Runtime Adobe AIR
Para que seu aplicativo rode em um dispotivo com Android, é necessario que seja instalado o runtime do Adobe AIR para logo em seguida você instalar seu aplicativo.

Distribuição
Você pode gerar o instalador do seu aplicativo pelo Flash Builder, Flash CS5 ou por linha de comando usando o ADT. É gerado um aplicativo com a extensão .apk. A distribuição pode ser feita atraves da Android Market, para se tornar um publisher da Android Market, basta pagar a inscrição de 25 dolares.
Acompanhe esse tutorial sobre como publicar seu aplicativo na Android Market
Caso você crie algo para rodar no Flash Player, basta rodar pelo navegador do smartphone, a Adobe tem uma página para que você possa ver alguns sites que usam Flash Player e que foram otimizados para mobile. Acesse o Adobe Flash Showcase for Mobile

Acompanhe alguns tutoriais:
Exemplos no Adobe Labs
Advanced Android development
Creating mobile apps for Android using Flash Builder “Burrito” and Flex SDK “Hero”
Test Drive for Mobile: Style the application

Nos proximos artigos, mostrarei como usar alguns recursos do AIR for Android