AIR Mobile/ Blackberry/ Flex Mobile Framework

Porte sua app para o tablet da BlackBerry e ganhe um (Playbook tablet) novinho em folha

É, você não ouviu errado, a BlackBerry está com uma ótima promoção para desenvolvedores adotarem sua plataforma de uma vez por todas.
Tanto é que agora no Blackberry DevCon Américas, todos os participantes da conferencia irão sair com um tablet novinho em folha.

A promoção é a seguinte:

Você se registra como membro de parceiros da Blackberry pela bagatela de US$699, usando o código DSTSH5. Ou seja 2 coelhos com 1 paulada só.
Registre-se para a conferência até o dia 17 deste mês de Outubro,2011. E sai com um Tablet novinho para portar sua App.

A Blackberry tem um excelente ecosistema que tem atraído muitos desenvolvedores para adotar a plataforma, tanto é que suporta Adobe AIR, Flex, Flash, Actionscript, Java,tecnologias Web em geral.

Acesse agora e registre-se para o Blackberry DevCon Américas.

AIR 2.7/ AIR Mobile/ Android/ Flex/ Flex 4.5/ Flex Mobile Framework

Criando seu primeiro aplicativo Flex 4.5 Mobile para smartphones Android parte (1 de 3)

Depois de muito tempo sem tempo, olha que controvérsia, acabei com algumas horas livres essa tarde e aproveito para escrever esse post.
Quer criar Apps para Android com o Adobe AIR e Flex? Siga a receita abaixo para isso.

Ja é sabido de sua parte que o Flex cria apps nativas para Android de forma hiper simples. Se você é acostumado ao seu workflow de componentes, ciclos de vidas, você irá facilmente criar Apps elegantes, rápidas e intuitivas para dispositivos móveis.

O Framework do Flex, que usaremos é o Flex 4.5 com overlay do Adobe AIR 2.7, que conta com 4x mais performance do que o AIR 2.6. Em suma, o Flex roda em dispositivos móveis por que o AIR Run-time roda no Android.

Só que antes de você sair comprando ai seus dispositivos xing-lings ou baratinhos com o Android para testar suas criações artisticas, aconselho ler esse POST.

Para começar a brincadeira, você vai precisar de alguns ingredientes, vamos aos itens:

Antes de configurar alguma coisa, é super importante que você tenha em mente a seguinte afirmação. Eu entendo os riscos e serei um bom garoto(a), e nunca irei portar nenhum App meu com Datagrid de 100 registros dentro de uma App móvel, não farei Zilhões de operações.

Ok! Agora pode continuar.

Criando uma conta no Google e no Android Market

Esse passo é o mais simples que você encontrará nesse post, duvido que você não tenha uma conta no Google, vai dizer pajé que tu não tem um @gmail.com ? Uma continha perdida do Orkut? Ah! você vive em outro mundo que não é esse, volta para lá de onde tu veio vai! Esqueça isso de Mobile.

Ok, animos acalmados, criou a conta? Ah! Já tem? Ótimo, o próximo passo é registra-se no Android Market e se tornar um publicador de Apps lá. O processo é mega simples, entre no endereço https://market.android.com/publish/Home
android_publish_home.

Coloque seu login e senha e clique em Login, como você ainda é novato, vai aparecer outra tela perguntando seu Developer Name, dados de contato e telefone. Lembre-se coloque um nome de guerra, nome profissional, nada de vitinho, Vikky, Fofinha, LindinhadoAndroid, algo que passe credibilidade aos seus futuros usuários, Caso você seja uma empresa nem preciso fazer essas recomendações, basta colocar o nome da empresa que você quer usar como Developer Name no formulário.

android_publish_info

Clique agora em Continue.

Depois disso, você precisará dos

US$25 dolares

para fazer a sua inscrição no programa por 1 ano, se você tem conta no Google Checkout basta gastar por lá, caso contrário use algum cartão de crédito de qualquer bandeira que aceite transações internacionais.

android_publish_pagamento

Pronto, você está com a conta no Google Android Market criada e é só aguardar a liberação. Em média esse processo é quase imediato, em outros pode levar cerca de 1 dia no máximo. A coisa é rápida, então fica de olho no e-mail de boas vindas quando tudo for aceito pelo Google.

Aqui está minha dashboard no Android Market.

android_publish_dashboard

Configurando o Flex 4.5.1 SDK para usar o AIR 2.7 SDK

Como o SDK do Flex 4.5.1 ainda vem com suporte ao Adobe AIR 2.6 que é cerca de 4.x mais lento tanto no Android quanto no IOS, você vai precisar configurar seu SDK, esse processo agente chama de “SDK Overlay”, que é basicamente um CTRL+C e CTRL+V em alguns diretórios que sobrepõem arquivos antigos do AIR 2.6.

Baixou o AIR 2.7 SDK? Ok, feito isso extraia ele para um diretório de sua confiança, que seja simples de acessar. O pacote contendo o AIR 2.7 SDK tem os seguintes diretórios e arquivos.

air_2.7_sdk

Se você tem um igual, sinal que vai dar tudo certo, meio caminho andado.

Baixou o Flex 4.5.1 SDK? Ótimo, faça o mesmo processo do AIR 2.7 SDK e descompacte ele no seu diretório predileto, eu particularmente sempre deixo em um diretório meu chamado SDKs, porém nesse exemplo tem pessoas que gostam de deixar no mesmo diretório dos já existentes SDK do Flash Builder 4.5.1.

Ok, se você tem o SDK já descompactado, basta copiar o conteúdo da pasta onde você descompactou o AIR 2.7 SDK dentro da pasta do Flex 4.5.1. SDK. A idéia é sobrescrever os já existentes.

Feito? Ok, próximo passo é instalar o Flash Builder, a ferramenta perfeita para você criar suas apps, não só para Android como para outros devices, ios, BlackBerry Playbook, Web e Desktop.

Flash Builder Instalado? Perfeito, vamos agora configurar o ambiente Android para rodar sua app no console nativo que o próprio google disponibiliza.

Configurando o Android Console

Já tem o Java instalado em sua máquina? Então pule essa etapa, ela só serve mesmo para quem nunca usou o JDK ou tem apenas o JRE.

Para você testar no console, você precisa do JDK(Java Development Kit), que já vem tudo em um, então dependendo de seu sistema operacional, você precisará fazer alguns processos manuais, já no Windows é meio for dummies, é next-> next-> finish.

Baixou o correto referente ao seu OS? Instalou? Ótimo, pois agora precisamos definir as variáveis de ambiente do JAVA_HOME nas configurações globais do sistema operacional.

No Windows, vá em Iniciar – > Computador -> Botão direito do mouse -> Escolha propriedades -> Escolha aba Configurações Avançadas -> Variáveis de ambiente.

Adicione um novo registro na suas variáveis de ambiente com o nome JAVA_HOME. Olhe o exemplo abaixo.

jdk_java_home

Se você configurou tudo certinho, você pode testar no prompt do DOS do windows digitando java -version. Vai aparecer isso aqui ó.

java_version_console

Agora você está pronto para o Android SDK.

Baixando e configurando o Android SDK

Baixou o SDK? Então descompacte em um diretório de fácil acesso, eu coloquei o meu em C:/android-sdk. Para facilitar digitação de comandos.

Execute o SDK Manager, que é o carinha responsável por baixar todos os arquivos necessários do Android SDK da nave mãe Google.

android_avd

Pela primeira vez, esse processo dependendo de sua conexão com a internet, leva uma média de 1 hora para baixar todos os arquivos para seu computador.
Depois disso ele fica como o meu aqui.

android_sdk_dir

Ok, tudo configurado e instalado, vamos verificar se está mesmo. Com o mesmo comando que fiz para o java -version, usarei agora o comando adb version que é o Android Debug Bridge , para ver se executa corretamente.

android_adb

Se aparecer como na imagem acima, é sinal que tudo está correto e perfeito para criarmos nosso Android Emulator, onde iremos simular o sistema operacional Android. Prontos para esse passo?

Ah! Que esqueci, que depois que ele instalar tudo, ele vai pedir para você fechar o SDK Manager e abrir novamente, para que as alterações sejam aplicadas.

Criando o Android Emulator

Ok, volte agora ao SDK Manager e escolha a opção Virtual Devices.

android_virtual_devices

Veja que nesse meu eu já possuo 2 devices virtuais, para criar outro basta clicar em “New…”.

android_new_console

Preencha os dados de seu virtual device, assim como mostra na imagem acima, veja que eu não esqueci de criar usando o Android 2.2 API level 8, que é o necessário para o Adobe AIR rodar e consecutivamente o Flex. Como eu quero apenas testar a App nativa no dispositivo virtual eu deixei as outras configurações padrão, salvo apenas para a memória alocada de 100mb para esse console. Agora clique em “Create AVD”.

O AVD foi criado, só que agora falta executar, esse processo é bem gastante se você tem pouca memória na máquina, típicos 2GB, demora aproximadamente 20min até 30min para ele começar realmente executar, Eu por exemplo tenho 8Gb de memória e leva uma média de 5min. Se você tiver problemas na hora de executar veja se o JVM está setado corretamente.

Para executar, basta clicar em “Start…”.

android_starting

Essa tela preta é demorada, então aproveita e vai tomar um café, falar com sua tchutchuca.

….
……………
Passados alguns minutos. E eis que temos a tela inicial do Android rodando.

android_started

Android rodando, navegando na Web, agora só temos um problema, não temos o Adobe AIR instalado para testar a App, como fazer?

Instalando o Adobe AIR APK no seu emulador

Se você é por natureza curioso, dúvido você não ter bisbilhotado o SDK do Flex que você fez o overlay(Sobreposição) do AIR 2.7 no Flex 4.5.1 SDK. Abra esse diretório para você navegar nele, dentro do SDK você vai encontrar o nosso famoso AIR.apk que é necessário para rodar suas Apps.

air_apk_folder

Veja que eu fiz um mapinha de onde você vai achar o run-time do AIR para seu emulador Android, existem dois, para o Device e para o Emulador, você deve usar a versão Emulador, que é com ela que você vai conseguir emular alguma coisa. Resumindo eis aqui o caminho completo em minha máquina.

C:Program Files (x86)AdobeAdobe Flash Builder 4.5sdks4.5.1_air2.7runtimesairandroidemulator

Lembre-se seu índio, que o diretório na sua máquina pode ser diferente, se não você vai reclamar depois nos comentários que não consegiu achar o tal APK.

Eu copiei o meu para esse exemplo para o diretório raiz, C:/ para facilitar agora o processo de digitação pelo prompt de comando.

Abra o CMD(MS-DOS), e digite o comandos abaixo.

adb devices

adb_devices_list

Se aparecer o nosso Emulador em execução,é por que está tudo OK.

Para instalar é super simples, digite o comando.

adb install {NOME-DO-EMULADOR} c:/Runtime.apk

adb_devices_install_sucess

Finalmente terminamos essa parte chata de configurar a máquina, seu Adobe AIR está funcionando perfeitamente no seu device, Só que como é que eu sei que ele está instalado? Tem 2 formas, vê se o resultado do comando de instalar deu certo e também indo no Emulador, clicar em
Settings -> Applications-> Manage Applications; E você vai ver o Adobe AIR instalado lá.

air_installed

Tudo pronto, agora só abrir o Flash Builder já instalado e começar com sua App Hello World. Nos vemos na próxima Etapa.

Aproveite e participe do grupo de discussão Flex-Mobile

Flex/ Flex 4.6

Flex 4.6 e as novidades para o mundo mobile

flexmobiles

O time de desenvolvimento do Flex SDK vem me surpreendendo com sua capacidade multi-disciplinar em inovar não só em Web/Desktop mais também Mobile.

O grito de guerra interno no time de Flex é Mobilidade. E eles tem avançado muito nesse quesito.

Só para se ter uma idéia do que esperar por vir, se você está acostumado ao Flex 4.5 e re-compilar sua aplicação usando o SDK 4.6 sua aplicação vai ganhar 50% de aumento de performance.

Eu disse

50% de ganho de performance

.

Como se não bastasse essa novidade o SDK do Flex vem com o esquema de textInput nativo e cross-device, em resumo, funciona nativamente qualquer input de dados, usufruindo do select, corretor ortográfico do dispositivo.

Existe ainda alguns novos componentes que eles estão trabalhando como o SplitNavigator, Toogle Switch, Date Spinner, List Spinner.

Por hora esse post é para te deixar com água na boca, se você quiser saber mais, dá uma passada nesse artigo publicado hoje no Adobe Devnet.

Se caso você quer aprender mais sobre desenvolvimento Mobile com Flex, acesse o curso da RIACycle onde sou instrutor.

Pessoal

O que está acontecendo no mundo? Excessos!

Já parou para se perguntar o por quê de tanta coisa de ruim acontecendo no mundo e em nosso país que eu me pergunto. Para onde agente vai?!

Estamos em um século de faltas e excessos? Fragilidade da raça humana?

Pense comigo, falta tanta paciência hoje, corremos para um lado e para o outro e não saimos do lugar com as nossas humanas pressas, já parou para pensar o tão idiota você se torna com essas pressas malucas que acabam dando em nada. E me imagino daqui 20 ou 30 anos, se esse post vai ser lido por alguém como eu que questiona todos os dias o que está acontecendo.

Pare e pense, vale a pena correr? Falta tempo para que mesmo? Controles, agilidades, processos, burocracia, isso só nos atrasa na escala evolutiva humana. Parece que você esqueceu que leva cerca de 100 anos para optimizarmos algo do século passado.

Boa parte da tecnologia que temos hoje foi feita ainda no século 18, melhorada no 19, usada em escala real nos 20 e começando a optimizar nesse século.

Na boa! Acho que temos excesso de informação, absorvemos sem querer notícias ruins, corrupção lavada de políticos, acidentes, trágica mágica de preços abusivos, concorrência desleal. Será que isso é realmente bom para mim como ser humano.

Temos uma certa fragilidade nesses excessos, nessas faltas, que abrem vaga para doenças não antes existentes como, fadiga, stress, depressão, que são doenças relativamente novas.
Tal fragilidade acaba com nosso ciclo construtivo da vida e do intelectuo da raça humana como nós conheçemos. Perdemos a humanidade e fica nos restando apenas o aspecto mais desumano de nossa raça, a Ignorância, falta de tempo, pressa em tudo, falta de paciência.

Talvez esses excessos causem mesmo tal fadiga (stress), essas faltas de honra, honestidade possam ser afetadas por maus exemplos passados a diante na mídia que se preocupa apenas em vender e não facultativamente informar construtivamente.

A ganancia é sem dúvida um grande mal para o humano, quando ele conseguir controlar essa força sobre-natural dele, teremos uma raça pura de mal pensamentos, de agir na hora necessária, sermos ponderados e não bons mocinhos.

Pode ser que o mundo tenha mudado, e eu não mudei com ele. Eu acho que o homem e sua ganância aumentaram e com isso alguns querem que eu faça o mesmo. Por que o mundo de hoje é o mesmo de 10 mil anos atrás. A história é só um ciclo com novos personagens, mais com o mesmo enrredo.

Sei lá, pode ser que seja mal do século 21, que por incrível que pareça me dei conta que já não tenho mais tempo de escrever esse post….

Flash/ Flex/ Google

SDK do Google Maps para Flash e Flex será descontinuado pelo Google

Infelizmente como tudo na vida, temos as três fases, início, meio e fim.

A última parte doi mais ainda quando você ver que tem certas prioridades para serem vencidas no Google como o uso geral. Salvar milhões do que minoria. E esse pensamento é bem certo quando você detém aquilo que criou.

O Google acabou de anunciar que vai descontinuar a versão do SDK do Flash/Flex que ele tem para plataforma Flash, e focando seus esforços apenas na plataforma Javascript que tem ai uma infinidade de funções e com versões sendo liberadas bem mais rápidas do que para a versão para Flash.

Calma ai, não se desespere, o Google não vai dar um shutdown total no projeto, ele só não irá mais implementar novas funções, e corrigirá apenas falhas críticas e problemas de segurança, você continuará usando o Google Maps Component em suas apps Flex/Flash.

Flex/ Flex 4/ Flex 4.5

Flex comunicando com o Skins

É possível fazer isso no mundo de duas formas, sendo um super herói ou sendo um framework do Flex. 😀

Criar skins é maravilhoso no Flex, você faz seu sistema ganhar vida, uma vida não só fantástica mais uma vida dinamica. Alguns tem dúvidas quanto e como fazer isso fluir de forma simples.

A explicação mais clara e objetiva que eu posso dar é : Veja o Camaleão. Sua pele é altamente camuflável e adaptada a qualquer terreno. Skins no Flex é justamente isso, adaptar o feio em bonito. Embora o camaleão continue feio, mudando só sua cor.

Vejamos o exemplo vivo abaixo

Requer o Flash Player

Agora veja como é feito, eu crio um novo Skin no Flash Builder com as seguintes caracteristicas.

Arquivo MySkin.mxml

<?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:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
 
    <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("MyContainer")]
    ]]>
    </fx:Metadata>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
    <s:Ellipse width="{hostComponent.raio}" height="{hostComponent.raio}" id="background" verticalCenter="0" horizontalCenter="0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="{hostComponent.color}"/>
        </s:fill>
    </s:Ellipse>
 
    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
 
</s:Skin>

A comunicação do skin com o componente que vai usa-lo, se dá pela palavrinha reservada hostComponent, veja que no meu tag Ellipse, eu uso ele para mudar a largura e altura usando a propriedade raio que é uma propriedade do componente que eu tenho e irei usar.

Outro detalhe é que esse skin eu seto quem será o host, ou seja quem hospedará ele.

   <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("MyContainer")]
    ]]>
    </fx:Metadata>

No Caso eu tenho o componente MyContainer

Que tem o seguinte código:

Arquivo MyContainer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
					  xmlns:s="library://ns.adobe.com/flex/spark"
					  xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
					  skinClass="MySkin">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
 
 
			[Bindable]private var _color:uint = 0x000000;
			[Bindable]private var _raio:Number = 100;
 
 
			[Bindable]
			public function get raio():Number
			{
				return _raio;
			}
 
			public function set raio(value:Number):void
			{
				_raio = value;
			}
 
			[Bindable]
			public function get color():uint
			{
				return _color;
			}
 
			public function set color(value:uint):void
			{
				_color = value;
			}
 
		]]>
	</fx:Script>
</s:SkinnableContainer>

E para usar basta eu arrastar meu Container para tela e setar via CSS ou até mesmo direto no container a propriedade skinClass.

<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
					  xmlns:s="library://ns.adobe.com/flex/spark"
					  xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
					  skinClass="MySkin">

E aqui é o código de App que você viu lá em cima.

<?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:ns1="*"
			   width="385" height="340" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			protected function changeMyCompInnerSize(event:Event):void
			{
				MyComp.raio = radioChanger.value;
			}
		]]>
	</fx:Script>
 
	<s:HSlider id="radioChanger" x="143" y="303"
			   change="changeMyCompInnerSize(event)" maximum="500" minimum="10"
			   stepSize="1"/>
 
	<ns1:MyContainer color="#84C239" id="MyComp" x="59" y="35" width="265" height="229">
		<s:Label text="hello World" verticalCenter="0" horizontalCenter="0"/>
	</ns1:MyContainer>
 
</s:Application>

Fácil não? Os skins realmente são salvadores da pátria, você consegue absorver muita e transformar o que era complexo em simples. Vejamos outro exemplo abaixo.

Nesse exemplo eu usei de forma bem simples o Gauge Chart , uma pequena demonstração de como Skins podem nos ajudar e muito, principalmente criar gráficos.

Requer o Flash Player

Aqui abaixo você ver o código fonte da App de cima.

 
<?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:ns1="*"
			   width="581" height="362" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			protected function mudarValor(event:Event):void
			{
				// TODO Auto-generated method stub
				grafico.value = valorChanger.value;
			}
 
			protected function mudarPressao(event:Event):void
			{
				// TODO Auto-generated method stub
				pressaoChart.value = pressaoValor.value;
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<ns1:MyGauge id="grafico" x="30" y="70" width="240" height="240">
	</ns1:MyGauge>
	<s:HSlider id="valorChanger" x="108" y="330" change="mudarValor(event)" maximum="360" minimum="0"
			   stepSize="1" value="90"/>
	<s:HSlider id="pressaoValor" x="399" y="331" change="mudarPressao(event)" maximum="360" minimum="0"
			   stepSize="1" value="90"/>
	<s:Label x="321" y="330" text="Valor"/>
	<s:Label x="30" y="329" text="Valor"/>
	<s:Label x="39" y="41" fontSize="22" text="Análise do Dosador"/>
	<s:Label x="313" y="40" fontSize="22" text="Pressão no catalizador"/>
	<ns1:MyGauge value="220" fillColors="{[0xe70505,0xb40909]}" id="pressaoChart" x="301" y="70" width="240" height="240">
	</ns1:MyGauge>
</s:Application>

O Componente MyGaugue.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer skinClass="GaugeSkin" xmlns:fx="http://ns.adobe.com/mxml/2009"
					  xmlns:s="library://ns.adobe.com/flex/spark"
					  xmlns:mx="library://ns.adobe.com/flex/mx" >
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
 
			[Bindable]private var _value:Number = 90;
			[Bindable]private var _ponteiroColor:uint = 0x000000;
			[Bindable]private var _fillColors:Array = [0x6FC9FF,0x5380D0];
 
 
 
			[Bindable]
			public function get fillColors():Array
			{
				return _fillColors;
			}
 
			public function set fillColors(value:Array):void
			{
				_fillColors = value;
			}
 
			[Bindable]
			public function get ponteiroColor():uint
			{
				return _ponteiroColor;
			}
 
			public function set ponteiroColor(value:uint):void
			{
				_ponteiroColor = value;
			}
 
			[Bindable]
			public function get value():Number
			{
				return _value;
			}
 
			public function set value(value:Number):void
			{
				_value = value;
			}
 
		]]>
	</fx:Script>
</s:SkinnableContainer>

E finalmente o código do GaugeSkin.xml

<?xml version="1.0" encoding="utf-8"?>
 
<!--
 
    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.
 
    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.
 
-->
 
<!--- The default skin class for a Spark SkinnableContainer container.
 
     @see spark.components.SkinnableContainer
 
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
 
    <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("MyGauge")]
    ]]>
    </fx:Metadata>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
	<s:Group width="100%" height="100%">
 
 
	<s:Ellipse width="100%" height="100%">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry alpha="1.0" color="{hostComponent.fillColors[0]}" ratio="0"/>
				<s:GradientEntry alpha="1.0" color="{hostComponent.fillColors[1]}" ratio="1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Ellipse>
	<s:Rect x="{Math.ceil(hostComponent.width*0.5)}" y="0" width="10" height="{hostComponent.width/2}"
			rotation="{hostComponent.value}" transformX="5"
			transformY="{Math.ceil(hostComponent.width*0.5)}">
		<s:fill>
			<s:SolidColor color="{hostComponent.ponteiroColor}"/>
		</s:fill>
	</s:Rect>
	<s:RichText  horizontalCenter="0" y="30" color="#ffffff" fontFamily="Arial" fontSize="14" fontWeight="bold"
				tabStops="S0 S50" text="{hostComponent.value}"/>
	</s:Group>
    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
 
</s:Skin>

Até a próxima e bons estudos com Skins.