UK translation (Nette stands with Ukraine 💙💛)

Author: dg

application/uk/@home.texy

@@ -0,0 +1,36 @@
+Nette Application
+*****************
+
+.[perex]
+Пакет `nette/application` є основою для створення інтерактивних веб-додатків.
+
+- [Як працюють додатки? |how-it-works]
+- [Bootstrap |Bootstrap]
+- [Презентери |presenters]
+- [Шаблони |templates]
+- [Модулі |modules]
+- [Маршрутизація |routing]
+- [Створення URL-посилань |creating-links]
+- [Інтерактивні компоненти |components]
+- [AJAX і сніпети |ajax]
+- [Multiplier |Multiplier]
+- [Конфігурація |configuration]
+
+
+Встановлення
+------------
+
+Завантажте та встановіть пакет за допомогою [Composer |best-practices:composer]:
+
+```shell
+composer require nette/application
+```
+
+| версія пакета | сумісна версія PHP
+|-----------------------|-----------------------
+| Nette Application 4.0 | PHP 8.0 - 8.1
+| Nette Application 3.1 | PHP 7.2 - 8.1
+| Nette Application 3.0 | PHP 7.1 - 8.0
+| Nette Application 2.4 | PHP 5.6 - 8.0
+
+Застосовується до останніх версій патчів.

application/uk/@left-menu.texy

@@ -0,0 +1,19 @@
+Додаток Nette
+*************
+- [Як працюють додатки? |how-it-works]
+- [Bootstrap |Bootstrap]
+- [Презентери |presenters]
+- [Шаблони |templates]
+- [Модулі |modules]
+- [Маршрутизація |routing]
+- [Створення URL-посилань |creating-links]
+- [Інтерактивні компоненти |components]
+- [AJAX і сніпети |ajax]
+- [Multiplier |Multiplier]
+- [Конфігурація |configuration]
+
+
+Подальше читання
+****************
+- [Кращі практики |best-practices:]
+- [Усунення неполадок |nette:troubleshooting]

application/uk/ajax.texy

@@ -0,0 +1,266 @@
+AJAX і сніпети
+**************
+
+<div class=perex>
+
+Сучасні веб-додатки сьогодні працюють наполовину на сервері, а наполовину в браузері. AJAX є життєво важливим об'єднуючим фактором. Яку підтримку пропонує фреймворк Nette?
+- надсилання фрагментів шаблонів (так званих *сніпетів*)
+- передача змінних між PHP і JavaScript
+- Налагодження додатків AJAX
+
+</div>
+
+AJAX-запит може бути виявлений за допомогою методу сервісу [інкапсуляція HTTP-запиту |http:request] `$httpRequest->isAjax()` (визначає на основі HTTP-заголовка `X-Requested-With`). Існує також скорочений метод у презентері: `$this->isAjax()`.
+
+AJAX-запит нічим не відрізняється від звичайного - викликається презентер з певним поданням і параметрами. Від презентера також залежить, як він відреагує: він може використати свої процедури для повернення фрагмента HTML-коду (сніпету), XML-документа, об'єкта JSON або фрагмента коду Javascript.
+
+Існує попередньо оброблений об'єкт `payload`, призначений для надсилання даних у браузер у форматі JSON.
+
+```php
+public function actionDelete(int $id): void
+{
+	if ($this->isAjax()) {
+		$this->payload->message = 'Успішно';
+	}
+	// ...
+}
+```
+
+Для повного контролю над виведенням JSON використовуйте метод `sendJson` у презентері. Це негайно перерве роботу презентера, і ви обійдетеся без шаблону:
+
+```php
+$this->sendJson(['key' => 'value', /* ... */]);
+```
+
+Якщо ми хочемо надіслати HTML, ми можемо встановити спеціальний шаблон для AJAX-запитів:
+
+```php
+public function handleClick($param): void
+{
+	if ($this->isAjax()) {
+		$this->template->setFile('path/to/ajax.latte');
+	}
+	// ...
+}
+```
+
+
+Naja .[#toc-naja]
+=================
+
+[Бібліотека Naja |https://naja.js.org] використовується для обробки AJAX-запитів на стороні браузера. [Встановіть |https://naja.js.org/#/guide/01-install-setup-naja] його як пакет node.js (для використання з Webpack, Rollup, Vite, Parcel та іншими):
+
+```shell
+npm install naja
+```
+
+...або вставити безпосередньо в шаблон сторінки:
+
+```html
+<script src="https://unpkg.com/naja@2/dist/Naja.min.js"></script>
+```
+
+
+Сніпети .[#toc-snippety]
+========================
+
+Однак існує набагато потужніший інструмент вбудованої підтримки AJAX - сніпети. Їхнє використання дає змогу перетворити звичайний застосунок на AJAX-додаток за допомогою лише кількох рядків коду. Як усе це працює, показано в прикладі Fifteen, код якого також доступний у збірці або на [GitHub |https://github.com/nette-examples/fifteen].
+
+Принцип роботи сніпетів полягає в тому, що всю сторінку передають під час початкового (тобто не-AJAX) запиту, а потім із кожним AJAX [subrequest |components#Signal] (запит до того самого подання того самого презентера) тільки код змінених частин передають до сховища `payload`, згаданого раніше.
+
+Сніпети можуть нагадати вам Hotwire для Ruby on Rails або Symfony UX Turbo, але Nette придумав їх чотирнадцятьма роками раніше.
+
+
+Інвалідація .[#toc-invalidation-of-snippets]
+============================================
+
+Кожен нащадок класу [Control |components] (яким є і Presenter) здатний пам'ятати, чи були якісь зміни під час запиту, що вимагають повторного відображення. Існує кілька способів впоратися з цим: `redrawControl()` і `isControlInvalid()`. Приклад:
+
+```php
+public function handleLogin(string $user): void
+{
+	// Об'єкт має повторно відображатися після того, як користувач увійшов у систему
+	$this->redrawControl();
+	// ...
+}
+```
+Однак Nette забезпечує ще більш тонкий дозвіл, ніж цілі компоненти. Перераховані методи приймають ім'я так званого "фрагмента" як необов'язковий параметр. "Фрагмет" це, по суті, елемент у вашому шаблоні, позначений для цієї мети макросом Latte, докладніше про це пізніше. Таким чином, можна попросити компонент перемалювати тільки *частину* свого шаблону. Якщо весь компонент недійсний, то всі його фрагменти відображаються заново. Компонент є "недійсним", якщо будь-який з його субкомпонентів є недійсним.
+
+```php
+$this->isControlInvalid(); // -> false
+
+$this->redrawControl('header'); // анулює фрагмент з ім'ям 'header'
+$this->isControlInvalid('header'); // -> true
+$this->isControlInvalid('footer'); // -> false
+$this->isControlInvalid(); // -> true, принаймні один фрагмент недійсний
+
+$this->redrawControl(); // робить недійсним весь компонент, кожен фрагмент
+$this->isControlInvalid('footer'); // -> true
+```
+
+Компонент, який отримав сигнал, автоматично позначається для перемальовування.
+
+Завдяки перемальовуванню фрагментів ми точно знаємо, які частини яких елементів мають бути перемальовані.
+
+
+Тег `{snippet} … {/snippet}` .{toc: Tag snippet}
+================================================
+
+Рендеринг сторінки відбувається так само, як і під час звичайного запиту: завантажуються одні й ті самі шаблони тощо. Однак найважливіше - це не допустити потрапляння до вихідного сигналу тих частин, які не повинні потрапити до вихідного сигналу; інші частини мають бути пов'язані з ідентифікатором і надіслані користувачеві у форматі, зрозумілому для обробника JavaScript.
+
+
+Синтаксис .[#toc-sintaksis]
+---------------------------
+
+Якщо в шаблоні є елемент управління або фрагмент, ми повинні обернути його за допомогою парного тега `{snippet} ... {/snippet}` - відмальований фрагмент буде "вирізаний" і відправиться в браузер. Він також укладе його в допоміжний тег `<div>` (можна використовувати інший). У наступному прикладі визначено сніппет з ім'ям `header`. Він також може являти собою шаблон компонента:
+
+```latte
+{snippet header}
+	<h1>Hello ... </h1>
+{/snippet}
+```
+
+Якщо ви хочете створити сніппет з іншим елементом, що містить, відмінним від `<div>`, або додати користувацькі атрибути до елемента, ви можете використовувати таке визначення:
+
+```latte
+<article n:snippet="header" class="foo bar">
+	<h1>Hello ... </h1>
+</article>
+```
+
+
+Динамічні сніпети .[#toc-dinamiceskie-snippety]
+===============================================
+
+У Nette ви також можете визначити сніпети з динамічним ім'ям, заснованим на параметрі часу виконання. Це найбільше підходить для різних списків, де нам потрібно змінити лише один рядок, але ми не хочемо переносити весь список разом із ним. Прикладом цього може бути:
+
+```latte
+<ul n:snippet="itemsContainer">
+	{foreach $list as $id => $item}
+		<li n:snippet="item-$id">{$item} <a class="ajax" n:href="update! $id">обновить</a></li>
+	{/foreach}
+</ul>
+```
+
+Існує один статичний сніппет `itemsContainer`, що містить кілька динамічних сніпетів: `пункт-0`, `пункт-1` і так далі.
+
+Ви не можете перемалювати динамічний фрагмент безпосередньо (перемальовування `item-1` не має ефекту), ви маєте перемалювати його батьківський фрагмент (у цьому прикладі `itemsContainer`). При цьому виконується код батьківського сніпета, але браузеру передаються тільки його вкладені сніпети. Якщо ви хочете передати тільки один із вкладених сніпетів, вам потрібно змінити введення для батьківського сніпета, щоб не генерувати інші вкладені сніпети.
+
+У наведеному прикладі необхідно переконатися, що під час AJAX-запиту до масиву `$list` буде додано тільки один елемент, тому цикл `foreach` виводитиме тільки один динамічний фрагмент.
+
+```php
+class HomepagePresenter extends Nette\Application\UI\Presenter
+{
+	/**
+	 * Этот метод возвращает данные для списка.
+	 * Обычно это просто запрос данных из модели.
+	 * Для целей этого примера данные жёстко закодированы.
+	 */
+	private function getTheWholeList(): array
+	{
+		return [
+			'First',
+			'Second',
+			'Third',
+		];
+	}
+
+	public function renderDefault(): void
+	{
+		if (!isset($this->template->list)) {
+			$this->template->list = $this->getTheWholeList();
+		}
+	}
+
+	public function handleUpdate(int $id): void
+	{
+		$this->template->list = $this->isAjax()
+				? []
+				: $this->getTheWholeList();
+		$this->template->list[$id] = 'Updated item';
+		$this->redrawControl('itemsContainer');
+	}
+}
+```
+
+
+Сніпети в увімкненому шаблоні .[#toc-snippety-vo-vklyucennom-sablone]
+=====================================================================
+
+Може трапитися так, що сніппет міститься в шаблоні, який вмикається з іншого шаблону. У цьому разі необхідно обернути код включення в другому шаблоні макросом `snippetArea`, потім перемалювати як snippetArea, так і сам сніппет.
+
+Макрос `snippetArea` гарантує, що код усередині нього буде виконано, але браузеру буде надіслано тільки фактичний фрагмент включеного шаблону.
+
+```latte
+{* parent.latte *}
+{snippetArea wrapper}
+	{include 'child.latte'}
+{/snippetArea}
+```
+```latte
+{* child.latte *}
+{snippet item}
+...
+{/snippet}
+```
+```php
+$this->redrawControl('wrapper');
+$this->redrawControl('item');
+```
+
+Ви також можете поєднувати його з динамічними сніпетами.
+
+
+Додавання та видалення .[#toc-dobavlenie-i-udalenie]
+====================================================
+
+Якщо додати новий елемент у список і анулювати `itemsContainer`, AJAX-запит поверне фрагменти, включно з новим, але javascript-обробник не зможе його відобразити. Це відбувається тому, що немає HTML-елемента з новоствореним ID.
+
+У цьому випадку найпростіший спосіб - обернути весь список у ще один сніпет і визнати його недійсним:
+
+```latte
+{snippet wholeList}
+<ul n:snippet="itemsContainer">
+	{foreach $list as $id => $item}
+	<li n:snippet="item-$id">{$item} <a class="ajax" n:href="update! $id">обновить</a></li>
+	{/foreach}
+</ul>
+{/snippet}
+<a class="ajax" n:href="add!">Добавить</a>
+```
+
+```php
+public function handleAdd(): void
+{
+	$this->template->list = $this->getTheWholeList();
+	$this->template->list[] = 'New one';
+	$this->redrawControl('wholeList');
+}
+```
+
+Те ж саме стосується і видалення елемента. Можна було б надіслати порожній сніппет, але зазвичай списки можуть бути посторінковими, і було б складно реалізувати видалення одного елемента і завантаження іншого (який раніше перебував на іншій сторінці посторінкового списку).
+
+
+Надсилання параметрів компоненту .[#toc-otpravka-parametrov-komponentu]
+=======================================================================
+
+Коли ми надсилаємо параметри компоненту через AJAX-запит, чи то сигнальні, чи постійні параметри, ми повинні надати їхнє глобальне ім'я, яке також містить ім'я компонента. Повне ім'я параметра повертає метод `getParameterId()`.
+
+```js
+$.getJSON(
+	{link changeCountBasket!},
+	{
+		{$control->getParameterId('id')}: id,
+		{$control->getParameterId('count')}: count
+	}
+});
+```
+
+І обробити метод з відповідними параметрами в компоненті.
+
+```php
+public function handleChangeCountBasket(int $id, int $count): void
+{
+
+}
+```