Skip to content

Commit

Permalink
form: improvements (#995)(#996)(#997)(#998)
Browse files Browse the repository at this point in the history
  • Loading branch information
mildabre authored and dg committed Apr 8, 2023
1 parent bff75fe commit fdbf9f1
Show file tree
Hide file tree
Showing 16 changed files with 256 additions and 160 deletions.
26 changes: 16 additions & 10 deletions forms/bg/rendering.texy
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
Изобразяване на форми
*********************

Външният вид на формите може да варира значително. Всъщност има две крайности. Първият е, че се налага да създадете отново набор от много сходни формуляри с малко или никакви усилия. Обикновено това са формуляри в задната част на системата.
Външният вид на формите може да бъде много разнообразен. На практика можем да се сблъскаме с две крайности. От една страна, има нужда от визуализиране на поредица от формуляри в дадено приложение, които визуално си приличат един на друг, и оценяваме лесното визуализиране без шаблон с помощта на `$form->render()`. Такъв обикновено е случаят с административните интерфейси.

На другия полюс са малки, сладки форми, всяка от които е произведение на изкуството. Тяхното оформление е най-добре да бъде написано в HTML. Разбира се, отвъд тези крайности има много междинни форми.
От друга страна, има различни формуляри, в които всеки един е уникален. Техният външен вид се описва най-добре с помощта на езика HTML в шаблона. И разбира се, освен двете споменати крайности, ще срещнем много форми, които попадат някъде по средата.


Latte .[#toc-latte]
===================
Рендъринг с Latte .[#toc-rendering-with-latte]
==============================================

[Системата за шаблони Latte |latte:] улеснява значително изчертаването на форми и техните елементи. Първо ще ви покажем как да визуализирате формулярите ръчно, елемент по елемент, за да получите пълен контрол върху кода. По-късно ще ви покажем как да [автоматизирате |#Automatic-Rendering] такова визуализиране.

Expand Down Expand Up @@ -152,6 +152,12 @@ protected function createComponentSignInForm(): Form
```


`{form}`
--------

Етикети `{form signInForm}...{/form}` са алтернатива на `<form n:name="signInForm">...</form>`.


Автоматично визуализиране .[#toc-automatic-rendering]
-----------------------------------------------------

Expand Down Expand Up @@ -256,8 +262,8 @@ protected function createComponentSignInForm(): Form
```


Без Latte .[#toc-without-latte]
===============================
Изобразяване без Latte .[#toc-rendering-without-latte]
======================================================

Най-лесният начин за показване на формата е да извикате

Expand Down Expand Up @@ -321,13 +327,13 @@ Renderer .[#toc-renderer]
<tr class="required">
<th><label class="required" for="frm-name">Name:</label></th>

<td><input type="text" class="text" name="name" id="frm-name" value=""></td>
<td><input type="text" class="text" name="name" id="frm-name" required value=""></td>
</tr>

<tr class="required">
<th><label class="required" for="frm-age">Age:</label></th>

<td><input type="text" class="text" name="age" id="frm-age" value=""></td>
<td><input type="text" class="text" name="age" id="frm-age" required value=""></td>
</tr>

<tr>
Expand Down Expand Up @@ -357,12 +363,12 @@ $form->render();
<dl>
<dt><label class="required" for="frm-name">Name:</label></dt>

<dd><input type="text" class="text" name="name" id="frm-name" value=""></dd>
<dd><input type="text" class="text" name="name" id="frm-name" required value=""></dd>


<dt><label class="required" for="frm-age">Age:</label></dt>

<dd><input type="text" class="text" name="age" id="frm-age" value=""></dd>
<dd><input type="text" class="text" name="age" id="frm-age" required value=""></dd>


<dt><label>Gender:</label></dt>
Expand Down
26 changes: 16 additions & 10 deletions forms/cs/rendering.texy
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
Vykreslování formulářů
**********************

Vzhled formulářů může být velmi různorodý. V praxi můžeme narazit na dva extrémy. Na jedné straně stojí potřeba v aplikaci vykreslovat řadu formulářů, které jsou si vizuálně podobné jako vejce vejci, a oceníme snadné vykreslení pomocí `$form->render()`. Jde obvykle o případ administračních rozhraní.
Vzhled formulářů může být velmi různorodý. V praxi můžeme narazit na dva extrémy. Na jedné straně stojí potřeba v aplikaci vykreslovat řadu formulářů, které jsou si vizuálně podobné jako vejce vejci, a oceníme snadné vykreslení bez šablony pomocí `$form->render()`. Jde obvykle o případ administračních rozhraní.

Na druhé straně tu jsou rozmanité formuláře, kde platí: co kus, to originál. Jejich podobu nejlépe popíšeme jazykem HTML. A samozřejmě kromě obou zmíněných extrémů narazíme na spoustu formulářů, které se pohybují někde mezi.
Na druhé straně tu jsou rozmanité formuláře, kde platí: co kus, to originál. Jejich podobu nejlépe popíšeme jazykem HTML v šabloně formuláře. A samozřejmě kromě obou zmíněných extrémů narazíme na spoustu formulářů, které se pohybují někde mezi.


Latte
=====
Vykreslení pomocí Latte
=======================

[Šablonovací sytém Latte|latte:] zásadně usnadňuje vykreslení formulářů a jejich prvků. Nejprve si ukážeme, jak formuláře vykreslovat ručně po jednotlivých prvcích a tím získat plnou kontrolu nad kódem. Později si ukážeme, jak lze takové vykreslování [zautomatizovat |#Automatické vykreslování].

Expand Down Expand Up @@ -152,6 +152,12 @@ Přítomnost chyby můžeme zjistit metodou `hasErrors()` a podle toho nastavit
```


`{form}`
--------

Značky `{form signInForm}...{/form}` jsou alternativou k `<form n:name="signInForm">...</form>`.


Automatické vykreslování
------------------------

Expand Down Expand Up @@ -256,8 +262,8 @@ S vykreslením prvků uvnitř formulářového kontejneru pomůže tag `{formCon
```


Bez Latte
=========
Vykreslení bez Latte
====================

Nejjednodušší způsob, jak vykreslit formulář, je zavolat:

Expand Down Expand Up @@ -321,13 +327,13 @@ Pokud nenastavíme vlastní renderer, bude použit výchozí vykreslovač [api:N
<tr class="required">
<th><label class="required" for="frm-name">Jméno:</label></th>

<td><input type="text" class="text" name="name" id="frm-name" value=""></td>
<td><input type="text" class="text" name="name" id="frm-name" required value=""></td>
</tr>

<tr class="required">
<th><label class="required" for="frm-age">Věk:</label></th>

<td><input type="text" class="text" name="age" id="frm-age" value=""></td>
<td><input type="text" class="text" name="age" id="frm-age" required value=""></td>
</tr>

<tr>
Expand Down Expand Up @@ -357,12 +363,12 @@ Výsledkem je tento HTML kód:
<dl>
<dt><label class="required" for="frm-name">Jméno:</label></dt>

<dd><input type="text" class="text" name="name" id="frm-name" value=""></dd>
<dd><input type="text" class="text" name="name" id="frm-name" required value=""></dd>


<dt><label class="required" for="frm-age">Věk:</label></dt>

<dd><input type="text" class="text" name="age" id="frm-age" value=""></dd>
<dd><input type="text" class="text" name="age" id="frm-age" required value=""></dd>


<dt><label>Pohlaví:</label></dt>
Expand Down
26 changes: 16 additions & 10 deletions forms/de/rendering.texy
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
Formulare Rendering
*******************

Das Erscheinungsbild von Formularen kann sehr unterschiedlich sein. In der Tat gibt es zwei Extreme. Die eine Seite ist die Notwendigkeit, eine Reihe sehr ähnlicher Formulare mit wenig bis gar keinem Aufwand immer wieder neu zu rendern. In der Regel sind das Verwaltungen und Back-Ends.
Das Erscheinungsbild von Formularen kann sehr unterschiedlich sein. In der Praxis können wir auf zwei Extreme stoßen. Einerseits besteht die Notwendigkeit, eine Reihe von Formularen in einer Anwendung darzustellen, die sich optisch ähneln, und wir schätzen die einfache Darstellung ohne Vorlage mit `$form->render()`. Dies ist normalerweise bei Verwaltungsschnittstellen der Fall.

Die andere Seite sind kleine, süße Formulare, von denen jedes einzelne ein Kunstwerk ist. Ihr Layout kann am besten in HTML geschrieben werden. Natürlich gibt es neben diesen Extremen auch viele Formulare, die genau dazwischen liegen.
Andererseits gibt es verschiedene Formulare, von denen jedes einzelne einzigartig ist. Ihr Aussehen wird am besten durch die HTML-Sprache in der Vorlage beschrieben. Und natürlich werden wir neben den beiden genannten Extremen auch viele Formulare finden, die irgendwo dazwischen liegen.


Latte .[#toc-latte]
===================
Rendering mit Latte .[#toc-rendering-with-latte]
================================================

Das [Latte-Templating-System |latte:] erleichtert das Rendern von Formularen und ihren Elementen grundlegend. Wir werden zunächst zeigen, wie man Formulare manuell, Element für Element, rendern kann, um die volle Kontrolle über den Code zu erhalten. Später werden wir zeigen, wie man dieses Rendering [automatisieren |#Automatic rendering] kann.

Expand Down Expand Up @@ -152,6 +152,12 @@ Wir können das Vorhandensein eines Fehlers mit der Methode `hasErrors()` erkenn
```


`{form}`
--------

Tags `{form signInForm}...{/form}` sind eine Alternative zu `<form n:name="signInForm">...</form>`.


Automatisches Rendering .[#toc-automatic-rendering]
---------------------------------------------------

Expand Down Expand Up @@ -256,8 +262,8 @@ Das Tag `formContainer` hilft beim Rendern von Eingaben innerhalb eines Formular
```


Ohne Latte .[#toc-without-latte]
================================
Rendering ohne Latte .[#toc-rendering-without-latte]
====================================================

Der einfachste Weg, ein Formular zu rendern, ist der Aufruf:

Expand Down Expand Up @@ -321,13 +327,13 @@ Wenn wir keinen benutzerdefinierten Renderer festlegen, wird der Standard-Render
<tr class="required">
<th><label class="required" for="frm-name">Name:</label></th>

<td><input type="text" class="text" name="name" id="frm-name" value=""></td>
<td><input type="text" class="text" name="name" id="frm-name" required value=""></td>
</tr>

<tr class="required">
<th><label class="required" for="frm-age">Age:</label></th>

<td><input type="text" class="text" name="age" id="frm-age" value=""></td>
<td><input type="text" class="text" name="age" id="frm-age" required value=""></td>
</tr>

<tr>
Expand Down Expand Up @@ -357,12 +363,12 @@ Das Ergebnis ist der folgende Ausschnitt:
<dl>
<dt><label class="required" for="frm-name">Name:</label></dt>

<dd><input type="text" class="text" name="name" id="frm-name" value=""></dd>
<dd><input type="text" class="text" name="name" id="frm-name" required value=""></dd>


<dt><label class="required" for="frm-age">Age:</label></dt>

<dd><input type="text" class="text" name="age" id="frm-age" value=""></dd>
<dd><input type="text" class="text" name="age" id="frm-age" required value=""></dd>


<dt><label>Gender:</label></dt>
Expand Down
26 changes: 16 additions & 10 deletions forms/el/rendering.texy
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
Μορφές απόδοσης
***************

Η εμφάνιση των φορμών μπορεί να διαφέρει σημαντικά. Στην πραγματικότητα, υπάρχουν δύο ακραίες καταστάσεις. Η μία πλευρά είναι η ανάγκη να αποδώσετε ένα σύνολο πολύ παρόμοιων φορμών από την αρχή, με ελάχιστη έως καθόλου προσπάθεια. Συνήθως πρόκειται για διαχειρίσεις και back-ends.
Η εμφάνιση των μορφών μπορεί να είναι πολύ διαφορετική. Στην πράξη, μπορούμε να συναντήσουμε δύο άκρα. Από τη μία πλευρά, υπάρχει η ανάγκη απόδοσης μιας σειράς φορμών σε μια εφαρμογή που είναι οπτικά παρόμοιες μεταξύ τους και εκτιμούμε την εύκολη απόδοση χωρίς πρότυπο με τη χρήση του `$form->render()`. Αυτή είναι συνήθως η περίπτωση των διοικητικών διεπαφών.

Η άλλη πλευρά είναι οι μικροσκοπικές γλυκές φόρμες, κάθε μία από τις οποίες είναι ένα κομμάτι τέχνης. Η διάταξή τους μπορεί να γραφτεί καλύτερα σε HTML. Φυσικά, εκτός από αυτά τα άκρα, υπάρχουν πολλές φόρμες ακριβώς στο ενδιάμεσο.
Από την άλλη πλευρά, υπάρχουν διάφορες φόρμες όπου η κάθε μία είναι μοναδική. Η εμφάνισή τους περιγράφεται καλύτερα με τη χρήση της γλώσσας HTML στο πρότυπο. Και φυσικά, εκτός από τα δύο προαναφερθέντα άκρα, θα συναντήσουμε πολλές φόρμες που βρίσκονται κάπου ενδιάμεσα.


Latte .[#toc-latte]
===================
Απεικόνιση με Latte .[#toc-rendering-with-latte]
================================================

Το [σύστημα προτύπων Latte |latte:] διευκολύνει ουσιαστικά την απόδοση των μορφών και των στοιχείων τους. Αρχικά, θα δείξουμε πώς να αποδίδουμε τις φόρμες χειροκίνητα, στοιχείο προς στοιχείο, για να αποκτήσουμε πλήρη έλεγχο του κώδικα. Αργότερα θα δείξουμε πώς να [αυτοματοποιήσουμε |#Automatic rendering] την εν λόγω απόδοση.

Expand Down Expand Up @@ -152,6 +152,12 @@ protected function createComponentSignInForm(): Form
```


`{form}`
--------

Ετικέτες `{form signInForm}...{/form}` είναι μια εναλλακτική λύση για `<form n:name="signInForm">...</form>`.


Αυτόματη απόδοση .[#toc-automatic-rendering]
--------------------------------------------

Expand Down Expand Up @@ -256,8 +262,8 @@ protected function createComponentSignInForm(): Form
```


Χωρίς Latte .[#toc-without-latte]
=================================
Εκτέλεση χωρίς Latte .[#toc-rendering-without-latte]
====================================================

Ο ευκολότερος τρόπος για να αποδώσετε μια φόρμα είναι να καλέσετε:

Expand Down Expand Up @@ -321,13 +327,13 @@ Renderer .[#toc-renderer]
<tr class="required">
<th><label class="required" for="frm-name">Name:</label></th>

<td><input type="text" class="text" name="name" id="frm-name" value=""></td>
<td><input type="text" class="text" name="name" id="frm-name" required value=""></td>
</tr>

<tr class="required">
<th><label class="required" for="frm-age">Age:</label></th>

<td><input type="text" class="text" name="age" id="frm-age" value=""></td>
<td><input type="text" class="text" name="age" id="frm-age" required value=""></td>
</tr>

<tr>
Expand Down Expand Up @@ -357,12 +363,12 @@ $form->render();
<dl>
<dt><label class="required" for="frm-name">Name:</label></dt>

<dd><input type="text" class="text" name="name" id="frm-name" value=""></dd>
<dd><input type="text" class="text" name="name" id="frm-name" required value=""></dd>


<dt><label class="required" for="frm-age">Age:</label></dt>

<dd><input type="text" class="text" name="age" id="frm-age" value=""></dd>
<dd><input type="text" class="text" name="age" id="frm-age" required value=""></dd>


<dt><label>Gender:</label></dt>
Expand Down
26 changes: 16 additions & 10 deletions forms/en/rendering.texy
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
Forms Rendering
***************

Forms' appearances can differ greatly. In fact, there are two extremes. One side is the need to render a set of very similar forms all over again, with little to none effort. Usually administrations and back-ends.
The appearance of forms can be very diverse. In practice, we can encounter two extremes. On one hand, there is a need to render a series of forms in an application that are visually similar to each other, and we appreciate the easy rendering without a template using `$form->render()`. This is usually the case with administrative interfaces.

The other side is tiny sweet forms, each one being a piece of art. Their layout can best be written in HTML. Of course, besides those extremes, there are many forms just in between.
On the other hand, there are various forms where each one is unique. Their appearance is best described using HTML language in the template. And of course, in addition to both mentioned extremes, we will encounter many forms that fall somewhere in between.


Latte
=====
Rendering with Latte
====================

The [Latte templating system|latte:] fundamentally facilitates the rendering of forms and their elements. First, we'll show how to render forms manually, element by element, to gain full control over the code. Later we will show how to [automate |#Automatic rendering] such rendering.

Expand Down Expand Up @@ -152,6 +152,12 @@ We can detect the presence of an error using the `hasErrors()` method and set th
```


`{form}`
--------

Tags `{form signInForm}...{/form}` are an alternative to `<form n:name="signInForm">...</form>`.


Automatic Rendering
-------------------

Expand Down Expand Up @@ -256,8 +262,8 @@ Tag `formContainer` helps with rendering of inputs inside a form container.
```


Without Latte
=============
Rendering Without Latte
=======================

The easiest way to render a form is to call:

Expand Down Expand Up @@ -321,13 +327,13 @@ If we don't set a custom renderer, the default renderer [api:Nette\Forms\Renderi
<tr class="required">
<th><label class="required" for="frm-name">Name:</label></th>

<td><input type="text" class="text" name="name" id="frm-name" value=""></td>
<td><input type="text" class="text" name="name" id="frm-name" required value=""></td>
</tr>

<tr class="required">
<th><label class="required" for="frm-age">Age:</label></th>

<td><input type="text" class="text" name="age" id="frm-age" value=""></td>
<td><input type="text" class="text" name="age" id="frm-age" required value=""></td>
</tr>

<tr>
Expand Down Expand Up @@ -357,12 +363,12 @@ Results into the following snippet:
<dl>
<dt><label class="required" for="frm-name">Name:</label></dt>

<dd><input type="text" class="text" name="name" id="frm-name" value=""></dd>
<dd><input type="text" class="text" name="name" id="frm-name" required value=""></dd>


<dt><label class="required" for="frm-age">Age:</label></dt>

<dd><input type="text" class="text" name="age" id="frm-age" value=""></dd>
<dd><input type="text" class="text" name="age" id="frm-age" required value=""></dd>


<dt><label>Gender:</label></dt>
Expand Down
Loading

0 comments on commit fdbf9f1

Please sign in to comment.