The component class is a base UI class providing a close binding between PHP and Javascript. The class is intended to be subclassed.

In order to create a new, simple component just override the renderContent-function, such as:

class helloWorld extends Component {
 
  public function renderContent() {
    echo 'Hello world';
  }
}
 
$mycomponent = new helloWorld();
$mycomponent->render();

To make your component configurable, override the $properties array with some default values. To extend the component from above to make the text and text color configurable, do this:

class textOutput extends Component {
 
  protected $properties = array(
    'text' => 'Hello world',
    'color' => 'black'
  );
 
  public function renderContent() {
    echo '<span style="color:'.$this->color.';">';
    echo $this->text;
    echo '</span>';
  }
}
 
$mycomponent = new textOutput();
$mycomponent->text = 'Platform4PHP is cool';
$mycomponent->color = 'red';
$mycomponent->render();

Note how the configuration properties is easily set and read.

The component will always render in a double div with the following properties:

An outer div with a static class platform_component and an inner div with a class based on the class name of the component, so if the component is named textOutput, the class will be named platform_component_textoutput.

Other classes can also be added for internal handling.

The outer div will have an auto-generated id or you can set the id with the setID-function.

index.php

class textOutput extends Component {
 
  public $configuration = array(
    'text' => 'Hello world',
    'color' => 'black'
  );
 
  public function renderContent() {
    echo '<span style="color:'.$this->color.';">';
    echo $this->text;
    echo '</span>';
  }
}
 
$mycomponent = new textOutput();
$mycomponent->text = 'Platform4PHP is cool';
$mycomponent->color = 'red';
$mycomponent->setID('example_output');
$mycomponent->render();

output.html

<div class="platform_component" id="example_output" data-configuration="...">
<div class="platform_component_textoutput">
<span style="color:red;">Platform4PHP is cool</span>
</div>
</div>

There are some build-in javascript functionality, which can be triggered with events.

Some components are purely visual and shouldn't be allowed to be disabled. To prevent a component from becoming disabled, set the static $can_disable variable to false in the php file.