Index: wwwroot/assets/css/ui.tabs.css =================================================================== --- wwwroot/assets/css/ui.tabs.css (revision 0) +++ wwwroot/assets/css/ui.tabs.css (revision 0) @@ -0,0 +1,122 @@ +/* Caution! Ensure accessibility in print and other media types... */ +@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */ + .ui-tabs-hide { + display: none; + } +} + +/* Hide useless elements in print layouts... */ +@media print { + .ui-tabs-nav { + display: none; + } +} + +/* Skin */ +.ui-tabs-nav, .ui-tabs-panel { + font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif; + font-size: 12px; +} +.ui-tabs-nav { + list-style: none; + margin: 0; + padding: 0 0 0 4px; +} + +.ui-tabs-nav ul { height:13px; } + +.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ + display: block; + clear: both; + content: " "; +} +.ui-tabs-nav li { + float: left; + margin: 0 0 0 1px; + min-width: 84px; /* be nice to Opera */ + list-style: none +} +.ui-tabs-nav a, .ui-tabs-nav a span { + display: block; + padding: 0 10px; + background: url(/assets/images/tab.png) no-repeat; +} + +.ui-tabs-nav a { + margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */ + padding-left: 0; + color: #27537a; + font-weight: bold; + line-height: 1.2; + text-align: center; + text-decoration: none; + white-space: nowrap; /* required in IE 6 */ + outline: 0; /* prevent dotted border in Firefox */ +} +.ui-tabs-nav .ui-tabs-selected a { + position: relative; + top: 1px; + z-index: 2; + margin-top: 0; + color: #000; +} +.ui-tabs-nav a span { + width: 64px; /* IE 6 treats width as min-width */ + min-width: 64px; + height: 18px; /* IE 6 treats height as min-height */ + min-height: 18px; + padding-top: 6px; + padding-right: 0; +} +*>.ui-tabs-nav a span { /* hide from IE 6 */ + width: auto; + height: auto; +} +.ui-tabs-nav .ui-tabs-selected a span { + padding-bottom: 1px; +} +.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { + background-position: 100% -150px; +} +.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active { + background-position: 100% -100px; +} +.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span { + background-position: 0 -50px; +} +.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span { + background-position: 0 0; +} +.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ + cursor: text; +} +.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, +.ui-tabs-nav .ui-tabs-deselectable a:hover, .ui-tabs-nav .ui-tabs-deselectable a:focus, .ui-tabs-nav .ui-tabs-deselectable a:active { /* @ Opera, we need to be explicit again here now... */ + cursor: pointer; +} +.ui-tabs-disabled { + opacity: .4; + filter: alpha(opacity=40); +} +.ui-tabs-panel { + border-top: 1px solid #97a5b0; + padding: 1em 8px; + background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */ +} + +.ui-tabs-panel span { + display: block; + } + +.ui-tabs-loading em { + padding: 0 0 0 20px; + background: url(/assets/images/spinner_14.gif) no-repeat 0 50%; +} + +/* Additional IE specific bug fixes... */ +* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */ + display: inline-block; +} +*:first-child+html .ui-tabs-nav { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */ + display: inline-block; +} \ No newline at end of file Index: wwwroot/assets/css/ui.tabs_ie.css =================================================================== --- wwwroot/assets/css/ui.tabs_ie.css (revision 0) +++ wwwroot/assets/css/ui.tabs_ie.css (revision 0) @@ -0,0 +1 @@ +.ui-tabs-nav ul { height:6px; } \ No newline at end of file Index: wwwroot/examples/advanced_ajax/tab_panel.php =================================================================== --- wwwroot/examples/advanced_ajax/tab_panel.php (revision 0) +++ wwwroot/examples/advanced_ajax/tab_panel.php (revision 0) @@ -0,0 +1,59 @@ +tabPanel = new QTabPanel($this); + + $this->tabPanelSection1 = $this->tabPanel->AddTab("Section 1"); + $this->txtBoxSection1 = new QTextBox($this->tabPanelSection1); + $this->txtBoxSection1->Name = 'One'; + + $this->tabPanelSection2 = $this->tabPanel->AddTab("Section 2"); + $this->txtBoxSection2 = new QTextBox($this->tabPanelSection2); + $this->txtBoxSection2->Name = 'Two'; + + // Other controls + $this->btnSave = new QButton($this); + $this->btnSave->Text = 'Save'; + $this->btnSave->AddAction(new QClickEvent(), new QAjaxAction('btnSave_Click')); + $this->btnSave->PrimaryButton = true; + + $this->btnCancel = new QButton($this); + $this->btnCancel->Text = 'Cancel'; + $this->btnCancel->AddAction(new QClickEvent(), new QAjaxAction('btnCancel_Click')); + $this->btnCancel->CausesValidation = false; + + } + + // Override Form Event Handlers as Needed + protected function btnSave_Click($strFormId, $strControlId, $strParameter) { + QApplication::DisplayAlert(QApplication::Translate("Save action triggered!")); + } + + protected function btnCancel_Click($strFormId, $strControlId, $strParameter) { + QApplication::DisplayAlert(QApplication::Translate("Cancel action triggered!")); + } + +} + +ExampleForm::Run('ExampleForm','tab_panel.tpl.php'); +?> Index: wwwroot/examples/advanced_ajax/tab_panel.tpl.php =================================================================== --- wwwroot/examples/advanced_ajax/tab_panel.tpl.php (revision 0) +++ wwwroot/examples/advanced_ajax/tab_panel.tpl.php (revision 0) @@ -0,0 +1,24 @@ + + RenderBegin(); ?> + +
+
Tab Panels
+ + This is just a simple example to show how we could create in an easy way tab to wrap + our control in order to provide a fancy interface to our user. + + Tab panel enable to crea tabs inside other tabs as you can see in the tab # one. + + We create our tabs hierarchy on our form , but in our template we just need render the main parent tab. + + Note that this control use css, so we could change the look and fell accordingly our needs. +
+ +tabPanel->Render(); + $this->btnSave->Render(); + $this->btnCancel->Render(); +?> + + RenderEnd(); ?> + \ No newline at end of file Index: wwwroot/examples/includes/examples.inc.php =================================================================== --- wwwroot/examples/includes/examples.inc.php (revision 177) +++ wwwroot/examples/includes/examples.inc.php (working copy) @@ -51,6 +51,7 @@ array_push(Examples::$Categories[$intIndex], '/qcodo_query/subsql.php * Custom SQL Subqueries for QQuery'); array_push(Examples::$Categories[$intIndex], '/qcodo_query/intro.php * Performing Custom SQL Queries'); array_push(Examples::$Categories[$intIndex], '/qcodo_query/qcache.php * Caching Query Results with QueryArrayCached'); + array_push(Examples::$Categories[$intIndex], '/qcodo_query/migrating.php * From Beta 2: Migrating from "Manual Queries"'); $intIndex++; Examples::$Categories[$intIndex] = array(); @@ -89,7 +90,6 @@ Examples::$Categories[$intIndex]['description'] = 'The QDataGrid and QDataRepeater controls'; array_push(Examples::$Categories[$intIndex], '/datagrid/intro.php * Basic QDataGrid'); array_push(Examples::$Categories[$intIndex], '/datagrid/variables.php * The QDataGrid Variables'); - array_push(Examples::$Categories[$intIndex], '/datagrid/rowactions.php * Making entire QDataGrid rows clickable'); array_push(Examples::$Categories[$intIndex], '/datagrid/sorting.php * QDataGrid Sorting'); array_push(Examples::$Categories[$intIndex], '/datagrid/pagination.php * QDataGrid Pagination'); array_push(Examples::$Categories[$intIndex], '/datagrid/ajax.php * Enabling AJAX on the QDataGrid'); @@ -133,6 +133,7 @@ array_push(Examples::$Categories[$intIndex], '/advanced_ajax/dialog_box.php Modal "Dialog Boxes"'); array_push(Examples::$Categories[$intIndex], '/advanced_ajax/more_dialog_boxes.php Pre-built Dialog Boxes: Confirmations and Prompts'); array_push(Examples::$Categories[$intIndex], '/advanced_ajax/jquery_effects.php JQuery Effects'); + array_push(Examples::$Categories[$intIndex], '/advanced_ajax/tab_panel.php JQuery Tab panels'); Examples::$AdditionalCode['/advanced_ajax/dialog_box.php'] = array('CalculatorWidget.class.php','CalculatorWidget.tpl.php'); @@ -140,14 +141,13 @@ Examples::$Categories[$intIndex] = array(); Examples::$Categories[$intIndex]['name'] = 'Other Advanced Controls'; Examples::$Categories[$intIndex]['description'] = 'A collection of examples for some of the more advanced/complex QControls'; - array_push(Examples::$Categories[$intIndex], '/other_controls/fckeditor.php Rich Text Editing with QFCKEditor'); array_push(Examples::$Categories[$intIndex], '/image_label/intro.php Introduction to QImageLabel'); array_push(Examples::$Categories[$intIndex], '/other_controls/autocomplete.php * Auto-complete Textbox'); array_push(Examples::$Categories[$intIndex], '/treenav/treenav.php Introduction to QTreeNav'); array_push(Examples::$Categories[$intIndex], '/other_controls/image.php Introduction to QImageControl'); array_push(Examples::$Categories[$intIndex], '/other_controls/datetime.php Date and DateTime-based QControls'); array_push(Examples::$Categories[$intIndex], '/other_controls/file_asset.php Combining Controls: A Better Way to Upload Files'); - + $intIndex++; Examples::$Categories[$intIndex] = array(); Examples::$Categories[$intIndex]['name'] = 'MetaControls, Meta DataGrids, and the Drafts'; @@ -177,7 +177,6 @@ Examples::$Categories[$intIndex]['name'] = 'Other Tidbits'; Examples::$Categories[$intIndex]['description'] = 'Other random examples, samples and tutorials'; array_push(Examples::$Categories[$intIndex], '/other/optimistic_locking.php * Optimistic Locking and QForms'); - array_push(Examples::$Categories[$intIndex], '/other/diff.php * QObjectDiff: What fields changed in my form?'); array_push(Examples::$Categories[$intIndex], '/other/attribute_overriding.php Attribute Overriding'); array_push(Examples::$Categories[$intIndex], '/other/alternate_template.php Specifying a Template Filepath'); array_push(Examples::$Categories[$intIndex], '/other/single.php Single File QForms'); Index: wwwroot/includes/qcodo/qform/QTabPanel.class.php =================================================================== --- wwwroot/includes/qcodo/qform/QTabPanel.class.php (revision 0) +++ wwwroot/includes/qcodo/qform/QTabPanel.class.php (revision 0) @@ -0,0 +1,250 @@ + + * + * @property-read array $ControlsAndOrURLs + * @property boolean $Cache + * @property boolean $Collapsible + * @property string $Event + * @property string $IdPrefix + * @property string $PanelTemplate + * @property int $Selected + * @property string $Spinner + * @property string $TabTemplate + */ +class QTabPanel extends QPanel +{ + // + /** + * @access protected + * @var array[QControl] + */ + protected $arrTabs = array(); + + // TODO: Implement Ajax Options + + /** + * @access protected + * @var boolean + */ + protected $blnCache = false; + + /** + * @access protected + * @var boolean + */ + protected $blnCollapsible = false; + + // TODO: Implement Cookie Object + + // TODO: Implement Disabled Tabs Array + + /** + * @access protected + * @var string + */ + protected $strEvent = 'click'; + + // TODO: Implement FX Options + + /** + * @access protected + * @var string + */ + protected $strIdPrefix = 'ui-tabs-'; + + /** + * @access protected + * @var string + */ + protected $strPanelTemplate = '
'; + + /** + * @access protected + * @var int + */ + protected $intSelected = 0; + + /** + * @access protected + * @var string + */ + protected $strSpinner = 'Loading…'; + + /** + * @access protected + * @var string + */ + protected $strTabTemplate = '
  • #{label}
    • '; + //     + + protected $intCurrentSection; + + + /** + * + * @param object $objParentObject + + * @param string $strControlId Optional. Defaults to null + */ + public function __construct($objParentObject,$strControlId = null) + { + parent::__construct($objParentObject,$strControlId); + // Init + $this->strTemplate = __TEMPLATES__ . '/' . __CLASS__ . '.tpl.php'; + $this->setJavaScripts(); + } + + private function setJavaScripts() { + $this->AddJavascript(__JQUERY_BASE__); + $this->AddJavascript(__JQUERY_DIRECTORY__ . '/ui/ui.core.js'); + $this->AddJavascript(__JQUERY_DIRECTORY__ . '/ui/ui.tabs.js'); + $this->AddStyleSheet('ui.tabs.css'); + if (QApplication::IsBrowser(QBrowserType::InternetExplorer)) { + $this->AddStyleSheet('ui.tabs_ie.css'); + } + } + + /** + * @access public + * @param boolean $blnDisplayOutput Optional. Defaults to true. + * @return string + */ + public function Render($blnDisplayOutput = true) + { + $strToReturn = parent::Render($blnDisplayOutput); + QApplication::ExecuteJavaScript(sprintf( + "$(document).ready( + function() + { + $('#%s-tabs').tabs( + { + ajaxOptions: null, + cache: %s, + collapsible: %s, + cookie: null, + disabled: [], + event:'%s', + fx: null, + idPrefix: '%s', + panelTemplate: '%s', + selected: %s, + spinner: '%s', + tabTemplate: '%s' + }); + }); + ", $this->strControlId // ID of This Control + , ($this->blnCache ? 'true': 'false') // Cache Ajax Content + , ($this->blnCollapsible ? 'true': 'false') // Collapsibe Tabs on Reselect + , $this->strEvent // Select Event + , $this->strIdPrefix // ID Prefix for Remote Tabs + , $this->strPanelTemplate // Panel Template + , $this->intSelected // Selected Tab + , $this->strSpinner // Spinner Template + , $this->strTabTemplate // Tab Template + )); + // TODO: Complete Init Tabs + return $strToReturn; + } + + // + /** + * @access public + * @param string $strName + * @return mixed + */ + public function __get($strName) + { + switch ($strName) + { + case 'CurrentSection': return $this->intCurrentSection; + case 'Tabs': return $this->arrTabs; + case 'Cache': return $this->blnCache; + case 'Collapsibe': return $this->blnCollapsible; + case 'Event': return $this->strEvent; + case 'IdPrefix': return $this->strIdPrefix; + case 'PanelTemplate': return $this->strPanelTemplate; + case 'Selected': return $this->intSelected; + case 'Spinner': return $this->strSpinner; + case 'TabTemplate': return $this->strTabTemplate; + default: + try + { + return parent::__get($strName); + } + catch (QCallerException $objExc) + { + $objExc->IncrementOffset(); + throw $objExc; + } + } + } + // + + // + /** + * @access public + * @param string $strName + * @param mixed $mixValue + */ + public function __set($strName, $mixValue) + { + $this->blnModified = true; + try + { + switch ($strName) + { + case 'CurrentSection': return ($this->intCurrentSection = QType::Cast($mixValue, QType::Integer)); + case "Cache": $this->blnCache = QType::Cast($mixValue, QType::Boolean); break; + case "Collapsible": $this->blnCollapsible = QType::Cast($mixValue, QType::Boolean); break; + case "Event": $this->strEvent = QType::Cast($mixValue, QType::String); break; + case "IdPrefix": $this->strIdPrefix = QType::Cast($mixValue, QType::String); break; + case "PanelTemplate": $this->strPanelTemplate = QType::Cast($mixValue, QType::String); break; + case "Selected": $this->intSelected = QType::Cast($mixValue, QType::Integer); break; + case "Spinner": $this->strSpinner = QType::Cast($mixValue, QType::String); break; + case "TabTemplate": $this->strTabTemplate = QType::Cast($mixValue, QType::String); break; + default: parent::__set($strName, $mixValue); + } + } + catch (QInvalidCastException $objExc) + { + $objExc->IncrementOffset(); + throw $objExc; + } + catch (QCallerException $objExc) + { + $objExc->IncrementOffset(); + throw $objExc; + } + } + + // + + public function AddTab($strTabTitle){ + $this->arrTabs[] = new QTabPanelSection($this,$strTabTitle); + end($this->arrTabs); + return current($this->arrTabs); + } + + /** + * @access public + * @param int $intPosition + * @return boolean True if remove succeeded. + */ + /*public function RemoveControl($intPosition) + { + if(is_int($intPosition) && isset($this->arrControlsAndOrURLs[$intPosition])) + { + unset($this->arrControlsAndOrURLs[$intPosition]); + return true; + } + return false; + }*/ +} +?> Index: wwwroot/includes/qcodo/qform/QTabPanelSection.class.php =================================================================== --- wwwroot/includes/qcodo/qform/QTabPanelSection.class.php (revision 0) +++ wwwroot/includes/qcodo/qform/QTabPanelSection.class.php (revision 0) @@ -0,0 +1,83 @@ +CurrentSection = ++ $objParentObject->CurrentSection; + $this->ParentControlId = $objParentObject->ControlId; + $this->strTitle = $strTabTitle; + + try { + parent::__construct($objParentObject,$strControlId); + } catch (QCallerException $objExc) { + $objExc->incrementOffset(); + throw $objExc; + } + } + + // And our public getter/setters + public function __get($strName) { + switch ($strName) { + case 'Title': return $this->strTitle; + case 'CurrentSection': return $this->intCurrentSection; + case 'ParentControlId': return $this->strParentControlId; + default: + try { + return parent::__get($strName); + } catch (QCallerException $objExc) { + $objExc->IncrementOffset(); + throw $objExc; + } + } + } + + public function __set($strName, $mixValue) { + // Whenever we set a property, we must set the Modified flag to true + $this->blnModified = true; + + try { + switch ($strName) { + case 'Title': return ($this->strTitle = QType::Cast($mixValue, QType::String)); + case 'CurrentSection': return ($this->intCurrentSection = QType::Cast($mixValue, QType::Integer)); + case 'ParentControlId': return ($this->strParentControlId = QType::Cast($mixValue, QType::String)); + default: + return (parent::__set($strName, $mixValue)); + } + } catch (QCallerException $objExc) { + $objExc->IncrementOffset(); + throw $objExc; + } + } + + public function Render($blnDisplayOutput = true) { + + $strToReturn = ''; + + foreach ($this->GetChildControls() as $objControl) { + if($objControl instanceof QTabPanel || $objControl instanceof QTabPanelSection) + $strToReturn.= $objControl->Render(false); + else + $strToReturn.= $objControl->RenderWithName(false); + } + + // Return or Display + if ($blnDisplayOutput) { + print ($strToReturn); + return null; + } else + return $strToReturn; + } + +} + +?> \ No newline at end of file Index: wwwroot/templates/QTabPanel.tpl.php =================================================================== --- wwwroot/templates/QTabPanel.tpl.php (revision 0) +++ wwwroot/templates/QTabPanel.tpl.php (revision 0) @@ -0,0 +1,14 @@ +
    + + Tabs as $Tab) { ?> +
    + Render(); ?> +
    + +
    \ No newline at end of file