VCL for PHP チャートコンポーネント - パート4 - スケルトン

By: Tomohiro Takahashi

Abstract: この記事では、VCL for PHP チャートコンポーネントの作成について解説します。なお、この記事はDelphi for PHPの開発者であるJose Leon氏のブログを再構成したものです。

VCL for PHP チャートコンポーネント - スケルトン

この記事では、コンポーネントの基本的なスケルトン(骨組み)を作成しようと思います。プロパティを追加し、ダミーの情報を使用してコンポーネントをレンダリングします。

プロパティの追加

最初の記事では、要件を収集してタスクの一覧を設定しました。これから、提供したい全てのプロパティを追加して、ユーザーがコンポーネントをカスタマイズできるようにしていきます。

その際、[編集]|[Publishedプロパティの追加]を使用して、コーディング作業を軽減できます。プロパティ名とデフォルト値を入力する必要があります。[OK]ボタンを押すと、コードエディタのカーソルのある位置に、コードが追加されます。

例えば、「Test」という名前のプロパティをデフォルト値「1」で追加すると、エディタに次のようなコードが挿入されます:

protected $_test=1;

function getTest() { return $this->_test; }
function setTest($value) { $this->_test=$value; }
function defaultTest() { return 1; }

計画した全てのプロパティを追加するたびにPublishedプロパティの追加ウィザードを使用してください。ただしこの記事では、文字列や数値のような単純なプロパティだけに限定します。次の記事の準備として、配列型のSeriesプロパティも追加します。完了すると以下のようなコードになります:

<?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()
    {
    
    }
}

?>

コントロールのコードを出力する

次のステップは、ブラウザにコントロールのコードをレンダリングすることです。そのためにオーバーライドする主要なメソッドは、dumpContents() です。このコンポーネントではdivタグをレンダリングする必要があり、Flashがその中にチャートを表示するために使用されます。これは、Open Flash Chart のドキュメントで提供されている基本的なサンプルで確認できます。

https://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>

単純にdivタグを出力しますが、一意な名前を使用する必要があります。同じページに複数のチャートを配置すると、それぞれ独自のdivタグを持たなければならないことを思い出してください。コンポーネントのNameプロパティは、同じページ上で一意であるはずです:

function dumpContents()
{
   //Div where the chart will be inserted
   echo "<div id=\"$this->Name\"></div>";
}

ライブラリのサンプルを見ると、HTMLドキュメントのHEAD部に、swfobject.jsのインクルードやFlashを埋め込むためのswfobjectへの呼び出しのようなコードがあるのが分かります。次にオーバーライドするメソッドはdumpHeaderCode() です。このメソッドは、ドキュメントのHEAD部をレンダリングする時、Pageコンポーネントによって呼び出されます。

    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
    }

最初のブロックは、swfobject.jsをインクルードするJavascriptを出力しています。このメソッドは、フォーム上に存在するコンポーネントのインスタンスの数だけ呼び出されることを思い出してください。このコードが複数回出力されるのを防ぐための方法を見つけるべきです。このような理由から、このブロックはOPENFLASHCHARTが定義されているかどうかをチェックすることで保護されており、もし定義されていない場合にはコードを出力し、定義されている場合には単純に次に進みます。

他にチェックすべき項目は、VCL_HTTP_PATH定数です。これは、VCL for PHPライブラリで定義されており、どこにVCLライブラリが存在していたとしてもその場所を指す正しいHTTPパスを含んでいます。これが位置を気にせずにパスを指定する簡単な方法です。

その後、Flashオブジェクトのためのコードを出力しています。その際、埋め込むdivタグの名前にコンポーネントの名前を設定して、コンポーネントの幅と高さも出力し、最後に$url変数に設定されているグラフィック用のデータを探すためのURLを設定しています。

チャートの生成

この時点でコンポーネントはチャートを生成するための正しいJavascriptとHTMLを出力します。しかしチャートは空っぽで、エラーが発生します。なぜなら、チャート情報を見つけるためのURLも空だからです。

それでは、その情報を出力するメソッドを記述しましょう。提供されているPHP用APIを使用します。

    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);
    }

最初に、VCLフォルダにある.phpファイルが確実に見つかるようにuse_unit()を使用して、PHP用APIをインクルードする必要があります。

その後でTitleプロパティの値を使用してtitleを生成し、open_flash_chartオブジェクトを生成してそのtitleをセットします。そして、単純なラインのシリーズを作成し、ランダムなデータをセットします。これは単にテスト目的のためのものです。

そして最後に、チャート情報を文字列として取得し、ユーザーが作業しているスクリプトと同じフォルダにchart.jsonというファイル名で保存します。これはデザイン時のためのもので、後の記事では実行時にどのように処理されるのか解説します。

getScriptFilenameは、実行されているスクリプトの名前を返すヘルパー関数です。

dumpHeaderCode()を変更して、Flashオブジェクトがchart.jsonファイルを使用してチャート情報を取得するよう指示します。

この行を:

        $url = '';

次の2行に変更します:

        $this->generateChart();
        $url = 'chart.json';

これで、デザイナー上にコンポーネントを配置すると、ランダムな情報を使った基本的なラインチャートが表示されます:

Hide image

Server Response from: ETNASC03