<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Default render and css skin </title> <link rel="stylesheet" href="book.css" type="text/css" /> <meta name="generator" content="DocBook XSL Stylesheets V1.69.1" /> <link rel="start" href="index.html" title="HTML_Progress2 Manual" /> <link rel="up" href="ch09.html" title= "Chapter 9. Quick Start with HTML_Progress2_Generator" /> <link rel="prev" href="ch09.html" title= "Chapter 9. Quick Start with HTML_Progress2_Generator" /> <link rel="next" href="ch09s03.html" title="Template integration" /> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; } :link { color: #0000FF } :visited { color: #840084 } :active { color: #0000FF } div.c3 {margin-left: 0.5in; margin-right: 0.5in;} div.c2 {font-family: monospace;} h2.c1 {clear: both} /*]]>*/ </style> </head> <body> <table class="progress2Header"> <tr> <td> <img src="img/pear_progress2.gif" align="left" alt= "PEAR Progress2 logo" /> <h1> HTML_Progress2 : The Definitive Guide </h1> <div class="navheader"> <table width="100%" summary="Navigation header"> <tr> <th colspan="3" align="center"> Default render and css skin </th> </tr> <tr> <td width="20%" align="left"> <a accesskey="p" href="ch09.html">Prev</a> </td> <th width="60%" align="center"> Chapter 9. Quick Start with HTML_Progress2_Generator </th> <td width="20%" align="right"> <a accesskey="n" href="ch09s03.html">Next</a> </td> </tr> </table> </div> </td> </tr> </table> <div class="sect1" lang="en" xml:lang="en"> <div class="titlepage"> <h2 class="title c1"> <a name="generator.default" id="generator.default"></a>Default render and css skin </h2> </div> <p> Without any change, we can get a decent progress generator tabbed wizard such as : </p> <div class="screenshot"> <img src="img/generator0.png" alt="" /> </div> <p> Color, font, size and position are defined by default in stylesheet <span class="bold"><strong>default.css</strong></span> you can find into PEAR HTML_Progress2 data directory. </p> <p> As you can see in source code below, there are no difficulty. </p> <div class="php c2"> <ol> <li class="li1"> <div class="de1"> <span class="kw2"><?php</span> </div> </li> <li class="li1"> <div class="de1"> <span class="kw1">require_once</span> <span class= "st0">'HTML/Progress2/Generator.php'</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1 ln-xtra"> <div class="de1"> <span class="kw3">session_start</span><span class= "br0">(</span><span class="br0">)</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1 ln-xtra"> <div class="de1"> <span class="re1">$tabbed</span> <span class="sy0">=</span> <span class="kw2">new</span> HTML_Progress2_Generator<span class= "br0">(</span><span class="br0">)</span><span class= "sy0">;</span> </div> </li> <li class="li1 ln-xtra"> <div class="de1"> <span class="re1">$tabbed</span><span class= "sy0">-></span><span class="me1">run</span><span class= "br0">(</span><span class="br0">)</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> <span class="kw2">?></span> </div> </li> </ol> </div> <div class="variablelist"> <dl> <dt> <span class="term">Line 4 :</span> </dt> <dd> <p> <span class= "bold"><strong>HTML_Progress2_Generator</strong></span> does not start a session automatically, you should explicitly call <a class="external" href= "http://www.php.net/manual-lookup.php?pattern=session-start" title= "http://www.php.net/manual-lookup.php?pattern=session-start">session_start</a> before instantiating the controller class. A session is required to pass data between the tabbed multi-pages generator wizard. </p> </dd> <dt> <span class="term">Line 6 :</span> </dt> <dd> <p> Without any arguments, all defaults are applied on HTML_Progress2_Generator new instance construction. </p> <div class="variablelist"> <dl> <dt> <span class="term">$controllerName (argument 1 of class constructor)</span> </dt> <dd> <p> Name of generator tabbed wizard (QuickForm Controller). Default is <span class= "bold"><strong>ProgressGenerator</strong></span> </p> </dd> </dl> </div> <div class="variablelist"> <dl> <dt> <span class="term">$attributes (argument 2 of class constructor)</span> </dt> <dd> <p> List of renderer options. Default are </p> <div class="itemizedlist"> <ul type="disc"> <li> <span class="bold"><strong>preview</strong></span> action class = ActionPreview (HTML/Progress2/Generator/Preview.php) </li> <li> <span class="bold"><strong>display</strong></span> action class = ActionDisplay (HTML/Progress2/Generator/Default.php) </li> <li> <span class="bold"><strong>process</strong></span> action class = ActionProcess (HTML/Progress2/Generator/Process.php) </li> <li> <span class="bold"><strong>dump</strong></span> action class = false (no interactive debugging tools by default) </li> </ul> </div> </dd> </dl> </div> <div class="note c3"> <table border="0" summary="Note"> <tr> <td rowspan="2" align="center" valign="top" width="48"> <img alt="[Note]" src="img/admons/note.png" /> </td> <th align="left"> Note </th> </tr> <tr> <td align="left" valign="top"> Since version 2.1.0, you can use the singleton pattern <div class="php c2"> <ol> <li class="li1"> <div class="de1"> <span class="kw2"><?php</span> </div> </li> <li class="li1"> <div class="de1"> <span class="re1">$tabbed</span> <span class= "sy0">=&</span> HTML_Progress2_Generator<span class= "sy0">::</span><span class= "me2">singleton</span><span class= "br0">(</span><span class= "br0">)</span><span class="sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> <span class="kw2">?></span> </div> </li> </ol> </div>and of course, continue to use direct instanciation (backward compatibility is not break). </td> </tr> </table> </div> </dd> <dt> <span class="term">Line 7 :</span> </dt> <dd> <p> Catch all user actions (next, back, jump, apply, process) and display controller wizard contents. </p> </dd> </dl> </div> <p> Now we have seen basic usage, we will try to change the skin with only a new stylesheet. </p> <div class="php c2"> <ol> <li class="li1"> <div class="de1"> <span class="kw2"><?php</span> </div> </li> <li class="li1"> <div class="de1"> <span class="kw1">require_once</span> <span class= "st0">'HTML/Progress2/Generator.php'</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1"> <div class="de1"> <span class="kw3">session_start</span><span class= "br0">(</span><span class="br0">)</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1"> <div class="de1"> <span class="re1">$tabbed</span> <span class="sy0">=&</span> HTML_Progress2_Generator<span class="sy0">::</span><span class= "me2">singleton</span><span class="br0">(</span><span class= "br0">)</span><span class="sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1 ln-xtra"> <div class="de1"> <span class="re1">$tabbed</span><span class= "sy0">-></span><span class="me1">addActions</span><span class= "br0">(</span><span class="kw3">array</span><span class= "br0">(</span><span class="st0">'dump'</span> <span class= "sy0">=></span> <span class= "st0">'ActionDump'</span><span class="br0">)</span><span class= "br0">)</span><span class="sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1 ln-xtra"> <div class="de1"> <span class="re1">$css</span> <span class="sy0">=</span> <span class="kw3">dirname</span><span class= "br0">(</span><span class="kw2">__FILE__</span><span class= "br0">)</span> <span class="sy0">.</span> DIRECTORY_SEPARATOR <span class="sy0">.</span> <span class= "st0">'generator.css'</span><span class="sy0">;</span> </div> </li> <li class="li1 ln-xtra"> <div class="de1"> <span class="re1">$tabbed</span><span class= "sy0">-></span><span class="me1">addAction</span><span class= "br0">(</span><span class="st0">'display'</span><span class= "sy0">,</span> <span class="kw2">new</span> ActionDisplay<span class="br0">(</span><span class= "re1">$css</span><span class="br0">)</span><span class= "br0">)</span><span class="sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1"> <div class="de1"> <span class="re1">$tabbed</span><span class= "sy0">-></span><span class="me1">run</span><span class= "br0">(</span><span class="br0">)</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> <span class="kw2">?></span> </div> </li> </ol> </div> <div class="variablelist"> <dl> <dt> <span class="term">Line 8 :</span> </dt> <dd> <p> This line allow to add/activate the interactive debugging tools that can give you informations on: progress meter, wizard controller forms data, list of included files (see <a class= "external" href= "http://www.php.net/manual-lookup.php?pattern=get-included-files" title= "http://www.php.net/manual-lookup.php?pattern=get-included-files"> get_included_files</a>), list of declared classes (see <a class= "external" href= "http://www.php.net/manual-lookup.php?pattern=get-declared-classes" title= "http://www.php.net/manual-lookup.php?pattern=get-declared-classes"> get_declared_classes</a>), and list of generator actions defined. </p> </dd> <dt> <span class="term">Line 10 :</span> </dt> <dd> <p> $css defines the location of the new stylesheet to apply. This file will give a grey-orange look and feel such as : </p> <div class="screenshot"> <img src="img/generator0b.png" alt="" /> </div> <div class="note c3"> <table border="0" summary="Note"> <tr> <td rowspan="2" align="center" valign="top" width="48"> <img alt="[Note]" src="img/admons/note.png" /> </td> <th align="left"> Note </th> </tr> <tr> <td align="left" valign="top"> You may find this file into examples/generator of PEAR HTML_Progress2 docs directory. </td> </tr> </table> </div> </dd> <dt> <span class="term">Line 11 :</span> </dt> <dd> <p> This line overload the default display action set during the class instantiation. </p> <div class="important c3"> <table border="0" summary="Important"> <tr> <td rowspan="2" align="center" valign="top" width="48"> <img alt="[Important]" src="img/admons/important.png" /> </td> <th align="left"> Important </th> </tr> <tr> <td align="left" valign="top"> We are still using the QF default renderer, and the ActionDisplay class (see HTML/Progress2/Generator/Default.php). </td> </tr> </table> </div> <p> We have also possibility to get and set stylesheet with methods <code class="methodname">ActionDisplay::getStyleSheet()</code>, <code class="methodname">ActionDisplay::setStyleSheet()</code> like this : </p> <div class="php c2"> <ol> <li class="li1"> <div class="de1"> <span class="kw2"><?php</span> </div> </li> <li class="li1"> <div class="de1"> <span class="kw1">require_once</span> <span class= "st0">'HTML/Progress2/Generator.php'</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> <span class="kw1">require_once</span> <span class= "st0">'HTML/Progress2/Generator/Default.php'</span><span class="sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1"> <div class="de1"> <span class="kw3">session_start</span><span class= "br0">(</span><span class="br0">)</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1"> <div class="de1"> <span class="re1">$css</span> <span class="sy0">=</span> <span class="kw3">dirname</span><span class= "br0">(</span><span class="kw2">__FILE__</span><span class= "br0">)</span> <span class="sy0">.</span> DIRECTORY_SEPARATOR <span class="sy0">.</span> <span class= "st0">'generator.css'</span><span class="sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1"> <div class="de1"> <span class="re1">$display</span> <span class= "sy0">=</span> <span class="kw2">new</span> ActionDisplay<span class="br0">(</span><span class= "br0">)</span><span class="sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> <span class="re1">$display</span><span class= "sy0">-></span><span class= "me1">setStyleSheet</span><span class= "br0">(</span><span class="re1">$css</span><span class= "br0">)</span><span class="sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1"> <div class="de1"> <span class="co1">// var_dump($display->getStyleSheet(true));</span> </div> </li> <li class="li1"> <div class="de1"> <span class="co1">// var_dump($display->getStyleSheet());</span> </div> </li> <li class="li1"> <div class="de1"> </div> </li> <li class="li1"> <div class="de1"> <span class="re1">$tabbed</span> <span class= "sy0">=&</span> HTML_Progress2_Generator<span class= "sy0">::</span><span class= "me2">singleton</span><span class= "br0">(</span><span class="br0">)</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> <span class="re1">$tabbed</span><span class= "sy0">-></span><span class= "me1">addAction</span><span class= "br0">(</span><span class="st0">'display'</span><span class="sy0">,</span> <span class="re1">$display</span><span class= "br0">)</span><span class="sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> <span class="re1">$tabbed</span><span class= "sy0">-></span><span class="me1">run</span><span class= "br0">(</span><span class="br0">)</span><span class= "sy0">;</span> </div> </li> <li class="li1"> <div class="de1"> <span class="kw2">?></span> </div> </li> </ol> </div> </dd> </dl> </div> </div> <table class="progress2Footer"> <tr> <td align="left"> HTML_Progress2 : The Definitive Guide </td> <td align="right"> v 2.4.0 : April 20, 2007 </td> </tr> </table> <div class="navfooter"> <hr /> <table width="100%" summary="Navigation footer"> <tr> <td width="40%" align="left"> <a accesskey="p" href="ch09.html">Prev</a> </td> <td width="20%" align="center"> <a accesskey="u" href="ch09.html">Up</a> </td> <td width="40%" align="right"> <a accesskey="n" href="ch09s03.html">Next</a> </td> </tr> <tr> <td width="40%" align="left" valign="top"> Chapter 9. Quick Start with HTML_Progress2_Generator </td> <td width="20%" align="center"> <a accesskey="h" href="index.html">Home</a> </td> <td width="40%" align="right" valign="top"> Template integration </td> </tr> </table> </div> </body> </html>