SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
- 1. SlickGrid Touch Making acomplex JavaScript table widget work on mobile devices Lightning talk, Plone Conference, Arnhem 2012-10-11 Balázs Reé @reebalazs
- 2. Base • Your websitehas 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?
- 3. Introducing SlickGrid • https://github.com/mleibman/SlickGrid •fast, • configurable, • compatible, • no touch support • client or server side data • cell formatting • inline editing • sorting and filtering • column resize and reorder • ... and more.
- 4. Wait, there ismore. • 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 thesame 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
- #2 This talk has nothing to do with Plone. But also, it is a client side thing, and it could be used in Plone.\n
- #3 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
- #4 \n
- #5 “things should work”, but how?\nlook and feel of mobile.\npinch... (transform) still here.\n\nThis is close to what we are doing.\n
- #6 \n
- #7 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
- #8 .. it is possible but needs a new disciplinary approach in UI design\n