In the sample mobile apps, for both iOS and Android, we are using PhoneGap as native bridge, and Dojo as UI implementation. PhoneGap is just a wrapper to native platform functions, such as camera, accelerator … that are not used in this sample, you can add them for your own app if you are interested in. Dojo is a opensource JavaScript framework, with many built-in functions and UI widgets, we are using v1.7 to implement the whole app UI and business process, please find more details at dojotoolkit.com.
For iOS app, its project structure is as below chart. “www” contains all UI and business logics. The “index.html” is the startup point of the app, contains some base views. The “btt.js” defined a global object with several global functions to speed up the integration with BTT web application. The “app.js” contains whole navigation logic, and is responsible to create some UI widgets dynamically. The “fund” folder contains several html files to separate UI views so that they can be loaded on demand dynamically to save memory and time.
For Android app, its project structure is as below chart. While, the core code under “www” is exactly same as the one in iOS project.
Index.html is the entrance of the app, it starts with standard HTML5 head, and added reference to dojo scripts.
“btt.js” is the core functions collection to integrate with BTT web application. For example, the “getAccounts” function will post a xhr to the wsAccount_GetAccountSummary operation defined in web application, once the operation return the accounts, this function will call back to “success” function, or call “failure” in case of any errors.
“app.js” is the core navigation engine. It will listen to each “/dojox/mobile/afterTransitionIn” event, and execute business logics and UI changes according to the view id. For example, for “myAccountsView”, there is code to call the global function “getAccounts” mentioned above, if the account data is returned successfully, the call back function will iterate through each account object, and create ListItem for them, then add listening code to set the “CurrentAccount” when each account ListItem is clicked.