PDA

View Full Version : custom components


sa6k0o0
10-26-2006, 08:01 PM
is there any way to make the scrollbar without the arrows ?
Or the way is just to build a new scrollbar component in flex ?

And I have build already many components in flash 8 (UI Components and more complex like Menu etc)
is it possible to use them in flex2, or it is needed to rebuild them in flash 9 with actionscript3 ?

Assertnfailure
10-26-2006, 08:26 PM
A scrollbar without arrows would be a VSlider.

You can't use AS 2 code with flex 2, you'd have to rewrite them...

sa6k0o0
10-26-2006, 09:01 PM
But I don't thing that I can skin the vslider so that to become a real scrollbar.
I just want the scrollbar to have specific Scroll Track and specific Scroll Thumb, and to get rid of the buttons up and down (arrows).

It is supposed to be something like the about section in http://www.espacestudio.com ( there is a scrollbar without arrows[scrollUp,scrollDown])

thanks

Alex

sa6k0o0
10-26-2006, 09:05 PM
Well if there is no way to do this on an easy way , I am ready to make my own scrollbar component in flex or flash9 ( I don't thing that my scrollbar component in flash 8 will work in flex2)

So if somebody can give me some directions I really will appreciate it.

Tink
10-26-2006, 10:09 PM
You can write your own ScrollArrowSkin class and assign it to as VScrollBar or HScrollBar as downArrowDisabledSkin, downArrowDownSkin, downArrowOverSkin, downArrowUpSkin, upArrowDisabledSkin, upArrowDownSkin, upArrowOverSkin, upArrowUpSkin.

take a look at the deafult class in Adobe/Flex Builder 2 Plug-in/Flex SDK 2/frameworks/source/mx/skins/halo/ScrollArrowSkin.as

The arrow is drawn at line 359 // Draw up or down arrow
g.beginFill(arrowColor);
if (upArrow)
{
g.moveTo(w / 2, 6);
g.lineTo(w - 5, h - 6);
g.lineTo(5, h - 6);
g.lineTo(w / 2, 6);
}
else
{
g.moveTo(w / 2, h - 6);
g.lineTo(w - 5, 6);
g.lineTo(5, 6);
g.lineTo(w / 2, h - 6);
}
g.endFill();

sa6k0o0
10-27-2006, 10:13 PM
I removed the scroll arrows, that is cool, but now the scrollthumb doesn't go all the way up and all the way down.

I put also to my CustomScrollArrowSkin class

override public function get measuredHeight():Number
{
return 0;
}

but it still is not working exactly on the way it is supposed to be.....

Here is the final example http://code-craft.net/Sa6k0o0/test/flex/1/Aurora.html

If somebody knows what else has to be chanded , in which class should I look or just some information how to continue it would be great.

colfaxrev
10-27-2006, 10:36 PM
i say keep the arrows. some people DO use them!

sa6k0o0
10-27-2006, 10:55 PM
I have a specific design that I have to follow, and there are no arrows.
I didn't chane the core classes for the arrows, I made just a css that has ClassReference('CustomScrollArrowSkin' ); where CustomScrollArrowSkin is my specific class for building arrows ( in this case the class is almost empty).

But for the project I am doing I have somehow to get rid of the arrows.

Tink
10-27-2006, 11:06 PM
looks like ScrollBar uses Button.getExplicitOrMeasuredHeight(). It then adds your skins to the button.


scrollThumb.setRange(upArrow.getExplicitOrMeasured Height() + 0,
virtualHeight -
downArrow.getExplicitOrMeasuredHeight() -
scrollThumb.height,
this.minScrollPosition,
this.maxScrollPosition);


try extending VScrollBar and overriding setScrollProperties() override public function setScrollProperties(pageSize:Number,
minScrollPosition:Number,
maxScrollPosition:Number,
pageScrollSize:Number = 0):void
{
var thumbHeight:Number;

this.pageSize = pageSize;

_pageScrollSize = (pageScrollSize > 0) ? pageScrollSize : pageSize;

this.minScrollPosition = Math.max(minScrollPosition, 0);
this.maxScrollPosition = Math.max(maxScrollPosition, 0);

_scrollPosition = Math.max(this.minScrollPosition, _scrollPosition);
_scrollPosition = Math.min(this.maxScrollPosition, _scrollPosition);

// If the ScrollBar is enabled and has a nonzero range ...
if (this.maxScrollPosition - this.minScrollPosition > 0 && enabled)
{
upArrow.enabled = true;
downArrow.enabled = true;

addEventListener(MouseEvent.MOUSE_DOWN,
scrollTrack_mouseDownHandler);
addEventListener(MouseEvent.MOUSE_OVER,
scrollTrack_mouseOverHandler);
addEventListener(MouseEvent.MOUSE_OUT,
scrollTrack_mouseOutHandler);

if (!scrollThumb)
{
scrollThumb = new ScrollThumb();

scrollThumb.focusEnabled = false;

// Add the thumb above the up arrow but below the down arrow
addChildAt(scrollThumb, getChildIndex(downArrow));

scrollThumb.styleName = this;

// This button is a 4-state Button
// that by default uses the ScrollThumbSkin.
scrollThumb.upSkinName = "thumbUpSkin";
scrollThumb.overSkinName = "thumbOverSkin";
scrollThumb.downSkinName = "thumbDownSkin";
scrollThumb.iconName = "thumbIcon";
}

thumbHeight = trackHeight < 0 ? 0 : Math.round(
pageSize /
(this.maxScrollPosition - this.minScrollPosition + pageSize) *
trackHeight);

if (thumbHeight < scrollThumb.minHeight)
{
if (trackHeight < scrollThumb.minHeight)
{
scrollThumb.visible = false;
}
else
{
thumbHeight = scrollThumb.minHeight;
scrollThumb.visible = true;
scrollThumb.setActualSize(_minWidth, scrollThumb.minHeight);
}
}
else
{
scrollThumb.visible = true;
scrollThumb.setActualSize(_minWidth, thumbHeight);
}

scrollThumb.setRange( 0,
virtualHeight - scrollThumb.height,
this.minScrollPosition,
this.maxScrollPosition);

scrollPosition = Math.max(Math.min(scrollPosition, this.maxScrollPosition), this.minScrollPosition);
}
else
{
upArrow.enabled = false;
downArrow.enabled = false;

if (scrollThumb)
scrollThumb.visible = false;
}
}

Tink
10-27-2006, 11:13 PM
bugger that has private props in it. try public function setScrollProperties(pageSize:Number,
minScrollPosition:Number,
maxScrollPosition:Number,
pageScrollSize:Number = 0):void
{
super.setScrollProperties(pageSize
minScrollPosition,
maxScrollPosition,
pageScrollSize)

// If the ScrollBar is enabled and has a nonzero range ...
if (this.maxScrollPosition - this.minScrollPosition > 0 && enabled)
{

scrollThumb.setRange( 0,
virtualHeight - scrollThumb.height,
this.minScrollPosition,
this.maxScrollPosition);

}

}its a bit hacky

Tink
10-27-2006, 11:26 PM
although it looks like your measureHeight should do the job as the button wont have an explicit height, and therefore it should use your measure method.

sa6k0o0
10-27-2006, 11:51 PM
how exactly I am supposed to use the new scrollbar class
Lets say I have myVerticalScrollbar class that extends VScrollBar .
Than how I am supposed to apply the class to the flex project.

I tryied like this

<mx:VBox verticalScrollBarStyleName="poVerticalScroll" verticalScrollBar=ClassReference('myVerticalScroll Bar')>

But it doesn't work :(
I want to apply my new class myVerticalSrollbar to a vbox, so that when if the vbox has to much content to show my scrollbar and the behaviour to be like a regular scrollview, but I still can not attach the new class to the Vbox VerticalScrolllBar

Tink
10-27-2006, 11:59 PM
<mx:VBox verticalScrollBarStyleName="poVerticalScroll" verticalScrollBar="{new MyVerticalScrollBar()}")>does that work?

if not try creating an instance of it, and make it bindable

sa6k0o0
10-28-2006, 12:22 AM
It doesn't give compile error
but when it start loading the swf , the preloader just stops and that is it.

Here is the output:

http://code-craft.net/Sa6k0o0/test/flex/2/Aurora.html

Tink
10-28-2006, 12:31 AM
yeah its throwing errors

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at po_manual_item/::my_init()
at po_manual_item/___Canvas1_initialize()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunctio n()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/set processedDescriptors()
at mx.core::Container/createComponentsFromDescriptors()
at mx.core::Container/mx.core:Container::createChildren()
at mx.core::UIComponent/initialize()
at mx.core::Container/initialize()
at po_manual_item/initialize()
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()
at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded()
at mx.core::Container/addChildAt()
at mx.core::Container/addChild()
at po_manual/::addRows()
at po_manual/::my_init()
at po_manual/___VBox1_initialize()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunctio n()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/set processedDescriptors()
at mx.core::Container/createComponentsFromDescriptors()
at mx.core::Container/mx.core:Container::createChildren()
at mx.core::UIComponent/initialize()
at mx.core::Container/initialize()
at po_manual/initialize()
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()
at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded()
at mx.core::Container/addChildAt()
at mx.core::Container/addChild()
at mx.core::Container/createComponentFromDescriptor()
at mx.core::Container/createComponentsFromDescriptors()
at mx.core::Container/mx.core:Container::createChildren()
at mx.core::UIComponent/initialize()
at mx.core::Container/initialize()
at mx.core::Application/initialize()
at Aurora/initialize()
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::childAdded()
at mx.managers::SystemManager/::initializeTopLevelWindow()
at mx.managers::SystemManager/::frameEndHandler()
if you've tried both the methods above, try creating an instance and assigning it with AS.

sa6k0o0
10-30-2006, 03:28 PM
I tried, but it doesn't work

this is the class


package
{
import mx.controls.VScrollBar;

public class myVerticalScrollBar extends VScrollBar
{
public function myVerticalScrollBar(){
super();
}
}
}

Here is assigning


Private function handleClick():void{
var myScrollBar:myVerticalScrollBar = new myVerticalScrollBar();
all_rows.verticalScrollBar = myScrollBar;
}


But it doesn't work :(
It throws the exact same error......

sa6k0o0
10-30-2006, 04:08 PM
I am also trying to get rid of the the five lines in the middle of the scrollthumb.
I tryed to remove them but they are not in the classes for skinning , so they are in a button class which I could not find , I don't know it is very strange. If somebody has any idea how to do that I will really appreciate it.

Here is the image of what I am trying to get rid of:
http://code-craft.net/Sa6k0o0/test/flex/2/img.jpg

If somebody knows how exactly I am supposed to make a scrollbar that I could apply to VBox, It would be also great. I have made scrollbar in AS2 very easly to customize, so I can rewrite it in flex if there is no way to use the already existing, but I still don't know how exactly is supposed to function the scrollbar I could write.What I mean is how exactly are supposed to be the functions and is it required all the names of the function to be the same like the already existing. And which functions are required just to work.And the most important is how to apply it to the actual VBox ?