Appcelerator CTO Nolan Wright will be co-hosting a webinar with Zeon, covering the business case for developing apps with Titanium. Via Zeon:

The following is the latest entry in a series of Tuesday blog posts covering basic topics in Titanium and JavaScript development.

Titanium allows developers to use local HTML inside a WebView component. There are a variety of compelling use cases for this, in situations where the browser provides the best tools for a given job. Whether it’s badass canvas libraries like three.js, as seen in the “Twisti” series on Forging Titanium, or simply displaying structured text in HTML, there are lots of places where a WebView and local HTML content may be the best solution.

Beyond these targeted uses of HTML in native applications, some apps choose to use HTML and CSS to render their entire user interface. These types of apps are popularly referred to as “hybrid” applications, where an HTML page is wrapped in a native shell, giving it access to native functions not usually available to a web application. Now, generally we believe that native UI is best for native applications, and will produce the most performant, familiar, and responsive interface. However, there may be use cases where an HTML/CSS-based UI may make sense given your app’s requirements.

In these situations, Titanium presents a very flexible hybrid application solution, while still retaining access to the thousands of native APIs and full native extensibility provided by the Titanium Mobile SDK. In this tutorial, we will show how local web pages can access native APIs in Titanium, using jQuery Mobile for our hybrid app’s user interface.

Embedding Local HTML

Creating an embedded WebView which references local HTML is trivial in the Titanium JavaScript API:

var win = Ti.UI.createWindow();
 
var webView = Ti.UI.createWebView({
	url:'/index.html'
});
win.add(webView);
 
win.open();

Now, we place our index.html file, and the dependencies from jQuery Mobile, in our resources directory:

After throwing together some HTML to showcase basic jQuery Mobile UI, we’ll end up with a user interface which looks something like this:

Important note: By default, Titanium processes all JavaScript in the resources directory on Android to optimize for native apps. For a hybrid app today, you must prevent this behavior to keep your application HTML’s directory paths intact. To accomplish this, add the following line to your tiapp.xml:

<property name="ti.android.compilejs" type="bool">false</property>

So that’s the first part of the puzzle – in this way, we can embed and use local HTML in out native app just like we would if we were programming in the browser. But how do we access native functionality? Titanium doesn’t actually expose native APIs directly to the WebView. Native APIs are accessed indirectly using Ti.App.fireEvent and Ti.App.addEventListener. Using these messaging APIs, we can communicate between the JavaScript context of the web view wrapper and the native app.

We’ll explore techniques for doing that in the next article in this series.

A new community site has sprung up dedicated to showcasing the 30,000+ apps built with Titanium! Sharry Stowell (of Learning Titanium) has posted this new community site where developers can add their applications to a categorized showcase.

To submit your application, tweet a link to your app in the store/market where it resides to TiBuilt. Sharry will process it and bring it into the fold, and your app skills will be on display for all to see. Great work Sharry!

Apple has recently released Xcode 4.3, which some developers have already started adopting. Please note that per our compatibility matrix here, Xcode 4.2 is the latest Xcode version that can work with Titanium. We are working to add Xcode 4.3 support as soon as we can.

An unsupported and untested workaround can be found on the Q&A here, but your mileage will vary. Please refrain from upgrading your Xcode tools to version 4.3 until we can release tooling support for that version.

Thanks, and we’ll update this post as we have new information.