Slider to change size

[deepa]

Hi,

I want to show a vertical slider when the user clicks an downward
arrow symbol(for example as seen in flex builder properties window to
change size of the window). Slider should be visible only when the
clik the arrow.
Thanks

[Venkat Viswanathan]

Hi Deepa,

You can use states to show and hide the slider. And on click of the button just change the state.

If this doesnt answer your question, please elaborate what exactly do you need (with code if possible).

Regards,
Venkat

[deepa]

Hi Venkat,

Thanks for the reply. I tried doing this to show the vertical slider
only when you click on the down arrow. But I still have a problem.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:local="assets.*" height="612">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.SliderEvent;

public function showSlider():void {

vslider.visible=true;

}


public function changeSliderValue():void {


fontSize.text=vslider.value.toString();
vslider1.visible=false;

}

[Bindable]
public var SliderVisible:Boolean=false;

]]>
</mx:Script>
<mx:HBox>
<mx:VBox>
<mx:Image source="scroll_down.gif" click="showSlider()"/>
<mx:VSlider id="vslider" minimum="0" maximum="50" snapInterval="1"
tickInterval="10" visible="{SliderVisible}"
change="changeSliderValue()"/>
</mx:VBox>
<mx:VBox>
<mx:TextInput id="fontSize" width="30"/>
</mx:VBox>
</mx:HBox>


</mx:Application>

Actually I am using this as a component. And I dont want the layout of
the actual page to change when the slider is visible. Right now if I
clik the down arrow the layout of the page increases to accomodate the
slider length. I should see something similar to the font size combo
box in mx:richtexteditor, but here the component is slider.
How can I show the slider but donot change the layout of the page .

Thanks

On Jul 17, 10:59 am, "Venkat Viswanathan" <helloven...@gmail.com>
wrote:

> > Thanks- Hide quoted text -
>
> - Show quoted text -

[Venkat Viswanathan]

Hi Deepa,

I tried executing your code and I did not see any change in the layout of the application. What exactly is changing for you?

And where exactly are you putting the other controls/containers that are getting affected?

Regards,
Venkat

[deepa]

Hi Venkat,

My screen has multiple VBOXes(width & height 100%) inside a VBox. This
component resides in one of the Vboxes in the screen So when I clik
the image to show the slider the corrresponding VBox height increases
to accomodate the slider height. The size of the VBox is restored once
the slider is not visible. I don't want the Vbox height to increase
when the slider is visible.Instead the slider should overlap or
extend into the next VBoxes or containers. It should look similar to
the size component that is shown in flex properties window in flex
builder.

Thanks

On Jul 21, 10:34 am, "Venkat Viswanathan" <helloven...@gmail.com>
wrote:
> Hi Deepa,
>

> > > - Show quoted text -- Hide quoted text -

[Venkat Viswanathan]

Hi Deepa,

What you can do is, when you click this button, get the localX and localY positions and convert them to global values with localToGlobal. And then create a new canvas at the main application level (make the application's layout as absolute) and place your slider in this newly created canvas. This way you can dynamically postion the slider and it will overlap the other components as well.

If you did not get what I meant to say, please show me your code and i'll tell u how to implement it.

Regards,
Venkat

[Chanaka Mannapperuma]

HI Deepa;

please try to use
<mx:Box
you can overlap boxes as u want

private function buttonClick():void{

         if(testBox.visible==false){
          testBox.visible=true;
       
         }else{
         testBox.visible=false;   



<mx:Box id="testBox" width="18%" height="100%"  minHeight="1"  showEffect="{wipeRight}" hideEffect="{wipeLeft}" backgroundColor="#ffff95"

cheers;
Chanaka

--
May the Triple Gem Bless You All !!!
Chanaka Mannapperuma,
iru...@yahoo.com
iru...@gawab.com
mmanna...@virtusa.com

[deepa]

Hi Venkat,

I am pasting my code below. This is somewhar similar to what I have
and I hope it gives you an idea what I am trying to implement. In this
code I have an image, 2 text input boxes. The second textinput box is
visible a bit far(equal to height of the slider). what I want is that
there should not be any space(betn the first row and second row)when
the slider is no visible, and when I click the slider it should
overlap the components that are below it, somethin like a combo box.
=====================================

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" xmlns:custom="*" >
<mx:Script>
<![CDATA[


]]>
</mx:Script>
<mx:VBox>


<mx:VBox>
<custom:VSliderComp id="vslidercomp"/>
<mx:TextInput/>
</mx:VBox>


</mx:VBox>
</mx:Application>
==================
slider comp

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%">

<mx:Script>
<![CDATA[

import mx.controls.Alert;

import mx.events.ColorPickerEvent;

import mx.events.SliderEvent;



public function showSlider():void {

vslider1.visible=true;

}


public function changeSliderValue():void {

size.text=vslider1.value.toString();
vslider1.visible=false;

}






]]>
</mx:Script>
<mx:HBox>

<mx:Image source="scroll_down.gif" click="showSlider()"/>

<mx:VSlider id="vslider1" minimum="0" maximum="50" snapInterval="1"
tickInterval="10" visible="false" change="changeSliderValue()" />

<mx:TextInput id="size" width="30" />

</mx:HBox>


</mx:VBox>
================



Thanks

On Jul 23, 5:07 pm, "Chanaka Mannapperuma" <iru...@gmail.com> wrote:
> HI Deepa;
>
> please try to use
> <mx:Box
> you can overlap boxes as u want
>
> private function buttonClick():void{
>
>          if(testBox.visible==false){
>           testBox.visible=true;
>
>          }else{
>          testBox.visible=false;
>
> <mx:Box id="testBox" width="18%" height="100%"  minHeight="1"
> showEffect="{wipeRight}" hideEffect="{wipeLeft}" backgroundColor="#ffff95"
>
> cheers;
> Chanaka
>

> On Thu, Jul 24, 2008 at 12:34 AM, Venkat Viswanathan <helloven...@gmail.com>

> wrote:
>
>
>
>
>
> > Hi Deepa,
>
> > What you can do is, when you click this button, get the localX and localY
> > positions and convert them to global values with localToGlobal. And then
> > create a new canvas at the main application level (make the application's
> > layout as absolute) and place your slider in this newly created canvas. This
> > way you can dynamically postion the slider and it will overlap the other
> > components as well.
>
> > If you did not get what I meant to say, please show me your code and i'll
> > tell u how to implement it.
>
> > Regards,
> > Venkat
>

> mmannapper...@virtusa.com- Hide quoted text -

[Venkat Viswanathan]

Hi Deepa,

You should not use VBox in your main application. It wont work that way. Can you change your code to something like this:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:custom="*" >
<mx:Script>
       <![CDATA[


           ]]>
   </mx:Script>

   <mx:TextInput y="{vslidercomp.size.height}"/>

   <custom:VSliderComp id="vslidercomp"/>

</mx:Application>

Regards,
Venkat

[Ajay Chhaya]

Hi Deepa,

You can check includeInLayout property, which can be helpful in such layouts.

---------------------
Ajay Chhaya

www.ajaychhaya.com
--------------------------------