protected function Form_Create()
    {
        $strServerActionJsParam = "";
        $this->btnSubmit = new QButton($this);
        $this->btnSubmit->Text = "ServerAction Submit";
        $this->SubmitResult = new QPanel($this);
        // Slider
        $this->Slider = new QSlider($this);
        $this->Slider->Max = 1250;
        $this->Slider->AddAction(new MyQSlider_ChangeEvent(), new QAjaxAction('onSlide'));
        $this->SliderResult = new QPanel($this);
        // Resizable
        $this->Resizable = new QPanel($this);
        $this->Resizable->CssClass = 'resizable';
        $this->Resizable->Resizable = true;
        $this->ResizableResult = new QPanel($this);
        $strJsParam = '{ 
				"width": $j("#' . $this->Resizable->ControlId . '").width(), 
				"height": $j("#' . $this->Resizable->ControlId . '").height() 
			}';
        $this->Resizable->AddAction(new QResizable_StopEvent(), new QAjaxAction("onResize", "default", null, $strJsParam));
        $this->ResizableResult = new QPanel($this);
        $strServerActionJsParam = '{"resizable": ' . $strJsParam . ', ';
        // Selectable
        $this->Selectable = new QSelectable($this);
        $this->Selectable->AutoRenderChildren = true;
        $this->Selectable->CssClass = 'selectable';
        for ($i = 1; $i <= 5; ++$i) {
            $pnl = new QPanel($this->Selectable);
            $pnl->Text = 'Item ' . $i;
            $pnl->CssClass = 'selitem';
        }
        $this->Selectable->Filter = 'div.selitem';
        /*
         * if your objects to return get more complex you can define a javascript function that returns your
         * object. the essential thing is the ".call()", this executes the function that you have just defined
         * and returns your object.
         * In this example a function is uesd to temporary store jquery's search result for selected items,
         * because it is needed twice. then the ids are stored to objRet.ids as a comma-separated string and
         * the contents of the selected items are stored to objRet.content as an array.
         *
         */
        $this->SelectableResult = new QPanel($this);
        $strJsParam = 'function() { 
				objRet = new Object(); 
				selection = $j("#' . $this->Selectable->ControlId . '")
					.find(".ui-selected");
				objRet.ids = selection.map(function(){
						return this.id;
					}).get()
					.join(",");
				objRet.content = selection.map(function() { 
					return $j(this).html();
				}).get(); 
				return objRet;
			}.call()';
        $this->Selectable->AddAction(new QSelectable_StopEvent(), new QAjaxAction("onSelect", "default", null, $strJsParam));
        $strServerActionJsParam .= '"selectable": ' . $strJsParam . ', ';
        // Sortable
        $this->Sortable = new QSortable($this);
        $this->Sortable->AutoRenderChildren = true;
        $this->Sortable->CssClass = 'sortable';
        for ($i = 1; $i <= 5; ++$i) {
            $pnl = new QPanel($this->Sortable);
            $pnl->Text = 'Item ' . $i;
            $pnl->CssClass = 'sortitem';
        }
        $this->Sortable->Items = 'div.sortitem';
        $this->SortableResult = new QPanel($this);
        $strJsParam = '$j("#' . $this->Sortable->ControlId . '").
				find("div.sortitem").
				map(function() { 
					return $j(this).html()
				}).get()';
        $this->Sortable->AddAction(new QSortable_UpdateEvent(), new QAjaxAction("onSort", "default", null, $strJsParam));
        $strServerActionJsParam .= '"sortable": ' . $strJsParam . '}';
        //a second Sortable that can receive items from the first Sortable
        //when an item is dragged over from the first sortable an receive event is triggered
        $this->Sortable2 = new QSortable($this);
        $this->Sortable2->AutoRenderChildren = true;
        $this->Sortable2->CssClass = 'sortable';
        for ($i = 6; $i <= 10; ++$i) {
            $pnl = new QPanel($this->Sortable2);
            $pnl->Text = 'Item ' . $i;
            $pnl->CssClass = 'sortitem';
        }
        $this->Sortable2->Items = 'div.sortitem';
        //allow dragging from Sortable to Sortable2
        $this->Sortable->ConnectWith = '#' . $this->Sortable2->ControlId;
        //enable the following line to allow dragging Sortable2 child items to the Sortable list
        // $this->Sortable2->ConnectWith = '#' . $this->Sortable->ControlId;
        //using a QJsClosure as the ActionParameter for Sortable2 to return a Js object
        //the ActionParameter is used for every ajax / server action defined on this control
        $this->Sortable2->ActionParameter = new QJsClosure('return $j("#' . $this->Sortable2->ControlId . '")
					.find("div.sortitem")
					.map(function() { 
						return $j(this).html()
					}).get();');
        //(the list of names from the containing items) is returned for the following two Ajax Actions
        $this->Sortable2->AddAction(new QSortable_UpdateEvent(), new QAjaxAction("onSort2"));
        //$this->Sortable2->AddAction(new QSortable_ReceiveEvent() ,new QAjaxAction("onSort2"));
        $this->Sortable2Result = new QPanel($this);
        $this->btnSubmit->AddAction(new QClickEvent(), new QServerAction("onSubmit", null, $strServerActionJsParam));
    }
Exemple #2
0
 protected function Form_Create()
 {
     $this->Draggable = new QPanel($this);
     $this->Draggable->Text = 'Drag me';
     $this->Draggable->CssClass = 'draggable';
     $this->Draggable->Moveable = true;
     //$this->Draggable->AddAction(new QDraggable_StopEvent(), new QJavascriptAction("alert('Dragged to ' + ui.position.top + ',' + ui.position.left)"));
     $this->Draggable->AddAction(new QDraggable_StopEvent(), new QAjaxAction("drag_stop"));
     // Dropable
     $this->Droppable = new QPanel($this);
     $this->Droppable->Text = "Drop here";
     //$this->Droppable->AddAction(new QDroppable_DropEvent(), new QJavascriptAction("alert('Dropped ' + ui.draggable.attr('id'))"));
     $this->Droppable->AddAction(new QDroppable_DropEvent(), new QAjaxAction("droppable_drop"));
     $this->Droppable->CssClass = 'droppable';
     $this->Droppable->Droppable = true;
     // Resizable
     $this->Resizable = new QPanel($this);
     $this->Resizable->CssClass = 'resizable';
     $this->Resizable->Resizable = true;
     $this->Resizable->AddAction(new QResizable_StopEvent(), new QAjaxAction('resizable_stop'));
     // Selectable
     $this->Selectable = new QSelectable($this);
     $this->Selectable->AutoRenderChildren = true;
     $this->Selectable->CssClass = 'selectable';
     for ($i = 1; $i <= 5; ++$i) {
         $pnl = new QPanel($this->Selectable);
         $pnl->Text = 'Item ' . $i;
         $pnl->CssClass = 'selitem';
     }
     $this->Selectable->Filter = 'div.selitem';
     $this->Selectable->SelectedItems = array($pnl->ControlId);
     // pre-select last item
     $this->Selectable->AddAction(new QSelectable_StopEvent(), new QAjaxAction('selectable_stop'));
     // Sortable
     $this->Sortable = new QSortable($this);
     $this->Sortable->AutoRenderChildren = true;
     $this->Sortable->CssClass = 'sortable';
     for ($i = 1; $i <= 5; ++$i) {
         $pnl = new QPanel($this->Sortable);
         $pnl->Text = 'Item ' . $i;
         $pnl->CssClass = 'sortitem';
     }
     $this->Sortable->Items = 'div.sortitem';
     $this->Sortable->AddAction(new QSortable_StopEvent(), new QAjaxAction('sortable_stop'));
     // Accordion
     $this->Accordion = new QAccordion($this);
     $lbl = new QLinkButton($this->Accordion);
     $lbl->Text = 'Header 1';
     $pnl = new QPanel($this->Accordion);
     $pnl->Text = 'Section 1';
     $lbl = new QLinkButton($this->Accordion);
     $lbl->Text = 'Header 2';
     $pnl = new QPanel($this->Accordion);
     $pnl->Text = 'Section 2';
     $lbl = new QLinkButton($this->Accordion);
     $lbl->Text = 'Header 3';
     $pnl = new QPanel($this->Accordion);
     $pnl->Text = 'Section 3';
     $this->Accordion->AddAction(new QChangeEvent(), new QAjaxAction('accordion_change'));
     // Autocomplete
     // Both autocomplete controls below will use the mode
     // "match only on the beginning of the word"
     QAutocomplete::UseFilter(QAutocomplete::FILTER_STARTS_WITH);
     // Client-side only autocomplete
     $this->Autocomplete1 = new QAutocomplete($this);
     $this->Autocomplete1->Source = self::$LANGUAGES;
     $this->Autocomplete1->Name = "Standard Autocomplete";
     $this->Autocomplete2 = new QAutocomplete($this);
     $this->Autocomplete2->Source = self::$LANGUAGES;
     $this->Autocomplete2->AutoFocus = true;
     $this->Autocomplete2->MustMatch = true;
     $this->Autocomplete2->Name = "AutoFocus and MustMatch";
     // Ajax Autocomplete
     // Note: To show the little spinner while the ajax search is happening, you
     // need to define the .ui-autocomplete-loading class in a style sheet. See
     // header.inc.php for an example.
     $this->AjaxAutocomplete = new QAutocomplete($this);
     $this->AjaxAutocomplete->SetDataBinder("update_autocompleteList");
     $this->AjaxAutocomplete->AddAction(new QAutocomplete_ChangeEvent(), new QAjaxAction('ajaxautocomplete_change'));
     $this->AjaxAutocomplete->DisplayHtml = true;
     $this->AjaxAutocomplete->Name = 'With Html Display';
     $this->AjaxAutocomplete2 = new QAutocomplete($this);
     $this->AjaxAutocomplete2->MultipleValueDelimiter = ',';
     $this->AjaxAutocomplete2->SetDataBinder("update_autocompleteList");
     $this->AjaxAutocomplete2->Name = 'Multiple selection';
     // Button
     $this->Button = new QJqButton($this);
     $this->Button->Label = "Click me";
     // Label overrides Text
     $this->Button->AddAction(new QClickEvent(), new QServerAction("button_click"));
     $this->CheckBox = new QJqCheckBox($this);
     $this->CheckBox->Text = "CheckBox";
     $this->RadioButton = new QJqRadioButton($this);
     $this->RadioButton->Text = "RadioButton";
     $this->IconButton = new QJqButton($this);
     $this->IconButton->Text = "Sample";
     $this->IconButton->ShowText = false;
     $this->IconButton->Icons = array("primary" => JqIcon::Lightbulb);
     // Lists
     $this->CheckList1 = new QCheckBoxList($this);
     $this->CheckList1->Name = "CheckBoxList with buttonset";
     foreach (self::$LANGUAGES as $strLang) {
         $this->CheckList1->AddItem($strLang);
     }
     $this->CheckList1->ButtonMode = QCheckBoxList::ButtonModeSet;
     $this->CheckList2 = new QCheckBoxList($this);
     $this->CheckList2->Name = "CheckBoxList with button style";
     foreach (self::$LANGUAGES as $strLang) {
         $this->CheckList2->AddItem($strLang);
     }
     $this->CheckList2->ButtonMode = QCheckBoxList::ButtonModeJq;
     $this->CheckList2->RepeatColumns = 4;
     $this->RadioList1 = new QRadioButtonList($this);
     $this->RadioList1->Name = "RadioButtonList with buttonset";
     foreach (self::$LANGUAGES as $strLang) {
         $this->RadioList1->AddItem($strLang);
     }
     $this->RadioList1->ButtonMode = QCheckBoxList::ButtonModeSet;
     $this->RadioList2 = new QRadioButtonList($this);
     $this->RadioList2->Name = "RadioButtonList with button style";
     foreach (self::$LANGUAGES as $strLang) {
         $this->RadioList2->AddItem($strLang);
     }
     $this->RadioList2->ButtonMode = QCheckBoxList::ButtonModeJq;
     $this->RadioList2->RepeatColumns = 4;
     // Datepicker
     $this->Datepicker = new QDatepicker($this);
     // DatepickerBox
     $this->DatepickerBox = new QDatepickerBox($this);
     // Dialog
     $this->Dialog = new QDialog($this);
     $this->Dialog->Text = 'a non modal dialog';
     $this->Dialog->AddButton('Cancel', 'cancel');
     $this->Dialog->AddButton('OK', 'ok');
     $this->Dialog->AddAction(new QDialog_ButtonEvent(), new QAjaxAction('dialog_press'));
     $this->Dialog->AutoOpen = false;
     $this->btnShowDialog = new QJqButton($this);
     $this->btnShowDialog->Text = 'Show Dialog';
     $this->btnShowDialog->AddAction(new QClickEvent(), new QShowDialog($this->Dialog));
     $this->txtDlgTitle = new QTextBox($this);
     $this->txtDlgTitle->Name = "Set Title To:";
     $this->txtDlgTitle->AddAction(new QKeyPressEvent(10), new QAjaxAction('dlgTitle_Change'));
     $this->txtDlgTitle->AddAction(new QBackspaceKeyEvent(10), new QAjaxAction('dlgTitle_Change'));
     $this->txtDlgText = new QTextBox($this);
     $this->txtDlgText->Name = "Set Text To:";
     $this->txtDlgText->AddAction(new QKeyPressEvent(10), new QAjaxAction('dlgText_Change'));
     $this->txtDlgText->AddAction(new QBackspaceKeyEvent(10), new QAjaxAction('dlgText_Change'));
     // Progressbar
     $this->Progressbar = new QProgressbar($this);
     $this->Progressbar->Value = 37;
     // Slider
     $this->Slider = new QSlider($this);
     $this->Slider->AddAction(new QSlider_SlideEvent(), new QJavascriptAction('jQuery("#' . $this->Progressbar->ControlId . '").progressbar ("value", ui.value)'));
     $this->Slider->AddAction(new QSlider_ChangeEvent(), new QAjaxAction('slider_change'));
     $this->Slider2 = new QSlider($this);
     $this->Slider2->Range = true;
     $this->Slider2->Values = array(10, 50);
     $this->Slider2->AddAction(new QSlider_ChangeEvent(), new QAjaxAction('slider2_change'));
     // Tabs
     $this->Tabs = new QTabs($this);
     $tab1 = new QPanel($this->Tabs);
     $tab1->Text = 'First tab is active by default';
     $tab2 = new QPanel($this->Tabs);
     $tab2->Text = 'Tab 2';
     $tab3 = new QPanel($this->Tabs);
     $tab3->Text = 'Tab 3';
     $this->Tabs->Headers = array('One', 'Two', 'Three');
 }