How To Set Up The Tide SDK: Developing Desktop Applications with HTML5, CSS3 and Javascript

You downloaded Tide SDK, so what next?

Last night, I discovered you could actually build web applications with HTML5 and CSS3 with TideSDK using Titanium Desktop. It took me about 6 hours of searching and reading before I could finally understand how to set up the SDK and create an application with it. The documentation on the site was least helpful and to make matters worse, Titanium Desktop itself has been discontinued.

So I will write out a guide as to how to set up TideSDK and how to create your first Hello World application. Here are the steps.

1. Download the SDK from the TideSDK website
2. Download TiDev Community app. This will serve as your IDE.
3. Download the HelloWorld files from the GitHub repository. The HelloWorld app teaches the following
   • The use of the API to create a menu
   • Adding a menu item to a menu with a simple callback to prompt the user to exit the app
   • Displaying content using HTML and CSS.
4. Import the downloaded app(the HelloWorld) app to the application (Click on Import then locate the unzipped/untarred folder).
5. Run the Hello World app! Click on ‘Test & Package’ button in the TiDev menu, then click on the ‘Launch App’ button in the lower left. The Hello World app will start and begin logging to the screen. Debugging statements you include in your code will appear.

var menu = Ti.UI.createMenu(),
fileItem = Ti.UI.createMenuItem('File'),
exitItem = fileItem.addItem('Exit', function() {
  if (confirm('Are you sure you want to quit?')) {
    Ti.App.exit();
  }
});

menu.appendItem(fileItem);
Ti.UI.setMenu(menu);