The week in qooxdoo (2014-08-22)

We refactored the qx.Mobile Picker for improving the performance and enhancing the feature set of the picker.

The picker is now based upon qx.ui.mobile.container.Scroll and qx.ui.mobile.list.List widget. This reduces code size, improves the scrolling performance and enables also the momentum scrolling for the picker slots.

Because of the usage of the qx.ui.mobile.list.List for rendering a picker slot, you can now also display images inside a picker item (see screenshot).

The picker does not extend anymore from qx.ui.mobile.dialog.Popup, so you can choose whether you want to add it to page’s content container, a drawer or to any other widget container.

Here is an example which shows how to use the new qx.Mobile Picker:

 var picker = new qx.ui.mobile.control.Picker();
 picker.setHeight(200);
 picker.setVisibleItems(5);
 picker.addListener("changeSelection", function(evt) {
   var data = evt.getData();
 },this);
 
 var slotData1 = [{title:"Windows Phone", image:"resources/windows_phone_icon.png"}, {title:"iOS"}, {title:"Android"}];
 var slotData2 = [{title:"Tablet"}, {title:"Smartphone"}, {title:"Phablet"}];
 
 picker.addSlot(new qx.data.Array(slotData1));
 picker.addSlot(new qx.data.Array(slotData2));

As you can see in comparison to the qx.ui.mobile.dialog.Picker, the new and old API is very similar. Noteworthy is the fact that you now add an array with objects which contain the keys title, a subtitle or an image (all optional).

For a complete list of all tasks accomplished during the last working week, see this bugzilla query.

The week in qooxdoo (2014-08-15)

This week, we have been busy in the mobile part of the framework, as you might have already read in our separate blog post about the new waypoint feature. This is a handy new feature you might want to try in the playground for yourself. This also enables you to implement a commonly used pattern called pull to refresh.

We have also been busy in refactoring the picker widget, but more details on that will be covered in a blog post coming next week.

For a complete list of all tasks accomplished during the last working week, see this bugzilla query.

Waypoints feature added to qx.Mobile

We enhanced the qx.Mobile pageEnd logic and added a scroll waypoint feature. It makes it possible to execute code whenever you scroll to a pre-defined offset. This is very useful if you want to trigger an animation/action when the user scrolls to specified vertical/horizontal point. This feature is also necessary if you want to implement infinite scrolling.

The waypoint feature can be used like this:

var scrollContainer = page._getScrollContainer();
scrollContainer.setWaypointsY(["0%","50%","100%",200,".waypoint"]);

You can add percentage-based waypoints by adding a string like "20%" or just add numbers for applying pixel-based offsets. Additionally you can determine waypoints through a CSS selector query.

Whenever a waypoint triggers, a qx.event.type.Data fires on the scroll container:

scrollContainer.addListener("waypoint", function(evt) {
  console.log("Waypoint reached:" + evt.getData());
}, this);

The payload of the waypoint event looks like this:

{
"offset": 0,
"input": "10%",
"index": 0,
"element" : 0
}
  • offset contains the scroll offset in pixel.
  • input is the waypoint condition you passed through the array and which triggered this event.
  • index identifies this waypoint relative to its position inside the waypoint array you have passed.
  • element contains the element index found through your selector. e.g. you have five elements with ‘.waypoint’ class inside your scroll container, and user scrolls to the fifth element with this identifier, then element would be 4. This value is only relevant for waypoint rules based upon a selector. For numbers and percentage-based rules it is always null.

Have a look at this feature at the qx.Mobile List demo or check out the demo source code.

The week in qooxdoo (2014-08-08)

As last week, most of the core team is on vacation so we had a quiet week here in the office.

Still, the development in the grunt based toolchain continued and we could finish the variant optimization which is a good step towards replacing the existing python-based generator.

Another piece of work worth mentioning is the reduced code size of the environment class. This is really helpful if you want to use qx.Website with a minimal code size. The Environment class had a size of 13kb (minimized), not including all the feature check classes we offer and we managed to get the code size down to 5kb (minimized) offering the exact same feature set as before.

We also put some effort in improving the data binding layer. This included a dispose fix for objects and a new helper which lets you remove all bindings between two objects. This might also help on disposing objects.

For a list of all tasks accomplished during the last working week and more details on the mentioned topics, use this bugzilla query.