[TIMOB-493] implement background image for navbar

Crossing my fingers that this doesn't get pushed to 1.4

ack! :(

(from [1c21cf4ddb0d2a3b1bcf7f385ea9bc2f1b3e4ba9]) Closes #493 . window now supports a barImage property, and the window_navbar.js has a button to reflect this new feature. http://github.com/appcelerator/titanium_mobile/commit/1c21cf4ddb0d2a3b1bcf7f385ea9bc2f1b3e4ba9"> http://github.com/appcelerator/titanium_mobile/commit/1c21cf4ddb0d2...

When a window constructor url contains a subdirectory, the bar image url is relative to the subdirectory.

My initial expectation was for the bar image url to be relative to the parent file (app.js) and not the sub-context (win1.js).

If possible, having the url be relative to the parent may be a little more intuitive.

   // from within app.js
   var win2 = Ti.UI.createWindow({
       titleImage:'appcelerator_small.png',
       url:'hello/win1.js'
   });
   
   // this doesn't work
   win1.barImage = 'corkboard.jpg';
   // but this does
   win1.barImage = '../corkboard.jpg';
   });
   

When the bar image is defined in the constructor, it causes nav bar buttons to not display. Refreshing the nav bar area by changing tabs restores the buttons (and bar image).

The title of an opening window's navbar normally fades and slides into view. When using a barImage, it appears to break this animation. Observations:

1. When a new window uses a barImage, the title of the new window does not display. Workaround,: setTimeout 10 ms, set barImage to null, then to actual image and setTitle. This causes title to display, but without animation. Instead, it appears abruptly.

2. If the new window does not use a barImage, the title is rendered, but again, without animation.

(from [a38ad774baa02dd59218a2aaf2a0216d31e4e550]) Closes #493 (again) -- Setting the nav button now will cause the barImage to refresh (and be properly located) and more so, setting the barImage causes the url to be resolved at assign time. http://github.com/appcelerator/titanium_mobile/commit/a38ad774baa02dd59218a2aaf2a0216d31e4e550"> http://github.com/appcelerator/titanium_mobile/commit/a38ad774baa02...

Assign-time barImage url resolution works great. Thanks Blain!

During a barImage'd window's opening animation, the title appears abruptly rather than sliding in from the left. Can you add support for this animation?

re-opening see Justin's comment

This can actually be handled in the JS. You need to set the barImage when opening the window, NOT in the JS that lays out the window. Example:

    win = Titanium.UI.createWindow({
      url:'test.js',
      title:'Test',
      backgroundColor:'#fff',
      barImage:'../images/corkboard.jpg'
    });
    Titanium.UI.currentTab.open(win,{animated:true});
    

I'm doing this, but it does not appear to be working. When I remove the barImage from both windows, upon opening the 2nd window, the title slides and fades in. Whereas without it, the title does not slide and simply appears.

Okay, it doesn't work when you have a different barImage set previously. I'm not sure we can have any control over this but will look at it.

Appreciate you looking into it, thanks Stephen!

(from [3e56a1be575abe034f0062d68f7002e071136f03]) Closes #493: barImage backgrounds are removed from the view before focusing the new window. http://github.com/appcelerator/titanium_mobile/commit/3e56a1be575abe034f0062d68f7002e071136f03"> http://github.com/appcelerator/titanium_mobile/commit/3e56a1be575ab...

That was impressively fast. Grazie!

I hate to do this, but I noticed another possible issue. openPhotoGallery() causes the bar image to disappear.

This bug is getting too long and I don't want to reopen/rename it again. See #1091.