Contact

Help

Quick start

Help videos

Tutorials

Wiki

Issue Tracker

Eclipse PHP

Languages

Support

Compatibilities

Components

Tutorials

Tutorial Object

Tutorial 1 : Object with Label and TextBox

View
Code

File: /pages/tutorials/object/object-01.php


<?php
class Object01 extends Page {
    public function InitializeComponent() {
        parent::$PAGE_TITLE = "Tutorial : Object with Label 
                                and TextBox";
        
        $this->render = new WSPObject();
        $this->render->add(new Label("my label", true), 
                            new TextBox($this));
    }
}
?>

Tutorial 2 : 2 squares Objects

View
Code

File: /pages/tutorials/object/object-02.php


<?php
class Object02 extends Page {
    public function InitializeComponent() {
        parent::$PAGE_TITLE = "Tutorial : 2 squares Objects";
        
        $this->render = new WSPObject();
        
        $green_square = new WSPObject();
        $green_square->setId("my_object_green_2");
        $green_square->setStyle("background-color:#5BFF4F;");
        $green_square->setWidth(100);
        $green_square->setHeight(100);
        
        $red_square = new WSPObject();
        $red_square->setId("my_object_red_2");
        $red_square->setStyle("background-color:#FF3300;");
        $red_square->setWidth(100);
        $red_square->setHeight(100);
        
        $this->render->add($green_square, $red_square);
    }
}
?>

Tutorial 3 : 2 draggables Objects

View
Code

File: /pages/tutorials/object/object-03.php


<?php
class Object03 extends Page {
    public function InitializeComponent() {
        parent::$PAGE_TITLE = "Tutorial : 2 draggables Objects";
        
        $this->render = new WSPObject();
        
        $green_square = new WSPObject("draggable");
        $green_square->setId("my_object_green_3");
        $green_square->setStyle("background-color:#5BFF4F;");
        $green_square->setWidth(100);
        $green_square->setHeight(100);
        $green_square->setDraggable(true);
        
        $red_square = new WSPObject("draggable with revert");
        $red_square->setId("my_object_red_3");
        $red_square->setStyle("background-color:#FF3300;");
        $red_square->setWidth(100);
        $red_square->setHeight(100);
        $red_square->setDraggable(true, true);
        
        $this->render->add($green_square, $red_square);
    }
}
?>

Tutorial 4 : draggable Object + dropppable Object (with events)

View
Code

File: /pages/tutorials/object/object-04.php


<?php
class Object04 extends Page {
    public function InitializeComponent() {
        parent::$PAGE_TITLE = "Tutorial : draggable Object + 
                                 dropppable Object (with events)";
        
        $this->render = new WSPObject();
        
        $green_square = new WSPObject("draggable");
        $green_square->setId("my_object_green_4");
        $green_square->setStyle("background-color:#5BFF4F;");
        $green_square->setWidth(100);
        $green_square->setHeight(100);
        
        $drag_event = new DraggableEvent($this);
        $drag_event->onDragEndJs("alert('end drag');");
        $green_square->setDraggable(true, false, $drag_event);
        
        $red_square = new WSPObject("droppable");
        $red_square->setId("my_object_red_4");
        $red_square->setStyle("background-color:#FF3300;");
        $red_square->setWidth(100);
        $red_square->setHeight(100);
        
        $drop_event = new DroppableEvent($this);
        $drop_event->onDropJs("alert('drop');");
        $red_square->setDroppable(true, $drop_event);
        
        $this->render->add($green_square, $red_square);
    }
}
?>

Tutorial 5 : sortables Objects

View
Code

File: /pages/tutorials/object/object-05.php


<?php
class Object05 extends Page {
    public function InitializeComponent() {
        parent::$PAGE_TITLE = "Tutorial : sortables Objects";
        
        $this->render = new WSPObject();
        $this->render->setId("my_render_object_5");
        $this->render->setSortable(true);
        
        $green_square = new WSPObject("<br/><br/>", "1");
        $green_square->setId("my_object_green_5");
        $green_square->setStyle("background-color:#5BFF4F;");
        $green_square->setAlign(WSPObject::ALIGN_CENTER);
        $green_square->setWidth(100);
        $green_square->setHeight(100);
        
        $red_square = new WSPObject("<br/><br/>", "2");
        $red_square->setId("my_object_red_5");
        $red_square->setStyle("background-color:#FF3300;");
        $red_square->setAlign(WSPObject::ALIGN_CENTER);
        $red_square->setWidth(100);
        $red_square->setHeight(100);
        
        $blue_square = new WSPObject("<br/><br/>", "3");
        $blue_square->setId("my_object_blue_5");
        $blue_square->setStyle("background-color:cornflowerblue;");
        $blue_square->setAlign(WSPObject::ALIGN_CENTER);
        $blue_square->setWidth(100);
        $blue_square->setHeight(100);
        
        $this->render->add($green_square, $red_square, $blue_square);
    }
}
?>

Tutorial 6 : sortables Objects with event

View
Code

File: /pages/tutorials/object/object-06.php


<?php
class Object06 extends Page {
    public function InitializeComponent() {
        parent::$PAGE_TITLE = "Tutorial : sortables Objects 
                            with event";
        
        // Create drag picture
        $pic_drag = new Picture("wsp/img/drag_arrow_16x16.png", 
                            16, 16, 0, Picture::ALIGN_ABSMIDDLE);
        $pic_drag->setStyle("cursor:pointer;");
        
        // *** Sortable area 1 ***
        $sortable_area_1 = new WSPObject();
        $sortable_area_1->setId("sortable_area_1");
        
        // Create sort event
        $sort_event1 = new SortableEvent($this);
        $sort_event1->onSort("onSort")->setAjaxEvent();
        $sortable_area_1->setSortable(true, $sort_event1);
        
        // Create objects to be sort
        $square1 = new WSPObject($pic_drag, "My Object 1");
        $square1->setId("my_object_1_tuto_6")->forceDivTag();
        
        $square2 = new WSPObject($pic_drag, "My Object 2");
        $square2->setId("my_object_2_tuto_6")->forceDivTag();
        
        $square3 = new WSPObject($pic_drag, "My Object 3");
        $square3->setId("my_object_3_tuto_6")->forceDivTag();
        
        $sortable_area_1->add($square1, $square2, $square3);
        
        // *** Sortable area 2 ***
        $sortable_area_2 = new WSPObject();
        $sortable_area_2->setId("sortable_area_2");
        
        // Create sort event
        $sort_event2 = new SortableEvent($this);
        $sort_event2->onSort("onSort")->setAjaxEvent();
        $sortable_area_2->setSortable(true, $sort_event2);
        
        // Create objects to be sort
        $square4 = new WSPObject($pic_drag, "My Object 4");
        $square4->setId("my_object_4_tuto_6")->forceDivTag();
        
        $square5 = new WSPObject($pic_drag, "My Object 5");
        $square5->setId("my_object_5_tuto_6")->forceDivTag();
        
        $square6 = new WSPObject($pic_drag, "My Object 6");
        $square6->setId("my_object_6_tuto_6")->forceDivTag();
        
        $sortable_area_2->add($square4, $square5, $square6);
        
        // Create render
        $this->render = new Table(5);
        $this->render->addRowColumns($sortable_area_1, 
                                        $sortable_area_2);
    }
    
    public function onSort($sender, $moved_object, $from_object, 
                            $to_object, $position, $old_position) {
        alert("Move object ".$moved_object->getId().
                " from ".$from_object->getId().
                " to ".$to_object->getId().
                " on the position ".$position.
                " (old position: ".$old_position.")");
    }
}
?>

Tutorial 7 : clickable Objects

View
Code

File: /pages/tutorials/object/object-07.php


<?php
class Object07 extends Page {
    public function InitializeComponent() {
        parent::$PAGE_TITLE = "Tutorial : clickable Objects";
        
        $form = new Form($this);
        
        $green_square = new WSPObject("<br/><br/>", "click");
        $green_square->setId("my_object_green_7");
        $green_square->setStyle("background-color:#5BFF4F;cursor:pointer;");
        $green_square->setAlign(WSPObject::ALIGN_CENTER);
        $green_square->setWidth(100);
        $green_square->setHeight(100);
        $green_square->onClick($form, "onClickObject");
        
        $red_square = new WSPObject("<br/><br/>", "click");
        $red_square->setId("my_object_red_7");
        $red_square->setStyle("background-color:#FF3300;cursor:pointer;");
        $red_square->setAlign(WSPObject::ALIGN_CENTER);
        $red_square->setWidth(100);
        $red_square->setHeight(100);
        $red_square->onClick($form, "onClickObject");
        
        $form->setContent(new WSPObject($green_square, $red_square));
        $this->render = $form;
    }
    
    public function onClickObject($sender) {
        $dialog = new DialogBox("onClickObject", 
                            "click: ".$sender->getId());
        $this->addObject($dialog);
    }
}
?>

PHP Framework

Home

Documentation

Download

Quick start

Help videos

Tutorials

Tutorials

Tutorial Object