Mobile Web App Demo

This is a demonstration of the issues encountered when supporting mobile devices in a web application.

The migration of the application is described in the Software Engineering Tech Trends paper at OCI.

Tech Trends Paper»

Original Application

This is the original version, prior to any adaption for mobile. It was developed using desktop browsers, fails on mobile devices.

Original Application»

Text Editing

This step fixes the editing capability for mobile, by handling key events from an input.

Mobile Editing»

Mobile Rendering

The next step fixes the rendering for mobile, including the missing range slider for the stock Android browser.

Mobile Rendering»

Modal Overlay

Next, we add a modal overlay so that after editing, the text is still in view.

Modal Overlay»

Drag and Drop

Finally, we fix the drag and drop with mobile.

Drag and Drop»

Tool Tips

Since there is no hover capability in mobile, we reproduce the tool tip's contents when the text is dragging, and handle a long tap event to show show these coordinates without dragging or causing a click event.

Tool Tips»

Multi-Touch

Finally, wse handle draging multiple texts through multiple touches.

Multi-Touch»