Creating components using Delphi for PHP (II)

Posted by on in Blogs
On the previous article we saw how to develop Delphi for PHP components, now we are going to add a bit more spice by connecting the CSSChart component to a Datasource.

That will allow the component to represent information from any Dataset we attach to the Datasource component, it can be information from a database, from a memory array, from an XML file, etc, as long there is a Dataset component that reads that information and provide an interface to it.

To develop the VCL for PHP database access scheme, we have followed the same logic found on the VCL for Windows, so if you are a Delphi for Windows user, you will be familiar with those concepts.

Adding properties

For our component to work, we need three new properties:

  • Datasource, to connect to any source of information

  • LabelsColumn, name of the column in the datasource that will store the labels for the chart

  • ValuesColumn, name of the colum in the datasource that will store the values for the chart

So, using Edit | Add Published Property, we end up with this code:

protected $_datasource = null;
function getDatasource() { return $this->_datasource; }
function setDatasource($value) { $this->_datasource = $value; }
function defaultDatasource() { return null; }

protected $_labelscolumn = "";
function getLabelsColumn() { return $this->_labelscolumn; }
function setLabelsColumn($value) { $this->_labelscolumn = $value; }
function defaultLabelsColumn() { return ""; }

protected $_valuescolumn = "";
function getValuesColumn() { return $this->_valuescolumn; }
function setValuesColumn($value) { $this->_valuescolumn = $value; }
function defaultValuesColumn() { return ""; }

Object properties and fixing up

Object properties are those properties that reference to a component, in PHP (in short) there are no data types, so all properties are handled as strings by the IDE, and are stored that way in the .xml.php resource file.

To convert properties that are likely to be objects, from string to object, we need to perform an additional step, called Fixing Up, that process will ensure, that a property has the right value.

The first thing to do is to modify the setter for the function:

function setDatasource($value) { $this->_datasource = $this->fixupProperty($value); }

This makes $this->_datasource to always hold the right value at the right time. Also, we need to call this method when a form has been loaded, to try get the right value on the property, this can be done overriding the loaded() method:

function loaded()

Now, if you uninstall/install your package, you will get the new properties on the Object Inspector and you could attach any Datasource component on the Datasource property. Nothing more to do to add properties to this component.

Using data from the Datasource

Now it's time to use the information stored in the Dataset attached, basically we need to:

  • Check properties for valid information

  • Iterate the dataset

  • Build the data array to be shown by the chart

Add this code at the top of the dumpContents() method we saw in the previous article, just below the data assignment, so it looks this way:

function dumpContents()
//Get the data to use
$data = $this->_data;

//If datasource is correctly assigned, we will use that data instead the Data property
//On design time, we don't have access to datasource objects, so nothing to do
if(($this->ControlState & csDesigning) != csDesigning)
//First, check if there is some value on the column properties
if(($this->_labelscolumn != '') && ($this->_valuescolumn != ''))
//If there is a valid dataset attached
if(($this->_datasource != null) && ($this->_datasource->Dataset != null))
$ds = $this->_datasource->Dataset;
//If dataset is active

//Add the item to the array

Let's take a look at the code. First, we need to check if we are inside the IDE or not, inside the IDE there is no other objects available apart of the current component, we don't have a reference to the Datasource, so there is nothing to do then.

If we are in runtime, we need to check if there is some value on the column properties, and finally, we need to check a Datasource is attached and that Datasource has a Dataset attached to it.

If all those conditions are met and, the Dataset is open, we can work with it, so let's iterate through the dataset. The basic methods are first() and next(), and EOF returns true if the dataset is at the last record.

The key line of all this process is this one:


This line adds a new element to the $data array, where the key is the value of the field referenced by the LabelsColumn property, and the value for that element is the value of the field referenced by the ValuesColumn property.

And we are done! Nothing more to do to get our chart populated with information from a database.


We need a database connection for our tests, you can register a new one on Data Explorer, open it and drag a table you want to use to your form. This will create the three components you need to connect to data:

  • Database, opens a connection to a database server

  • Table, issues a select query to an specific table

  • Datasource, allows to connect datasets with components

All of them will be setup by the IDE, so you don't need to configure them. After that, select your CSSChart and when you drop down Datasource property, the Datasource you just added will be shown. Select it and set the LabelsColumn and ValuesColumn properties with the name of the fields you want to use.

Here is a sample on how the IDE will look:


And if you run your application, you will get this in the browser:


This process is valid for any component we want to add data capabilities, and as you can see, the framework provides all you need in order to do this.

Download the code for this article


Check out more tips and tricks in this development video: