Developer's Guide :: Using PageControl

PageControl is a component that allows you to create stacked interfaces in which the user can switch to any stack using tabs.

This is an example on how to create tabs programatically and set components inside:

        class Unit350 extends Page
        {
               public $Button1 = null;
               public $PageControl1 = null;
               function Button1Click($sender, $params)
               {
                //Create tabs
                $tabs=array();
                $tabs[]="Tab 1";
                $tabs[]="Tab 2";
                $tabs[]="Tab 3";
                $this->PageControl1->Tabs=$tabs;
 
                //Creates a button
                $b1=new Button($this);
                $b1->Left=100;
                $b1->Top=100;
                $b1->Caption="button 1";
                $b1->Layer="Tab 1";  //Set in which layer is going to be shown
                $b1->Parent=$this->PageControl1;
 
                //Creates another button
                $b2=new Button($this);
                $b2->Left=200;
                $b2->Top=100;
                $b2->Caption="button 2";
                $b2->Layer="Tab 2"; //Set in which layer is going to be shown
                $b2->Parent=$this->PageControl1;
               }
 
        }

This example button dynamically loads a panel containing a paypal button into a pagecontrol on tab 6. You could use this in conjunction with a pick list and then determine what the user picked etc.

Using normal javascript manipulations you can make the item/price anything. (BTW it also needs your email address in it)

               function BitBtn1JSClick($sender, $params)
               {
               ?>
var item="Pink Teddy Bear";
var price="19.99"
var container = new qx.ui.basic.Atom("<div id=\"PayPanel6_outer\">\n<table id=\"PayPanel6_table\"  width=\"192\"   height=\"72\"  border=\"0\"  cellpadding=\"0\" cellspacing=\"0\"     style=\" border: 0px solid ; \"   >\n<tr>\n<td style=\" font-family: Verdana; font-size: 10px;  \"><span style=\" font-family: Verdana; font-size: 10px;  \"></span>\n<form name=\"_xclick\" action=\"https://www.paypal.com/us/cgi-bin/webscr\" method=\"post\"><input type=\"hidden\" name=\"cmd\" value=\"_xclick\"><input type=\"hidden\" name=\"business\" value=\"me@mybusiness.com\"><input type=\"hidden\" name=\"currency_code\" value=\"USD\"><input type=\"hidden\" name=\"item_name\" value=\""+item+"\"><input type=\"hidden\" name=\"amount\" value=\""+price+"\"><input type=\"image\" src=\"http://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif\" border=\"0\" name=\"submit\" alt=\"Make payments with PayPal - it is fast, free and secure!\"></form>\n               </td>\n</tr>\n</table>\n</div>\n");
  container.setLeft(29);
  container.setTop(313);
  container.setWidth(192);
  container.setHeight(72);
  pagePageControl1_6.add(container);
 
 
               <?php
 
               }

In js you can modify this to do most anything with the tabs

              var pagesArray = PageControl1.getBar().getChildren();
              for(var i = 0, l = pagesArray.length; i < l; i++)
                {
                var tmpPage = pagesArray[i];
                if (tmpPage.getChecked()) alert(i);
                }

Load up another web page inside a pageControl tab f1 = new qx.ui.embed.Iframe; f1.set( { left: 0, top: 0, right: 0, bottom: 0 } ); f1.setSource("page2.php?getthis=xxx"); pagePageControl1_6.add(f1); //replace the 6 with whatever tab you want the iframe on

Using a buttons jsonclick event to change tabs.

var pagesArray = PageControl1.getBar().getChildren(); pagesArray[2].setChecked(true); return (false);