Ofereço toda a hospedagem.... Alguem compra um dom ? pq vai ficar feio como subdominio dos meus sites.. heheh
On 5/22/07, . m a r c o s a u g u s t o <[EMAIL PROTECTED]> wrote: > 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. > -- . 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 -~----------~----~----~----~------~----~------~--~---
