VCL for PHP Charting components - Subproperties

Posted by on in Blogs
Sometimes, our components, need to publish properties that are grouped under a common category. The first example can be the Font property, which allows the user to specify all font attributes in a single property, like name, size, boldness, etc.

You could add all those properties to your component in an ungrouped fashion:

  • FontAlign

  • FontCase

  • FontColor

  • FontFamily

  • FontLineHeight

  • FontSize

  • FontStyle

  • FontVariant

  • FontWeight

But that will clutter the Object Inspector, just let's imagine a component with several Font properties...

To allow you group such properties and create a better component interface, VCL for PHP provides you a way to create subproperties, keep reading.


In our chart component, we need to provide a way for the user to specify properties for the chart axis, the horizontal and the vertical one, we are going to do it, by creating a class for each axis.

To create a subproperty, that subproperty must be an object, and that object must be of a class that inherits from Persistent. This is required so the streaming system is able to read and write the properties of that object to an .xml.php file.

So, for the XAxis class, we have some properties to add:

  • Stroke

  • Color

  • TickHeight

  • GridColor

  • Offset

  • Steps

  • 3D

  • Labels

  • Vertical

Let's write the code:
class XAxis extends Persistent
protected $_stroke = 1;

function getStroke() { return $this->_stroke; }
function setStroke($value) { $this->_stroke = $value; }
function defaultStroke() { return 1; }

protected $_color = "";

function getColor() { return $this->_color; }
function setColor($value) { $this->_color = $value; }
function defaultColor() { return ""; }

protected $_tickheight = 1;

function getTickHeight() { return $this->_tickheight; }
function setTickHeight($value) { $this->_tickheight = $value; }
function defaultTickHeight() { return 1; }

protected $_gridcolor = "";

function getGridColor() { return $this->_gridcolor; }
function setGridColor($value) { $this->_gridcolor = $value; }
function defaultGridColor() { return ""; }

protected $_offset = 0;

function getOffset() { return $this->_offset; }
function setOffset($value) { $this->_offset = $value; }
function defaultOffset() { return 0; }

protected $_steps = 1;

function getSteps() { return $this->_steps; }
function setSteps($value) { $this->_steps = $value; }
function defaultSteps() { return 1; }

protected $_3d = 0;

function get3D() { return $this->_3d; }
function set3D($value) { $this->_3d = $value; }
function default3D() { return 0; }

protected $_labels = array();

function getLabels() { return $this->_labels; }
function setLabels($value) { $this->_labels = $value; }
function defaultLabels() { return array(); }

protected $_vertical = 0;

function getVertical() { return $this->_vertical; }
function setVertical($value) { $this->_vertical = $value; }
function defaultVertical() { return 0; }

Specify an owner

For the streaming system to work, it also needs to know the owner of such object, in our case, the owner of the XAxis object is going to be the chart itself, but Persistent lacks of a constructor in which we can specify the owner. So simply adding a public field and overriding the readOwner() method of Persistent, will do the trick:
class XAxis extends Persistent
public $_control = null;

function readOwner()

And we must not forget, when creating this object, to assign the field to the right owner.

Creating the XAxis property

Now is time to add the XAxis property to the OpenChart class, this is done in the same way other properties:
    protected $_xaxis = null;

function getXAxis() { return $this->_xaxis; }
function setXAxis($value) { if(is_object($value)) $this->_xaxis = $value; }

But just assign the property if the value we want to set is an object. And now we are going to create the object property in the component constructor:
class OpenChart extends Control
function __construct($aowner = null)

//Creates the axis properties
$this->_xaxis = new XAxis();
$this->_xaxis->_control = $this;

And that's it, now is time to uninstall the package and install again by toggling the check box on Component | Packages dialog, and here is the result:

We will need to repeat the process with the YAxis, we decided not to use a base class for the axis, but a different class, because there are several properties that differ from each other, but that would be another option.

Registering property editors for subproperties

We can also specify which property editors are going to be attached to the subproperties, this is done in the same way, but we have to qualify the subproperties with a dot (.):

Hope you like it!


  • Guest
    Nico Aragon Wednesday, 19 November 2008

    (My apologies to people that can't read Spanish or dislike off-topics).

    Hola José. No encuentro tu dirección de correo. Sólo quería (más vale tarde que nunca O:) felicitarte por Delphi para PHP. La "adopción" por CodeGear fue más o menos cuando dejé de usar PHP, así que no llegué a probarlo. Pero no deja de "llenarme de orgullo y satisfacción" ;) que haya un compatriota en ese nivel. ¡Enhorabuena!

  • Guest
    José León Wednesday, 19 November 2008

    Muchas gracias, Nico, y si quieres contactar conmigo, puedes usar la dirección de e-mail que quieras, jose.leon EN o support EN!!

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: