TabControl

je vizuální komponenta, která vytváří sekce v podobě tabů. Taby jsou plně stylovatelné pomocí jQuery UI Themes. Komponenta plně podporuje chod v AJAXovém režimu pro maximální uživatelské pohodlí, ale funguje shodně i bez AJAXu. V AJAXovém režimu si může uživatel dokonce taby uspořádat k obrazu svému.

Download z SVN	https://svn.mujserver.net:8443/svn/TabControl/ (verze pro PHP 5.2.x) (uživatel: guest, heslo: (nechat prázdné))
Autor	Jan Kuchař
Licence	New BSD License
Diskuse k doplňku	http://forum.nette.org/…l-tabcontrol
Demo	http://tabcontrol.projekty.mujserver.net/
Nette	0.9.1, 0.9.2, 0.9.3

Ukázka

Pro chod TabControlu je potřeba upravená verze SnippetHelperu.

Použití

TabControl vytvoříme nejjednodušeji továrničkou na komponenty, přibližně takhle:

function createComponentTabs($name){
    $tc = new TabControl($this,$name);
    $tc->mode = TabControl::MODE_LAZY;
    $tc->sortable = true;
    //$tc->jQueryTabsOptions = "{ fx: { height: 'toggle',opacity:'toggle',marginTop:'toggle',marginBottom:'toggle',paddingTop:'toggle',paddingBottom:'toggle'} }";
    //$tc->handlerComponent = $this; // Is automatic
    //$tc->loaderText="Načítám...";

    $t = $tc->addTab("datagrid");
        $t->header = "DataGrid";
        $t->contentFactory = array($this,"createTabDataGrid");
        $t->hasSnippets = true; // Potřeba nastavit u každého tabu, ve kterém budou snippety! Jinak nebude fungovat AJAX! Má stejnou funkci jako @ v šablonách

    $t = $tc->addTab("novy");
        $t->header = "Nový";
        $t->contentFactory = array($this,"createTabNovy");

    $t = $tc->addTab("edit");
        $t->header = "Editovat";
        $t->contentFactory = array($this,"createTabEdit");
        $t->contentRenderer = array($this,"renderTabEdit");

    $t = $tc->addTab("customRenderer");
        $t->header = "Vlastní vykreslení tabu";
        $t->content = "Ahoj, jak se máš Jirko!";
        $t->contentRenderer = array($this,"renderTabCustomRenderer");

    $t = $tc->addTab("help");
        $t->header = "Nápověda";
        $t->contentFactory = array($this,"createTabHelp");

    return $tc;
}

Přehled nastavení třídy TabControl:

mode	Může mít hodnoty: MODE_LAZY – načte tab až je potřeba, MODE_PRELOAD – přednačte tab, MODE_NO_AJAX – vypne ajax, MODE_RELOAD – načte tab VŽDY když se na něj klikne
sortable	Sortable zapíná podporu pro přeřazování tabů.
jQueryTabsOptions	jsou data, která se předají jQuery UI Tabs
handlerComponent	je komponenta do které chcete generovat odkazy. Jako výchozí handlerComponent je nastavený rodič TabControlu. Takže pokud bude rodič Presenter a zavoláte v Tabu {link signal!} Tak se vygeneruje odkaz na Presenter:signal!.
loaderText	je text, který se zobrazí, než se načte tab.

Tab přidáme metodou addTab(nazev);. Metoda addTab() vrací třídu Tab. Ve třídě Tab můžeme nastavit hlavičku, továrnu na obsah tabu contentFactory nebo přímo obsah content, renderer obsahu contentRenderer a důležitou proměnnou hasSnippets, která funguje stejně jako zavináč v šablonách. Tzn. pokud má objekt v tomto tabu snippet(y), tak ho nastavte na hodnotu TRUE, jinak nebude správně fungovat AJAX.

Pokud máte v tabu komponentu, která obsahuje snippety (např.: DataGrid), nastavte proměnnou hasSnippets na TRUE.

Pokud nastavíte proměnnou hasSnippets na TRUE a komponenta v tabu nebude mít žádný snippet (např.: AppForm), AJAX taky nebude fungovat správně. Obsah se totiž vykresí úplně na začátek odpovědi serveru. Což způsobí parse error JSON dat na straně prohlížeče.

Továrnička na obsah tabu

Továrničce se předávají 2 parametry:

function createTabEdit($name,Tab $tab){
    $form = new AppForm($tab,$name);
    $form->addText("Neco", "Něco")->addRule(Form::FILLED, "Něco je povinné!");
    $form->addTextArea("Popis", "Popis");
    $form->addSubmit("odeslat", "Odeslat");
    $form->onSubmit[] = array($this,"ulozFormular");
    return $form;
}

Vytvořenou komponentu VŽDY vracejte pomocí return. Samotné vytvoření a zaregistrování nestačí!

Parametr $tab použijte vždy jako rodič komponent v TabControlu. Pokud použijete jako rodič jinou komponentu, budete upozorněni výjimkou. Pokud vrátíte komponentu bez jména nebo rodiče, rodič i jméno bude nastaveno automaticky.

Vlastní renderer obsahu

function renderTabEdit(Tab $tab){
    $form = $tab->content;
    $form->render();
    echo "<hr>Tento tab byl vyrenderován vlastním rendererem.";
}

Jako jediný parametr se předává parametr $tab, ze kterého získáme obsah jednoduše pomocí $tab->content;. Dále už můžete s obsahem naložit jak se vám zlíbí.

Požadavky

• Nette 0.9 a vyšší + upravený snippet helper
• jQuery (AJAXový režim)
• jQuery ajax driver (AJAXový režim)
• jQuery UI Sortable (přeřazování tabů)

Metody třídy TabControl

select($tabName);

Přepne TabControl na daný tab.

Příklad:

Presenter:

function handleJdiNaTab($tab){
    $this["tabs"]->select($tab);
}

Šablona:

<a href="{link jdiNaTab! datagrid}" class="ajax">Přejdi na DataGrid</a>

Pokud bude stránka s TabControlem na veřejných stránkách, doporučuji použít míto handleJdiNaTab($tabName) následující kód:

function handleJdiNaTab($tab){
    $this["tabs"]->select($tab);
    if(!$this->isAjax())
        $this->redirect("this");
}

Poté bude url odpovídat stavu a výslednou funkčnost to nijak nezmění.

Tato metoda se dá volat i jako $tab->select();

redraw($tabName);

Tato metoda se hodí třeba pokud odesíláte formulář a po jeho odeslání přecházíte na jiný tab (pokud zůstáváte na stejném tabu, je tato metoda volána automaticky), ale chcete ještě vymazat hodnoty z předchozího formuláře. Potom to bude vypadat nějak následovně:

function ulozFormular(AppForm $form){
    $values = $form->values;
Debug::fireLog($values);

    $form->setValues(array(), TRUE); // Empty the form

    // Parent of AppForm is Tab
    $tab = $form->parent;
    // Parent of Tab is TabControl
    $tabControl = $tab->parent; // Or $form->parent->parent;

    $tab->redraw(); // Překresli - vymazali jsme formulář

    // Přepneme uživatele zpět na datagrid
    $tabControl->select("datagrid");
}

Tato metoda se dá volat i jako $tab->redraw();

render();

Vykreslí TabControl.

Rychlejší přepínání mezi taby

Pokud potřebujete uživatele pouze přepnout na jiný tab, tak je doporučeno používat při generování šablony metodu selectAnchor(), která vygeneruje odkaz s onclick eventem, který přímo přepne tab. (neproběhne žádný požadavek na server pokud je už tab načten)

{!$component["tabs"]->selectAnchor("datagrid","Popisek odkazu")}

Po kliknutí na takovýto odkaz, váš TabControl bleskurychle odkáže do patřičných míst. Pokud není povolen JavaScript, proběhne standardní přepnutí tabu, tzn. proběhne standardní požadavek na server a stránka se celá překreslí.

Přeřazování tabů

Přeřazování lze aktivovat přes proměnnou sortable, kterou najdeme v objektu TabControlu a tu nastavíme na TRUE. Poté lze taby libovolně přetahovat.

Jako aktivní se označuje vždy 1. tab v pořadí (z leva). To platí i po přeřazení uživatelem. Takže pokud máme v tabech ovládací prvky, uživatel si může jejich pořadí přeuspořádat a ty co používá nějčastěji, si může přeřadit na začátek.

Přeřazování tabů využívá jQuery UI Sortable. Bez této knihovny nebude přeřazování fungovat.

Ukládání pořadí tabů

Použijte proměnné $TabControl->saveTabsOrder a $TabControl->loadTabsOrder. Do těchto proměnných můžete umístit vlastní callback.

Ukázka (výchozí implementace)

/**
 * Saves tabs order to session (default implemetation od TabControl::saveTabsOrder)
 * @param array $order
 */
function saveTabsOrder(array $order){
    $session = Environment::getSession("TabControl\\".$this->getUniqueId());
    $session["order"] = $order;
}

/**
 * Loads tabs order from session (default implemetation od TabControl::loadTabsOrder)
 * @return array
 */
function loadTabsOrder(){
    $session = Environment::getSession("TabControl\\".$this->getUniqueId());
    return (array)$session["order"];
}

Při přeřazení tabů se volá i jedna událost, $TabControl->onOrderChange.

---

Login to submit a comment