post isso em um blog ...
saintbr. =]
----- Original Message -----
From: "RoCkRaiN" <[EMAIL PROTECTED]>
To: "flexdev" <flexdev@googlegroups.com>
Sent: Tuesday, May 22, 2007 1:48 PM
Subject: [flexdev] HSlider
Boa tarde flexdevels.
Vou escrever aqui um artigo para as pessoas que estão iniciando agora
com o Flex, assim como eu, e desta forma podemos trocar algum
conhecimento de forma simples para assim nivelarmos todos os usuarios.
Espero que gostem.
O HSlider é um componente simples porem muito funcional e que garante
ao usuario uma experiencia que não é comum na internet.
Vamos colocar a mão na massa então.
Crie um novo projeto chamado Flexdev.
File > New > Flex Project um assistente se abrirá para vc selecionar a
forma com que projeto acessará os dados, selecione "Basic" e em
seguida "Next", em seguida preencha o campo "Project name" com o nome
do seu projeto (Flexdev) e então "Finish".
Selecione a guia "Design" e na janela "Components" clique e arraste
para sua area de desenvolvimento os componentes a seguir:
Layout: Panel
<mx:panel id="painel1" title="Exemplo de aplicação do controle
HSlider." height="100%" width="95%"
paddingTop="10" paddingBottom="10" paddingLeft="10"
paddingRight="10 >
Controls: Image
<mx:Image id="imagemExemplo">
Na janela de propriedades preencha o campo "source" com o endereço em
que sua imagem está localiazada
Controls: Label
<mx:Label color="blue" text="Movimente a seta para alterar as
dimensões da imagem."/>
Layout: HBox
<mx:HBox height="100%" width="100%"></mx:HBox>
Controls: HSlider
<mx:HSlider id="hSlider"
minimum="0" maximum="100" value="100" dataTipPlacement="top"
dataTipPrecision="0" snapInterval="1" tickInterval="10"
labels="['0%','100%']" allowTrackClick="true" liveDragging="true"
change="changeSize();"/>
</mx:HSlider>
Bom vamos dar uma passada por cada componente e falar um pouco sobre
cada um deles.
O painel servirá de fronteira para nossa aplicação, ou seja todos os
outros componentes deverão estar inseridos na tag <mx:panel></
mx:panel>.
A imagem será usada para visualizarmos como o HSlider funciona, com
ele definiremos as medida da imagem.
O Label será usado para orientarmos nosso usuário de como ele deverá
proceder com relação ao HSlider.
O HBox servira para posicionarmos nossa Imagem dentro do painel, isso
quer dizer que o componente Image deverá estar inserido na tag
<mx:HBox></mx:HBox>.
Em nosso objeto de estudo farei uma analise um pouco mais detalhada.
<mx:HSlider id="hSlider"
"minimum" É o valor minimo permitido pelo controle
"maximum" É o valor maximo permitido pelo controle
"dataTipPlacement" Define a posição em que será exibida a dica de
ferramenta
"dataTipPrecision" Define o numero de casas que existirão depois
do ponto flutuante, padrão = 2
"value" Contem a posição da seta, e é um numero entre as
propriedades minimum e maximum
"snapInterval" É o intervalo entre um valor e outro definido
dentro do escopo minimum e maximum
"labels" É o texto que será apresentado acima da barra deslizante
"allowTrackClick" Define se ao clicar na barra ao inves da seta
ela se moverá ou não
"tickInterval" É a distancia entre uma marca de intervalo e outra
dentro do escopo definido pelas propriedades minimum e maximum
"liveDragging" Define se é possivel arrastar livremente a seta
sobre a barra
"change" Define qual será a ação do sistema quando a posicão da
seta for alterada com relação a barra.
/>
mais sobre esse componente.
http://livedocs.adobe.com/flex/201/langref/mx/controls/HSlider.html#propertySummary
Vamos agora escrever o Script que cuidara do funcionamento do nosso
exemplo.
Clique na guia Source
abra a tag Script
<mxScript> ele fará o resto por vc, :D
dentro da tag <![CDATA[
Defina duas variaveis para receber os valores de altura e largura da
nossa imagem:
private var larguraImagem:Number=0;
private var alturaImagem:Number=0;
Agora a função que será executada no evento "change" do HSlider:
private function alteraTamanho():void
{
imagemExemplo.width = uint( larguraImagem*hSlider.value/
100 );
imagemExemplo.height = uint( alturaImagem*hSlider.value/
100 );
}
Nosso código deverá se parecer com o código a seguir:
<?xml version="1.0"?>
<!-- Exemplo de aplicação do controle Hslider. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>
<mx:Script>
<![CDATA[
private var larguraImagem:Number=0;
private var alturaImagem:Number=0;
// Evento que altera o tamanho da imagem
private function alteraTamanho():void
{
imagemExemplo.width = uint( larguraImagem*hSlider.value/
100 );
imagemExemplo.height = uint( alturaImagem*hSlider.value/
100 );
}
]]>
</mx:Script>
<mx:Panel id="painel1" title="Exemplo de aplicação do controle
Hslider." height="100%" width="95%"
paddingTop="10" paddingBottom="10" paddingLeft="10"
paddingRight="10">
<mx:HBox height="100%" width="100%">
<mx:Image id="imagemExemplo" source="@Embed('Data/
Nokia_6630.gif')"
creationComplete="larguraImagem = imagemExemplo.width;
alturaImagem = imagemExemplo.height;" />
</mx:HBox>
<mx:Label color="blue" text="Movimente a seta para alterar as
dimensões da imagem."/>
<mx:HSlider id="hSlider"
minimum="0"
maximum="100"
value="100"
dataTipPlacement="top"
dataTipPrecision="2"
snapInterval="1"
tickInterval="10"
labels="['0%','100%']"
allowTrackClick="true"
liveDragging="true"
change="alteraTamanho();"/>
</mx:Panel>
</mx:Application>
Bom é isso espero que seja util, qualquer duvida é só mandar e-mail ou
responder ao grupo.
Abraços e até o proximo artigo.
--~--~---------~--~----~------------~-------~--~----~
Você recebeu esta mensagem porque está inscrito na lista "flexdev"
Para enviar uma mensagem, envie um e-mail para flexdev@googlegroups.com
Para sair da lista, envie um email em branco para [EMAIL PROTECTED]
Mais opções estão disponíveis em http://groups.google.com/group/flexdev
-~----------~----~----~----~------~----~------~--~---
