Nette formuláře – bootstrap 3

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
Relapse
Člen | 34
+
0
-

Dobrý den,
procházel jsem fórum s podobnými vlákny, ale spousta odkazů na nějaký bootstrap-3-rendering už odkazovala na neexistující stránku.

Našel jsem toto: https://github.com/…endering.php#L54

Co používáte vy?

Nebo je lepší přidávat třídy manuálně? Něco jako:

{form fooForm, class => "class1 class2"}
    {input username class => form-control}
    {label username class => "form-label foo-class" /}
{/form}

Díky.

Lukeluha
Člen | 130
+
0
-

Nejjednodušší je to řešit pomocí přetížení rendereru a automatickému nastavení tohoto rendereru všem formulářům. Pokud budeš chtít, aby nějaký formulář měl extra třídy, vyřešíš to pomocí manuálního renderingu. Ale pro základní vykreslení formuláře a navíc automatické (ušetří to strašně moc času :)) je přepsání wrapperů u rendereru to nejlepší řešení.

Pavel Kravčík
Člen | 1205
+
0
-

Tohle řešení je skvělý. Osobně to používám ve funkci v BasePresenteru->getForm(). A ta funkce vrací upravený formulář pro BS3 a navíc ještě pár drobností jako CSRF, novalidate pro JS a podobně. A když chceš „neboostrapovský“ formulář, tak si zavoláš klasicky \Nette\Application\UI\Form().

Relapse
Člen | 34
+
0
-

Snažil jsem se tedy nastavit vlastní renderer podle tohoto: https://github.com/…endering.php#L54

Výsledný formulář však vůbec nevypadá jako formulář styl bootstrap 3.

Něco mi uniká. Kdyby na to někdo zkušený mrknul, byl bych moc rád.
Tady je kód:

<?php

namespace App\PublicModule\Presenters;

use Nette,
	App\Model;
use Nette\Application\UI;
use Nette\Forms\Controls;


/**
 * Base presenter for all application presenters.
 */
abstract class BasePresenter extends Nette\Application\UI\Presenter
{
    protected function startup() {

        parent::startup();
        $this->setLayout('layout');
    }

    //Vrati formular s nastavenym rendererem na tridy bootstrapu 3
    protected function getBootstrapForm() {

        $form = new UI\Form;

        //Nastaveni renderovani bootsrapem
        $renderer = $form->getRenderer();
        $renderer->wrappers['controls']['container'] = NULL;
        $renderer->wrappers['pair']['container'] = 'div class=form-group';
        $renderer->wrappers['pair']['.error'] = 'has-error';
        $renderer->wrappers['control']['container'] = 'div class=col-sm-9';
        $renderer->wrappers['label']['container'] = 'div class="col-sm-3 control-label"';
        $renderer->wrappers['control']['description'] = 'span class=help-block';
        $renderer->wrappers['control']['errorcontainer'] = 'span class=help-block';


        $form->getElementPrototype()->class('form-horizontal');
        foreach ($form->getControls() as $control) {
            if ($control instanceof Controls\Button) {
                $control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-default');
                $usedPrimary = TRUE;
            } elseif ($control instanceof Controls\TextBase || $control instanceof Controls\SelectBox || $control instanceof Controls\MultiSelectBox) {
                $control->getControlPrototype()->addClass('form-control');
            } elseif ($control instanceof Controls\Checkbox || $control instanceof Controls\CheckboxList || $control instanceof Controls\RadioList) {
                $control->getSeparatorPrototype()->setName('div')->addClass($control->getControlPrototype()->type);
            }
        }

        $form->setRenderer($renderer);

        return $form;
    }

}

Moc díky.

Editoval Relapse (21. 6. 2015 11:52)

David Matějka
Moderator | 6445
+
+1
-

lepsi je podedit renderer, treba takhle: https://github.com/…Renderer.php

Relapse
Člen | 34
+
0
-

Děkuji za reakci. Rád bych ale věděl, proč mi nefunguje to první řešení. Určitě to bude nějaký detail, jako vždy.

David Matějka
Moderator | 6445
+
0
-

@Relapse castecne to fungovat bude (ta uprava rendereru). Problem je s inputy, ktere tam upravujes, protoze v te chvili jeste neexistuji.

Relapse
Člen | 34
+
0
-

Aha, to jsem si neuvědomil. Nakonec jsem použil váš nabídnutý renderer a funguje krásně. Děkuju moc.