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
Facade
- Simple dictionary, created in app.js
- A singleton with access to all views, models, and some controllers.
- Also provides access to other intormation (localization, stylesheet)
- Usually called "app" inside controllers. Gets into window controllers by creating an "app" attribute when creating the window in app.js
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, app.localDictionary.key. Will automatically display the correct language.
- Will eventually allow for user customization, or retrieval of portal preferences for locale.
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 (for now) so that controllers can respond to model events (such as search begin, search 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.
- Currently, tightly coupled with views, although much view logic has been abstracted into factory-type scripts in js/views.
Views/Factories
- Accept two arguments: facade instance, and optional attributes object to be passed into Titanium to render view.
- Found in js/views
- Views are usually added as references to the facade, sometimes as instances (as in the case of the global alert window which has no reason to have multiple instances.).
- Usually instantiated with new keyword,
titleBar = new app.views.GenericTitleBar(app,{backgroundColor: '#f00'});
"Stylesheet"
- A Javascript dictionary of styles, attached to the facade as "styles".
- Global stylesheet in resources root: style.css
- 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(app.styles.searchButton);