Application-wide native overflow & native scrolling?

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Application-wide native overflow & native scrolling?

abgoldberg
I'm involved in a large qooxdoo based application that only needs to support chrome (it's part of a chromium embedded framework application). We've had a number of users complain that the scrolling throughout the app does not feel very natural. I'm fairly sure this is due to the way AbstractScrollArea is implemented using a div hooked up via listeners to separate scrollbar widgets instead of just letting the content overflow and invoke native scrolling (with momentum, etc).

My question is whether anyone knows of any contribs or examples of replacing AbstractScrollArea (or perhaps a different widget involved in scrolling) with something that uses simple native overflow and scrolling. If not, does this seem like something that's even possible? I'm willing to forego the theming and cross-browser benefits. I do want something that'll work application wide in all scroll containers, lists, and virtual lists.

Any tips or pointers would be much appreciated!

Thanks,
Andrew Goldberg
------------------------------------------------------------------------------
LogMeIn Rescue: Anywhere, Anytime Remote support for IT. Free Trial
Remotely access PCs and mobile devices and provide instant support
Improve your efficiency, and focus on delivering more value-add services
Discover what IT Professionals Know. Rescue delivers
http://p.sf.net/sfu/logmein_12329d2d
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Application-wide native overflow & native scrolling?

abgoldberg
Just wanted to follow-up in case people missed this during the holidays.

To update after a little bit of experimentation, it seems I can get non-virtual widgets to employ native overflow and scrolling by modifying qx.ui.core.scroll.ScrollPane to include qx.ui.core.MNativeOverflow and then set overflow to "auto." This causes the pane to produce native scrollbars, and I just need to always hide the scrollbars created by qx widgets (and probably disconnect some liste.

However, the task of making virtual lists use native overflow and scrolling seems much more challenging. Has anyone ever looked into this? The virtual infrastructure is awesome, but it suppresses the smooth native scrolling  that our users expect. I think the solution would be more like how SlickGrid handles virtual lists: basically the virtual pane (or maybe each layer?) would have an actual height equal to the virtual height, so the content will overflow and cause a native scrollbar. Of course only a small subset of DOM elements (the visible cells) would exist and be positioned using offsets so they are in the pane's "window." In other words, a complete (potentially very tall) div would have a small number of child divs that slide up and down as the user scrolls the div using the native scrollbar. Does this seem feasible? Which specific widget in the virtual infrastructure should get the height set, and which should get overflow set to auto?

Alternatively, has anyone successfully integrated SlickGrid itself into a qx app?

Thanks!

- Andrew

On Dec 21, 2012, at 8:37 PM, Andrew Goldberg <[hidden email]> wrote:

> I'm involved in a large qooxdoo based application that only needs to support chrome (it's part of a chromium embedded framework application). We've had a number of users complain that the scrolling throughout the app does not feel very natural. I'm fairly sure this is due to the way AbstractScrollArea is implemented using a div hooked up via listeners to separate scrollbar widgets instead of just letting the content overflow and invoke native scrolling (with momentum, etc).
>
> My question is whether anyone knows of any contribs or examples of replacing AbstractScrollArea (or perhaps a different widget involved in scrolling) with something that uses simple native overflow and scrolling. If not, does this seem like something that's even possible? I'm willing to forego the theming and cross-browser benefits. I do want something that'll work application wide in all scroll containers, lists, and virtual lists.
>
> Any tips or pointers would be much appreciated!
>
> Thanks,
> Andrew Goldberg

------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and
much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Application-wide native overflow & native scrolling?

Alexander Steitz
Hi Andrew,

if you like to use the SlickGrid widget: what about the table widget which is already available within the qooxdoo framework? Does this fit your needs?

-> http://demo.qooxdoo.org/current/showcase/#Table

This widget is using a virtual infrastructure.

And if you like to use native scrollbars you can set the "qx.nativeScrollBars" environment variable to true in your "config.json".

-> http://manual.qooxdoo.org/current/pages/tool/generator/generator_config_ref.html#environment

Regards,
  Alex

-----Original Message-----
From: Andrew Goldberg [mailto:[hidden email]]
Sent: Friday, January 04, 2013 2:52 AM
To: [hidden email]
Subject: Re: [qooxdoo-devel] Application-wide native overflow & native scrolling?

Just wanted to follow-up in case people missed this during the holidays.

To update after a little bit of experimentation, it seems I can get non-virtual widgets to employ native overflow and scrolling by modifying qx.ui.core.scroll.ScrollPane to include qx.ui.core.MNativeOverflow and then set overflow to "auto." This causes the pane to produce native scrollbars, and I just need to always hide the scrollbars created by qx widgets (and probably disconnect some liste.

However, the task of making virtual lists use native overflow and scrolling seems much more challenging. Has anyone ever looked into this? The virtual infrastructure is awesome, but it suppresses the smooth native scrolling  that our users expect. I think the solution would be more like how SlickGrid handles virtual lists: basically the virtual pane (or maybe each layer?) would have an actual height equal to the virtual height, so the content will overflow and cause a native scrollbar. Of course only a small subset of DOM elements (the visible cells) would exist and be positioned using offsets so they are in the pane's "window." In other words, a complete (potentially very tall) div would have a small number of child divs that slide up and down as the user scrolls the div using the native scrollbar. Does this seem feasible? Which specific widget in the virtual infrastructure should get the height set, and which should get overflow set to auto?

Alternatively, has anyone successfully integrated SlickGrid itself into a qx app?

Thanks!

- Andrew

On Dec 21, 2012, at 8:37 PM, Andrew Goldberg <[hidden email]> wrote:

> I'm involved in a large qooxdoo based application that only needs to support chrome (it's part of a chromium embedded framework application). We've had a number of users complain that the scrolling throughout the app does not feel very natural. I'm fairly sure this is due to the way AbstractScrollArea is implemented using a div hooked up via listeners to separate scrollbar widgets instead of just letting the content overflow and invoke native scrolling (with momentum, etc).
>
> My question is whether anyone knows of any contribs or examples of replacing AbstractScrollArea (or perhaps a different widget involved in scrolling) with something that uses simple native overflow and scrolling. If not, does this seem like something that's even possible? I'm willing to forego the theming and cross-browser benefits. I do want something that'll work application wide in all scroll containers, lists, and virtual lists.
>
> Any tips or pointers would be much appreciated!
>
> Thanks,
> Andrew Goldberg

------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and
much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Application-wide native overflow & native scrolling?

abgoldberg
Hi Alex,

Thanks for the suggestions. However, I'm actually already using a virtual List widget and am familiar with the qx.nativeScrollBars setting. The thing I'm trying to do is really circumvent all of qx's custom overflow and scroll handling (e.g., setting overflow to off and using separate widgets for scrollbars). Sorry if this sounds like heresy. :) Our team has found that without using native overflow and the scrollbars automatically created by the browser, the mouse wheel scroll speed and other features like momentum, inertia, etc. do not work as expected in other web sites or apps. For example, in Mac 10.8, the system wide scrolling preferences should be followed. And on Windows, if a user sets a custom mouse wheel scroll step size so they can move through long lists faster, we want them to have that behavior within our app. It seems the work to standardize scrolling and mouse wheel events across browsers interferes with this, and the only way to make it work is to ultimately use a div with overflow: auto and allow the user to scroll with the automatically created scrollbars (not separate scrollbars wrapped in widgets, which are tied to the div with listeners).

Is it more clear what I'm trying to do now?

Thanks!
Andrew
Reply | Threaded
Open this post in threaded view
|

Re: Application-wide native overflow & native scrolling?

Alexander Steitz
Hi Andrew,

yes, it's clear now.

However, I think you can't solve this using the qooxdoo widgets the way they are. The UI layer does take full control over the scrolling. Replacing or modifying this behavior to make use of the native scrolling of the browser is not possible without changing  the UI core.

Regards,
  Alex

-----Original Message-----
From: abgoldberg [mailto:[hidden email]]
Sent: Friday, January 04, 2013 3:42 PM
To: [hidden email]
Subject: Re: [qooxdoo-devel] Application-wide native overflow & native scrolling?

Hi Alex,

Thanks for the suggestions. However, I'm actually already using a virtual List widget and am familiar with the qx.nativeScrollBars setting. The thing I'm trying to do is really circumvent all of qx's custom overflow and scroll handling (e.g., setting overflow to off and using separate widgets for scrollbars). Sorry if this sounds like heresy. :) Our team has found that without using native overflow and the scrollbars automatically created by the browser, the mouse wheel scroll speed and other features like momentum, inertia, etc. do not work as expected in other web sites or apps. For example, in Mac 10.8, the system wide scrolling preferences should be followed. And on Windows, if a user sets a custom mouse wheel scroll step size so they can move through long lists faster, we want them to have that behavior within our app. It seems the work to standardize scrolling and mouse wheel events across browsers interferes with this, and the only way to make it work is to ultimately use a div with overflow: auto and allow the user to scroll with the automatically created scrollbars (not separate scrollbars wrapped in widgets, which are tied to the div with listeners).

Is it more clear what I'm trying to do now?

Thanks!
Andrew



--
View this message in context: http://qooxdoo.678.n2.nabble.com/Application-wide-native-overflow-native-scrolling-tp7582356p7582401.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel