Simple mobile app in Titanium Developer
Application files and foldersMobile app created in Developer will look like this:
Folder build will contain binary builds of your app. Resources folder holds all files and code of your app. File tiapp.xml contains application configuration, including list of windows (2 by default), like this: If we specify only one window - no tabs will be used. In Resources we will find:
build CHANGELOG.txt LICENSE LICENSE.txt manifest README Resources tiapp.xml
index.html is the main window of our application (defined in tiapp.xml). Folders "android" i "iphone" can be used to add specific files or code for selected os (they can overwrite files in Resources).
about.html android index.css index.html index.js
How do you make an application?It's quite strange to code a mobile app in HTML/CSS/JS. What you have to do is:
- Make HTML templates
- Write some CSS styles
The Mobile API isn't documented well, and you will have to digg in Kitchen Sink or do a lot of debuging, testing.
Simple mobile applicationSo we start with an application that will show RSS channel entries from a selected website (in this case filmaster.com). For comparison I'll make two windows - two tabs. One will show RSS entries using native widgets, and second one using HTML.
- Create mobile project in Titanium Developer
- In tiapp.xml define two windows:
- Create weblike.html, and add some initial code to this file and to index.html: Where jquery.jfeed.pack.js is a jfeed jQuery plugin (RSS parsing), jquery.utils.min.js is a jquery-utils plugin (needed by me to handle UTF-8 strings with non-ascii characters - like Polish language ;)). The HTML/CSS page will show the site logo on orange background and message about loading RSS channel. index.js and weblike.js for the second window (tab) will contain code implementing their functionality.
- Now it looks like this:
- I wrote such code for weblike.js: The code uses jFeed plugin to download RSS channel and put the result in the page weblike.html.
- The window looks like this: . For Polish feed there are problems with non-ascii characters. Such problems can be solved by $.UTF8decode() from jQuery-utils.
- After the fix code looks like this:
- For index.js I wrote such code:
- Which in android gives: