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 $configuration 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 {
 
  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->render();

Note how the configuration properties is easily set and read.

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

A static class platform_component.

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 div will have an auto-generated id or you can set the id with the setID-function.

The div will have a data-field named configuration which contain the complete component configuration as json, so it can be accessed directly from javascript.

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 platform_component_textoutput" id="example_output" data-configuration="...">
<span style="color:red;">Platform4PHP is cool</span>
</div>

example.js

var configuration = $('#example_output').data('configuration');
alert ('The text configuration was: '+configuration.text+' and the color was: '+configuration.color);

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.