Um wiki !! Nao tem um wiki brazuca de flex !??! vamos fazê-lo ???
tão bom... todo mundo adiciona uma coisinha ou outra .... On 5/22/07, SaintBr <[EMAIL PROTECTED]> wrote: > > 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. > > > > > > > > -- . m a r c o s a u g u s t o ; .eu ando de passo leve que é pra num acordar o dia. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
