Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Example project from start to build

I have been all over the internet looking for a good method of packaging a product, but I just cannot seem to get a good foot hold.

is there a hello world example, with a complete build, or perhaps dare I wish,
a html javascript, CSS, example, even just a simple index.html with css from start to finish would be helpful.

I have the kitchen sink, but it is just too busy, too much for my poor little mind to grab hold of, something basic would be best, any suggestions, I was getting ready to list a project, but thought I would try here one last time to see if I could find any basic examples,)

For example if I wanted to have a index.html, with css and javascript, that could be packaged, as an app, for the ipad,

how would you design the two view, horz, vert, ?

— asked April 6th 2010 by Tim Franklin
  • example
  • hello
  • help
  • world

2 Answers

  • Accepted Answer

    One thing that might help you understand the Titanium Mobile model is that it's not really HTML based - it's mostly about Javascript. Sure, you can include HTML files with CSS and all the rest, but you just show them in "web views"; you don't code the basic structure and navigation of your app in them (or, at least, you shouldn't).

    Instead of a master index.html that's the starting place for a web page, Titanium Mobile apps start from a Javascript file called "app.js". You'll find it in the Resources directory of your project, and it's the first code that gets executed.

    By default, when you start a new project, app.js contains a tab bar with two buttons; each button corresponds to a "window"; and each window is empty except for a background color and a "label" element. Generally, you're going to fill these windows up with Javascript, which you'll store in individual .js files.

    I'd urge you to stick with Kitchen sink as it's really the best documentation resource out there. Hopefully my comments here can help you navigate it better. Keep in mind:

    • Everything starts from the app.js file. You'll see Kitchen Sink's app.js is a little different than the default one - it gives its windows a "url" property. This is how you tie JS code into windows.
    • If you're poking around in the simulator in Kitchen Sink and see something you like, you can usually guess at the name of its corresponding JS file in Resources/examples
    — answered April 6th 2010 by Nick Haffie-Emslie
  • Oh and here's the source code for an example project, simpler than Kitchen Sink, that the Appcelerator team put together to demo the 0.9 release of the API (quite similar to the current 1.2):

    Snapost Project

    — answered April 6th 2010 by Nick Haffie-Emslie
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.