Recently, Erin Rahnenfuehrer brought to you an awesome CFA (Cascades Field Agency) compilation of the BlackBerry 10 QML Performance Tips. Point five in this article referred to the term “delayed loading”, which allows you to minimize the application startup time by deferring the loading of UI components that are not part of the startup screen. This concept is particularly important if you are using a tabbed pane with multiple tabs as your application’s main navigation structure. Can you imagine you could be cutting down the loading time of your n-tab tabbed pane by a factor of n, if you apply this technique!?
Up until the 10.1 BlackBerry SDK, “delayed loading” meant either to use ComponentDefinition or ControlDelegate for dynamic loading of QML components. While using the ControlDelegate API is declarative, it can only be used with components that inherit from the Control class and hence cannot be used for deferred loading of Tabs in a TabbedPane. The ComponentDefintion API, on the other hand, is imperative and for many of you didn’t quite feel right at home with the declarative nature of the rest of your QML code.
Listening to your feedback, we are now introducing in the new 10.2 SDK a new API called Delegate and two new Tab properties: delegate and delegateActivationPolicy that together harmoniously allow you to manage the loading of tabs in the same QML declarative manner you are used to.
In the case of synchronous loading, the Page is included directly under the Tab as follows:
TabbedPane { Tab { Id: tab1 title: "tab1" Page {} } } For loading tabs asynchronously, all you need to do differently is to include the Page as the source of the Delegate class, which is set as the delegate property in the tab. Here is how to do so:
Tab { id: tab1 title: "tab1" delegate: Delegate { id: delegate1 source: "Page1.qml" } delegateActivationPolicy: TabDelegateActivationPolicy.Default } The Delegate class provides object lifecycle management similar to ControlDelegate using the active flag. In the above code, the TabDelegateActivationPolicy.Default toggles the active flag of the Delegate with selection, i.e. it sets it to true when the Tab is selected and false if otherwise. For other enumeration for specifying when a tab should set the active property of its delegate, check the API documentation for the TabDelegateActivationPolicy.
Hope you make use of this new built-in API for improved performance of your Cascades app… @SamarAbdelsayed