Home / Developer Center / Dreamweaver Developer Center /

Dreamweaver Article

Now that we've been able to generate server-side graphics, how can we use them to our benefit in design view? Through the extensibility layer, we can create server behaviors that have associated translators. For more information on extensibility, please see Chapter 6, Dreamweaver Extensibility. Translators are search patterns that render a portion of code between the body tags in the design view as an alternative form of HTML.

We can begin our server behavior with two participants (code blocks): one for the includes that is to sit on the top of the page and the other to be the chart code that is to be inserted after the cursor (after the selection in the server behavior builder).

Participant 1 (Relative to <HTML> tag, top of file):

<?php 
require_once("@@includePath@@jpgraph.php");
require_once("@@includePath@@jpgraph_bar.php");
?>

Participant 2 (Relative to selection, after selection):

<?php 
$datay=array();
$labelx=array();
do { 
   array_push($datay, $row_@@RecordsetName@@['@@yValues@@']);
   array_push($labelx, $row_@@RecordsetName@@['@@xLabels@@']);
} while ($row_@@RecordsetName@@ = mysql_fetch_assoc($@@RecordsetName@@)); 
$graph = new Graph(@@chartWidth@@,@@chartHeight@@, 'auto');
$graph->SetScale("textlin");
$graph->yaxis->scale->SetGrace(7);
$graph->img->SetMargin(50,30,40,60);
$graph->title->Set("@@chartTitle@@");
$graph->yaxis->title->Set("@@yAxisTitle@@");
$graph->xaxis->title->Set("@@xAxisTitle@@");
$bplot = new BarPlot($datay);
$graph->xaxis->SetTickLabels($labelx);
$graph->Add($bplot);
$bplot->SetFillColor("@@fillColor@@");
$graph->Stroke(GenImgName());
echo("<img src=\"" . GenImgName()."?" . microtime() . "\" border=0>");
?>

We then have the server behavior builder loaded with the two participants:

We can then bind the RecordsetName, yValues, and xLabels parameters to a recordset and its columns.

Once we commit the behavior we can use it as a reusable element in Dreamweaver. When we apply the behavior however, we get the PHP shield.

At this point we can use a translator to translate participant two (the part containing the image code) into an image placeholder. If we open the server behavior, we can add a translator. The server behavior will be located in your server behaviors directory. Open the JpGraphBarChart_mainBlock.edml (or what you’ve named the code participant in the document body) file for participant two, since that is the code we wish to translate.

We need to add this translation code to the <participant> node.

<translator priority="500">
  <searchPatterns>
    <searchPattern paramNames="*someval*" isOptional="false" 
limitSearch="all"><![CDATA*someRegEx*/i]]></searchPattern>
 </searchPatterns>
   <translations>
     <translation whereToSearch="directive" translationType="as is">
       <display><![CDATA[<img src="" alt="" name="@@chartTitle@@" width="@@chartWidth@@" 
height="@@chartHeight@@" style="background-color: @@fillColor@@">]]></display>
     </translation>
  </translations>
</translator>

The two parts of note are the <searchpattern> and <display> nodes. The <searchpattern> node tells the translator what to translate. You’ll see a search pattern in the file that was generated by the server behavior builder. It’s the long string encased in a CDATA structure. Replace someval and someRegEx with the parameter names and the regular expression from the original server behavior. The display node tells the translator what to render. In this case we are using an image placeholder. We capture the size of the image, the color of the bars, and the title of the chart. Once saved into the server behavior and after a restart of Dreamweaver, we see the placeholder in design view.

We can use translators in all kinds of server-side graphics. Using an image placeholder allows us to render more effectively in the design view what our actual page will look like when displayed.

As with the counter example, the generation of server-side graphics is expensive in terms of CPU requirements. One area where we can speed up our application is the caching of the chart. In most applications the server-side chart does not need to be real time. We could add in some logic to only generate the chart once a day. We could alternatively have an update button on the web site to force the regeneration of the chart. In all other cases we’d show the one on disk. Each application will have its own specific requirements.

The other area that affects performance is the size of the chart. A 300x150 chart uses much less memory than a 600x300 chart. Use the smallest size you can while preserving the clarity and integrity of the chart.

Summary
In this chapter we've explored the basics of graphics. We've seen different types of image formats, in particular GIF, JPG, and PNG. We've also seen how PHP interprets images in memory with a coordinate system. We've covered transparency, an important benefit in Internet graphics.

We took a short look at the GD API and focused on four main areas:

The Basic Functions
Working with Color
Creating Primitive Shapes
Working with Text

We then used those functions in several applications. We looked at a design time use of GD in generating buttons for a toolbar on a web site. We compared and contrasted a GD- and non GD-based approach to implementing a counter. We concluded with a server-generated graph with the JpGraph library.

We then explored how to translate server-side code into a renderable entity in design view. We used a translator to extract the relevant data and placed it into an image placeholder. Then design view rendered a box to fill the space of the actual graphic.

This article is an excerpt of chapter 12 of “Dreamweaver MX: Advanced PHP Web Development” by Gareth Downes-Powell, Tim Green, Allan Kent, Bruno Mairlot, George McLachlan, Dan Radigan, published January 2003 by glasshaus, isbn 1904151191, as part of the dreamweaver pro series. All rights reserved.