qcubed/framework

View on GitHub
assets/php/examples/advanced_ajax/dialog_box.php

Summary

Maintainability
A
1 hr
Test Coverage
<?php
    require_once('../qcubed.inc.php');
    require('CalculatorWidget.class.php');

    // Define the Qform with all our Qcontrols
    class ExamplesForm extends QForm {
        // Local declarations of our Qcontrols
        protected $dlgSimpleMessage;
        protected $btnDisplaySimpleMessage;
        protected $btnDisplaySimpleMessageJsOnly;

        protected $dlgCalculatorWidget;
        protected $txtValue;
        protected $btnCalculator;

        protected $pnlAnswer;
        protected $btnDisplayYesNo;

        protected $dlgValidation;
        protected $btnValidation;
        protected $txtFloat;

        protected $dlgErrorMessage;
        protected $btnErrorMessage;
        protected $dlgInfoMessage;
        protected $btnInfoMessage;


        // Initialize our Controls during the Form Creation process
        protected function Form_Create() {
            // Define the Simple Message Dialog Box
            $this->dlgSimpleMessage = new QDialog($this);
            $this->dlgSimpleMessage->Title = "Hello World!";
            $this->dlgSimpleMessage->Text = '<p><em>Hello, world!</em></p><p>This is a standard, no-frills dialog box.</p><p>Notice how the contents of the dialog '.
                'box can scroll, and notice how everything else in the application is grayed out.</p><p>Because we set <strong>MatteClickable</strong> to <strong>true</strong> ' .
                '(by default), you can click anywhere outside of this dialog box to "close" it.</p><p>Additional text here is just to help show the scrolling ' .
                'capability built-in to the panel/dialog box via the "Overflow" property of the control.</p>';
            $this->dlgSimpleMessage->AutoOpen = false;

            // Make sure this Dialog Box is "hidden"
            // Like any other QPanel or QControl, this can be toggled using the "Display" or the "Visible" property
            $this->dlgSimpleMessage->Display = false;

            // The First "Display Simple Message" button will utilize an AJAX call to Show the Dialog Box
            $this->btnDisplaySimpleMessage = new QButton($this);
            $this->btnDisplaySimpleMessage->Text = QApplication::Translate('Display Simple Message QDialog');
            $this->btnDisplaySimpleMessage->AddAction(new QClickEvent(), new QAjaxAction('btnDisplaySimpleMessage_Click'));

            // The Second "Display Simple Message" button will utilize Client Side-only JavaScripts to Show the Dialog Box
            // (No postback/postajax is used)
            $this->btnDisplaySimpleMessageJsOnly = new QButton($this);
            $this->btnDisplaySimpleMessageJsOnly->Text = 'Display Simple Message QDialog (ClientSide Only)';
            $this->btnDisplaySimpleMessageJsOnly->AddAction(new QClickEvent(), new QShowDialog($this->dlgSimpleMessage));

            $this->pnlAnswer = new QPanel($this);
            $this->pnlAnswer->Text = 'Hmmm';
            
            $this->btnDisplayYesNo = new QButton($this);
            $this->btnDisplayYesNo->Text = QApplication::Translate('Do you love me?');
            $this->btnDisplayYesNo->AddAction(new QClickEvent(), new QAjaxAction('showYesNoClick'));
            
            
            // Define the CalculatorWidget example. passing in the Method Callback for whenever the Calculator is Closed
            // This is  example uses QButton's instead of the JQuery UI buttons
            $this->dlgCalculatorWidget = new CalculatorWidget('btnCalculator_Close', $this);
            $this->dlgCalculatorWidget->Title = "Calculator Widget";
            $this->dlgCalculatorWidget->AutoOpen = false;
            $this->dlgCalculatorWidget->Resizable = false;
            $this->dlgCalculatorWidget->Modal = false;

            // Setup the Value Textbox and Button for this example
            $this->txtValue = new QTextBox($this);

            $this->btnCalculator = new QButton($this);
            $this->btnCalculator->Text = 'Show Calculator Widget';
            $this->btnCalculator->AddAction(new QClickEvent(), new QAjaxAction('btnCalculator_Click'));

            // Validate on JQuery UI buttons
            $this->dlgValidation = new QDialog($this);
            $this->dlgValidation->AddButton ('OK', 'ok', true, true); // specify that this button causes validation and is the default button
            $this->dlgValidation->AddButton ('Cancel', 'cancel');

            // This next button demonstrates a confirmation button that is styled to the left side of the dialog box.
            // This is a QCubed addition to the jquery ui functionality
            $this->dlgValidation->AddButton ('Confirm', 'confirm', true, false, 'Are you sure?', array('class'=>'ui-button-left'));
            $this->dlgValidation->Width = 400; // Need extra room for buttons

            $this->dlgValidation->AddAction (new QDialog_ButtonEvent(), new QAjaxAction('dlgValidate_Click'));
            $this->dlgValidation->Title = 'Enter a number';

            // Set up a field to be auto rendered, so no template is needed
            $this->dlgValidation->AutoRenderChildren = true;
            $this->txtFloat = new QFloatTextBox($this->dlgValidation);
            $this->txtFloat->Placeholder = 'Float only';
            $this->txtFloat->PreferredRenderMethod = 'RenderWithError'; // Tell the panel to use this method when rendering

            $this->btnValidation = new QButton($this);
            $this->btnValidation->Text = 'Show Validation Example';
            $this->btnValidation->AddAction(new QClickEvent(), new QShowDialog($this->dlgValidation));

            /*** Alert examples  ***/

            $this->btnErrorMessage = new QButton($this);
            $this->btnErrorMessage->Text = 'Show Error';
            $this->btnErrorMessage->AddAction(new QClickEvent(), new QAjaxAction('btnErrorMessage_Click'));

            $this->btnInfoMessage = new QButton($this);
            $this->btnInfoMessage->Text = 'Get Info';
            $this->btnInfoMessage->AddAction(new QClickEvent(), new QAjaxAction('btnGetInfo_Click'));
        }

        protected function btnDisplaySimpleMessage_Click($strFormId, $strControlId, $strParameter) {
            // "Show" the Dialog Box using the Open() method
            $this->dlgSimpleMessage->Open();
        }

        protected function btnCalculator_Click($strFormId, $strControlId, $strParameter) {
            // Setup the Calculator Widget's Value
            $this->dlgCalculatorWidget->Value = trim($this->txtValue->Text);

            // And Show it
            $this->dlgCalculatorWidget->Open();
        }

        public function dlgValidate_Click($strFormId, $strControlId, $strParameter) {
            if ($strParameter == 'cancel') {
                $this->txtFloat->Text = '';
            }
            $this->dlgValidation->Close();
        }


            // Setup the "Callback" function for when the calculator closes
        // This needs to be a public method
        public function btnCalculator_Close() {
            $this->txtValue->Text = $this->dlgCalculatorWidget->Value;
        }

        /** Alert Examples **/

        /**
         * Note that in the following examples, you do NOT save a copy of the dialog in the form. Alerts are brief
         * messages that are displayed, and then taken down immediately, and are not part of the form state.
         */

        /**
         * In this example, we show a quick error message with a few styling options.
         */
        protected function btnErrorMessage_Click($strFormId, $strControlId, $strParameter) {

            /**
             * Bring up the dialog. Here we specify a simple dialog with no buttons.
             * With no buttons, a close box will be displayed so the user can close the dialog.
             * With one button, no close box will be displayed, but the single button will close the dialog.
             */

            $dlg = QDialog::Alert("Don't do that!");
            $dlg->Title = 'Error'; // Optional title for the alert.
            $dlg->DialogState = QDialog::StateError; // Optional error styling.
        }

        /**
         * A more complex example designed to get user feedback. This could be a Yes/No dialog, or any number of buttons.
         */
        protected function btnGetInfo_Click($strFormId, $strControlId, $strParameter) {
            /**
             * Bring up the dialog. Here we specify two buttons.
             * With two or more buttons, we must detect a button click and close the dialog if a button is clicked.
             */

            $dlg = QDialog::Alert("Which do you want?", ['This', 'That']);
            $dlg->DialogState = QDialog::StateHighlight;
            $dlg->Title = 'Info';
            $dlg->AddAction(new QDialog_ButtonEvent(), new QAjaxAction('infoClick')); // Add the action to detect a button click.
        }

        /**
         * Here we respond to the button click. $strParameter will contain the text of the button clicked.
         */
        protected function infoClick($strFormId, $strControlId, $strParameter) {
            $dlg = $this->GetControl($strControlId);    // get the dialog object from the form.
            $dlg->Close(); // close the dialog. Note that you could detect which button was clicked and only close on some of the buttons.
            QDialog::Alert($strParameter . ' was clicked.', ['OK']);
        }

        /**
         * This example shows how you can create an advanced dialog without creating a new control in the
         * form object. You will need to specify some way of closing the dialog.
         */
        protected function showYesNoClick() {

            $dlgYesNo = new QDialog();    // Note here there is no "$this" as the first parameter. By leaving this off, you
                                        // are telling QCubed to manage the dialog.
            $dlgYesNo->Text = QApplication::Translate("Do you like QCubed?");
            $dlgYesNo->AddButton ('Yes');
            $dlgYesNo->AddButton ('No');
            $dlgYesNo->AddAction (new QDialog_ButtonEvent(), new QAjaxAction ('dlgYesNo_Button'));
            $dlgYesNo->Resizable = false;
            $dlgYesNo->HasCloseButton = false;
        }

        protected function dlgYesNo_Button($strFormId, $strControlId, $strParameter) {
            $dlg = $this->GetControl($strControlId);    // get the dialog object from the form.
            if ($strParameter == 'Yes') {
                $this->pnlAnswer->Text = QApplication::Translate('They love me');
            } else {
                $this->pnlAnswer->Text = QApplication::Translate('They love me not');
            }
            $dlg->Close();
        }

    }

    // Run the Form we have defined
    ExamplesForm::Run('ExamplesForm');
?>