Native Mobile App Architecture (Titanium)

Titanium General Overview

To understand the architecture of the native mobile application, it's important to first understand the Titanium SDK.  

Recommended Reading:

• Getting Started with Titanium: http://wiki.appcelerator.org/display/guides/Getting+Started+with+Titanium
• The Titanium Architecture: http://wiki.appcelerator.org/display/guides/The+Titanium+Architecture
• The Titanium Project Structure: http://wiki.appcelerator.org/display/guides/The+Application+Project+Structure

uMobile Specific Architecture

Façade

• Located at Resources/js/Facade.js
• A singleton mostly concerned with providing global constants for events and states, such as events for session changes.
• Usually called "app". 

Local Dictionary

• Allows translation of all native text (not text provided from web services or web views)
• In project root: localization.js
• Currently contains en_US
• Could easily add another language, and switch the property in config.js: Titanium.App.Properties.setString('locale','en_US');
• Implement in any controller or view that has access to the facade: require('/js/localization')[Titanium.App.Properties.getString('locale')]. Will automatically display the correct language.

Models/Proxies

• Are responsible for managing data for native windows (map points for search, directory entries for search).
• Found in js/models. 
• Aren't aware of controllers, provide public methods to access data and search for data
• Broadcast application-level events, found in the Facade, so that controllers can respond to model events (such as search begin, search complete, login complete) 

Controllers

• Each window that is opened in app.js is bound to a controller, found in js/controllers.
• Responsible for initializing views, reacting to events, and displaying data.

Views/Factories

• Found in js/views
• Most views are for use in specific window controllers.
• Common UI views are found in js/views/UI, and usually create objects by requiring the module and then invoking a create___() method to generate unique instances of views. Eg: require('/js/views/UI/TitleBar').createTitleBar()

"Stylesheet"

• A Javascript dictionary of styles, loaded by calling require('/js/style');
• Not automatically applied to elements with selectors, each "class" must be passed in as object to view factories during creation, such as searchButton = Titanium.UI.createButton(styles.searchButton);