Esse tempos eu estava pensando em desenvolver
um forum como o Guj da vida, só que todo em flex.
logico com a parceria da lista.
abraço
----- Original Message -----
From: Arleston Lueders
To: flexdev@googlegroups.com
Sent: Tuesday, May 22, 2007 2:28 PM
Subject: [flexdev] Re: HSlider
Acho que ja existe um wiki de Flex... ja rolou esse papo na lista. Nao to
lembrado qual...
Em 22/05/07, . m a r c o s a u g u s t o < [EMAIL PROTECTED]> escreveu:
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
-~----------~----~----~----~------~----~------~--~---
