CODEWITHSUNDEEP
flashapache-flexactionscriptflex3stylesheet
Sagar Rawal
Sagar Rawal

Reputation: 1442

ScrollBar Issue

I want to create a Custom Scroll bar in my FLEX 3.0 application. Which should enable to use Text instead of |||| that shows in ScrollThumb...

I have used mx_internal for changing the style of that but still facing the problem that text is not displayed. here is the code that i have created.

import mx.core.mx_internal;

use namespace mx_internal;

public function onInit():void
{
    scrollbar.scrollThumb.iconName = "";
    scrollbar.scrollThumb.labelPlacement = "left";
    var str:String = (scrollbar.scrollPosition+1).toString() + "/" + (scrollbar.maxScrollPosition+1).toString();
    scrollbar.scrollThumb.label = str;
}

<mx:HScrollBar id="scrollbar" width="100%" pageSize="1" styleName="customScrollBar" />

Here is the stylesheet for that 

.customScrollBar
{
    up-arrow-skin: ClassReference(null);
    down-arrow-skin: ClassReference(null);
}

Here I am giving you the sample image that kind of scroll bar i want to create.

enter image description here

Please Help me...

Upvotes: 2

Views: 331

Answers (1)

Bob
Bob

Reputation: 1625

You need to create a custom ThumbSkin Class.

Then, assign that as a classReference in the CSS.

To learn how to create these custom skins, read these two Adobe documents.

http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_7.html

http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_5.html

To get the paging data into the scrollbar, you will have to calculate the paging data on the main context, and then just pass in the paging info as a String to the thumbskin with a label. The scroller and thumb itself will not be able to know how many pages it is on, or how many items are being displayed. However, if you wanted a percerntage, that could be done in the scroller.

Upvotes: 4

Related Questions