Oddělení šablony formuláře

@Fires

Ale nedaří se mi donutit nette aby měl formulář zvláštní latte šablonu. Formulář vykresluji manuálně.

Když se formulář vykresluje manuálně tak se právě vykresluje pomocí Latte, druhou možností je vestavěný Renderer, ale tam jsou možnosti omezené – jak píšeš. Manuální vykreslování formulářů pomocí Latte je celkem kvalitně popsáno v dokumentaci -tag n:name a další:

https://doc.nette.org/…ms/rendering#…

Tag {control ‚formName‘} vykresluje obecně komponentu poděděnou z Nette\Application\UI\Control s použitím její šablony, ale když je komponentou formulář, použije se vestavěný Renderer, kde je minimální volnost cokoliv upravovat. Dá se ale tento jednoduše vykreslený formulář vsadit do šablony, kde se doplní odkazy, které potřebuješ.

Tag {control ‚formName‘} může vykreslovat do šablony i formulář, musíš ale potom formulář umístit do nadřazené komponenty poděděné z třídy Nette\Application\UI\Control, ale stejně budeš muset šablonu ručně nakódovat. Je to o něco složitější.

Pro login formulář je nejjednodušší jít cesto manuálního vykreslení pomocí latte, jak jsem uvedl v odkazu výše.

Šablonu formuláře si můžeš umístit do separátního souboru a vkládat pomocí {include …}

Můžu Ti poslat i podrobnější ukázky kódu jak vytvořit formulář zabalený do Nette\Application\UI\Control, tak kdyžtak napiš, ale zkus tohle jednoduché co Jsem Ti poslal.

Editoval m.brecher (11. 4. 2023 19:11)

A v čem že je ta „složitost“ mít form v komponentě a zavolat to kde si zamanu? Includovat šablonu v latte mi připadá jako krok zpět (prakticky si „znemožníš“ předhodit tomu jinou šablonu, podědit ji, refactorovat umístění šablony atp.)

Editoval Kamil Valenta (11. 4. 2023 21:58)

@Fires

posílám takové zjednodušené kopyto, jak udělat moderní best practice formulář, který je v samostatné třídě zapouzdřený do rodičovské komponenty. Kód aplikace se zpřehlední – formuláře jsou v samostatných souborech a mají vlastní šablony v samostatných souborech. Jsou tam další vychytávky, ale je ale potřeba si to doladit, doplnit a upravit.

Třída formuláře

• formulář je zapouzdřen v třídě ArticleForm, což je vykreslovací komponenta poděděná z Nette\Application\UI\Control
• konstruktorem získá a) služby (modelovou třídu), b) parametry presenteru předané prostřednictvím Factory
• formulář umí a) vytvořit nový řádek tabulky (akce presenteru create), b) editovat existující řádek tabulky (akce presenteru update)
• formulář umí mazat řádek tabulky – tlačítko ‚deleteButton‘
• tři handlery pro nový záznam, editaci existujícího záznamu a mazání záznamu jsou navěšeny přímo na tlačítka – nejpřehlednější řešení
• 90% formulářů potřebuje modelovou třídu – položky select inputů, defaultní data, modelová třída se předá jako služba

namespace App\Forms;

use App\Model\ArticleModel;
use Nette\Application\UI\Control;
use Nette\Application\UI\Form;
use Nette\Database\Table\ActiveRow;
use Nette\Utils\ArrayHash;

class ArticleForm extends Control
{
    public function __construct(
        private  ArticleModel $articleModel,  // injected as service
        private ActiveRow $article,           // passed from factory
        private bool $update,                 // passed from factory
    )
    {}

    /* build form structure */

    public function createComponentForm(): Form
    {
        $form = new Form();

        //.... adding form inputs ....

        $form->addSelect('items', 'Položky', $this->ArticleModel->getItems());  // model class used

        if($this->update){
            $form->addSubmit('updateButton', 'Uložit')
                ->onClick[] = $this->updateArticle(...);  // syntax PHP >= 8.1

            $form->addSubmit('deleteButton', 'Smazat')
                ->setValidationScope([])
                ->onClick[] = $this->deleteArticle(...);

            $form->onRender[] = fn() => $form->setDefaults($this->article); //  model class used

        }else{
            $form->addSubmit('createButton', 'Uložit')
                ->onClick[] = $this->createArticle(...);
        }

        return $form;
    }

    /* submit form handlers - by buttons */

    public function createArticle(ArrayHash $values)
    {
        $article = $this->articleModel->createOne($values);
        //  next processing
    }

    public function updateArticle(ArrayHash $values)
    {
        $updated = $this->articleModel->updateOne($values);
        //  next processing
    }

    public function deleteArticle()
    {
        $deleted = $this->articleModel->deleteOne($this->article);
        //  next processing
    }

    /* rendering */

    public function render(string|null $formHeading)  // variable from {control} latte tag
    {
        $this->template->formHeading = $formHeading;
        $this->template->render('form-template.latte');  // setting form template file
    }
}

Factory Interface

• zaregistruje se jako služba
• použije se v presenteru pro vytvoření formuláře ArticleForm
• zajistí předání parametrů z presenteru do konstruktoru formuláře

namespace App\Factories;

use App\Forms\ArticleForm;
use App\Model\ArticleModel;
use Nette\Database\Table\ActiveRow;

interface ArticleFormFactory
{
    public function create(
        ActiveRow|null $article,
        bool $update
    ): ArticleForm;
}

Modelová třída

• zjednodušený příklad

namespace App\Model;

use Nette\Database\Explorer;
use Nette\Database\Table\ActiveRow;
use Nette\Utils\ArrayHash;

class ArticleModel
{
    public function __construct(private Explorer $database)
    {}

    public function getItems(): array
    {
        return  $this->database->table('items')->fetchPairs('id', 'caption');
    }

    public function getOne(int $id): ActiveRow|null
    {
        return  $this->database->table('article')->get($id);
    }

    public function createOne(ArrayHash $values): ActiveRow
    {
        return $this->database->table('article')->insert($values);
    }

    public function updateOne(ActiveRow $article, ArrayHash $values): bool
    {
        return $article->update($values);
    }


    public function deleteOne(ActiveRow $article): int
    {
        return $article->delete();
    }

}

Presenter

• nechá si předat factory formuláře jako službu
• má editační metody create/update a property $update kterou využije formulář (hodí se i v šabloně akce)
• editovaný řádek tabulky musí ověřit v actionUpdate metodě existenci řádku
• jednou získaný řádek tabulky předá presenter kam je potřeba a) do šablony b) do factory formuláře
• formulář vytvoří pomocí factory které předá parametry pro formulář, ona je předá dál

namespace App\Presenters;

use App\Factories\ArticleFormFactory;
use App\Forms\ArticleForm;
use App\Model\ArticleModel;
use Nette\Database\Table\ActiveRow;

class TestArticlePresenter extends BasePresenter
{
    private bool $update = false;

    private ActiveRow|null $article = null;

    public function __construct(
        private ArticleModel $articleModel,
        private ArticleFormFactory $articleFormFactory,
    )
    {}

    public function actionUpdate(int $id)
    {
        $this->update = true;
        $this->article = $this->articleModel->getOne($id);
        if(!$this->article){
            $this->error('Page not found', 404);
        }
        $this->template->article = $this->article;
    }

    public function createComponentArticleForm(): ArticleForm
    {
        return $this->articleFormFactory->create(
            article:  $this->article,  //  use already available data, prevent duplicite sql query
            update: $this->update,     // needed by multifunctional form for creating + updating data
        );
    }
}

Šablony akcí

tag {control} vykreslí formulář ze šablony, ta je v samostatném souboru (nastavuje se v ArticleForm::render())
podle potřeby lze předat specifické texty podle akce create/update – např. nadpis formuláře

a) akce create

{block 'content'}
    {control 'articleForm', formHeading: 'Nový článek'}
{/block}

b) akce update

{block 'content'}
    {control 'articleForm', formHeading: 'Editace článku'}
{/block}

Šablona formuláře

form-template.latte

<div class="form-container">
   <h3 class="form-heading">{$formHeading}</h3>
   <div class="form-subcontainer">
      <form n:name="articleForm">
         ......
      </form>
   </div>
</div>

Editoval m.brecher (12. 4. 2023 3:06)

@Fires Nesnaž se dogmaticky oddělovat formuláře do vlastních šablon, 90% formulářů použiješ jen jednou, tak není důvod je nedat rovnou do šablony presenteru. Pokud se změní situace, tak vytáhnout ten jeden formulář a přesunout ho do komponenty je jednoduché. Ale dělat to od začátku pro všechny formy je jen zbytečně pracné a stává se nepřehledné.

Pokud se bavíme o loginFormu a toho co jsi popisoval, tak si zase myslím, že není potřeba mít formulář v komponentě, ale opět ho vykreslit v šabloně presenteru, protože budou vypadat jinak jak jsi popsal. Pokud chceš mít ty dvě různé šablony vedle sebe, tak pak ano je potřeba z toho udělat komponentu, ale s možností měnit soubor se šablonou.

Stále platí, že bych dogmaticky neextrahoval formuláře do vlastní tříd děděných od UI\Control (komponenta).

Příklad:

Já si dělám tovární třídy pro formuláře bez závislosti na UI\Control

use Nette\Application;

final class FormFactory
{

	public function create(): Application\UI\Form
	{
		return new Application\UI\Form();
	}

}

Tvorba konkretního formuláře, pak máš volnost zda ArticleFormFactory si dáš závislost do presenteru nebo závislost do vytvořené vlastní třídy děděné od UI\Control.

final class ArticleFormFactory
{
	public function __construct(
		private ArticleModel $articleModel,
		private FormFactory $factory,
	)
	{
	}


	public function create(?ActiveRow $article = null): Nette\Application\UI\Form
	{
		$form = $this->factory->create();
		$form->addSelect('items', 'Položky', $this->articleModel->getItems());
		if ($this->article !== null) {
			$form->addSubmit('updateButton', 'Uložit')
				->onClick[] = $this->updateArticle(...);
			$form->addSubmit('deleteButton', 'Smazat')
				->setValidationScope([])
				->onClick[] = fn($button, $values) => $this->deleteArticle($values, $article);
			$form->setDefaults($article);
		} else {
			$form->addSubmit('createButton', 'Uložit')
				->onClick[] = $this->createArticle(...);
		}

		return $form;
	}


	/* submit form handlers - by buttons */
	private function createArticle(ArrayHash $values)
	{
		$article = $this->articleModel->createOne($values);
		//  next processing
	}


	private function updateArticle(ArrayHash $values)
	{
		$updated = $this->articleModel->updateOne($values);
		//  next processing
	}


	private function deleteArticle(ArrayHash $values, ?ActiveRow $article)
	{
		$deleted = $this->articleModel->deleteOne($article);
		//  next processing
	}

}

Editoval h4kuna (12. 4. 2023 12:07)

m.brecher napsal(a):

Pak do diskuse vstoupil @KamilValenta a doporučil formulář na bázi UI\Control jako nejlepší řešení a tak jsem poslal takovou zjednodušenou ukázku. Tam jsem už na mysli neměl jednoduchý loginForm, ale obecně jakýkoliv formulář.

To prosím nespojovat. Já jsem nepsal o žádném nejlepším řešení pro jakýkoliv formulář. Napsal jsem, že u formulářů, které se vykreslují opakovaně na více místech, je lepší komponenta než includovaná šablona, důvody a že to není o nic složitější. Z mého pohledu zrovna loginForm může být nejžhavější adept na obalení komponentou, pokud má být přihlášení dostupné v nějakém plovoucím baru.
A articleForm bych zrovna do komponenty nedal, protože ten se těžko použije jinde, než v jedné actioně.

Ja som tento use case riešil takto:

class TemplatedAppForm extends UI\Form
{
    protected $template = null;
    protected $templateFile = null;
    protected $templateProps = [];

    public function __construct($container = null)
    {
        parent::__construct($container);
        $this->monitor(Presenter::class, function(Presenter $presenter) {
            $this->template = $presenter->getTemplateFactory()->createTemplate();
        });
    }

    public function render(...$args): void
    {
        $this->fireRenderEvents();
        $this->template->setFile($this->templateFile);
        count($this->templateProps) > 0 && $this->template->setParameters($this->templateProps);
        $this->template->renderer = $this->getRenderer();
        $this->template->form = $this;
        echo $this->template->render();
    }
}