CustomScrollPanel issue (extra div overlays generated impacting performance?)

[GWTter]

Hi all,

I've used the CustomScrollPanel in order to implement some custom scrollbars, everything was working great until I added DnD (gwt-dnd, not native) functionality
to an element in the scrollpanel. The dragging action on the elements within is extremely laggy. After a good amount of testing I found that the issue had to do with
the CustomScrollPanel since using a regular ScrollPanel performs just fine with minimal lag if any. I then looked at what is generated for the customscrollpanel to
work and found some divs had been generated which I couldn't attribute any specific functionality to (ITEMs 1 & 2 below). They're basically just overlaying the whole
scrollpanel area and deleting them with firebug did not affect the customscrollpanel functionality, but deleting them did improve the dnd performance considerably. I see that
the more elements that are layered between the mouse click and the target element affect the performance to a good degree.

My question is does anyone know if these extra DIVs are needed, and if so is there a way to workaround so I can still have the custom scroll bars with good DnD.

There's also a good reason for my using gwt-dnd over native.
I've been struggling with this for over a week now and it's driving me crazy, so hopefully someone can help. Thanks a lot in advance for any help and sorry for the long post.

The generated elements for the customscrollpanel are in the code below.

-Seth

<div class="ScrollArea" style="position: relative; overflow: hidden; height: 600px;">
    <!-- this div is up to the upper left corner doing seemingly nothing at all ITEM 3-->
    <div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;">&nbsp;</div> <!-- does not seem to be needed -->
    <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: -17px; bottom: -17px;">
        <div style="position: absolute; overflow: scroll; left: 0px; top: 0px; right: 0px; bottom: 0px;">
            <div class="GK40RFKDCB" style="position: relative; min-width: 20px; min-height: 20px;">
           
                <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  ITEM 1-->
                <!-- this div seems to be doing nothing but overlaying -->
                <div style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll;">
                    <div style="height: 1324px; width: 1458px;"></div>
                </div>
               
                <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ITEM 2-->
                <!-- this div seems to be doing nothing but overlaying -->
                <div style="visibility: hidden; position: absolute; height: 100%; width: 100%; overflow: scroll;">
                    <div style="width: 200%; height: 200%;"></div>
                </div>
                <div class="dragdrop-dropTarget dragdrop-boundary" style="position: relative; overflow: hidden;">
                    <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed;">
                   
                    <div class="testRed dragdrop-draggable dragdrop-handle" style="position: absolute; top: 900px; left: 500px;">Hello World</div>
                </div>
            </div>
        </div>
    </div>
    <!-- this div is the corner box bottom right which comes up when both scrollbars are displayed -->
    <div style="position: absolute; overflow: hidden; right: 0px; bottom: 0px; width: 17px; height: 0px;">
        <div class="GK40RFKDII" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"></div>
    </div>
    <!-- this div seems to be the container for the bottom scroll bar but it is disabled if not horizontal scroll is needed -->
    <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; display: none;">
        <div class="GK40RFKDDJ GK40RFKDCB" style="height: 17px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
            <div class="GK40RFKDCJ GK40RFKDJI">
                <div class="GK40RFKDBJ"></div>
            </div>
        </div>
    </div>
    <!-- this is the div container for the scrollbar to the right -->
    <div style="position: absolute; overflow: hidden; top: 0px; right: 0px; bottom: 0px; width: 17px;">
        <div class="GK40RFKDAJ GK40RFKDCB" style="width: 17px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
            <div class="GK40RFKDPI GK40RFKDLI">
                <div style="height: 1224px;"></div>
            </div>
        </div>
    </div>
</div>

Thanks again.

[Thomas Broyer]

On Thursday, March 29, 2012 5:43:55 AM UTC+2, GWTter wrote:

Hi all,

I've used the CustomScrollPanel in order to implement some custom scrollbars, everything was working great until I added DnD (gwt-dnd, not native) functionality
to an element in the scrollpanel. The dragging action on the elements within is extremely laggy. After a good amount of testing I found that the issue had to do with
the CustomScrollPanel since using a regular ScrollPanel performs just fine with minimal lag if any. I then looked at what is generated for the customscrollpanel to
work and found some divs had been generated which I couldn't attribute any specific functionality to (ITEMs 1 & 2 below). They're basically just overlaying the whole
scrollpanel area and deleting them with firebug did not affect the customscrollpanel functionality, but deleting them did improve the dnd performance considerably. I see that
the more elements that are layered between the mouse click and the target element affect the performance to a good degree.

My question is does anyone know if these extra DIVs are needed, and if so is there a way to workaround so I can still have the custom scroll bars with good DnD.

The DIVs are added by the ResizeLayoutPanel.ImplStandard to detect when the content grows or shrinks, so the CustomScrollPanel can update the scrollbars.

BTW, the ITEM3 div is used by the Layout to detect changes of the font size so ti can update its layers when they're positioned using EM or EX units.

Does changing the z-index of the various divs (ITEM1, ITEM2 and dragdrop-dropTarget) changes anything performance-wise?

DIRTY HACK: You could also try calling onDetach() on the containerResizeImpl when entering the scroll panel (while dragging) and calling onAttach() when leaving or dropping (use JSNI to access the private containerResizeImpl). You might have to explicitly call maybeUpdateScrollbars() after calling containerResizeImpl.onAttach(), as I'm not sure onAttach() would call the ResizeLayoutPanel.Impl.Delegate), and you might have to call it from a Scheduler.get().scheduleDeferred(), as ResizeLayoutPanel.ImplStandard uses it.

[Deepak Singh]

Hi Seth,

I am also looking for to implement CustomScrollbar.

Could you pls post the code that you have implemented ?

Thanks

Deepak

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/_dSY6jIjA1IJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[GWTter]

Hi Thomas,

Thanks so much for all of your suggestions and for explaining the extra DIVs, it makes a lot more sense now. I'll try what you said and let you know. Thanks again.

-Seth

[GWTter]

Hi Deepak,

Sorry, I think I just replied to you personally, can you repost my reply here? Thanks.

-Seth

[Deepak Singh]

Hi Seth,

Could you pls post the '/myScrollPanel.css' ?

Also, how to use this class for vertical scrollbar of a particular div or overridding browser default scrollbar ?

Thanks

Deepak

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/PB5g6_TVZAUJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[GWTter]

Hi Deepak,

This is all that's in the css file as the only important class is the corner that I've set to be transparent:

.customScrollPanel{
}

.customScrollPanelCorner{
    opacity: 0.0;
}

As for how to use the vertical scroll bar to override the native (or the transparent one CustomScrollPanel uses by default) if you look at the line

"this.setVerticalScrollbar(new MyVerticalScrollBar(),MyVerticalScrollBar.getScrollBarWidth());"

in MyScrollPanel class in the code I sent, this is what actually does the overriding. This method is available on the CustomScrollPanel class which MyScrollPanel extends.

Hope that answers your question. Also can you please repost my initial reply with the code to this thread, it would save me the time of having to rewrite it :) Thanks.

-Seth

[Deepak Singh]

Thank you Seth. I would give it a try.

Thats already reposted and is in the thread.

Thanks

Deepak

-Seth

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/g-x4PrKzgjoJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Deepak Singh]

Hi Seth,

I copied your classes and css in my client package. It compiled fine.

When i run the applicatio in dev mode, the browser default scrollbar is not overridden.

It is same as default.

What can i do to override the native one ?

--
Deepak Singh

[GWTter]

Hi Deepak,

You would have to post your code. Did you make sure to style your vertical scrollbar, create the MyScrollPanel and set its verticalScrollbar with the one you created? In the code I sent you the vertical scrollbar has a width of 10px, you should style the vertical scrollbar to be within that width.

Also, I can't seem to find the repost of the original message with the attached code I sent you anywhere in this thread, am I looking in the wrong place. Thanks.

-Seth

Deepak

To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

--
Deepak Singh

[Deepak Singh]

Hi Seth,

I am posting my code here:

myScrollPanel.css

@CHARSET "ISO-8859-1";

.customScrollPanel{

}

.customScrollPanelCorner{

    opacity: 0.0;

}

MyScrollPanel.java

public class MyScrollPanel extends CustomScrollPanel {

/**

* Extends the CustomScrollPanel Resources interface so that we can add our own css file and still reuse the Resources and Style interfaces from CustomScrollPanel

* @author SL

*

*/

public interface MyScrollResources extends Resources{

@Source("com/pdstechi/client/myScrollPanel.css")

Style customScrollPanelStyle();

}

public MyScrollPanel(){

super((MyScrollResources)GWT.create(MyScrollResources.class));

this.setVerticalScrollbar(new MyVerticalScrollBar(), MyVerticalScrollBar.getScrollBarWidth());

// this.setHorizontalScrollbar(new MyHorizontalScrollBar(), MyHorizontalScrollBar.getScrollBarHeight());

}

}

MyVerticalScrollBar.java

public class MyVerticalScrollBar extends Widget implements VerticalScrollbar {

private double scrollBarHeight = 0.0;

private double scrollBarPosition = 0.0;

private double scrollWindowPercentage = 1.0;

private double scrollWindowHeight = 0;

private int totalScrollContentHeight = 0;

private static final int SCROLL_BAR_WIDTH = 10;

private Element elem;

public MyVerticalScrollBar(){

this.elem = Document.get().createDivElement();

setElement(this.elem);

this.setStyleName("verticalScrollBar");

}

public static int getScrollBarWidth(){

return SCROLL_BAR_WIDTH;

}

@Override

public int getMaximumVerticalScrollPosition() {

return (int)(this.scrollWindowHeight-this.scrollBarHeight);

}

@Override

public int getMinimumVerticalScrollPosition() {

return 0;

}

@Override

public int getVerticalScrollPosition() {

return (int)this.scrollBarPosition;

}

@Override

public void setVerticalScrollPosition(int position) {

this.scrollBarPosition = Math.floor(position*this.scrollWindowPercentage);

//make sure we don't go out of bounds with the scrollbar

if(this.scrollBarPosition > this.getMaximumVerticalScrollPosition()){

this.scrollBarPosition = this.getMaximumVerticalScrollPosition();

}

this.elem.getStyle().setTop(this.scrollBarPosition, Unit.PX);

}

@Override

public HandlerRegistration addScrollHandler(ScrollHandler handler) {

Event.sinkEvents(this.getElement(), Event.ONSCROLL);

   return this.addHandler(handler, ScrollEvent.getType());

}

@Override

public Widget asWidget() {

return this;

}

@Override

public int getScrollHeight() {

return this.totalScrollContentHeight;

}

@Override

public void setScrollHeight(int height) {

//TODO: HAVE TO FIND A WAY TO GET THE SIZE OF THE CORNER BOX, OR BETTER YET, IF THE CORNER BOX IS ENABLED BECAUSE THE HORIZONTAL SCROLL BAR IS ALSO VISIBLE

this.totalScrollContentHeight = height;

this.scrollWindowHeight = this.elem.getParentElement().getOffsetHeight();

this.scrollWindowPercentage = (height > 0) ? Math.min(1.0,this.scrollWindowHeight/height):1.0;

this.scrollBarHeight = Math.max(SCROLL_BAR_WIDTH,Math.floor(this.scrollWindowHeight*this.scrollWindowPercentage));

this.elem.getStyle().setHeight(this.scrollBarHeight, Unit.PX);

}

}

All these classes are in my client package.

I just want that browser default varticalscrollbar should change its look.

Also, I am reposting the original msg with attached code again to the group.

Thanks

Deepak 

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/ukY2df0M7DsJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Deepak Singh]

Reposting the code ....

On Fri, Mar 30, 2012 at 9:24 PM, GWTter <seth...@gmail.com> wrote:

Hi Deepak,

I attached the code. The file contains the two classes that should get you right where you want to be, the MyVerticalScrollBar class being the more important one as this is the one that actually gets you the custom scroll bar. My extension of the CustomScrollPanel class is important to me since in it I override the style for the corner box that appears in the bottom left corner when both the vertical and horizontal scroll bars appear. Just make sure to have this:

.customScrollPanelCorner{
    /* whatever style you want here */
}

in your resource css file in order to override the corner style (in my implementation I set it to be transparent). You should be able to easily translate the vertical scroll bar for the horizontal scroll bar which is why I just included the vertical code.

Also, you may find it a little frustrating that there seems to be no easy way to determine if the corner box is displayed in order to take it's dimensions into consideration so that the scroll bar can be sized appropriately. If you can think of a way to do that
or can think of any improvements to the code please let me know :).

Hope this helps,

-Seth

--
Deepak Singh

[GWTter]

Hi Deepak,

This looks good to me. What style are you using for the vertical scrollbar?

And thanks for the repost.

-Seth

Deepak

To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

--
Deepak Singh

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/ukY2df0M7DsJ.

To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Deepak Singh]

Nothing more than what i sent you.

I have just myScrollPanel.css as mention above.

Could you pls guide me with css if i need to apply some css over vertical scrollbar?

Thanks in advance

Deepak

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/K8QQ8IQD184J.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[GWTter]

Hi Deepak,

Yes, you would need to apply some style to your scrollbar so that it at least has width (or height if you were using the horizontal scrollbar). If you look at the MyVerticalScrollBar constructor, the line 'this.setStyleName("verticalScrollBar")' sets the style for the scrollbar. This style is not defined in the myScrollPanel.css as that CSS file is only meant for the cornerpanel styling. You would need to define the style "verticalScrollBar" in your main CSS file. For example:

.verticalScrollBar{
  width: 10px;
  background: blue;
}

Also, make sure that the content you're scrolling is within the MyScrollPanel, since only content within the MyScrollPanel will have the custom scroll bars, anything not within a CustomScrollPanel will still default to the native implementation. Hope this helps.

-Seth

-Seth

Deepak

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/K8QQ8IQD184J.

To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Deepak Singh]

Hi Seth,

I added the styles to myVerticalScrollBar. and added the entire page content to MyScrollpanel but still the default scrollbar is there.

Its not overridden.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/dWIvX4znogoJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[GWTter]

Hi Deepak,

The most you should need to do is the following:

AbsolutePanel absPanel = new AbsolutePanel();
for(int i = 0; i < 10; i++){
 SimplePanel simp = new SimplePanel();
 simp.setHeight("100px");
 simp.setWidth("500px");
 simp.getElement().getStyle().setBackgroundColor("green");
 absPanel.add(simp);
}

MyScrollPanel scrollPanel = new MyScrollPanel();
scrollPanel.setHeight("500px");
scrollPanel.setWidth("100px");

scrollPanel.add(absPanel);

RootPanel.get().add(scrollPanel);

If the above code does not give you a green scrollable box then you should recheck your code. With the code I sent you and the above code, you should have a custom scroll bar (not native). You should at the very least have the above code working. Hope this helps. Let me know.

-Seth

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/dWIvX4znogoJ.

To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Deepak Singh]

Hi Seth,

It works. Thanks.

But the scrolling happens only through the mouse wheel movement, it does not scroll by dragging the bar in up and down direction.

It simply gets dragged like an image. 

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/3nb1iaz5z1IJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[GWTter]

Hi Deepak,

Yes, sorry, I forgot to mention that I hadn't added the drag functionality to the scrollbar since I had put that on hold to focus on some other issues. So you should see the functionality with the scroll wheel only currently.

-Seth

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/3nb1iaz5z1IJ.

To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Deepak Singh]

Ok.

So request you to update me when you add this drag functionality. OR you can give me some hints/suggestion so that i could also try a bit.

Will be waiting for this one.

Thanks

Deepak

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/PxXnpCQWpGsJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[GWTter]

Hi Deepak,

Sure, I'll let you know once I add that functionality. Could be a little while as that currently is not a priority compared to my other items, but it definitely is needed and will be added.

-Seth

Deepak

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/PxXnpCQWpGsJ.

To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Deepak Singh]

Thanks Seth. I will wait.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/GsFPLvFWYpwJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Deepak Singh]

Hi Seth,

Is the drag functionality completed for the custom scrollbar ?

Thanks

Deepak

--
Deepak Singh