Designing Sencha Touch interfaces with Designer 2

Not much to say about this session. It was a walkthrough of developing a simple application in Designer 2.

Q&A

• If you edit the UI file outside of Designer, will it work? You can edit them, but the changes will be overwritten the next time you export.
• (Something about Intellisense) No, but Intellisense is something they want to add in the future.
• Does Designer support the MVC architecture? It does generate views, but not controllers or models yet. These will be supported in the final version of 2.0.
• Is it safe to develop applications now? Will the file format change? It should be safe, but no guarantees. The file format is fairly stable now.
• Can you re-use generated code in Designer between Ext.JS and Sencha Touch? No, you can’t share code between an Ext.JS project and a Sencha Touch project in Designer.
• Does Designer support Sencha.io services? Yes, though it’s limited now. It will support it better before the final version.

Migrating Sencha Touch 1.x to 2.0

Layout

Rendering in Touch 2 as split into separate Creation and Placement processes, because creating a DOM element is very expensive. This also allows components to be removed from the DOM and re-used elsewhere. This is done automatically in some places, such as in the new Component View control, which caches components.

The render and afterRender methods are no longer supported. The render event is deprecated, but will still work.

All layout is now done with CSS selectors. There is no Javascript-based measurement. This means that the doLayout, doComponentLayout, and afterLayout no longer exist. As soon as a component is added to a container, it will be laid out by CSS.

Because these methods mean that components are no longer notified when they need to adjust to size changes, they’ve introduced the Ext.util.SizeMonitor class which is bound to a control and fires events when the size of the control changes. Internally it adds two absolutely-positioned elements to the DOM to detect resizing, so this monitoring has a cost and shouldn’t be over-used.

Docking can now be done on any Container. The DataPanel class is gone, and the dockedItems property is deprecated.

The Panel class is very barebones at this point. It’s essentially the same as Container. Sencha is debating whether to get rid of it.

The floating configuration is deprecated. Setting the top, left, bottom and right properties will now float components.

Properties

Getters and setters should now be used everywhere to access properties. This allows Sencha to do lazy instantiation, where the getter instantiates on first call, filtering and validation. Also it supports automatic property dependencies when you use getters.

The initComponent methods still exist but should rarely be used. Most of their code should go elsewhere.

Events

Observable is now a mixin, not a base class, and the Observable/Observer classes are being replaced by Publisher/Subscriber. This is related to the new ‘event bus’ architecture.

They’ve also introduced the fireAction convenience method and the eventedConfig property. The eventedConfig method is similar to the config property, but fires change events.

Q&A

• Will Sencha Touch support ordering multiple modals popups? Yes, they will be adding a modal manager.

Sencha Touch 2 Performance

Primary concern in 2.0 development is performance. The rendering process has been very much simplified. Templates are no longer rendered from HTML strings; they’re created as DOM nodes directly. These template DOM nodes are duplicated and loaded with the instance’s data.

The layout engine is entirely CSS-based instead of using Javascript-based measurement. Viewport handling, for hiding the address bar and determining the fullscreen view size (which is apparently a tricky and varies with different browsers, even between Android 2.2 and Android 2.3) has been re-architected to be much faster.

They’ve also added a clever system for patch updates of the application code, so only deltas (in a custom format) are transferred when the app code changes. The application code and build number are stored in local storage. When the application is reloaded, it requests a delta file from the server, and applies it to the code in local storage.

Q&A

• What are some things people do with Sencha that leads to bad performance? Especially on Android devices, don’t overuse CSS transforms.

Accessing Native APIs from Sencha Touch

There are currently three independent sets of native APIs: the W3C, WAC, and Mozilla’s Web API. These all overlap each other, and are incompatible.

Tip: Weinre (pronounced “winery”) is a tool for remote debugging of PhoneGap applications.

When standard Javascript APIs are not provided for something, you must use PhoneGap plugins to call native code.

Community Code: VGF

VGF is Frankfurt’s public transportation company. Nils Dehl’s company developed a mobile app for VGF.

The app allows searching for nearby stations, especially barrier-free stations, and information about delays.