Scrollthumb customize to a smaller icon

[ehc]

Hello,

I have customized my scroll thumb to be just an circle that moves up and down my scroll bar as i scroll. However I think that the circle is is at the "center" of what used to be the bar scroll thumb. 

So when I am at the top of my list, the circle is not at the top of the scrollbar. When I am at the bottom of the list, the circle is not at the bottom, as if there is spacing above and below my scrollthumb. Is there a way I can get the scroll thumb to scroll appropriately with just the circle image as the thumb?

[Shai Almog]

Hi,
how did you do the customization?
Did you define ScrollThumb only, did you change any properties there?

The code assumes scroll thumb grows so a circle might be problematic.

[Elaine Chao]

Well I defined the scroll thumb to be this circle image. And I also defined the scroll itself to be a custom image that is basically just a white line. 

[Elaine Chao]

Also I am trying to add up and down arrows as scroll buttons. I was going to manually add them so that they appear basically on top of the list in the appropriate positions. However when I press the list, those buttons disappear. Am I missing something?

On Wed, Aug 26, 2015 at 9:40 PM, Shai Almog <shai....@gmail.com> wrote:

[Shai Almog]

Making the scroll behave like a desktop scroll would probably be pretty hard since it was designed for mobile scrollbars that don't interact and grow to represent size.

I would just create a custom component and add it to the right side of the actual component and use it to scroll the "real" component. I'd make the scroll in the real component hidden.

[Elaine Chao]

Okay thanks. I am doing that now and it seems to be working alright. However I do have a question about the scroll thumb now. What would be the best way to implement that scroll effect from this new scroll thumb?

[Elaine Chao]

Right now I am just calling a repaint on the scroll thumb by setting its y coordinate as I scroll up and down, but it is repainting and leaving the original image there. It is also not too smooth

[Shai Almog]

Its unclear to me which component isn't getting repainted, the scroll bar or the scrolled component.
To implement scrolling just make the scroll bar component focusable and override the pointerDragged/pressed/released events to allow a user to drag the scrollbar.

[Shai Almog]

Silly of me not to think about it.... You can use the Slider component and set it to vertical. It already supports dragging so you can just place it next to the scrollable container and use a DataChangeListener on it to allow scrolling.
It supports a round scroll thumb and it should be trivial to do.

[Elaine Chao]

Okay I am trying out the slider, but I'm having some trouble. I set my scroll thumb image to be the ThumbImage of the slider. However this icon remains at the bottom of the slider, no matter what I change the progress to. 

My original setup of having the scoll bar and scroll thumb with two buttons seems okay. I am just having trouble repainting the scroll thumb. The code is as follows when I click one of the scolling arrows:

             findScrollThumb(c).setY(SCROLL_THUMB_Y + m_scrollFactor); // set the new scroll thumb y so move down

             findScrollThumb(c).repaint();

             m_scrollFactor += 50;

The new scroll thumb repaints, but the old scroll thumb remains there as well. What is the best and smoothest way to simulate this scrolling?

[Shai Almog]

This seemed interesting so I tried this myself and got it to work:

private Container makeScrollable(final Component scrollable, Image thumb) {
    scrollable.setScrollVisible(false);
    final Slider scroll = new Slider();
    scroll.setThumbImage(thumb);
    Container sc = new Container(new BorderLayout());
    sc.addComponent(BorderLayout.CENTER, scrollable);
    sc.addComponent(BorderLayout.EAST, scroll);
    scroll.setVertical(true);
    scroll.setMinValue(0);
    scroll.setEditable(true);
    scroll.setMaxValue(scrollable.getScrollDimension().getHeight());
    scroll.setProgress(scroll.getMaxValue());
    final boolean[] lock = new boolean[1];
    scroll.addDataChangedListener(new DataChangedListener() {
        public void dataChanged(int type, int index) {
            if(!lock[0]) {
                lock[0] = true;
                scrollable.scrollRectToVisible(0, scroll.getMaxValue() - index, 5, scrollable.getHeight(), scrollable);
                lock[0] = false;
            }
        }
    });
    scrollable.addScrollListener(new ScrollListener() {
        public void scrollChanged(int scrollX, int scrollY, int oldscrollX, int oldscrollY) {
            if(!lock[0]) {
                lock[0] = true;
                scroll.setProgress(scroll.getMaxValue() - scrollY);
                lock[0] = false;
            }
        }
    });        
    return sc;
}

Actually works rather nicely... The main issue was that the slider is reversed (values increase as it goes up) which makes sense for our original use case: a media player volume control. I just inverted the values, added a lock so when scroll happens it won't recurse/visa versa and it "just works".

[Elaine Chao]

Ah okay thanks so much. I am currently testing it out now. However I am having an issue compiling, and I remember coming across this problem before. It says that the compiler can't find the method addScrollListener for the component class. However when I test out other methods like adddragoverlistener it works fine. I am wondering if I have an outdated version of the codenameone jar maybe? how can I check this?

[Shai Almog]

Right click the project and in the Codename One section select "Update Client Libs" it will fetch the latest version of the library for this project.

[Elaine Chao]

I don't see an option to update client libs. I'm working in eclipse so maybe that's why. I tried doing a refresh libs but it doesn't seem to be working since I have a custom build.xml. However I created a new codenameone project and tried to just copy the CodenameOne.jar file from there to my project. I can see in the CodenameOne_SRC.zip file that the addScrollListener method is in the Component class, but I am still getting a compile error using the CodenameOne.jar file. Is there another way I can obtain the most recent jar file?

[Elaine Chao]

Nvm fixed it eclipse was still referencing an old version of the jar file from somewhere else. Thanks for all your help Shai

[Elaine Chao]

Just another question about this..is the Scroll Thumb supposed to be located at the current progress of the bar? Right now I can see the slider full bar changes but the scroll thumb remains at the bottom, even when I set the progress to be the maximum value (height of the list). So basically the thumbimage is not moving. 

[Shai Almog]

Its inverted. For me it scrolls property top to bottom but notice that I did max - location in the code since slider goes min == bottom and max == top unlike a scrollbar...

[Elaine Chao]

Okay I see got it to work. Thanks for all your help!