Jak psát rozšíření pro Debugger Bar

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
David Grudl
Nette Core | 7780
+
+1
-

Vytvořit nové rozšíření pro Debugger Bar není nic složitého. Vytvoříte objekt implementující rozhraní Nette\Diagnostics\IBarPanel, které má dvě metody getTab() a getPanel(). Metody musí vrátit HTML kód tabu (malý popisek zobrazený přímo na Baru) a panelu. Pokud getPanel() nic nevrátí, zobrazí se jen samotný popisek. Pokud getTab() nic nevrátí, nezobrazí se vůbec nic a ani getPanel() se už nevolá.

Rozšíření se přidá do baru příkazem Debugger::$bar->addPanel(new NasNovyPanel);.

Příklad:

class ExamplePanel extends Nette\Object implements Nette\Diagnostics\IBarPanel
{

	public function getTab()
	{
		return ...;
	}

	public function getPanel()
	{
		return ...;
	}

}

// registrace
Debugger::$bar->addPanel(new ExamplePanel);

Html kód tabu

Měl by vypadat přibližně takto:

<span title="Vysvětlující popisek">
<img src="data:image/png;base64,<zakodovany obrazek>" />
Titulek
</span>

Pro zakódování obrázků můžete použít funkci Nette\Templating\DefaultHelpers::dataStream(). Pokud není vysvětlující popisek potřeba, lze SPAN vynechat.

Html kód panelu

Měl by vypadat přibližně takto:

<h1>Titulek</h1>

<div class="nette-inner">
	... obsah ...
</div>

Titulek by měl být buď stejný, jako titulek tabu, nebo může obsahovat údaje navíc.

Je třeba počítat s tím, že jedno rozšíření se může zaregistrovat i vícekrát, kupříkladu s jiným nastavením, takže pro stylování nelze používat CSS id, ale jen class, a to ve tvaru nette-addons-<NazevTridy>[-<volitelné>]. Třídu pak zapište do divu společně s třídou nette-inner. Při zápisu CSS je užitečné psát #nette-debug .trida, protože pravidlo pak má vyšší prioritu než reset.

Předpřipravené CSS

V panelu jsou předstylované A, TABLE, PRE, CODE a dále můžete využít třídy: .nette-hidden a .nette-collapsed pro skryté prvky. Pokud chcete vytvořit odkaz, který skrývá a zobrazuje jiný prvek, propojte je atributy rel a id:

<a href='#' rel='#nette-addons-NazevTridy-{$counter}'>Detaily&nbsp;&#x25ba;</a>

<div id="nette-addons-NazevTridy-{$counter}">...</div>

Counter použijte statický, aby se nevytvářely duplicitní ID na jedné stránce.

Seznam předpřipravených stylů by se dal rozšířit.

Rozšíření pro blue screen

Tímto způsobem lze přidávat vlastní vizualizace výjimek (nahrazuje dědení od IDebugPanel) nebo panely, které se zobrazí na červené bluescreen.

Rozšíření se vytvoří tímto příkazem:

Debugger::$blueScreen->addPanel(function($e) { // zachycená výjimka
	return array(
		'tab' => '...Popiska...',
		'panel' => '...HTML kod panelu...',
	);
});

Pokud funkce nic nevrátí, panel se nevykreslí.

Patrik Votoček
Člen | 2221
+
0
-

Nehodilo by se tohle spíš do wiki (https://wiki.nette.org)

Filip Procházka
Moderator | 4668
+
0
-

Takže teď pro zobrazení SQL dotazu v DibiException je potřeba doregistrovat panel do bluescreen?

Debugger::$blueScreen->addPanel(function($e) { // zachycená výjimka
	if (!$e instanceof \DibiException) {
		return;
	}

        return array(
                'tab' => 'SQL Query',
                'panel' => $this->getSql() ? dibi::dump($this->getSql(), TRUE) : NULL,
        );
});

PS: teoreticky to funguje, ale prakticky se mi to zatím zkoušet nechce :)

Jan Tvrdík
Nette guru | 2595
+
0
-

Tohle by mělo být spíš rovnou v dokumentaci, stejně jako návod na vytváření vlastních Latte maker.

David Grudl
Nette Core | 7780
+
0
-

Nebojte, do dokumentace se to dostane.