Multiple rendering modes for Control hierarchical structure with AJAX support.

1.0.4 2014-05-12 06:19 UTC




Just copy source codes from Github or using Composer:

$ composer require dotblue/nette-control-rendering@~1.0


If you want your custom component to support mode than default rendering mode, you can achieve that by writing more rendermethods, like this:

public function render()

public function renderSmall()

In template, you can use the second rendering mode with colon notation:

{control foo:small}

But this approach doesn't work well with AJAX. Also, sometimes your component consists of many subcomponents, but the whole hierarchical structure should have the same unified set of rendering modes. Imagine for example some data structure, which can be rendered as complex HTML or just a table, and you wish to implement each cell as component as well. Then not only the main component must have 2 rendering modes, but the cell subcomponents too.

That's what DotBlue\NetteControl\Renderer class is for. Just wrap your component in its factory method, and set proper rendering mode:

use DotBlue\NetteControl\Renderer;

protected function createComponentFoo()
    return new Renderer(new Foo, 'small');

Now even if you use simple {control foo} in template, the renderSmall() method will be called for rendering. Including AJAX requests!

But that's not all. All subcomponents of your Foo component will get wrapped by the same Renderer automatically too. So if they implement method renderSmall() as well, it will be used, and you don't need to specify that in template anywhere.