SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
1. SlickGrid Touch
Making a complex JavaScript table widget work
on mobile devices
Lightning talk, Plone Conference, Arnhem
2012-10-11
Balázs Reé
@reebalazs
2. Base
• Your website has to work on mobile.
• Older javascript widgets do not work on touch
devices.
• How can we make it feel like a touch
application?
• Looking at an application being ported:
• the biggest lack is a functional grid table.
• How hard would it be to fix it?
4. Wait, there is more.
• What do we mean by touch support?
Lorem Ipsum...
select/ follow link menu delete row
unselect
row scroll reorder rows
select row
5. Demo
• The “fastbreak” application is written by Paul
Everitt @paulweveritt
• It is Pyramid based and uses Bootstrap in the
front-end
• .... tables, tables everywhere!
• Look at the screencast of the demo:
https://vimeo.com/channels/greenfinity/
51291141
6. Technology
• Keep the same features, add touch support.
• Styling.
• out with jquery-ui, in with bootstrap
• some responsiveness problems
• Events.
• hammer.js: desktop events translated to
touch events (hold tap doubletap transformstart transform
transformend dragstart drag dragend swipe release)
• SlickGrid: our code is in plugins.
7. Summary
• http://github.com/reebalazs/SlickGrid-touch
https://github.com/pauleveritt/fastbreak
• Touch compatibility is feasible to reach, even
with complex widgets
• Thank you! @reebalazs @paulweveritt
• Yes, we will use it in production. No, it is not
released, not finished, and it still has bugs.
• Questions?
Editor's Notes
This talk has nothing to do with Plone. But also, it is a client side thing, and it could be used in Plone.\n
old widgets: (for example a simple jquery-ui dropdown.) “Have you seen a dropdown that did not work?”\nMost of the times, a change in discipline is needed. (for example use native inputs)\nThe best implementation that explores this new discipline is the Twitter Bootstrap.\nSame interface: we do not work to work double, but also do not want that the user has to learn 2 ways.\n\n\n
\n
“things should work”, but how?\nlook and feel of mobile.\npinch... (transform) still here.\n\nThis is close to what we are doing.\n
\n
keep the same features. For example the ajax, or the cell formatting, or the inline editing.\nBUT: \nstyling. Slickgrid does not rely so heavily on jquery-ui, so we could remove it completely.\nresponsiveness problems: for example, row height also would be nice to be responsive.\nhammer.js: ... the touch-punch approach would be the opposite to this and they won’t mix.\nour code:... very minimal changes would be needed to SlickGrid core.\n
.. it is possible but needs a new disciplinary approach in UI design\n
