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:
Connect with Us