about responsiveness in Nette

sztanp

Silly question but what woud you recommend to build a responsive app with Nette ?

Pavel Kravčík

https://getbootstrap.com/

Thommie

Foundation is also good. https://foundation.zurb.com/.

Last edited by Thommie (2018-04-18 15:23)

sztanp

ok I installed bootstrap (already) but what about Nette forms (I thought responsiveness would be kinda built-in…) ?

And I just did that in vendor/nette/forms/src/Forms/Form.php :

/**
	 * Returns form renderer.
	 * @return IFormRenderer
	 */
	public function getRenderer()
	{
		if ($this->renderer === null) {
			//$this->renderer = new Rendering\DefaultFormRenderer;
                        $this->renderer = new \Nextras\Forms\Rendering\Bs3FormRenderer();
		}
		return $this->renderer;
	}

(replaced DefaultFormRenderer with Bs3FormRenderer).

Is that a right way to use Nextras ?

I noticed that it changed my Forms, making them more “bootstrap like”, but now how should I use bootstrap features, given that I don't build my forms inside html, but with Form class… ?

Last edited by sztanp (2018-04-20 09:16)

GEpic

Just render form as usually (doc here) (you don't really need to use BsFormRenderer if don't feel comfortable with it (i never used it cause you can't create precise responsive forms with it)), you can handle all situations and breakpoints individually, just wrap elements in ‘form-group’ class and add class ‘form-control’ straight to elements, for buttons you can use ‘btn btn-primary’ class or other colors, just look at bootstrap doc “how to”

Last edited by GEpic (2018-04-20 11:18)

sztanp

Ok thank you I begin to see that there are a lot of different possible combinations to make forms with Nette.
The problem I have as I'm trying to follow your suggestion is that I've used Multiplier to build my list of forms (basic administration page for products, with their characteritics, etc…):

return new Multiplier(function ($productId) {
                    $form = new Nette\Application\UI\Form;
                    $form->addText('name', 'nom du produit:')
                        ->setRequired('Entrer un nom pour le produit.');

                    $form->addText('details', 'description du produit:')
                        ->setRequired('Entrer une description pour le produit.');

                    $form->addText('baseprice', 'prix de base:')
                        ->setRequired('Entrer un prix de base pour le produit.');
                    $form->addHidden('productId', $productId);
                    $form->addSubmit('send', 'Modifier');
                    $form->setDefaults($this->resultSet[$productId]);
                    $form->onSuccess[] = [$this, 'productFormSucceeded'];
                    return $form;
                });

And this " template" :

{* Latte template *}

{block content}

{foreach $products as $product}
    {control productForm-$product->id}
{/foreach}

I think I need to do something more like this (very partial code :)


{* Latte template *}

{block content}

{foreach $products as $product}
    <input type="hidden" value={$product->id}></input>
    <input type="text" value={$product->name}></input>
    <input type="text" value={$product->details}></input>
    <input type="submit"></input>
{/foreach}

But how can I link the form to the actual products (which was the case using control Form via Multiplier) ?

Last edited by sztanp (2018-04-20 19:05)

sztanp

sztanp wrote:

Silly question but what woud you recommend to build a responsive app with Nette ?

(sorry that was too general for a question)

old.gandalf

Hello @sztanp,

from a short glimpse at your code, I don't understand what exactly your problem is.
How would you like to “link” the form to the actual products? The snippet with Multiplier usage seems to do exactly that, doesn't it?