Useful to know.<br><br><div class="gmail_quote">---------- Forwarded message ----------<br>From: <b class="gmail_sendername"></b> <span dir="ltr"><<a href="mailto:jlabanca@google.com">jlabanca@google.com</a>></span><br>
Date: 20 April 2011 21:38<br>Subject: [gwt-contrib] Introducing CustomScrollPanel, a subclass of ScrollPanel that lets users define their own scroll... (issue1427804)<br>To: <a href="mailto:rchandia@google.com">rchandia@google.com</a><br>
Cc: <a href="mailto:google-web-toolkit-contributors@googlegroups.com">google-web-toolkit-contributors@googlegroups.com</a>, <a href="mailto:reply@gwt-code-reviews.appspotmail.com">reply@gwt-code-reviews.appspotmail.com</a><br>
<br><br>Reviewers: rchandia,<br>
<br>
Description:<br>
Introducing CustomScrollPanel, a subclass of ScrollPanel that lets users<br>
define their own scrollbars. By default, we use NativeVerticalScrollbar<br>
and NativeHorizontalScrollbar, but in the future we might introduce thin<br>
scrollbars for mobile devices. The scrollbars are semi-transparent until<br>
the user hovers them, at which time they transition to 100% opacity (on<br>
browsers that do not support CSS transitions, they immediately become<br>
opaque). In RTL, the vertical scrollbar appears on the left side (many<br>
browsers get this wrong natively).<br>
<br>
CustomScrollPanel looks and acts almost exactly like a normal scrollable<br>
div, with one important exception. The scrollbars in a<br>
CustomScrollPanel are overlaid on top of the content instead of adjacent<br>
to it, so when scrollbars appear, the content does not require relayout.<br>
This can be useful for layout when aligning items directly above and/or<br>
below the CustomScrollPanel, because the content will always flow to the<br>
end of the panel. CustomScrollPanel is a pre-requisite for a CellTable<br>
with fixed headers/footers and scrollable content area. It allows the<br>
header/footer tables to be the same width as the content table<br>
regardless of whether or not scrollbars appear. If we tried to a<br>
regular ScrollPanel, we would need active layout to adjust the width of<br>
the header/footer tables to account for the appearance of scrollbars.<br>
<br>
In terms of implementation details, the content is actually in a<br>
scrollable div, but the scrollbars of the div are hidden behind the<br>
outer viewport. So, all of the normal scrolling mechanisms (click and<br>
drag text, mousewheel, page up/down) work normally. We use the<br>
ResizeLayoutPanel implementation to detect when the content is resize,<br>
and show/hide scrollbars accordingly.<br>
<br>
You can view a demo here: <a href="http://cscroll.jlabanca-testing.appspot.com/" target="_blank">http://cscroll.jlabanca-testing.appspot.com/</a><br>
<br>
<br>
Please review this at <a href="http://gwt-code-reviews.appspot.com/1427804/" target="_blank">http://gwt-code-reviews.appspot.com/1427804/</a><br>
<br>
Affected files:<br>
M user/src/com/google/gwt/user/ResizeLayoutPanel.gwt.xml<br>
A user/src/com/google/gwt/user/Scroll.gwt.xml<br>
D user/src/com/google/gwt/user/ScrollPanel.gwt.xml<br>
M user/src/com/google/gwt/user/User.gwt.xml<br>
A user/src/com/google/gwt/user/client/ui/AbstractNativeScrollbar.java<br>
M user/src/com/google/gwt/user/client/ui/AttachDetachException.java<br>
A user/src/com/google/gwt/user/client/ui/CustomScrollPanel.css<br>
A user/src/com/google/gwt/user/client/ui/CustomScrollPanel.java<br>
A user/src/com/google/gwt/user/client/ui/HorizontalScrollbar.java<br>
A user/src/com/google/gwt/user/client/ui/NativeHorizontalScrollbar.css<br>
A user/src/com/google/gwt/user/client/ui/NativeHorizontalScrollbar.java<br>
A user/src/com/google/gwt/user/client/ui/NativeHorizontalScrollbar.ui.xml<br>
A user/src/com/google/gwt/user/client/ui/NativeHorizontalScrollbarTransparent.css<br>
A user/src/com/google/gwt/user/client/ui/NativeVerticalScrollbar.css<br>
A user/src/com/google/gwt/user/client/ui/NativeVerticalScrollbar.java<br>
A user/src/com/google/gwt/user/client/ui/NativeVerticalScrollbar.ui.xml<br>
A user/src/com/google/gwt/user/client/ui/NativeVerticalScrollbarTransparent.css<br>
M user/src/com/google/gwt/user/client/ui/ResizeLayoutPanel.java<br>
A user/src/com/google/gwt/user/client/ui/ScrollImpl.java<br>
M user/src/com/google/gwt/user/client/ui/ScrollPanel.java<br>
A user/src/com/google/gwt/user/client/ui/VerticalScrollbar.java<br>
M user/test/com/google/gwt/user/UISuite.java<br>
A user/test/com/google/gwt/user/client/ui/CustomScrollPanelTest.java<br>
A user/test/com/google/gwt/user/client/ui/NativeHorizontalScrollbarTest.java<br>
A user/test/com/google/gwt/user/client/ui/NativeScrollbarTestBase.java<br>
A user/test/com/google/gwt/user/client/ui/NativeVerticalScrollbarTest.java<br>
M user/test/com/google/gwt/user/client/ui/ScrollPanelTest.java<br><font color="#888888">
<br>
<br>
-- <br>
<a href="http://groups.google.com/group/Google-Web-Toolkit-Contributors" target="_blank">http://groups.google.com/group/Google-Web-Toolkit-Contributors</a></font></div><br>