Appcelerator Blog

The Leading Resource for All Things Mobile

Forging Titanium Episode 2: A Cross-Platform Navigation Controller

0 Flares 0 Flares ×

Editor’s note: This and future episodes of Forging Titanium are available here.

When developing cross-platform applications in Titanium, one of the challenges facing a developer is maximizing code reuse while still conforming to the UI conventions of the Android or iOS platform.  In this week’s episode, we explore how we could create a hierarchical Navigation Controller, which would display a series of windows in an easily navigable stack.  Be sure to join us next week as well, when further explore how to extend core Titanium UI components to create custom UI controls.

Episode Resources:

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

17 Comments

  1. Klaus

    Oh – and a question.
    I did my best to add this “special” controller to a tab-based application. It was not difficult to add a native “IPhone” navigation controller, but I couldn’t figure out how to use your control together with tabs.

    In all cases – first this videos are fantastic and a great help. And second exactly this control seems to me a basic feature to write cross plattform apps. Thanks a lot!
    Klaus

  2. Thanks so much for this Kevin, I have a full app that uses the NavigationGroup needing to be ported over to Android. Hopefully I can use this.

  3. One thing i have found really weird is that I cant set certain items to the child windows. For example, I cant use the IPhone only tools to set a top right button in the test window. It only adds to the very first window and then I get a weird flickr effect in my other screens as I move between them.

    I also found that I can create extra window classes that I have extended to do all sorts of things but without being able to set the refresh button and other controls Im a bit stumped as to how to progress.

    Great concept however and Ill be using this and the ep003 heaps as a great way to extend functionality.

  4. I found a solution to this kinda – It (The title and right nav button) only doesn’t show the title IF you have a background image being used for your title bar.

    I’m not sure if this is a known bug or not.

  5. Alberto Berti

    Kevin, the code in the referenced reponeeds to be updated!

  6. Alberto Berti

    The code in repo is ok now, thanks Kevin

  7. This example no longer works in Android.

    I am trying to use it as is in Android 2.2 in the simulator and it crashes.

    When I click add new window it says the app has crashed unexpectedly and to force close the app.

    After this has happened the first time it then will not get based the boot up screen.

    This is a real problem for me because I have used this design pattern for a major app and I cant even get a debug message to work out what the problem is.

    Any one else know what to do ?

    • Kevin Whinnery

      If you create a Q&A post with the contents of the Android log output we can potentially help – shoot a link to community@appcelerator.com and we can take a look.

  8. How would I implement this inside a tabGroup???

    I have a tabGroup at app.js and I would like to have a NavigationController inside each tab.

    How would I do that? Any ideas or most importantly, examples?

    Thanks

  9. Kai Müller

    Thank you for these episodes !

    When you “Add a New Window” and then “Go to the Home Window”, and then again “Add a New Window”, each time a new NavigationGroup is created. Is this correct?

  10. I am testing this sample from github to see whether I can use it as the basis for rebuilding an iOS app I already have for cross platform. Two lines of code require tweaking to make it work in Android, though it works as-is on iPhone.

    I wonder if I’m using a wrong version of the Android SDK, though 2.2 is the only one with which I’ve gotten the sample to run.

    In app.js, this change seems to be required by Android and works fine in iOs5:
    //open initial window
    controller.open(new TestWindow(>>this.<>exports.<<TestWindow(navController));

    Without the change to TestWindow.js, I get this error in Android: http://i1080.photobucket.com/albums/j324/Todd_Rimes/Screenshot2011-12-24at103831AM.png

    I'm new to Titanium and really *want* the cross-platform thing to work! Any pointers and non-snarky advice greatly appreciated.

    ~Todd

  11. I am testing this sample from github to see whether I can use it as the basis for rebuilding an iOS app I already have for cross platform. Two lines of code require tweaking to make it work in Android, though it works as-is on iPhone.

    I wonder if I’m using a wrong version of the Android SDK, though 2.2 is the only one with which I’ve gotten the sample to run.

    In app.js, this change seems to be required by Android and works fine in iOs5:
    //open initial window
    controller.open(new TestWindow(####this.####controller));

    In TestWindow.js, this change is required by Android but causes iOs5 not to launch:
    var add = Ti.UI.createButton({
    title:’Add A New Window’,
    height:’50dp’,
    width:’200dp’,
    top:’20dp’
    });
    add.addEventListener(‘click’, function() {
    navController.open(new ###exports.###TestWindow(navController));

    Without the change to TestWindow.js, I get this error in Android: http://i1080.photobucket.com/albums/j324/Todd_Rimes/Screenshot2011-12-24at103831AM.png

    I’m new to Titanium and really *want* the cross-platform thing to work! Any pointers and non-snarky advice greatly appreciated.

    ~Todd

  12. Sorry I had to post twice; the angle braces I used to highlight my code changes got munged. Also, this is the error I get if I do not make the first change above: http://i1080.photobucket.com/albums/j324/Todd_Rimes/Screenshot2011-12-24at93448AM.png

  13. Also, on the third line below:

    exports.TestWindow = function(navController) {
    var win = Ti.UI.createWindow({
    title:’Window ‘+controller.windowStack.length,

    shouldn’t it be:

    exports.TestWindow = function(navController) {
    var win = Ti.UI.createWindow({
    title:’Window ‘+###navController###.windowStack.length,

    ?

  14. I finally discovered that I *had to* make all these changes in Android and that they do in fact work on iOs 5; I had to clean the project before rebuilding it for the iOs simulator. Thank you!
    ~Todd

  15. Zak

    Great post. I’m facing many of these issues as well..

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×