Spark textarea with different slider

Question

I am rather new to Flex and have a problem with a scrollbar for a textarea. Basically, I would want the textarea to have a vertical scrollbar that looks like the VSlider component, not like a VSrollBar. (I.e. a line with a dot tracker, not a box with a box tracker).

Now I figured out how I could make a textarea with no scrollbars and link it to a seperate VSlider component and update via events, but I am pretty sure there should be some way to use only the textarea and set its scrollbar component to look like the VSlider instead of the VScrollBar.

Can anyone help?

score 1 · Answer 1 · answered Aug 02 '12 at 10:59

I solved this problem by using spark TextArea and a skin for Vertical Scroll Bar. Also you have to skin each button from this skin.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <fx:Metadata>
        <![CDATA[ 
            [HostComponent("spark.components.VScrollBar")]
        ]]>
    </fx:Metadata> 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="inactive" />
    </s:states>
    <s:Group top="2" horizontalCenter="0" bottom="2" left="2" right="2">
        <s:Button id="track" top="8" bottom="8" width="10" focusEnabled="false" 
                  skinClass="skins.scroller.VerticalScrollBarTrackSkin"/>
        <s:Button id="thumb" horizontalCenter="0" focusEnabled="false" visible.inactive="false"
                  skinClass="skins.scroller.VerticalScrollBarThumbSkin" buttonMode="true"/>
        <s:Button id="decrementButton" top="0" enabled.inactive="false"
                  focusEnabled="false" horizontalCenter="0" buttonMode="true"
                  skinClass="skins.scroller.VerticalScrollBarDecrementButtonSkin"/>
        <s:Button id="incrementButton" bottom="0" enabled.inactive="false"
                  focusEnabled="false" horizontalCenter="0" buttonMode="true"
                  skinClass="skins.scroller.VerticalScrollBarIncrementButtonSkin"/>
    </s:Group>
</s:SparkSkin>

Then you have to apply style to your application.

s|VScrollBar
{
    skinClass:ClassReference("skins.scroller.VerticalScrollBarSkin");
}

score 0 · Accepted Answer · answered Aug 14 '12 at 13:49

0

For this case, I ended up using a VSlider, which I "manually" synced with the textarea scrolling via event listenered. Not the most smooth way, but easiest to implement in this case.

answered Aug 14 '12 at 13:49

kontur

4,934
2
36
62

Spark textarea with different slider

2 Answers2