VCL for PHP componente Charting - Part 4 - Esqueleto

By: Marcos Alexandre Lemos Rodrigues

Abstract: Criando um compoente Charting para VCL for PHP. Este artigo é uma reprodução do blog postado por Jose Leon, developer do Delphi for PHP.

Componente VCL for PHP Charting - Squeleto

Neste artigo, criaremos um esqueleto básico para o componente, adicionaremos propriedade se renderizaremos o componente com informações de exemplo.

Adicionando propriedades

No primeiro artigo, reunimos os requisitos e setamos uma task list, agora é hora de adicionar todas as propriedades que desejamos prover, para que o usuário esteja apto a customizar o componente.

Pra isso, você pode usar a opção Edit | Add Published Property, que salva alguma codificação. Você precis entrar com o nome da propriedade e o valor default. Uma vez pressionado OK, o código será adicionado ao editor de código onde o cursor está posicionado.

Por exemplo, se você adicionar a propriedade chamda "Test" com o valor default "1", receberá isso no editor:

protected $_test=1;

function getTest() { return $this->_test; }

function setTest($value) { $this->_test=$value; }

function defaultTest() { return 1; }

Use o wizard Add Published Property tantas vezes quanto necessário para adicionar as propridades planejadas neste artigo, isto é limitado pra propriedades simples, como striongs, numéros, etc. Adicionaremos também  uma propriedade series como um array no nosso próximo artigo. Quando finaliar, o código visto será como:

<?php

require_once("vcl/vcl.inc.php");

//Includes

use_unit("controls.inc.php");

class OpenChart extends Control

{

function __construct($aowner = null)

{

parent::__construct($aowner);

}

protected $_series = array();

function getSeries() { return $this->_series; }

function setSeries($value) { $this->_series = $value; }

function defaultSeries() { return array(); }

protected $_title = "";

function getTitle() { return $this->_title; }

function setTitle($value) { $this->_title = $value; }

function defaultTitle() { return ""; }

protected $_xlegend = "";

function getXLegend() { return $this->_xlegend; }

function setXLegend($value) { $this->_xlegend = $value; }

function defaultXLegend() { return ""; }

protected $_ylegend = "";

function getYLegend() { return $this->_ylegend; }

function setYLegend($value) { $this->_ylegend = $value; }

function defaultYLegend() { return ""; }

protected $_backgroundcolor = "";

function getBackgroundColor() { return $this->_backgroundcolor; }

function setBackgroundColor($value) { $this->_backgroundcolor = $value; }

function defaultBackgroundColor() { return ""; }

protected $_loadingmessage="";

function getLoadingMessage() { return $this->_loadingmessage; }

function setLoadingMessage($value) { $this->_loadingmessage=$value; }

function defaultLoadingMessage() { return ""; }

function dumpContents()

{

}

}

?>

Depurando o código de controle

O próximo passo será rendereizar o código de controle no browser, o principal método para isto é dumpContents(). Para este componente, somente precisamos renderizar uma tag div, que será usada pelo objeto flash pra renderizar o gráfico. Você pode vê-lo no exemplo básico fornecido na documentação do open flash chart:

http://teethgrinder.co.uk/open-flash-chart-2/tutorial-4.php

<html>

<head>

<script type="text/javascript" src="js/swfobject.js"></script>

<script type="text/javascript">

swfobject.embedSWF("open-flash-chart.swf", "my_chart",

"550", "200", "9.0.0", "expressInstall.swf", {"data-file":"chart-3.php"} );

</script>

</head>

<body>

<p>Hello World</p>

<div id="my_chart"></div>

<p>Don't forget to "view source"</p>

</body>

</html>

Pra simplificar,  coloque o div, mas você precisa usar um nome único, lembre-se que mais gráficos podem ser colocados na mesma página e cada um precisa ter seu próprio div. A propriedade Name para componentes deve ser unica na mesma página:

function dumpContents()

{

//Div where the chart will be inserted

echo "<div id=\"$this->Name\"></div>";

}

Na biblioteca sample, voce pode ver algum código é também colocado no HEAD do documento HTML, como a inclusão de wsfobject.js e também a chamada de swfobject para colocar o flash, o próximo método a ser sobrescrito é dumpHeaderCode(). Este método é chamado pela página component wuando é renderizado a seção HEAD do documento.

function dumpHeaderCode()

{

parent::dumpHeaderCode();

//Dumps the open flash chart library code

if(!defined('OPENFLASHCHART'))

{

define('OPENFLASHCHART', 1);

?>

<script type="text/javascript" src="<?php echo VCL_HTTP_PATH; ?>/openchart/js/swfobject.js">

</script>

<?php

}

$url='';

?>

<script type="text/javascript">

swfobject.embedSWF(

"<?php echo VCL_HTTP_PATH; ?>/openchart/open-flash-chart.swf", "<?php echo $this->Name; ?>",

"<?php echo $this->Width; ?>", "<?php echo $this->Height; ?>",

"9.0.0", "expressInstall.swf",

{"data-file":"<?php echo $url; ?>"}

);

</script>

<?php

}

O primeiro bloco adiciona dumps a inclusão do javascript swobject.js, lembre-se que este método será executado vária svezes como instâncias deste componente no form, futuramente encontraremos uma forma de prevenir que o código seja executado várias vezes. Esta é a razão do bloco ser protected por checking de OPENFLASHCHART como definido, se ele não for definido, então execute o código, senão, prossiga.

Outra coisa para verificar é a constante VCL_HTTP_PATH, que é definida na bliblioteca VCL for PHP, contém o caminho correto  HTTP para a localização da biblioteca, não importaonde esteja a VCL. Esta é a razão de especificar caminhos, para que você não precise se preocupar com eles.

E depois disso, iremos colocar o código do objeto flash, setando o nome da tag div onde será colocado pelo nome do componente, também com o comprimento e altura do componente, e finalmente, setando a URL onde será buscado os dados do gráfico, que é setado na variável $url.

Gerando o gráfico

Até este momento, nosso componente colocou o javascript e HTML para criar o gráfico, mas o gráfico estará vazio e causará um erro, porque a URL onde encontrar os dados também está vazia.

Então, vamos escrever o método que irá mostrar essa informação, e usaremos a API do PHP.

private function generateChart()

{

//Includes the open flash chart library

use_unit('openchart/php-ofc-library/open-flash-chart.php');

//Creates the title

$title = new title($this->Title);

//Creates the chart

$chart = new open_flash_chart();

$chart->set_title($title);

$sobject = new line();

//Generate som random data

$min = 0;

$max = 10;

$values = array();

for($i = 1; $i <= 10; $i++) $values[ ] = rand($min, $max);

$sobject->set_values($values);

//Add the serie to the chart

$chart->add_element($sobject);

if($this->_backgroundcolor != "") $chart->set_bg_colour($this->_backgroundcolor);

//Get the json code

$chartoutput = $chart->toPrettyString();

$url = getScriptFilename();

$dir = dirname($url);

$tempfile = $dir.'\chart.json';

file_put_contents($tempfile, $chartoutput);

}

Precisamos primeiro incluir a PHP API, usando use_unit() garante que o arquivo .php será encontrado, que está na pasta VCL.

Depois disso, criaremos o título com o valor da propriedade Title, criamos o objeto open_flash_chart e setamos o título. Agora, criaremos um gráfico de linha simples e setaremos alguns dados aleatórios, isto é unicamente pra propósito de testes.

E finalmente, teremos os dados do gráfico em uma string, e salvaremos em um arquivo chamado chart.json na mesma pasta onde o script  .php do usuário está. Isto é para propósito de design-time e nos próximos artigos, você verá como é feita essa propriedade em run-time.

A getScriptFilename é uma função de ajuda e retorna o nome do script que está sendo executado.

Agora é hora de modificar dumpHeaderCode() para chamar o objeto flash para usar o arquivo chart.json e ler as informações do gráfico.

Modifique esta linha:

$url = '';

Por essas duas linhas:

$this->generateChart();

$url = 'chart.json';

E com isto, você posiciona o componente no designer, e receberá um gráfico básico de linhas com informações randômicas:

Hide image

Server Response from: ETNASC01