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!
Editor’s Note: This and all further updates to internationalization can be found in the wiki.
In the wiki we have pretty extensive documentation on internationalization of application resources. One thing that has been a little tricky for some developers, though, is changing the actual application name based on locale.
For example, say you had an application named “Cat”, but you wanted it to be “Gato” in Spanish locales, “猫” in Japanese, and so on. Let ‘s see how you would prepare your application to display its name appropriately for both iOS and Android distributions.
Before learning to configure your apps to use localized strings for application names, let’s first see how we can change locales manually for testing. Below you can find short videos for both iOS and Android that show you exactly how to do that.
For iOS it’s pretty simple. Use the standard method for creating localization paths, which means creating and using the i18n directory like this (details here):
In each of your language directories under i18n, you’ll include an app.xml file that includes the necessary XML structure for defining the localized name of your app. That structure will look like his for each file:
i18n/en/app.xml, i18n/es/app.xml, i18n/ja/app.xml
And that’s it. The next time you build your application, these localized strings will be used for your application name. If everything was configured correctly, you’ll see the app name has changed based on the selected locale.
In its current state, Android app name localization is a little more involved. First, we need to create language-specific resource folders explicitly for Android. To do so, we will create the platform/android/res/values-(language code) directory structure, like this:
You’ll notice in this case we are creating the Android native strings.xml files, rather than the app.xml files used by iOS. While the file names are different, the contents will be identical to those in the iOS files seen above.
Aside from the strings.xml files, there’s one more thing we need to add. To make your app use these localized strings, you need to modify the existing AndroidManifest.xml. In order to do that, We need to add that custom manifest file, seen in the picture above at platform/android/AndroidManifest.xml. The AndroidManifest.xml file placed here should be a copy of the generated AndroidManifest.xml file found in your project’s build/android directory. For more details on custom AndroidManifest.xml files, check out this wiki entry on the topic.
Now open up platform/android/AndroidManifest.xml and change the android:label attributes of the <application> and <activity> elements from the defined value of your app name to the value @string/app_name. Yeah, that was a lot of instructions all in one sentence, so here’s a gist to show you what I mean:
With these changes in place, you can now rebuild your app (probably best to give it a clean first) and you’ll have a successfully localized application name.
This is how your home screens might look on Android and iOS when Japanese is the selected language.
 |
 |
And just in case my description was clear as mud, check out a Titanium project with these localizations set up first hand. Just go to the AppNameLocalization project repository on Github. It contains the very basic project discussed here. With all this, you should be well-equipped to distribute your apps in as many languages as you wish to support.
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.
Editors note: This and future episodes of Forging Titanium are available here.
Today we’re going to do something a little different with Forging Titanium. We’re going to take a popular app from the wild and see how we can implement some of its features in Titanium. Today’s target: the animated menu from the Path mobile app.
In this episode we’ll cover topics like:
With these techniques, we’ll not only show you that Titanium can execute and perform as well as its native counterpart, but also do so from a single code base.
The following is the latest entry in a series of Tuesday blog posts covering basic topics in Titanium and JavaScript development.
A common need in Titanium applications is to display the content of a remote web page inside a web view. Maybe it’s a blog post linked to in an RSS feed or your own website – in any event, you often need to embed that content directly in your app, rather than launching a web page in the device’s browser.
In order to do this effectively, you should be sure to give the user feedback as the remote site is loading, so they know your app is doing something. This is especially important for web pages that are not mobile optimized, and tend to load up slowly over a mobile data network. How you create this UI will vary greatly depending on the nature of your app, but the events you’ll listen for on the web view will be the same. The web view has lifecycle events that will clue you in to the current progress of a web page as it loads.
Let’s create a simple application with a web view that will load the url given to it in a text field:
var w = Ti.UI.createWindow({ backgroundColor:'white' }); var form = Ti.UI.createView({ height:60, top:0, backgroundColor:'#787878' }); w.add(form); var urlField = Ti.UI.createTextField({ value:'http://www.cnn.com', top:5, left:5, right:120, bottom:5, borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED }); form.add(urlField); var btn = Ti.UI.createButton({ width:110, right:5, top:5, bottom:5, title:'Go' }); form.add(btn); var webView = Ti.UI.createWebView({ url:'http://www.cnn.com', top:60 }); w.add(webView); w.open();
Which will look like this on iOS and Android:
Now, let’s expand that application with a modal loading state we’d like to display as the page loads by adding an opaque view to the main window:
var overlay = Ti.UI.createView({ backgroundColor:'#cdcdcd', opacity:0.75 }); overlay.add(Ti.UI.createLabel({ height:'auto', width:'auto', text:'Loading...', color:'#787878', font: { fontSize:24, fontWeight:'bold' } })); w.add(overlay);
Which should look like:
Next, let’s add some logic around the button click and the web view’s “load” event to toggle the overlay.
btn.addEventListener('click', function() { urlField.blur(); webView.url = urlField.value; overlay.show(); }); webView.addEventListener('load', function() { overlay.hide(); });
Our little web browser is now complete! Drop this complete sample in app.js to see it in action:
var w = Ti.UI.createWindow({ backgroundColor:'white' }); var form = Ti.UI.createView({ height:60, top:0, backgroundColor:'#787878' }); w.add(form); var urlField = Ti.UI.createTextField({ value:'http://www.cnn.com', top:5, left:5, right:120, bottom:5, borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED }); form.add(urlField); var btn = Ti.UI.createButton({ width:110, right:5, top:5, bottom:5, title:'Go' }); form.add(btn); var webView = Ti.UI.createWebView({ url:'http://www.cnn.com', top:60 }); w.add(webView); var overlay = Ti.UI.createView({ backgroundColor:'#cdcdcd', opacity:0.75 }); overlay.add(Ti.UI.createLabel({ height:'auto', width:'auto', text:'Loading...', color:'#787878', font: { fontSize:24, fontWeight:'bold' } })); w.add(overlay); btn.addEventListener('click', function() { urlField.blur(); webView.url = urlField.value; overlay.show(); }); webView.addEventListener('load', function() { overlay.hide(); }); w.open();
Hope that helps!
