NavigationBuilder – udělátko pro dynamické skládání navigace

U mě ok, doteď jsem to řešil přes vlastní „systém“, ale tohle je samozřejmě lepčejší :-) Takže díky. Připomínky a nápady nemám, páč to dělá přesně to co potřebuju, nic víc, nic míň.

EDIT: Už jsem na to přišel, chybí mi priority, případně řazení dle něčeho :-) Různě postupně v modulech přidávám položky a občas bych nějakou potřeboval šoupnout pomocí priority výš než tu předchozí.

Editoval Michalek (18. 10. 2009 23:32)

Michalek napsal(a):

EDIT: Už jsem na to přišel, chybí mi priority, případně řazení dle něčeho :-) Různě postupně v modulech přidávám položky a občas bych nějakou potřeboval šoupnout pomocí priority výš než tu předchozí.

To mi tam chybí taky :-) Plánuji to dodělat do druhé, rozšířené verze. Zatím se mi nepodařilo najít nějaký pěkný způsob, jak prioritu nastavovat, resp. řadit dle ní a jak se chovat k položkám, které prioritu nemají.

Jedna z možností je nechat na uživateli, co za hodnotu prioritě přiřadí (ať už string nebo integer), řadit se to dá tak jako tak. Položky bez priority by se pak daly appendovat na konec, což se mi ale zas tolik nelíbí. Další variantou by mohly být předem definované priority (highest, high, medium, low, lowest), s tím, že položky bez priority by měly implicitně nastavenou prioritu medium a pak by se ještě mohly (nebo nemusely) řadit podle abecedy… A teď babo raď, co z toho implementovat.

Můžu se zeptat k čemu to je?

P.S.: Nedalo mi to a zjednodušil jsem příklad. Spousta řádků je tam takových nesmyslných.

class MyPresenter extends Presenter
{
	public function createComponentNavigation($name)
	{
		$navigation = new NavigationBuilder($this, $name);

		// nastavení překladače (nepovinné)
		$navigation->setTranslator(new MyTranslator);

		// nastavení šablony (nepovinné)
		$navigation->setTemplate('/cesta/k/sablone.phtml');

		// vložení několika položek
		$navigation->add('Domů', 'http://www.example.com')
			->add('Produkty', $this->link('Products:default'))
			->add('Kontakt', $this->link('Contact:default'));
		$navigation->get('Produkty')
			->add('Pasti na myši', $this->link('Products:traps'))
			->add('Ničivé zbraně', $this->link('Products:guns'));
	}
}

To nandávání sekcí galerie do menu plnýho článků zní smysluplně.

Karel Klíma napsal(a):
… Co se týče samotné „továrničky“ na komponentu, je čistě otázka preferencí, jestli ji implementovat nebo ne. Pokud mám na stránce jedinou navigaci, pak je kvůli tomu zbytečné psát samostatnou inicializační funkci. A já se klidně vsadím, že tato komponenta se bude z 90 % případů vyskytovat pouze jednou.

Tady máš sice pravdu, ale mám takové tušení, že framework jde směrem, kdy bude potřebovat umět určit, které komponenty presenter/control umí vyrobit a kde. Továrničky doporučuji používat.

Editoval jasir (20. 10. 2009 9:40)

Tak já představím svojí verzi. Lépe využívá komponentového modelu Nette. Dále také umí označit aktuální položku a dá se využít k tvorbě drobečkové navigace.

Příklad

class HomepagePresenter extends BasePresenter {

	public function createComponentNavigation($name) {
		$menu = new Navigation($this, $name);
		$menu->setupHomepage("Úvodní stránka", $this->link("Homepage:"));
		$menu->add("Stránka", "/adresa");
		$sekce = $menu->add("Sekce", "/sekce");
		$clanek = $sekce->add("Článek", "/clanek");
		$sekce->add("Article", "/article");

		$menu->setCurrent($clanek);
	}

}

Komponenta nemá fluent interface (většinou se budou položky stejně přidávat v cyklu), ale metody add vrací právě přidaný objekt, takže je možné si jej uložit do proměnné a pak s ním operovat.

Ukázka šablony:

{control navigation:menu}
{control navigation:breadcrumbs}

(Lépe odsazený) výstup

<ul class="control menu">
	<li>
		<a href="/">Úvodní stránka</a>
	</li>
	<li>
		<a href="/adresa">Stránka</a>
	</li>
	<li>
		<a href="/sekce">Sekce</a>
		<ul>
			<li>
				<strong>Článek</strong>
			</li>
			<li>
				<a href="/article">Article</a>

			</li>
		</ul>
	</li>
</ul>

<div class="control breadcrumbs">
	<a href="/">Úvodní stránka</a> &rarr;
	<a href="/sekce">Sekce</a> &rarr;
	<span class="current">Článek</span>
</div>

Kód komponenty

Navigation.php

<?php

/**
 * Navigation
 *
 * @author Jan Marek
 * @license MIT
 */
class Navigation extends NavigationNode {

	/** @var NavigationNode */
	private $current;

	/**
	 * Set node as current
	 * @param NavigationNode $node
	 */
	public function setCurrent(NavigationNode $node) {
		if (isset($this->current)) {
			$this->current->isCurrent = false;
		}
		$node->isCurrent = true;
		$this->current = $node;
	}

	/**
	 * Setup homepage
	 * @param string $label
	 * @param string $url
	 * @return Navigation
	 */
	public function setupHomepage($label, $url) {
		$this->label = $label;
		$this->url = $url;
		return $this;
	}

	/**
	 * Render menu
	 */
	public function renderMenu() {
		$this->createTemplate()
			->setFile(dirname(__FILE__) . "/menu.phtml")
			->render();
	}

	/**
	 * Render breadcrumbs
	 */
	public function renderBreadcrumbs() {
		if (empty($this->current)) return;

		$items = array();
		$node = $this->current;

		while (isset($node)) {
			array_unshift($items, $node);
			$node = $node->parent;
		}

		$template = $this->createTemplate()
			->setFile(dirname(__FILE__) . "/breadcrumbs.phtml");
		$template->items = $items;
		$template->render();
	}

}

NavigationNode.php

<?php

/**
 * Navigation node
 *
 * @author Jan Marek
 * @license MIT
 */
class NavigationNode extends Control {

	/** @var string */
	public $label = "undefined";

	/** @var string */
	public $url = "#";

	/** @var NavigationNode */
	public $parent;

	/** @var bool */
	public $isCurrent = false;

	/**
	 * Add navigation node as a child
	 * @staticvar int $counter
	 * @param string $label
	 * @param string $url
	 * @return NavigationNode
	 */
	public function add($label, $url) {
		$navigationNode = new self;
		$navigationNode->label = $label;
		$navigationNode->url = $url;
		$navigationNode->parent = $this;

		static $counter;
		$this[++$counter] = $navigationNode;

		return $navigationNode;
	}

}

menu.phtml

<ul class="control menu">
	<li>
		{if $control->isCurrent}
		<strong>{$control->label}</strong>
		{else}
		<a href="{$control->url}">{$control->label}</a>
		{/if}
	</li>
	{assign $children $control->getComponents()}
	{block #menu}
	{foreach $children as $item}
	<li>
		{if $item->isCurrent}
		<strong>{$item->label}</strong>
		{else}
		<a href="{$item->url}">{$item->label}</a>
		{/if}

		{if count($item->getComponents())}
		<ul>
			{include #menu, children => $item->getComponents()}
		</ul>
		{/if}
	</li>
	{/foreach}
	{/block}
</ul>

breadcrumbs.phtml

<div class="control breadcrumbs">
	{foreach $items as $item}
	{if $iterator->isLast()}
	<span class="current">{$item->label}</span>
	{else}
	<a href="{$item->url}">{$item->label}</a> &rarr;
	{/if}
	{/foreach}
</div>

Budoucnost

• Tohle je zatím taková pracovní verze, tak tu zatím nejdou měnit měnit šablony či označit třídou rodiče $currentu jako aktivní položky. Všechno bude.
• Přemýšlím o generování sitemapy.
• Uvítám další nápady.
• Translator mi přijde zbytečný, protože většinou v menu budou články a tak a tam se tahají z databáze rovnou přeložené názvy.

Jasný, ale podle mě takových odkazů bude menšina a tudíž nebude problém zavolat nějaké Helpers::translate($text). Spíše naopak, pokud se to bude míchat s nepřekládanými texty. Hlavně já to zatím nepotřebuju :)

Michalek napsal(a):

Zdá se mi, že beru jako „menu“ něco jiného než ty…

Menu s články, když jich mám přes 20.000, neplánuju.

Nemusejí se načíst všechny, ale třeba jen ty v rozbalených sekcích. Nebo vůbec žádné, to je jedno.

Mám to čistě na přepínání mezi moduly, orientace v admin menu (každý modul si zaregistruje třeba Bazar / Přidat – Upravit – Smazat) a breadcrumbs.

Hm tady by ten translator asi dával smysl.

Taky to pořád neřeší prioritu, dejme tomu, že registruji postupně moduly Bazar, Obchod a Diskuze, ale v menu bych to rád měl seřazené jako Diskuze, Bazar, Obchod. :-)

Nad tím ještě popřemýšlím. Teď mě napadá vyřešit to v metodě add projetím všech komponent, porovnáním a vložením před první komponentu s nižší prioritou.

Říkal jsem o tom už Honzovi na Webexpu, mám menu komponentu i se správou (přetahováním jednotlivých položek), to video jsem dělal pro Honzu (aby se moh' inspirovat), ale kdo by se chtěl podívat… http://tomik.jmx.cz/nette/menu.avi :) Pokud by o to byl zájem, zveřejním to, ale nebude to hned, chvilku mi to bude trvat, rád bych to dal do nějakého „obecnějšího znovu použitelného“ tvaru. Případně bych to mohl poslat Honzovi a on by si s tímto pohrál. ;)

Michalek napsal(a):

(…) Můžu si to dovolit, nedělám CMS pro veřejnost ala Wordpress/Joomla :)

Šťastný člověk! :)

Karel Klíma napsal(a):

Tvoje verze mě donutila k tomu, abych šel zas studovat manuál ke komponentám :-) Využítí toho „oficiálního“ modelu vypadá pěkně.

Fajn. Jinak já jsem to ještě přepsal tak, aby Navigation nedědila od NavigationNode. Tím pádem může být NavigationNode potomkem třídy Component místo Control. Ta je o dost složitější, což se při více položkách (např. 1000) znatelně projeví na rychlosti.

Pustil jsem na svobodu novou verzi, viz první příspěvek v tomto vláknu: https://forum.nette.org/…ani-navigace

v NavigationNode je menší bug a to na řádku 325 , nastavuje adresu na #

Edit: verze 2

Editoval sodae (27. 10. 2009 14:29)

sodae napsal(a):

v NavigationNode je menší bug a to na řádku 325 , nastavuje adresu na #

Edit: verze 2

Díky za upozornění, v nové verzi 2.1 je to již opraveno.

Bylo by to skvělé… Díky!.

Bylo by to výborné!! :)

Tak jsem se k tomu konečně dostal :-)

Osobně mi v „návodu“ chybí ukázka jak řadit (jde to najít ze zdrojáku, jasně, ale ušetřilo by to pár vteřin), pak pro laika je asi nicneříkající řádek $navigation->getRoot()->label = 'Homepage';.

A nakonec, Hlavní strana – priorita 1000, Článek – priorita 500, Jak jsme šli na houby – priorita 100. A ono se to řadí obráceně než bych čekal :-)

Jinak ale dost dobrý.

Editoval Michalek (30. 10. 2009 12:50)

Oggy napsal(a):

Jak komponentu typu NavigationBuilderu používáte?

Já osobně využívám dvojí metodu pro přidávání položek. V rámci aplikaci mám moduly, každý modul má svou vlastní třídu (např. UsersModule, nemá to s Nette moc společného). Architekturou je to podobné Drupalu – neobsahuje to v podstatě žádné jádro, ale je to jako skládanka. Jeden z těchto modulů hlavní, obsahuje navigaci a property onNavigationBuild, která se použije jako event handler při inicializaci nebo renderování navigace.

V praxi mám pak v nějakém base presenteru něco jako:

<?php
public function startup() {
    $navigation = $this->getComponent('navigation');
    Modules::get('Nejaky_modul')->onNavigationBuild($navigation);
}
?>

a v nějakém jiném modulu/presenteru například tohle:

<?php
public function startup() {
    Modules::get('Nejaky_modul')->onNavigationBuild[] = array($this, 'setupNavigation');
}
public function setupNavigation(Navigation $navigation) {
    $navigation->add('Polozka', 'url');
    ...
}
?>

Nejsem si jistý, zda-li je tohle optimální použití, ale funguje mi to spolehlivě.

jasir napsal(a):

Tomik napsal(a):

Říkal jsem o tom už Honzovi na Webexpu, mám menu komponentu i se správou (přetahováním jednotlivých položek), to video jsem dělal pro Honzu (aby se moh' inspirovat), ale kdo by se chtěl podívat… http://tomik.jmx.cz/nette/menu.avi :) Pokud by o to byl zájem, zveřejním to, ale nebude to hned, chvilku mi to bude trvat, rád bych to dal do nějakého „obecnějšího znovu použitelného“ tvaru. Případně bych to mohl poslat Honzovi a on by si s tímto pohrál. ;)

Je tato komponenta již někde ke stažení? Vypadá to opravdu moc povedeně. Díky za odpověď

Tomik napsal(a):

Vyki napsal(a):

Je tato komponenta již někde ke stažení? Vypadá to opravdu moc povedeně. Díky za odpověď

Zatím není. Bohužel nemám čas na to ji učesat a poskytnout široké veřejnosti vč. podpory, návodu a podobně. Ale pokud jsi minimálně středně pokročilý uživatel Nette, můžu Ti poskytnout potřebné materiály, a ty už by sis s nima nějak poradil. :)

Myslím, že bych to zvládnout měl. Časově to nyní mám kvůli škole také napjaté, ale ve volných chvílích věřím, že zvládnu tuto knihovnu zobecnit, popsat a poskytnout pro testování.

Vyki napsal(a):

jasir napsal(a):

Tomik napsal(a):

Říkal jsem o tom už Honzovi na Webexpu, mám menu komponentu i se správou (přetahováním jednotlivých položek), to video jsem dělal pro Honzu (aby se moh' inspirovat), ale kdo by se chtěl podívat… http://tomik.jmx.cz/nette/menu.avi :) Pokud by o to byl zájem, zveřejním to, ale nebude to hned, chvilku mi to bude trvat, rád bych to dal do nějakého „obecnějšího znovu použitelného“ tvaru. Případně bych to mohl poslat Honzovi a on by si s tímto pohrál. ;)

Je tato komponenta již někde ke stažení? Vypadá to opravdu moc povedeně. Díky za odpověď

Můžu se jen zeptat – ten strom webových sekcí, který tam přeřazuješ děláš jakým jquery pluginem?
Dělám něco podobného.. používám plugin sortable a jquery tree view na rozbalování atd.. ale mám problém s tím sortable.. nějak neokážu ty sekce řadit skrze jednotlivé levely..můžu přeřazovat jen sekce na nejvzšší úrovni..

Tomik napsal(a):

Oggy napsal(a):

Můžu se jen zeptat – ten strom webových sekcí, který tam přeřazuješ děláš jakým jquery pluginem?
Dělám něco podobného.. používám plugin sortable a jquery tree view na rozbalování atd.. ale mám problém s tím sortable.. nějak neokážu ty sekce řadit skrze jednotlivé levely..můžu přeřazovat jen sekce na nejvzšší úrovni..

No, je to plugin nad právě tím sortable, který má chybu, že nelze pracovat s těmi vnořenými členy.

http://code.google.com/…edsortables/

děkuju

Panda napsal(a):

Já osobně používám jsTree. Možná z toho někdy udělám komponentu pro Nette…

To vypadá taky pěkně.

tak jstree umí přesně to co jsem hledal díky..

ještě dotaz .. snažím se ještě rozchodit cookies..aby si tree zapamatoval stav..
ale mám trošku trable identifikátorem, aby to chodilo ..
je potřeba každý list, aby měl své id…takto:

<?php
<ul>
		<li id="li_1" rel="node-type">
			<a href="#"><ins>&nbsp;</ins>Root node</a>
			<ul>
				<li id="li_2" rel="node-type">
					<a href="#"><ins>&nbsp;</ins>Child node</a>
				</li>
			</ul>
		</li>
		<li id="li_3" rel="node-type">
			<a href="#"><ins>&nbsp;</ins>Root node</a>
		</li>
	</ul>

?>

..můj template .. tam je problém s tím, že do includované šablony se counter přenese.. ale nadřazené šablona již změněnou hodnotu nezná..

nebo jsem přehlédl nějakou funkčnost jstree, kde by toto řešil za mě :-)

<?php
    <div class="tree">
        {assign $sekce $control->getComponents()}
        {assign $counter 0}
        {block #menu}
        <ul>
            {foreach $sekce as $item}
            {? $counter += 1}
            <li id="li_{$counter}"><a href="#"><ins>&nbsp;</ins>{$item->nazevMenu}</a>
                    {if count($item->getComponents())}
                            {include #menu, 'sekce' => $item->getComponents(), 'counter' => $counter}
                    {/if}
            </li>
            {/foreach}
        </ul>
        {/block}
    </div>
?>

Editoval Oggy (10. 1. 2010 8:47)

Honza Marek napsal(a):

Budoucnost

• Tohle je zatím taková pracovní verze, tak tu zatím nejdou měnit měnit šablony či označit třídou rodiče $currentu jako aktivní položky. Všechno bude.
• Přemýšlím o generování sitemapy.
• Uvítám další nápady.
• Translator mi přijde zbytečný, protože většinou v menu budou články a tak a tam se tahají z databáze rovnou přeložené názvy.

jak si na tom s tou budoucnosti? :) hodne bych ocenil to oznacovani jako aktivni rodice prvku