Page Comparison

...

The locale string ("en_US") for the application is set in config.js, and can be retrieved anywhere in the application by calling Titanium.App.Properties.getString('locale'). However, for convenience, the dictionary is added to the facade which should be accessible by every controller in the application. The proper way to implement text anywhere throughout the application is to write app.localDictionary.translatedTextStringKey.

Updating Application Graphics

There are a handful of graphics that should always be customized when customizing uMobile for release, and some that are optional (such as icons and in-app graphics). At a bare minimum, you should update:

1. Application Icons (Icons plural because Android and iOS have different guidelines for icon creation. This doesn't include the icons inside the app.)
2. Application Splash Screens

Creating the Application Icon

Both Android and iOS have very specific guidelines on what an icon for your application should look like, as well as at what dimensions you should provide your icon. Appcelerator has some general information about creating application icons in their wiki, but the steps below go into a little more detail. 

http://wiki.appcelerator.org/display/guides/The+Application+Project+Structure#TheApplicationProjectStructure-Applicationicon

1. Apple's icon guidelines: http://developer.apple.com/library/prerelease/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
2. Android's icon Guidelines: http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
   Since each OS has its own unique style of icon, a good approach is to create one icon for each, and save it at all the different required dimensions. 
   For iPhone and iPad:
3. Create an iOS icon at 512 x 512 (This size is used during the app submission process)
4. Save for iPhone at 2 sizes in the Resources/iphone folder, one for standard res (57 x 57) and one for Retina Display (114 x 114), such as ApplicationIcon.png & ApplicationIcon@2x.png. Titanium recognizes that adding @2x just before the file extension indicates that this asset is for retina display.
5. Save for iPad at 72 x 72 pixels, naming it ApplicationIcon_72.png
6. Create an Android icon using the guidelines in Android's UI Guidelines.
7. Save three resolutions of the icon in android/images/<high | medium | low>/ApplicationIcon.png. 72 x 72, 57 x 57, and 48 x 48. Note: The high, medium and low folders might not yet exist, so you need to create them.
8. In Titanium Developer, select the project on the left, select "Edit" in the top of the window, and set the "Application Icon" field to "ApplicationIcon.png".
9. When creating your iPad app, you might need to manually select the icon.
10. Test in the emulator to see if the icon shows up (you may need to delete the contents of the build/android folder, but not the folder itself. You may need to delete build/iphone, which is safe.)

Creating Splash Screens

Every platform utilizes a splash screen, an image that shows briefly while the application is loading. Since different devices have different display resolutions, the only attributes that should necessarily change with each splash screen are the dimensions. However, you can customize your splash screens as much as you'd like for different platforms and devices.

1. Create a standard portrait orientation splash screen in your graphic editor. It's probably easier to start with the biggest size, so if you're supporting iPad, you'll create a 768 x 1004 graphic (1004 instead of 1024 because of the status bar).
2. Save as <project-root>/Resources/iphone/Default-Portrait.png (This should always be the name of the file for iPad)
3. Rotate the image 90 degrees and change the size to 1024 x 748, re-arrange elements as necessary
4. Save as Resources/iphone/Default-Landscape.png (now both iPad splash screens are complete)
5. The process will need to be repeated for several more resolutions, listed below. 

   Tip
   When saving your different resolutions of splash screens, you'll be overwriting default splash screens created by Titanium when you created your project. For Android, these defaults are located in Resources/android/images/ and in several folders named like "res-long-land-hdpi"

Matrix of Splash Screen Resolutions

Stylizing the Application

...

In titanium, when creating new "View" objects, or any UI object, a 'create' method accepts an object containing style attributes (and sometimes value attributes). The style.js creates the foundation for the object to be passed into the create method, which can be appended if additional values need to be passed in at creation time. For a reference of common properties of view objects, view the Titanium API documentation for Titanium.UI.View: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.View-object

For example:

In style.js:

titleLabel: {
    color: '#000'
}

...