Nette Framework
Jak řešit překlady flash zpráviček v Nette Framework
Sem tam chceme uživateli sdělit, že se něco stalo. V Nette Frameworku je na to připravena podpora pomocí takzvaných flash messages.
Nedávno jsem potřeboval vyřešit jejich multijazyčnou variantu a zde vám ukáži jak jsem to řešil.
Klasika
Asi nejsnažší způsob, jak překládat flash message je přeložit jí v presenteru pomocí injectnutého translátoru. (viz článek jak na multijazyčný web)
1
$this->flashMessage($this->translator->translate('flash.newArticleSuccess'));
Copied!
Vše máme pod kontrolou a pokud potřebujeme do zprávy předat parametr nic nám v tom nebrání, případně změnit typ zprávy
1
$this->flashMessage($this->translator->translate('flash.deleteUser', ['username'=>$username]), 'success');
Copied!
Tím by mohl článek skončit, ale opak je pravdou, zde teprve začínáme.
Addons, extensions, rozšíření
Když jsem se kouknul na výsledný kód, připadalo mi, že by se to dalo používat trošku ne tak ukecaně. A je jasné, že nebudu první koho to napadlo :) Po chvilce hledání jsem narazil na dvě rozšíření
(Narazil jsem ještě na Zenify/FlashMessageComponent, ale u komponenty je DEPRECATED, tak jsem ji rovnou přeskočil)
Obě rozšíření mají composer balíček, takže jejich instalace byla velmi snadná.
librette/flash-messages
Instalace
$ composer require librette/flash-messages @devPo prozkoumání kódu zjistíte, že komponenta je velmi jednoduchá. Nebojte že nemá dokumentaci, její použití je snadné.
Začneme tak, že v našem presenteru použijeme traitu
TEnhancedFlashMessages a přepíšeme metodu getTranslator(), kterou traita definuje a používá pro získání nějakého překladače.1
use Librette\FlashMessages\TEnhancedFlashMessages;
2
3
class HomepagePresenter extends Nette\Application\UI\Presenter
4
{
5
use TEnhancedFlashMessages;
6
7
...
8
9
/** @var \Kdyby\Translation\Translator @inject */
10
public $translator;
11
12
protected function getTranslator()
13
{
14
return $this->translator;
15
}
Copied!
(pro zjednodušení ukázky dávám kód do HomepagePresenteru ve vaší aplikaci to bude BasePresenter)
Použití je pak snadné. Traita přepisuje nativní chování metody
flashMessage() a přidává i parametry pro složitější překlady.Následující ukázky snad nepotřebují více komentovat
1
$this->flashMessage('ui.wow');
2
$this->flashMessage('ui.wow', 'warning');
3
$this->flashMessage('ui.wow', 'error');
4
$this->flashMessage('ui.num', 'info', 3);
5
$this->flashMessage('ui.name', 'success', ['name' => "Karel"]);
6
$this->flashMessage('ui.numname', 'success', 3, ['name' => "Karel"]);
Copied!
ukázkový slovník
ui.cs_CZ.neon1
wow: "tohle je fleš zpráva"
2
num: "tohle jedna |tohle je fleš zpráva %count%"
3
name: "kuk %name%"
4
numname: "tohle jedna %name% |tohle je fleš zpráva %count% od %name%"
Copied!
Vykreslování v šabloně můžeme nechat defaultní
1
<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
Copied!
A nebo použijeme druhou traitu, která v balíčku je a to
TFlashMessages, která vytváří komponentu pro vykreslování flash message s přidáním tříd pro CSS Bootstrap 3.1
use Librette\FlashMessages\TEnhancedFlashMessages;
2
use Librette\FlashMessages\Component\TFlashMessages;
3
4
class HomepagePresenter extends Nette\Application\UI\Presenter
5
{
6
use TEnhancedFlashMessages;
7
use TFlashMessages;
8
9
...
Copied!
v šabloně použijeme
1
{control flashMessages}
Copied!
Zde bych jen upozornil, že tato komponenta má šablonu připravenou pro CSS Boostrap 3 a řeší "přejmenování" typu
error na css třídu danger což mi přijde super.IPub/FlashMessages
Instalace
$ composer require ipub/flash-messagesTato komponenta má o dost více kodu nežli předchozí. Bonus jsou testy a dokumentace. Při letmém zkoumání (nebo z dokumentace) zjistíte, že se registruje do systému jako extension
1
extensions:
2
flashMessages: IPub\FlashMessages\DI\FlashMessagesExtension
Copied!
do presenteru si ji opět přidáme použitím traity.
1
use IPub\FlashMessages;
2
3
class HomepagePresenter extends Nette\Application\UI\Presenter
4
{
5
use FlashMessages\TFlashMessages;
Copied!
V šabloně je třeba vždy použít komponentu. (komponenta používá vlastní řešení pro storage zpráv)
1
{control flashMessages}
Copied!
Poslání jednoduché zprávy je pak
1
$this->flashMessage('ui.wow', 'danger');
Copied!
Šablonu pro komponentu je možné změnit z defaultní na CSS Bootstrap nebo na UIkit v
config.neon1
flashMessages:
2
templateFile: bootstrap
Copied!
Komponenta má další dvě volby nastavení. Vypnutí/zapnutí "title" pro zprávu, a možnost takzvané overlay zprávy.
1
flashMessages:
2
useTitle: TRUE # defalní hodnota je TRUE
3
useOverlay: TRUE
Copied!
title:
[ /data/articles/8/title.png 500x? ]
overlay:
[ /data/articles/8/overlay.png 800x? ]
Bohužel na
title zprávy se neaplikuje překladač, takže pokud jí chcete použít je třeba delší zápis (v1.0.1)1
$this->flashMessage('ui.wow', 'danger', $this->translator->translate('ui.error'));
Copied!
Pokud chcete použít parametry pro překlad a nepoužít title je třeba ho přeskočit včetně přepínače pro overlay zprávu.
1
$this->flashMessage('ui.num', 'info', NULL, FALSE, 1);
2
$this->flashMessage('ui.name', 'success', NULL, FALSE, ['name' => "Karel"]);
Copied!
To už tak pekně nevypadá.
Spolu s přepsanou metodou
flashMessege() tato komponenta přichází s objektem $this->flashNotifier, který přináší pár zkratek, například:1
$this->flashNotifier->overlay('ui.wow');
2
$this->flashNotifier->error('ui.wow');
Copied!
Overlay jsem zkoušel s nastavenou šablonou pro Bootstrap, kde jsem si načetl nějaký JavaScript a postaral se zobrazení overlay zprávy.
1
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
2
3
...
4
5
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
6
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
7
<script n:syntax="double">
8
$(function(){
9
$('.modal').modal();
10
});
11
</script>
Copied!
(hodně lehká verze inicializace co nebude fungovat s flash zprávou a snippetem)
Další výhodou této komponenty je, že traitu můžete použít ve vaší komponentě a odesílat flash zprávičky přímo z vaší komponenty. Toto v současné době řeším přes události co probublají do presenteru a ten se o flash message postará. Pokud pracujete hodně s komponentama imho velmi zajímavá vlastnost.
Závěr
Librette mi přijde pro mé potřeby jako dostatečné řešení. V IPub bych bral inspiraci, pokud bych potřeboval něco více. Na druhou stranu i použití IPub v projektu, kde je Bootstap a chcete posílat jen krátké zprávy není špatná cesta a pokud chcete občas poslat overlay zprávu, tak je to pěkné hotové řešení. Jen pořadí parametrů mi přijde nevhodně zvolené a to že "title" si musím případně překládat sám (v1.0.1).
PS: Jak řešíte překlady flash zpráviček vy?
Last modified 1yr ago