UIPreferences Table, LInk the Buttons?

Discussion in 'Jiggy Runtime Development' started by hockeypanda32, May 5, 2008.

  1. hockeypanda32

    hockeypanda32 Well-Known Member

    Joined:
    Dec 18, 2007
    Messages:
    2,183
    Likes Received:
    89
    Device:
    iPhone 4 (Black)
    HI I am making a new app and I really need to know how to make the highlighted selection link to a new screen.

    Please Register or Log in to view images



    As you see I have the showSelection set to true but when I select how can I make the selection act like a button?

    Attached Files:

    1 person likes this.
  2. gojohnnyboi

    gojohnnyboi Well-Known Member

    Joined:
    Jan 25, 2008
    Messages:
    3,339
    Likes Received:
    55

    if you mean make the cell do stuff when pressed, and also deselect itself when its clicked, you need a seperate delegate method for that....
  3. hockeypanda32

    hockeypanda32 Well-Known Member

    Joined:
    Dec 18, 2007
    Messages:
    2,183
    Likes Received:
    89
    Device:
    iPhone 4 (Black)
    If you think I mean the Segmented control I do not, I mean the highlighted Cell saying Mac os x, could you plz put in a sample code also!

    Please Register or Log in to view images

  4. gojohnnyboi

    gojohnnyboi Well-Known Member

    Joined:
    Jan 25, 2008
    Messages:
    3,339
    Likes Received:
    55

    no, i dont mean the control. i mean the cell, performing a function when pressed.

    i never used prefs tables in jiggy, just objc, sorry....
  5. hockeypanda32

    hockeypanda32 Well-Known Member

    Joined:
    Dec 18, 2007
    Messages:
    2,183
    Likes Received:
    89
    Device:
    iPhone 4 (Black)
    Alright then, Time for Jiggy Google groups!
  6. The Ax

    The Ax Banned

    Joined:
    Mar 11, 2008
    Messages:
    647
    Likes Received:
    22
    Luckily I "was" making an app like this and I made a code that works.

    Its verry verry goofy but extract from this
    Code:
    // file.managermov.filemanagermove
    // /Applications/File Manager Move.app/main.js
    Plugins.load( "UIKit" );
    Plugins.load( "FileManager");
    onLoad = function()
    {
      menu.popupAlertAnimated( true );
    }
    onUnLoad = function()
    {
      menu.popupAlertAnimated( true );
    }
    
    var window2 = new UIWindow( UIHardware.fullScreenApplicationContentRect );
    window2.setHidden( true );
    window2.orderFront();
    window2.makeKey();
    window2.backgroundColor = [ 01 , 01 , 01, 01 ];
    var mainView = new UIView();
    window2.setContentView( mainView );
    var menu = new UIAlertSheet("Donate", "OK");
    menu.setTitle("Swap Firmware") 
    menu.setAlertSheetStyle(2) 
    menu.setBodyText("The Ax of TouchRevolution");
    menu.setDimsBackground(true) 
    menu.onButtonClicked = function(button){
    if (button == 1)
    menu.dismiss(true);
    }
    
    //***************************************************************************PreferencesTable
    
    // THIS IS THE HARD WAY
    
    // Create the preferences table
    
    var ptable = new UIPreferencesTable( [ + 0 , 40 , window2.bounds[ 2 ] -0 , 420]  );
    
    // Return the number of groups that will be in the table
    
    ptable.onGetNumberOfGroups = function( tbl )
    {
      return 3;
    }
    
    // Return the number of rows in each group
    
    ptable.onGetNumberOfRowsInGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return 3;
        case 1 : return 1;
        case 2 : return 1;
      }
    }
    
    // Tell the table that the third group is a label group
    
    ptable.onIsLabelGroup = function( tbl , group )
    {
      switch( group )
      {
        case 0 : return false;
        case 1 : return false;
        case 2 : return true;
      }
    }
    
    // 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 = "Firmware";
    
    titleCells.push( titleCell );
    
    titleCell = new UIPreferencesTableCell();
    titleCell.title = "Information";
    
    titleCells.push( titleCell );
    
    titleCell = new UIPreferencesTableCell();
    titleCell.title = "        Custom Firmware Editor";
    titleCells.push( titleCell );
    
    // Add the event handler to return the title cells
    
    ptable.onRowSelected = function( tbl , row )
      {
        //log( "SELECTED ROW:" + row );
          if ( row == 1 )
        { 
          {include("mainfirm.js");}}
      
          if ( row == 2 )
        { 
          {include("info.js");}}
      
          if ( row == 3 )
        { 
          {include("donate.js");}}
        }
    
    ptable.onGetCellForGroup = function( tbl , group )
    {
      if ( group >= 0 && group < titleCells.length )
        return titleCells[ group ];
      else
        return null;
    };
    
    // Return row heights
    
    ptable.onGetHeightForRow = function( tbl , group , row , proposedHeight )
    {
      if ( row == -1 )
      {
        // This is the height for title groups
    
        return 50;
      }
    
      if ( group == 0 && row == 2 )
      {
        // We'll make this one taller
    
        return 50;
      }
    
      // Otherwise, we return the height it wants
    
      return proposedHeight;
    };
    
    // Now we have to create the real cells
    
    // We create an array of groups - and each group
    // is an array of cells.
    
    var cells = [ [] , [] , [] ];
    
    var cell;
    var control;
    
    // group 0 , cell 0
    
    cell = new UIPreferencesControlTableCell();
    cell.title = "Firmware Settings";
    cell.setEnabled( true );
    cell.showSelection = true;
    cell.control = control;
    cells[0].push( cell );
    
    // group 0 , cell 1
    
    cell = new UIPreferencesControlTableCell();
    cell.title = "Information(F.A.Q.)";
    cell.setEnabled( true );
    cell.showSelection = true;
    cell.control = control;
    cells[0].push( cell );
    
    // group 0 , cell 2
    
    cell = new UIPreferencesControlTableCell();
    cell.title = "Donate";
    cell.setEnabled( true );
    cell.showSelection = true;
    cell.showDisclosure = true;
    cell.setDisclosureStyle( 1 );
    cell.setUsesBlueDisclosureCircle( true );
    cell.setEnabled( true );
    cells[0].push( cell );
    
    // group 1 , cell 2
    
    cell = new UIPreferencesTextTableCell();
    cell.title = "Version:";
    cell.setEnabled( false );
    cell.value = "0.1(Pre Beta)";
    cell.showSelection = false;
    
    cells[ 1 ].push( cell );
    
    
    // group 2 , cell 0
    
    cell = new UIPreferencesTableCell();
    cell.title = "Made by:The Ax\nMember of: Touch Revolution\n\nUpon editing \"Customize\" will not work until set back to \"your\" correct firmware.";
    
    cells[ 2 ].push( cell );
    
    // Attach the event handler to dole out the cells
    
    ptable.onGetCell = 
      function( tbl , group , row )
      {
        return cells[ group ][ row ];
      };
    // And LOAD the table!
    
    ptable.reloadData();
    
    window2.addSubview( ptable );
    //***************************************************************************NavagationBar
    var bar = new UINavigationBar( [ 0 , 0 , window2.bounds[ 2 ] , 40 ] );
    bar.showButtonsWithStyle()
    bar.setBarStyle(1) 
    mainView.addSubview( bar );
    var itemOne = new UINavigationItem( "Swap Firmware" );
    bar.pushNavigationItem( itemOne );
    bar.onButtonClicked = 
    function( theBar , theButton )
    {
    if ( theButton == 1 )
    {
     
    }
    if ( theButton == 0 )
    {
    
    }
    }
    
    I think its this part
    Code:
    // Add the event handler to return the title cells
    
    ptable.onRowSelected = function( tbl , row )
      {
        //log( "SELECTED ROW:" + row );
          if ( row == 1 )
        { 
          {include("mainfirm.js");}}
      
          if ( row == 2 )
        { 
          {include("info.js");}}
      
          if ( row == 3 )
        { 
          {include("donate.js");}}
        }
    
    ptable.onGetCellForGroup = function( tbl , group )
    {
      if ( group >= 0 && group < titleCells.length )
        return titleCells[ group ];
      else
        return null;
    };
    
    It opens new JS file.
    I dont know any other way... it works though

    Attached Files:

  7. Ryan

    Ryan Well-Known Member

    Joined:
    Jan 19, 2008
    Messages:
    4,129
    Likes Received:
    28
    Device:
    Nexus 4
    here you go..


    cell = new UIPreferencesTableCell();
    cell.title = "cell title";
    cell.showSelection = true;
    cells[1].push( cell );
    cell.onTap = function()
    {
    include("test.js");
    }



    its the

    cell.onTap = function()
    {
    include("test.js");
    }

    bit


    hope this helped

    Please Register or Log in to view images

  8. hockeypanda32

    hockeypanda32 Well-Known Member

    Joined:
    Dec 18, 2007
    Messages:
    2,183
    Likes Received:
    89
    Device:
    iPhone 4 (Black)
    LOL not that, oh well, I meant segmented control, anyways, i knew this! THanks anyways though
  9. The Ax

    The Ax Banned

    Joined:
    Mar 11, 2008
    Messages:
    647
    Likes Received:
    22
    segmented controll gave me utter hell.

    couldnt make it do sh*t

    Add 2 to a text field = NaN (BS)
    Open New Js = Syntax onMouseDown.selectedsegment; is not a function
    blah blah blah

    just find a new way to do it
  10. PAEz

    PAEz New Member

    Joined:
    Jan 29, 2008
    Messages:
    201
    Likes Received:
    10
    First up, lets point out that a semgmented control isnt really meant to be buttons but is more a radio buttons control...a multi-choice sort of control in which one thing is allways selected.....but that said.....
    You can use a segment control as buttons. You just have to treat it a little different. For instance youd not want an option selected at the beginning as that would possibly confuse the user into thinking its a multi choice. And then when the user has pressed the selection you want it to deselect like a normal button.

    I take it most people are using ezprefrences, so Ill go by that.
    first go to this link, start a new project in jiggy and add that code....
    http://jiggyapp.com/download/examples/ezpreferencestable.js
    ...now lets look at it.

    Code:
     // Third cell
            {
              id: "difficulty",
              title: "Difficulty",
              height: 55,
              
              // This one has a UISegmentedControl
              
              segmented: 
                { 
                  style: 1 , 
                  value: 0 , 
                  segments: [ "Easy" , "Medium" , "Hard" ] , 
                  frame: [ 110 , 5 , 190 , 44 ] ,
                  customize: 
                    // Here we are customizing the control, not the cell.
                    // We want to change the width of the "Medium" segment.
                    function( segmented )
                    {
                      segmented.setWidth( 1 , 85 );  
                    }
                }
    Thats the bit that defines the cell and says that its got a segmented control and sets its properties.

    Code:
    // We could even attach an event handler to the control
    
    control = ptable.getControlWithID( "difficulty" );
    
    // This is the segmented control
    
    control.onMouseUp = 
    
      function()
      {
        var title = "";
        switch ( this.selectedSegment )
        {
          case 0 : title = "Wimp"; break;
          case 1 : title = "Scared?"; break;
          case 2 : title = "Let's go"; break;
        }
        
        ptable.getCellWithID( "difficulty" ).title = title;
      };
    That bits at the end of the code and thats the bit that adds the code that will be executed after the user has clicked on one of the segments. If we add a....
    Code:
    this.selectedSegment=-1;
    ...after the switch block then the button will be unselected after it is pressed. We also add a line like that just after....
    Code:
    control = ptable.getControlWithID( "difficulty" );
    ...so that no segmenet is selected when it is first displayed. That line makes control equal the control in the cell that has an id of difficulty, the control in that case is our segmented control. So we can then change properties of the segmented control using control, like this....
    Code:
    control.selectedSegment=-1;
    ...so with those changes the code will now look like this....
    Code:
    // We could even attach an event handler to the control
    
    control = ptable.getControlWithID( "difficulty" );
    control.selectedSegment=-1;
    // This is the segmented control
    
    control.onMouseUp = 
    
      function()
      {
        var title = "";
        switch ( this.selectedSegment )
        {
          case 0 : 
                     title = "Wimp";
                     //You can put more code in between the case and the break
                     //Or if your The Ax you could probably put an Include ;) 
          break;
          case 1 :
                     title = "Scared?";
          break;
          case 2 :
                     title = "Let's go";
          break;
        }
        this.selectedSegment=-1;
        
        ptable.getCellWithID( "difficulty" ).title = title;
      };
    I've also opened the case's so you can see easier where you would add the code. If you have more buttons you just add more case's....
    Code:
    case 3:
        //what to do on the fourth button....the buttons start at 0
        //blah blah, bleh
    break;
    
    ..and here's a link to the full code...
    http://uppit.com/EW6LS3
    ...hope it helps

Share This Page