Sunday, April 1, 2012

Re: CustomScrollPanel issue (extra div overlays generated impacting performance?)

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 





On Sun, Apr 1, 2012 at 11:01 PM, GWTter <seth.gwt@gmail.com> wrote:
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


On Saturday, March 31, 2012 4:27:42 PM UTC-4, Deepak Singh wrote:
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 ?

On Sun, Apr 1, 2012 at 1:05 AM, Deepak Singh <deepaksingh.kr@gmail.com> wrote:
Thank you Seth. I would give it a try.

Thats already reposted and is in the thread.

Thanks
Deepak


On Sat, Mar 31, 2012 at 10:59 PM, GWTter <seth.gwt@gmail.com> wrote:
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

--
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-web-toolkit@googlegroups.com.
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+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.



--
Deepak Singh

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
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.

No comments:

Post a Comment