<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>PHP Debug Bar</title>
<link type="text/css" rel="stylesheet" href="/docs/assets/css/reset.css">
<link type="text/css" rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/sunburst.min.css">
<link type="text/css" rel="stylesheet" href="/docs/assets/css/docs.css">
<link type="text/css" rel="stylesheet" href="/docs/assets/css/print.css" media="print">
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="/docs/assets/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<script type="text/javascript" src="/docs/assets/js/lunr.min.js"></script>
<script type="text/javascript">var BASE_URL = "/docs/";</script>
<script type="text/javascript" src="/docs/assets/js/viewer.js"></script>
</head>
<body>
<div id="page">
<a name="top" />
<header id="header">
<h1><a href="/docs/">PHP Debug Bar</a></h1>
</header>
<div id="sidebar">
<form action="/docs/search.html"><input id="search" type="text" placeholder="Search" name="q" /></form>
<nav id="toc">
<ol>
<li>
<a href="/docs/readme.html#php-debug-bar">PHP Debug Bar</a>
<ol>
<li>
<a href="/docs/readme.html#installation">Installation</a>
</li>
<li>
<a href="/docs/readme.html#quick-start">Quick start</a>
</li>
</ol>
</li>
<li>
<a href="/docs/data-collectors.html#collecting-data">Collecting Data</a>
<ol>
<li>
<a href="/docs/data-collectors.html#using-collectors">Using collectors</a>
</li>
<li>
<a href="/docs/data-collectors.html#creating-collectors">Creating collectors</a>
</li>
</ol>
</li>
<li>
<a href="/docs/rendering.html#rendering">Rendering</a>
<ol>
<li>
<a href="/docs/rendering.html#assets">Assets</a>
</li>
<li>
<a href="/docs/rendering.html#the-javascript-object">The javascript object</a>
</li>
</ol>
</li>
<li>
<a href="/docs/javascript-bar.html#javascript-bar">Javascript Bar</a>
<ol>
<li>
<a href="/docs/javascript-bar.html#tabs-and-indicators">Tabs and indicators</a>
</li>
<li>
<a href="/docs/javascript-bar.html#data-mapping">Data mapping</a>
</li>
<li>
<a href="/docs/javascript-bar.html#datasets">Datasets</a>
</li>
<li>
<a href="/docs/javascript-bar.html#widgets">Widgets</a>
</li>
<li>
<a href="/docs/javascript-bar.html#custom-tabs-and-indicators">Custom tabs and indicators</a>
</li>
</ol>
</li>
<li>
<a href="/docs/base-collectors.html#base-collectors">Base collectors</a>
<ol>
<li>
<a href="/docs/base-collectors.html#messages">Messages</a>
</li>
<li>
<a href="/docs/base-collectors.html#timedata">TimeData</a>
</li>
<li>
<a href="/docs/base-collectors.html#exceptions">Exceptions</a>
</li>
<li>
<a href="/docs/base-collectors.html#pdo">PDO</a>
</li>
<li>
<a href="/docs/base-collectors.html#requestdatacollector">RequestDataCollector</a>
</li>
<li>
<a href="/docs/base-collectors.html#aggregatedcollector">AggregatedCollector</a>
</li>
<li>
<a href="/docs/base-collectors.html#others">Others</a>
</li>
</ol>
</li>
<li>
<a href="/docs/bridge-collectors.html#bridge-collectors">Bridge collectors</a>
<ol>
<li>
<a href="/docs/bridge-collectors.html#cachecache">CacheCache</a>
</li>
<li>
<a href="/docs/bridge-collectors.html#doctrine">Doctrine</a>
</li>
<li>
<a href="/docs/bridge-collectors.html#monolog">Monolog</a>
</li>
<li>
<a href="/docs/bridge-collectors.html#propel">Propel</a>
</li>
<li>
<a href="/docs/bridge-collectors.html#slim">Slim</a>
</li>
<li>
<a href="/docs/bridge-collectors.html#swift-mailer">Swift Mailer</a>
</li>
<li>
<a href="/docs/bridge-collectors.html#twig">Twig</a>
</li>
</ol>
</li>
</ol>
</nav>
<nav id="links">
<ul>
</ul>
</nav>
</div>
<div id="content">
<a name="rendering"></a><h1>Rendering</h1>
<p>Rendering is performed using the `DebugBar\JavascriptRenderer̀ class. It contains
all the useful functions to included the needed assets and generate a debug bar.</p>
<pre><code>$renderer = $debugbar->getJavascriptRenderer();</code></pre>
<a name="assets"></a><h2>Assets</h2>
<p>The debug bar relies on some css and javascript files which needs to be included
into your webpage. They are located in the <em>src/DebugBar/Resources</em> folder.
This can be done in three ways:</p>
<ul>
<li>Using <code>JavascriptRenderer::renderHead()</code> which will returns a string with
the needed script and link tags</li>
<li>Using <a href="https://github.com/kriswallsmith/assetic">Assetic</a> and
<code>JavascriptRenderer::getAsseticCollection()</code></li>
<li>Dumping the assets yourself using <code>JavascriptRenderer::dumpCssAssets()</code> and
<code>JavascriptRenderer::dumpJsAssets()</code></li>
</ul>
<p>I would recommend using the second method as Assetic is a very powerful asset
manager but the other methods are provided to quickly integrate the debug bar
into any projets.</p>
<p>You can define the base url of your assets using <code>setBaseUrl()</code>. This is needed
in 99% of cases.</p>
<p>Using <code>renderHead()</code>:</p>
<pre><code><html>
<head>
...
<?php echo $renderer->renderHead() ?>
...
</head>
...
</html></code></pre>
<p>Using Assetic:</p>
<pre><code>list($cssCollection, $jsCollection) = $renderer->getAsseticCollection();</code></pre>
<p>Dumping the assets:</p>
<pre><code>header('Content-Type', 'text/javascript');
$renderer->dumpJsAssets();</code></pre>
<p>Note that you can only use the debug bar assets and manage the dependencies by yourself
using <code>$renderer->setIncludeVendors(false)</code>.</p>
<a name="the-javascript-object"></a><h2>The javascript object</h2>
<p>The renderer will generate all the needed code for your debug bar. This means
initializing the DebugBar js object, adding tabs and indicators, defining a data map, etc...</p>
<p>Data collectors can provide their own controls when implementing the
<code>DebugBar\DataCollector\Renderable</code> interface as explained in the Collecting Data chapter.</p>
<p>Thus in almost all cases, you should only have to use <code>render()</code> right away:</p>
<pre><code><html>
...
<body>
<?php echo $renderer->render() ?>
</body>
</html></code></pre>
<p>This will print the initilization code for the toolbar and the dataset for the request.
When you are performing AJAX requests, you do not want to initialize a new toolbar but
add the dataset to the existing one. You can disable initialization using ̀false<code>as
the first argument of ̀render()</code>.</p>
<pre><code><p>my ajax content</p>
<?php echo $renderer->render(false) ?></code></pre>
<a name="controlling-object-initialization"></a><h3>Controlling object initialization</h3>
<p>You can further control the initialization of the javascript object using <code>setInitialization()</code>.
It takes a bitwise value made out of the constants ̀INITIALIZE_CONSTRUCTOR<code>and</code>INITIALIZE_CONTROLS<code>.
The first one controls whether to initialize the variable (ie.</code>var debugbar = new DebugBar()`). The
second one whether to initialize all the controls (ie. adding tab and indicators as well as data mapping).</p>
<p>You can also control the class name of the object using <code>setJavascriptClass()</code> and the name of
the instance variable using <code>setVariableName()</code>.</p>
<p>Let's say you have subclassed <code>PhpDebugBar.DebugBar</code> in javascript to do your own initilization.
Your new object is called <code>MyDebugBar</code>.</p>
<pre><code>$renderer->setJavascriptClass("MyDebugBar");
$renderer->setInitialization(JavascriptRenderer::INITIALIZE_CONSTRUCTOR);
// ...
echo $renderer->render();</code></pre>
<p>This has the result of printing:</p>
<pre><code><script type="text/javascript">
var phpdebugbar = new MyDebugBar();
phpdebugbar.addDataSet({ ... });
</script></code></pre>
<p>Using <code>setInitialization(0)</code> will only render the addDataSet part.</p>
<a name="defining-controls"></a><h3>Defining controls</h3>
<p>Controls can be manually added to the debug bar using <code>addControl($name, $options)</code>. You should read
the Javascript bar chapter before this section.</p>
<p><code>$name</code> will be the name of your control and <code>$options</code> is a key/value pair array with these
possible values:</p>
<ul>
<li><em>icon</em>: icon name</li>
<li><em>tooltip</em>: string</li>
<li><em>widget</em>: widget class name</li>
<li><em>map</em>: a property name from the data to map the control to</li>
<li><em>default</em>: a js string, default value of the data map</li>
<li><em>tab</em>: class name of the tab object (to use a custom tab object)</li>
<li><em>indicator</em>: class name of the indicator object (to use a custom indicator object)</li>
</ul>
<p>At least <em>icon</em> or <em>widget</em> are needed (unless <em>tab</em> or <em>indicator</em> are specified). If <em>widget</em> is
specified, a tab will be created, otherwise an indicator. Any other options is also passed to the tab
or indicator.</p>
<pre><code>$renderer->addControl('messages', array(
"widget" => "PhpDebugBar.Widgets.MessagesWidget",
"map" => "messages",
"default" => "[]"
));</code></pre>
<p>You can disable a control using <code>disableControl($name)</code> and ignore any controls provided by
a collector using <code>ignoreCollector($name)</code>.</p>
</div>
<footer id="footer">
Powered by <a href="http://github.com/maximebf/beautiful-docs">beautiful-docs</a> -
<a href="#top">Back to top</a> - <a href="/docs/all.html">Everything on a single page</a>
- <a href="?print=1">Print current page</a> - <a href="/docs/all.html?print=1">Print all pages</a>
</footer>
</div>
</body>
</html>