2013-06-13 18:48:23 +08:00
|
|
|
# Rendering
|
|
|
|
|
|
2017-07-15 02:08:32 -07:00
|
|
|
Rendering is performed using the `DebugBar\JavascriptRenderer` class. It contains
|
2013-06-13 18:48:23 +08:00
|
|
|
all the useful functions to included the needed assets and generate a debug bar.
|
|
|
|
|
|
|
|
|
|
$renderer = $debugbar->getJavascriptRenderer();
|
|
|
|
|
|
|
|
|
|
## Assets
|
|
|
|
|
|
|
|
|
|
The debug bar relies on some css and javascript files which needs to be included
|
2014-01-16 21:41:41 +00:00
|
|
|
into your webpage. They are located in the *src/DebugBar/Resources* folder.
|
2017-07-15 02:08:32 -07:00
|
|
|
Additionally, asset providers may provide inline assets that have to be embedded
|
|
|
|
|
directly in the HTML. This can be done in four ways:
|
2013-06-13 18:48:23 +08:00
|
|
|
|
|
|
|
|
- Using `JavascriptRenderer::renderHead()` which will returns a string with
|
|
|
|
|
the needed script and link tags
|
2014-01-16 21:41:41 +00:00
|
|
|
- Using [Assetic](https://github.com/kriswallsmith/assetic) and
|
2013-06-13 18:48:23 +08:00
|
|
|
`JavascriptRenderer::getAsseticCollection()`
|
2017-07-15 02:08:32 -07:00
|
|
|
- Dumping the assets yourself using `JavascriptRenderer::dumpCssAssets()`,
|
|
|
|
|
`JavascriptRenderer::dumpJsAssets()`, and `JavascriptRenderer::dumpHeadAssets()`.
|
|
|
|
|
- Retrieving filenames and inline content of assets using `JavascriptRenderer::getAssets()`
|
2013-08-14 16:50:51 +10:00
|
|
|
and doing something with it
|
2013-06-13 18:48:23 +08:00
|
|
|
|
|
|
|
|
I would recommend using the second method as Assetic is a very powerful asset
|
2013-06-19 12:05:16 +09:00
|
|
|
manager but the other methods are provided to quickly integrate the debug bar
|
2013-08-14 16:50:51 +10:00
|
|
|
into any projects.
|
2013-06-13 18:48:23 +08:00
|
|
|
|
|
|
|
|
You can define the base url of your assets using `setBaseUrl()`. This is needed
|
2013-06-19 12:05:16 +09:00
|
|
|
in 99% of cases.
|
2013-06-13 18:48:23 +08:00
|
|
|
|
|
|
|
|
Using `renderHead()`:
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
...
|
|
|
|
|
<?php echo $renderer->renderHead() ?>
|
|
|
|
|
...
|
|
|
|
|
</head>
|
|
|
|
|
...
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
Using Assetic:
|
|
|
|
|
|
2017-07-15 02:08:32 -07:00
|
|
|
list($cssCollection, $jsCollection, $inlineHeadCollection) = $renderer->getAsseticCollection();
|
2013-06-13 18:48:23 +08:00
|
|
|
|
2013-06-19 12:05:16 +09:00
|
|
|
Dumping the assets:
|
|
|
|
|
|
|
|
|
|
header('Content-Type', 'text/javascript');
|
|
|
|
|
$renderer->dumpJsAssets();
|
|
|
|
|
|
2013-08-14 16:50:51 +10:00
|
|
|
Retrieving the assets:
|
|
|
|
|
|
2017-07-15 02:08:32 -07:00
|
|
|
list($cssFiles, $jsFiles, $inlineCss, $inlineJs, $inlineHead) = $renderer->getAssets();
|
2013-08-14 16:50:51 +10:00
|
|
|
|
2013-06-13 18:48:23 +08:00
|
|
|
Note that you can only use the debug bar assets and manage the dependencies by yourself
|
2013-08-14 16:50:51 +10:00
|
|
|
using `$renderer->setIncludeVendors(false)`. Instead of false, *css* or *js* may be used
|
|
|
|
|
to only include css or js assets of vendors.
|
2013-06-13 18:48:23 +08:00
|
|
|
|
2013-09-19 18:05:12 -04:00
|
|
|
## Managing jQuery conflicts
|
|
|
|
|
|
|
|
|
|
When the debug bar script is included, it will be bound to the current jQuery object.
|
|
|
|
|
The default action is to call `jQuery.noConflict(true)` after this is done.
|
|
|
|
|
|
|
|
|
|
This has two implications:
|
|
|
|
|
|
|
|
|
|
- jQuery won't be available anymore if you didn't include your own version
|
|
|
|
|
before including the debug bar's vendors
|
|
|
|
|
- your own version will be restored.
|
|
|
|
|
|
|
|
|
|
If you use `JavascriptRenderer::setIncludeVendors()` to disable the inclusion of js
|
|
|
|
|
vendors (ie. jquery), `jQuery.noConflict(true)` won't be called.
|
|
|
|
|
|
|
|
|
|
You can manage whether `jQuery.noConflict(true)` should be called or not using
|
|
|
|
|
`JavascriptRenderer::setEnableJqueryNoConflict()`.
|
|
|
|
|
|
2013-06-13 18:48:23 +08:00
|
|
|
## The javascript object
|
|
|
|
|
|
|
|
|
|
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...
|
|
|
|
|
|
2014-01-16 21:41:41 +00:00
|
|
|
Data collectors can provide their own controls when implementing the
|
2013-06-13 18:48:23 +08:00
|
|
|
`DebugBar\DataCollector\Renderable` interface as explained in the Collecting Data chapter.
|
|
|
|
|
|
|
|
|
|
Thus in almost all cases, you should only have to use `render()` right away:
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
...
|
|
|
|
|
<body>
|
|
|
|
|
<?php echo $renderer->render() ?>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
2013-08-16 00:52:32 +01:00
|
|
|
This will print the initialization code for the toolbar and the dataset for the request.
|
2013-06-13 18:48:23 +08:00
|
|
|
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` as
|
|
|
|
|
the first argument of ̀render()`.
|
|
|
|
|
|
|
|
|
|
<p>my ajax content</p>
|
|
|
|
|
<?php echo $renderer->render(false) ?>
|
|
|
|
|
|
|
|
|
|
### Controlling object initialization
|
|
|
|
|
|
|
|
|
|
You can further control the initialization of the javascript object using `setInitialization()`.
|
2017-07-15 02:08:32 -07:00
|
|
|
It takes a bitwise value made out of the constants `INITIALIZE_CONSTRUCTOR` and `INITIALIZE_CONTROLS`.
|
2013-06-13 18:48:23 +08:00
|
|
|
The first one controls whether to initialize the variable (ie. `var debugbar = new DebugBar()`). The
|
|
|
|
|
second one whether to initialize all the controls (ie. adding tab and indicators as well as data mapping).
|
|
|
|
|
|
|
|
|
|
You can also control the class name of the object using `setJavascriptClass()` and the name of
|
|
|
|
|
the instance variable using `setVariableName()`.
|
|
|
|
|
|
2013-08-14 16:50:51 +10:00
|
|
|
Let's say you have subclassed `PhpDebugBar.DebugBar` in javascript to do your own initialization.
|
2013-06-13 18:48:23 +08:00
|
|
|
Your new object is called `MyDebugBar`.
|
|
|
|
|
|
|
|
|
|
$renderer->setJavascriptClass("MyDebugBar");
|
|
|
|
|
$renderer->setInitialization(JavascriptRenderer::INITIALIZE_CONSTRUCTOR);
|
|
|
|
|
// ...
|
|
|
|
|
echo $renderer->render();
|
|
|
|
|
|
|
|
|
|
This has the result of printing:
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var phpdebugbar = new MyDebugBar();
|
|
|
|
|
phpdebugbar.addDataSet({ ... });
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
Using `setInitialization(0)` will only render the addDataSet part.
|
|
|
|
|
|
|
|
|
|
### Defining controls
|
|
|
|
|
|
|
|
|
|
Controls can be manually added to the debug bar using `addControl($name, $options)`. You should read
|
|
|
|
|
the Javascript bar chapter before this section.
|
|
|
|
|
|
|
|
|
|
`$name` will be the name of your control and `$options` is a key/value pair array with these
|
|
|
|
|
possible values:
|
|
|
|
|
|
|
|
|
|
- *icon*: icon name
|
|
|
|
|
- *tooltip*: string
|
|
|
|
|
- *widget*: widget class name
|
|
|
|
|
- *map*: a property name from the data to map the control to
|
|
|
|
|
- *default*: a js string, default value of the data map
|
2013-08-08 15:45:38 +10:00
|
|
|
- *tab*: class name of the tab object (to use a custom tab object)
|
|
|
|
|
- *indicator*: class name of the indicator object (to use a custom indicator object)
|
2014-02-14 12:40:15 -03:00
|
|
|
- *position*: position of the indicator ('left' of 'right', default to 'right')
|
2013-06-13 18:48:23 +08:00
|
|
|
|
2014-01-16 21:41:41 +00:00
|
|
|
At least *icon* or *widget* are needed (unless *tab* or *indicator* are specified). If *widget* is
|
2013-08-08 15:45:38 +10:00
|
|
|
specified, a tab will be created, otherwise an indicator. Any other options is also passed to the tab
|
|
|
|
|
or indicator.
|
2013-06-13 18:48:23 +08:00
|
|
|
|
|
|
|
|
$renderer->addControl('messages', array(
|
|
|
|
|
"widget" => "PhpDebugBar.Widgets.MessagesWidget",
|
|
|
|
|
"map" => "messages",
|
|
|
|
|
"default" => "[]"
|
|
|
|
|
));
|
2013-08-12 12:02:32 +10:00
|
|
|
|
|
|
|
|
You can disable a control using `disableControl($name)` and ignore any controls provided by
|
2014-01-16 21:41:41 +00:00
|
|
|
a collector using `ignoreCollector($name)`.
|
