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

Hi Seth,

Have you implemented the drag functionality for the vertical scrollbar?

I know you have more important things to do, but I'm asking out of desperation.

On Wednesday, April 11, 2012 1:23:59 AM UTC+5:30, GWTter wrote:

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

On Wednesday, April 4, 2012 4:30:01 PM UTC-4, Deepak Singh wrote:

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

On Thu, Apr 5, 2012 at 12:47 AM, GWTter <seth...@gmail.com> wrote:

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

On Wednesday, April 4, 2012 1:26:44 PM UTC-4, Deepak Singh wrote:

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. 

On Wed, Apr 4, 2012 at 8:53 AM, GWTter <seth...@gmail.com> wrote:

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

On Tuesday, April 3, 2012 1:59:33 PM UTC-4, Deepak Singh wrote:

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.

On Mon, Apr 2, 2012 at 9:39 PM, GWTter <seth...@gmail.com> wrote:

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

On Monday, April 2, 2012 11:44:57 AM UTC-4, Deepak Singh wrote:

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

On Mon, Apr 2, 2012 at 8:19 PM, GWTter <seth...@gmail.com> wrote:

Hi Deepak,

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

And thanks for the repost.

-Seth

On Sunday, April 1, 2012 3:50:12 PM UTC-4, Deepak Singh wrote:

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...@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 <deepaks...@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...@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-we...@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-we...@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 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-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 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-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 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-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 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-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 view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/IGuGCp77jecJ.
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.