Help With Changing Preference Table via Transition

Discussion in 'Jiggy Runtime Development' started by carboycam, Jun 10, 2008.

  1. carboycam

    carboycam New Member

    Joined:
    Feb 20, 2008
    Messages:
    43
    Likes Received:
    0
    Help With Navigating Preference Table via Transition

    Here is the code for my test app. In the App, you tap a table cell to change to a new table. When this happens, the there is an animation/transition from right to left. But there are a few problems. If you run the code, you will see that the nav bar title disappears. Also, is there a more efficient way of doing this?

    Code:
    Plugins.load( "UIKit" );
    
    var itemOne = new UINavigationItem( "Main Menu" );
    var itemTwo = new UINavigationItem( "Settings" );
    
    var window = new UIWindow( UIHardware.fullScreenApplicationContentRect );
    window.setHidden( false );
    window.orderFront();
    window.makeKey();
    window.backgroundColor = [ 1 , 1 , 1 , 1 ];
    
    var tview = new UITransitionView( window.bounds );
    
    window.setContentView( tview );
    
    var bar = new UINavigationBar( [ 0 , 0 , window.bounds[ 2 ] , 44 ] );
    bar.showButtonsWithStyle( null , 0 , null , 0 );
    
    var setbar = new UINavigationBar( [ 0 , 0 , window.bounds[ 2 ] , 44 ] );
    setbar.showButtonsWithStyle( "Back" , 2 , null , 0 );
    
    /////////////////////
    ///// MAIN MENU /////
    /////////////////////
    
    // Create the preferences table
    
    var ptable = new UIPreferencesTable( [ 0 , 44 , 320 , 460-44 ] , tview.bounds );
    
    // Return the number of groups that will be in the table
    
    ptable.onGetNumberOfGroups = function( tbl )
    {
      return 1;
    }
    
    // Return the number of rows in each group
    
    ptable.onGetNumberOfRowsInGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return 1;
      }
    }
    
    // Tell the table that the third group is a label group
    
    ptable.onIsLabelGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return false;
      }
    }
    
    // Now, create the title cells - we only need 2 because the third
    // group is a label
    
    var titleCells = [];
    
    var titleCell;
    
    titleCell = new UIPreferencesTableCell();
    titleCell.title = "Menu";
    
    titleCells.push( titleCell );
    
    // Add the event handler to return the title cells
    
    ptable.onGetCellForGroup = function( tbl , group )
    {
      if ( group >= 0 && group < titleCells.length )
        return titleCells[ group ];
      else
        return null;
    };
    
    ptable.onGetHeightForRow = function( tbl , group , row , proposedHeight )
    {
      if ( row == -1 )
      {
        // This is the height for title groups
    
        return 40;
      }
    
      // Otherwise, we return the height it wants
    
      return proposedHeight;
    };
    
    ptable.onShowDisclosureForRow = function( tbl , row )
    {
      if ( row == 1)
      {
      return true; //This means all rows have an arrow, use row variable to be selective
      }
      else
      {
      return false;
      }
    }
    
    var cells = [ [] , [] , [] ];
    
    var cell;
    var control;
    
    // group 0 , cell 0
    
    cell = new UIPreferencesControlTableCell();
    cell.title = "App Settings";
    cell.setEnabled( true );
    cell.showSelection = false;
    cells[0].push( cell );
    cell.onTap = function()
    {
    setbar.pushNavigationItem( itemTwo );
    tview.transitionFrom( 1 , blueView , redView );
    }
    
    ptable.onGetCell = 
      function( tbl , group , row )
      {
        return cells[ group ][ row ];
      };
      
    ptable.reloadData();
    
    /////////////////////////
    ///// END MAIN MENU /////
    /////////////////////////
    
    /////////////////////
    ///// CONF MENU /////
    /////////////////////
    
    // Create the preferences table
    
    var conftable = new UIPreferencesTable( [ 0 , 44 , 320 , 460-44 ] , tview.bounds );
    
    // Return the number of groups that will be in the table
    
    conftable.onGetNumberOfGroups = function( tbl )
    {
      return 1;
    }
    
    // Return the number of rows in each group
    
    conftable.onGetNumberOfRowsInGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return 1;
      }
    }
    
    // Tell the table that the third group is a label group
    
    conftable.onIsLabelGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return false;
      }
    }
    
    // Now, create the title cells - we only need 2 because the third
    // group is a label
    
    var titleCellst = [];
    
    var titleCellt;
    
    titleCellt = new UIPreferencesTableCell();
    titleCellt.title = "About";
    
    titleCellst.push( titleCellt );
    
    // Add the event handler to return the title cells
    
    conftable.onGetCellForGroup = function( tbl , group )
    {
      if ( group >= 0 && group < titleCells.length )
        return titleCellst[ group ];
      else
        return null;
    };
    
    conftable.onGetHeightForRow = function( tbl , group , row , proposedHeight )
    {
      if ( row == -1 )
      {
        // This is the height for title groups
    
        return 40;
      }
    
      // Otherwise, we return the height it wants
    
      return proposedHeight;
    };
    
    conftable.onShowDisclosureForRow = function( tbl , row )
    {
      if ( row == 1)
      {
      return false; //This means all rows have an arrow, use row variable to be selective
      }
      else
      {
      return false;
      }
    }
    
    var tcells = [ [] , [] , [] ];
    
    var tcell;
    
    // group 0 , cell 0
    
    tcell = new UIPreferencesControlTableCell();
    tcell.title = "Version " + JiggyVersion;
    tcell.setEnabled( true );
    tcell.showSelection = false;
    tcells[0].push( tcell );
    
    conftable.onGetCell = 
      function( tbl , group , row )
      {
        return tcells[ group ][ row ];
      };
      
    conftable.reloadData();
    
    /////////////////////////
    ///// END CONF MENU /////
    /////////////////////////
    
    var blueView = new UIView( tview.bounds );
    blueView.backgroundColor = [ 0 , 0 , 1 , 1 ];
    
    var redView = new UIView( tview.bounds );
    redView.backgroundColor = [ 1 , 0 , 0 , 1 ];
    
    // You don't need to add the views to the transition
    // view - you just tell it to transition to them.
    // 0 means "immediate" - to set the first view
    
    tview.transition( 0 , blueView );
    
    
    blueView.addSubview( ptable );
    redView.addSubview( conftable );
    
    // When you tap on the blue view, the red one will 
    // slide in from the right
    
    bar.pushNavigationItem( itemOne );
    setbar.pushNavigationItem( itemTwo );
     
    blueView.addSubview( bar );
    redView.addSubview( setbar );
    
    setbar.onButtonClicked = function( bar , button )
    {
      if ( button == 1 )
      {
      tview.transitionFrom( 2 , redView , blueView );
      blueView.addSubview( ptable );
      }
    }
    Any help will be appreciated.

    Please Register or Log in to view images

  2. PAEz

    PAEz New Member

    Joined:
    Jan 29, 2008
    Messages:
    201
    Likes Received:
    10
    I thought Id have a look at this and the NavigationBar thingie sure didnt work like I thought it would.
    Plus your prob seemed odd aswell and I dont think it like having two bars??...god knows... anywayz I gave up on it working the way I thought it should, and then gave up and the way i wanted it to work and in the end I came up with this (basically use one nav bar and change it as needed, could be a hassle if you go to many pages in, i dunno)....
    Code:
    Plugins.load( "UIKit" );
    
    var itemOne = new UINavigationItem( "Main Menu" );
    var itemTwo = new UINavigationItem( "Settings" );
    
    var window = new UIWindow( UIHardware.fullScreenApplicationContentRect );
    window.setHidden( false );
    window.orderFront();
    window.makeKey();
    window.backgroundColor = [ 1 , 1 , 1 , 1 ];
    
    var tview = new UITransitionView( window.bounds );
    
    window.setContentView( tview );
    
    var bar = new UINavigationBar( [ 0 , 0 , window.bounds[ 2 ] , 44 ] );
    bar.showButtonsWithStyle( null , 0 , null , 0 );
    //var setbar = new UINavigationBar( [ 0 , 0 , window.bounds[ 2 ] , 44 ] );
    //setbar.showButtonsWithStyle( "Back" , 2 , null , 0 );
    
    /////////////////////
    ///// MAIN MENU /////
    /////////////////////
    
    // Create the preferences table
    
    var ptable = new UIPreferencesTable( [ 0 , 44 , 320 , 460-44 ] , tview.bounds );
    
    // Return the number of groups that will be in the table
    
    ptable.onGetNumberOfGroups = function( tbl )
    {
      return 1;
    }
    
    // Return the number of rows in each group
    
    ptable.onGetNumberOfRowsInGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return 1;
      }
    }
    
    // Tell the table that the third group is a label group
    
    ptable.onIsLabelGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return false;
      }
    }
    
    // Now, create the title cells - we only need 2 because the third
    // group is a label
    
    var titleCells = [];
    
    var titleCell;
    
    titleCell = new UIPreferencesTableCell();
    titleCell.title = "Menu";
    
    titleCells.push( titleCell );
    
    // Add the event handler to return the title cells
    
    ptable.onGetCellForGroup = function( tbl , group )
    {
      if ( group >= 0 && group < titleCells.length )
        return titleCells[ group ];
      else
        return null;
    };
    
    ptable.onGetHeightForRow = function( tbl , group , row , proposedHeight )
    {
      if ( row == -1 )
      {
        // This is the height for title groups
    
        return 40;
      }
    
      // Otherwise, we return the height it wants
    
      return proposedHeight;
    };
    
    ptable.onShowDisclosureForRow = function( tbl , row )
    {
      if ( row == 1)
      {
      return true; //This means all rows have an arrow, use row variable to be selective
      }
      else
      {
      return false;
      }
    }
    
    var cells = [ [] , [] , [] ];
    
    var cell;
    var control;
    
    // group 0 , cell 0
    
    cell = new UIPreferencesControlTableCell();
    cell.title = "App Settings";
    cell.setEnabled( true );
    cell.showSelection = false;
    cells[0].push( cell );
    cell.onTap = function()
    {
    bar.pushNavigationItem( itemTwo);
    bar.showButtonsWithStyle( "Back" , 2 , null , 0 );
    tview.transitionFrom( 1 , blueView , redView );
    bar.onButtonClicked = function( bars , button )
    {
      if ( button == 1 )
      {
    bar.popNavigationItem();
      tview.transitionFrom( 2 , redView , blueView );
    //  blueView.addSubview( ptable );
    bar.showButtonsWithStyle( null , 0 , null , 0 );
    
      }
    }
    }
    
    ptable.onGetCell = 
      function( tbl , group , row )
      {
        return cells[ group ][ row ];
      };
      
    ptable.reloadData();
    
    /////////////////////////
    ///// END MAIN MENU /////
    /////////////////////////
    
    /////////////////////
    ///// CONF MENU /////
    /////////////////////
    
    // Create the preferences table
    
    var conftable = new UIPreferencesTable( [ 0 , 44 , 320 , 460-44 ] , tview.bounds );
    
    // Return the number of groups that will be in the table
    
    conftable.onGetNumberOfGroups = function( tbl )
    {
      return 1;
    }
    
    // Return the number of rows in each group
    
    conftable.onGetNumberOfRowsInGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return 1;
      }
    }
    
    // Tell the table that the third group is a label group
    
    conftable.onIsLabelGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return false;
      }
    }
    
    // Now, create the title cells - we only need 2 because the third
    // group is a label
    
    var titleCellst = [];
    
    var titleCellt;
    
    titleCellt = new UIPreferencesTableCell();
    titleCellt.title = "About";
    
    titleCellst.push( titleCellt );
    
    // Add the event handler to return the title cells
    
    conftable.onGetCellForGroup = function( tbl , group )
    {
      if ( group >= 0 && group < titleCells.length )
        return titleCellst[ group ];
      else
        return null;
    };
    
    conftable.onGetHeightForRow = function( tbl , group , row , proposedHeight )
    {
      if ( row == -1 )
      {
        // This is the height for title groups
    
        return 40;
      }
    
      // Otherwise, we return the height it wants
    
      return proposedHeight;
    };
    
    conftable.onShowDisclosureForRow = function( tbl , row )
    {
      if ( row == 1)
      {
      return false; //This means all rows have an arrow, use row variable to be selective
      }
      else
      {
      return false;
      }
    }
    
    var tcells = [ [] , [] , [] ];
    
    var tcell;
    
    // group 0 , cell 0
    
    tcell = new UIPreferencesControlTableCell();
    tcell.title = "Version " + JiggyVersion;
    tcell.setEnabled( true );
    tcell.showSelection = false;
    tcells[0].push( tcell );
    
    conftable.onGetCell = 
      function( tbl , group , row )
      {
        return tcells[ group ][ row ];
      };
      
    conftable.reloadData();
    
    /////////////////////////
    ///// END CONF MENU /////
    /////////////////////////
    
    var blueView = new UIView( tview.bounds );
    blueView.backgroundColor = [ 0 , 0 , 1 , 1 ];
    
    var redView = new UIView( tview.bounds );
    redView.backgroundColor = [ 1 , 0 , 0 , 1 ];
    
    // You don't need to add the views to the transition
    // view - you just tell it to transition to them.
    // 0 means "immediate" - to set the first view
    
    tview.transition( 0 , blueView );
    
    
    blueView.addSubview( ptable );
    redView.addSubview( conftable );
    
    // When you tap on the blue view, the red one will 
    // slide in from the right
    bar.pushNavigationItem( itemOne);
     
    //blueView.addSubview( bar );
    //redView.addSubview( setbar );
    window.addSubview(bar);
    /*bar.onButtonClicked = function( bar , button )
    {
      if ( button == 1 )
      {
      tview.transitionFrom( 2 , redView , blueView );
      blueView.addSubview( ptable );
    bar.showButtonsWithStyle( null , 0 , null , 0 );
      }
    }*/
    ....works tho

    Please Register or Log in to view images

  3. carboycam

    carboycam New Member

    Joined:
    Feb 20, 2008
    Messages:
    43
    Likes Received:
    0
    OK. Thank you so much. Now I just need to redo my experimental project to use transitions instead of 'include'.

    Please Register or Log in to view images

    I'm surprised you managed to sort all the code out! lol

    I've got a long day ahead of me tomorrow...

    Edit:

    I have another question which I forgot to ask. How would I go about showing the selection of a cell (blue highlight) and then have the highlight fade out again, so when I press 'back' to return, no cells are highlighted?
  4. PAEz

    PAEz New Member

    Joined:
    Jan 29, 2008
    Messages:
    201
    Likes Received:
    10
    I was still bugged by this and had another look at it and noticed what the problem was all along....just get rid of line 119....
    setbar.pushNavigationItem( itemTwo );
    ...you also push this item on later on in the code and that seems to be the problem, your code works fine after that...which is good because if you put a different nav bar on each view then it animates better when you do the transition so Id prolly go back to the code you had before, sorry

    Please Register or Log in to view images



    problem with editing a post is that the thread doesnt get bumped and i dont realise you had a new question (maybe i should subscribe or sumthn)
    I did that once before, ill have a look in a sec....
  5. carboycam

    carboycam New Member

    Joined:
    Feb 20, 2008
    Messages:
    43
    Likes Received:
    0
    I commented out the line of code you suggested, and it does indeed work now. I'm going to redo my whole interface this afternoon. I just can't find out how to get the blue selection to fade out again...

    Please Register or Log in to view images

  6. exit1010

    exit1010 Well-Known Member

    Joined:
    Dec 30, 2007
    Messages:
    4,812
    Likes Received:
    48
    Device:
    4G iPod touch
    i wan to know where you guys are learning this. i have only stop to change the nav bar front an back. please tell me where you guys are learning this stuff!!!
  7. carboycam

    carboycam New Member

    Joined:
    Feb 20, 2008
    Messages:
    43
    Likes Received:
    0
    http://jiggyapp.com/download/examples/

    But please don't 'jack my thread.

    Please Register or Log in to view images

    Anyone else know about getting the blue selection/highlight to fade out again?
  8. exit1010

    exit1010 Well-Known Member

    Joined:
    Dec 30, 2007
    Messages:
    4,812
    Likes Received:
    48
    Device:
    4G iPod touch
    thx!!!

    have you try thier group? google groups? they can help you there!

Share This Page