Monday, February 25, 2013

Titanium Mobile Opening New Window Closes the Application on Android

I encountered this error while testing the application on someone else's Android device. I wondered why the application suddenly crashes whenever I open something on a new window. At first I thought it has something to do with memory allocation errors, but when I checked the logs, it shows nothing. Then finally, when I can't see anything wrong with the code, I checked the device and look for the differences of the device from the one I was using. Finally I saw this checkbox under android Settings -> Developer Options:


Apparently, enabling this setting closes the main activity of the android application even if it is still needed. To prevent this from happening, you need to change the initialization of the new window a bit.

In Titanium Android, when creating a window, setting the property navBarHidden to true will often create a new activity like the code below:

1:  var newWin = Ti.UI.createWindow({  
2:            navBarHidden : true,  
3:            backgroundColor : 'red',  
4:            top : 0,  
5:            left : 0,  
6:            right : 0,  
7:            bottom : 0  
8:       });  

To prevent a new activity from being called, just use the property modal and set it to true like the code below:

1:  var newWin = Ti.UI.createWindow({  
2:            navBarHidden : true,  
3:            backgroundColor : 'blue',  
4:            top : 0,  
5:            left : 0,  
6:            right : 0,  
7:            bottom : 0,  
8:            modal : true  
9:       });  

The full source code for the demo can be see here

Thursday, February 21, 2013

Custom Font on Local Html for Titanium Mobile SDK WebView for Android

While trying to load a locally generated html on the android webview, I noticed that it was not able to render the text content with the custom font face I was using. After some searching, I found out that this issue is not only present on titanium sdk but also from the base android sdk as well (here is the link for the solution on android: Changing Font Face on Android Webview). Using essentially the same approach for the titanium code, here is what I did:

1. Put the font file on the Resource directory of the Titanium project. In here, I am using Airstream.ttf for my custom font face and I placed it in a subfolder named 'fonts' on the Resource folder.

2. Set the css code to use the font face accordingly.
<style type="text/css">
  body {
    font-family:Airstream;
    font-size:20pt;
  }
  @font-face {
     font-family : "Airstream";
     src:url("Airstream.ttf");
  }
</style>

3. On your application code, copy the font file to the directory where your local html (to be rendered on the WebView) will be written. In my code, I just used the default application directory.

1:  var fontFile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory + 'fonts/', 'Airstream.ttf');  
2:  var fontCopy = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'Airstream.ttf');  
3:  if (!fontCopy.exists()) {  
4:       fontFile.copy(Ti.Filesystem.applicationDataDirectory + 'Airstream.ttf');  
5:  }  

4. Write the html file in the same directory as the font file and load it on the webview:

1:  var htmlFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'test.html');  
2:  htmlFile.write(htmlContent);  
3:  if (htmlFile.exists()) {  
4:       webView.setUrl(htmlFile.nativePath);  
5:  }  

Here is what it looks like on the device: