The qx.Mobile playground was enhanced to allow the usage of qx.Mobile Popup dialogs.
Additionally there is a new feature: the viewport area can be adjusted to the resolution sizes of the most common mobile devices. This gives you an impression of how the app would look like on your phone and may help with debugging tasks.
Some time ago, we started to think about the usage of qx.Desktop UI elements on mobile devices, especially on tablets. There should be no reason why an application using qx.Desktop couldn’t work on tablets as well. And basically that’s true, even for older qooxdoo releases. But our goal wasn’t just to make it usable, but to make it fun to use. With the recently announced diet of the widget set, we took a step into the right direction. This switch reduced the memory footprint and along with that, improved the performance on mobile devices. With this blog post, we want to introduce another step.
Mouse Emulation
Relying on mouse events, as the whole UI layer of qx.Desktop does, comes with some challenges on mobile devices. The common, webkit-based browsers on mobile devices delay the mouse events for a certain timespan, which leads to a sluggish user experience. So we decided not to listen to the native mouse events, but to create our own mouse events based on the touch events offered by the browser. For more details, check out the manual page, which covers what’s supported and how to use it in your own application. Basically, with a certain config setting your app should now also work on touch devices like a tablet (while it still might not be optimized for such a use case, of course).
If you have a touch device like a tablet at hand, just check out the most recent Widget Browser, which has this new feature turned on. Let us know how well you can interact with the app just using your fingers, and please file reports if you encounter any issues.
This is a follow-up on Christopher’s post about using SCSS for qx.Mobile custom themes. So far we’ve recommended the use of the official Sass compiler, but this means that you need Ruby and the Sass gem installed, too.
So we looked for a Python-based, third-party library which we could include in our tool chain, that implements the Sass features we currently use. With pyScss we found such a library. Though we stumbled into some issues of pyScss (documented in the mobile theming manual page) it is mature enough to provide real benefit.
The entry point for pyScss resides in {qx-sdk}/tool/bin/scss.py. You can theoretically compile your scss files like that:
$ ./tool/bin/scss.py path/to/styles.scss -o path/to/styles.css
Because that’s not very convenient and a re-run is needed after every change to a scss-file we added a generator job for that. Let’s create a new mobile app:
$ {qx-sdk}/create-application.py -n myApp -t mobile
$ cd myApp
And now watch for scss changes:
$ ./generate.py watch-scss
This (by default) monitors the directory source/resource/myApp/scss for file changes and re-runs pyScss if needed. You can configure the job inside your config.json (look for watch-scss).
If you like to know more about this have a look at the mobile theming manual page which goes into much more detail.
We’re still experimenting with it so your feedback on the usual channels is welcome. Just checkout the master branch of qooxdoo and start playing with it.
The qx.Mobile theming migrated from the CSS-precompiling technology LESS to SCSS. With this switch comes the powerful new possibility to customize our qx.Mobile standard theme Indigo.
The Indigo theme was intended to provide one single theme for every device, no matter whether it is Android, iOS or Windows Phone. The application-specific theming of Indigo was not that comfortable with LESS. That is why we decided to provide one single SCSS file in the mobile skeleton which is responsible for theming: the _custom.scss file (in source/resource/<namespace>/scss).
You are now able to easily alter every widget by changing the appearance of the text, the border or the background. You can even modify the shape of some widgets by adjusting their border-radius or size. This new feature makes it very comfortable for you to adapt the qx.Mobile theming to the appearance of your application’s target platform.
As of now we recommend using the official (Ruby-based) SCSS compiler of the SASS website. We are currently working on the integration of a Python-based SCSS compiler which can be triggered with the qooxdoo Generator. This out-of-the-box solution will improve the qx.Mobile layouting workflow even more.