15 Answers

• For those facing the 'url with not animation' problem.
  I've been running into the same.

  I finally got it to work in a 'almost similar to url' way.

  create your window/setup completely in a function (preferably in another js file (that is actually the point here))

  function MyWindow(){
  var someVar = "some data I'll need in this 'window' ";
  var win = Titanium.UI.createWindow();
  win.add(someOtherStuff);
  var btn = Titanium.UI.createButton();
  btn.addEventListener('click', onBtnClick);
  win.add(btn);
  
  function onBtnClick(e){
  // do fancy interactive stuff!
  }
  
  //more awesome coding goes here INSIDE the function.
  //everything related to the inner working of this window goes inside THIS FUNCTION!
  
  //when you're done...
  return win;
  }
  

  This might seem like a lot of work, but most of your (already written) window code will just be the same.
  Only thing to change here is to make sure you don't use Titanium.UI.currentWindow. Create a new Window insead. And don't forget to return the actual window object in the end.

  Then wherever in your application where you need this fancy cool window, you need to do 2 things:

  Include the above file you just created:

  Titanium.include('fancyCoolWindow.js');
  

  And then create your window like this

  var myWindow = new MyWindow();
  //the usual stuff can be done from here 
  myWindow.title = "I am Chuck Norris";
  //etc
  

  And now you've actually got the external-file defined window inside the myWIndow var… Aaaaand…

  myWindow.open({transition:Titanium.UI.iPhone.AnimationStyle.CURL_DOWN});
  

  … works just fine!

  I'm doing this in my current project and it works just fine.
  I don't think it's too much of a workaround (I actually like this way of working better).

  I do have my doubts about how memory-effecient this is. People with more knowledge and experience about this could help out here ;)

  My 2ct :)
  Good luck!

• I had a similar problem and this looks like a work around. Disclaimer: I haven't had a chance to fully test it to make sure it's stable.

  In my app, I wanted to always close and re-open views and windows to get them to re-initialize variables, form values, etc. All my windows are loaded from a url.

  I attempted this and got an empty window like everyone else.

  searchForm.open({transition:Titanium.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});
  searchHistory.close();

  I put the transition on the close and reversed the order, and got the transition I wanted.

  searchHistory.close({transition:Titanium.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});
  searchForm.open();

  Hope this helps someone.

• any resolution for this? i've got the same problem. the transition fires but no new page.

  nxtBtn.addEventListener('click', function()
  {
      var p1 = Ti.UI.createWindow({
          url: 'page1.js',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
      });
      var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
      p0.animate({view:p1,transition:t});
  });
  

  thx!

• Hi all,

  I wrote a tricky code to enable correct transition for window with a url.

  app.js:

  var w = Ti.UI.createWindow({url: 'window1.js'});
  w.open();
  
  Ti.App.addEventListener('openwindow', function(e){
      var win = Ti.UI.createWindow(e.option);
      win.open();
  });
  

  window1.js:

  var w = Ti.UI.currentWindow;
  var b1 = Ti.UI.createButton({title: 'open1', top:20, left:20, width: 100, height:50});
  b1.addEventListener('click', function(){
    var w2 = Ti.UI.createWindow({url: 'window2.js'});
    w2.open();
  });
  
  w.add(b1);
  

  window2.js:

  function openWindow( option, transition ){                                                     
     var curwin = Ti.UI.currentWindow;
     if( curwin && transition ){
         curwin.close({transition: transition}); 
     }   
  
     Ti.App.fireEvent('openwindow', { option: option } );
  }
  
  var w = Ti.UI.currentWindow;
  var b1 = Ti.Ui.createButton({title: 'open2', top:20, left:20, width: 100, height:50});
  b1.addEventListener('click', function(){
    openWindow({url: 'window1.js'}, Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT);
  });
  
  w.add(b1);
  

  I think window.close with transition parameter and Ti.App.addEventListner make correct transition.

• Hey Marijke,

  Instead of this:

  w.open({transition:Ti.UI.iPhone.AnimationStyle.CURL_UP});
  

  Try something like this instead and see if it works:

  var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
  Ti.UI.currentWindow.animate({view:w,transition:t});
  

• @Dan,

  Although your idea might provide a working solution, it would be almost imposible for me to include all the lines of code of the destination pages into my first page. Thank you for your help. I filed a bug-report at lighthouse and hope this will be resloved soon. I had some hope that I was making some kind of mistake because the window-transition example provided by appcelarator has a url in it aswell:

  https://developer.appcelerator.com/apidoc/mobile/1.1/Titanium.UI.Window

  example:

  var window2 = Titanium.UI.createWindow({url:'foo.js'});
  var t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT;
  window1.animate({view:window2,transition:t});

  I guess they didn´t have a chance to test the example…

• I have the same problem as @Kelly. For now I'm turning off all transition animations between new windows that are spawned by a JS URL.

• bump!

• So it appears this is broken, I worked around it, kind of in a scary way….

      var letterslowerWin = Titanium.UI.createWindow({
          url:'../windows/lettersLower.js',
          backgroundImage:'../images/bg_small.png',
          backgroundColor:"#331373",
          fullscreen:true
      }); 
      var t = Ti.UI.iPhone.AnimationStyle.CURL_DOWN;
      win.animate({view:letterslowerWin,transition:t});
      setTimeout(function() {
          win.hide();
          letterslowerWin.open();
  
      },1000);
  

  Good luck, hopefully this bug gets fixed.

• I'm late to the party, but I just encountered this issue as well. It appears that any modal with a url property defaults to the Cover Vertical transition (as demonstrated in the Kitchen Sink). I can't, for the life of me, get Flip Horizontal to work unless I remove the url.

  Anyone find a fix for this yet?

• Bump! I haven't been able to get this to work. I want to load a window before any windows have been loaded into the main UIView yet, so none of the above workarounds will work for me.

  Any status on this yet?

  iOS 4.0
  Titanium SDK 1.4.0
  iPhone SDK 4.0
  Titanium version 1.2.1

• Can you link us to the contents of myscript.js?

  Something in that file (which is executed between the creation and opening of the window) must be interfering with the transition.

• Dan,

  I have just tried your suggestion but unfortunately the problem persists…I have tried it on my own code and aswell on the code in kitchensink (transitions.js - on button b1). Now however there is a transition but to a blank window (you can only see the backgroundcolor if specified). There is no content loaded like when using win.open().

  James,

  I have tried several kinds of content for myscript.js. The simplest thing I could think of was this:

  var win = Titanium.UI.currentWindow;

  var label = Ti.UI.createLabel({
  top:100,
  left:10,
  text:'Just testing!!!',
  color:'#000000',
  textAlign:'left',
  width:'250',
  height:'50',
  font:{
  fontFamily:'arial',
  fontSize:40,
  fontWeight:'bold'
  }
  });
  win.add(label);

  But even here I was not able to create a transition between the two windows and get the content of the second window to load.

• I'm facing the same issue trying to fake a modal slide from the bottom:

  var fakeModal = Titanium.UI.createAnimation();
  fakeModal.height = '100%';
  fakeModal.duration = 300;
  
  var newWin = Ti.UI.createWindow({url:'wizard.js', height: 0, bottom: 0, backgroundColor:'#369'});
  newWin.open(fakeModal);
  

  No url: Correct (fills the screen with blue).

  With url: Wrong, often invisible (example: a table view added to the "newWin"/currentWindow in the wizard.js).

  Without animation/initial offsets: works correctly (shows table view in wizard.js)

  The contents of the destination JS (wizard.js) can be empty and it fails – no contents (a table view).

  Trying Ti.UI.currentWindow.animation({view:newWin,transition:fakeModal}); doesn't work either.

  Ti:SDK 1.1.2 / iPhone:SDK 3.1.3

• @marijke You're right, the transition will happen but the content of the page will not be displayed. You can cheat and add your page content after var w = Ti.UI.createWindow and w.add everything there before you open w, but that's not practical. Seems like a bug.

  @bill check out this post, seems similar to what you're trying to do and might help.