Μορφές απόδοσης

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

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

Απεικόνιση με Latte

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

Μπορείτε να έχετε την πρόταση ενός προτύπου Latte για τη φόρμα που δημιουργείται χρησιμοποιώντας τη μέθοδο Nette\Forms\Blueprint::latte($form), η οποία θα την εξάγει στη σελίδα του προγράμματος περιήγησης. Στη συνέχεια, πρέπει απλώς να επιλέξετε τον κώδικα με ένα κλικ και να τον αντιγράψετε στο έργο σας.

`{control}`

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

{control signInForm}

Η εμφάνιση της φόρμας που αποδίδεται μπορεί να αλλάξει με τη διαμόρφωση του Renderer και των επιμέρους στοιχείων ελέγχου.

`n:name`

Είναι εξαιρετικά εύκολο να συνδέσετε τον ορισμό της φόρμας σε κώδικα PHP με κώδικα HTML. Απλά προσθέστε τα χαρακτηριστικά n:name. Τόσο εύκολο είναι!

protected function createComponentSignInForm(): Form
{
	$form = new Form;
	$form->addText('username')->setRequired();
	$form->addPassword('password')->setRequired();
	$form->addSubmit('send');
	return $form;
}

<form n:name=signInForm class=form>
	<div>
		<label n:name=username>Username: <input n:name=username size=20 autofocus></label>
	</div>
	<div>
		<label n:name=password>Password: <input n:name=password></label>
	</div>
	<div>
		<input n:name=send class="btn btn-default">
	</div>
</form>

Η εμφάνιση του κώδικα HTML που προκύπτει είναι εξ ολοκλήρου στα χέρια σας. Αν χρησιμοποιήσετε το χαρακτηριστικό n:name με <select>, <button> ή <textarea> στοιχεία, το εσωτερικό τους περιεχόμενο συμπληρώνεται αυτόματα. Επιπλέον, το <form n:name> ετικέτα δημιουργεί μια τοπική μεταβλητή $form με το αντικείμενο της φόρμας που σχεδιάστηκε και το κλείσιμο </form> σχεδιάζει όλα τα μη σχεδιασμένα κρυμμένα στοιχεία (το ίδιο ισχύει και για το {form} ... {/form}).

Ωστόσο, δεν πρέπει να ξεχνάμε την απόδοση πιθανών μηνυμάτων σφάλματος. Τόσο εκείνα που προστέθηκαν σε μεμονωμένα στοιχεία από τη μέθοδο addError() (με τη χρήση του {inputError}) όσο και εκείνα που προστέθηκαν απευθείας στη φόρμα (επιστρέφονται από το $form->getOwnErrors()):

<form n:name=signInForm class=form>
	<ul class="errors" n:ifcontent>
		<li n:foreach="$form->getOwnErrors() as $error">{$error}</li>
	</ul>

	<div>
		<label n:name=username>Username: <input n:name=username size=20 autofocus></label>
		<span class=error n:ifcontent>{inputError username}</span>
	</div>
	<div>
		<label n:name=password>Password: <input n:name=password></label>
		<span class=error n:ifcontent>{inputError password}</span>
	</div>
	<div>
		<input n:name=send class="btn btn-default">
	</div>
</form>

Τα πιο σύνθετα στοιχεία της φόρμας, όπως η RadioList ή η CheckboxList, μπορούν να αποδοθούν ανά στοιχείο:

{foreach $form[gender]->getItems() as $key => $label}
	<label n:name="gender:$key"><input n:name="gender:$key"> {$label}</label>
{/foreach}

`{label}` `{input}`

Δεν θέλετε να σκεφτείτε για κάθε στοιχείο ποιο στοιχείο HTML να χρησιμοποιήσετε για αυτό στο πρότυπο, είτε <input>, <textarea> κ.λπ. Η λύση είναι η καθολική ετικέτα {input}:

<form n:name=signInForm class=form>
	<ul class="errors" n:ifcontent>
		<li n:foreach="$form->getOwnErrors() as $error">{$error}</li>
	</ul>

	<div>
		{label username}Username: {input username, size: 20, autofocus: true}{/label}
		{inputError username}
	</div>
	<div>
		{label password}Password: {input password}{/label}
		{inputError password}
	</div>
	<div>
		{input send, class: "btn btn-default"}
	</div>
</form>

Εάν η φόρμα χρησιμοποιεί μεταφραστή, το κείμενο μέσα στις ετικέτες {label} θα μεταφραστεί.

Και πάλι, πιο σύνθετα στοιχεία φόρμας, όπως RadioList ή CheckboxList, μπορούν να αποδοθούν ανά στοιχείο:

{foreach $form[gender]->items as $key => $label}
	{label gender:$key}{input gender:$key} {$label}{/label}
{/foreach}

Για να αποδώσετε το <input> στο στοιχείο Checkbox, χρησιμοποιήστε το {input myCheckbox:}. Τα χαρακτηριστικά HTML πρέπει να διαχωρίζονται με κόμμα {input myCheckbox:, class: required}.

`{inputError}`

Εκτυπώνει ένα μήνυμα σφάλματος για το στοιχείο της φόρμας, αν έχει τέτοιο. Το μήνυμα είναι συνήθως τυλιγμένο σε ένα στοιχείο HTML για μορφοποίηση. Η αποφυγή της απόδοσης ενός κενού στοιχείου αν δεν υπάρχει μήνυμα μπορεί να γίνει κομψά με το n:ifcontent:

<span class=error n:ifcontent>{inputError $input}</span>

Μπορούμε να ανιχνεύσουμε την παρουσία ενός σφάλματος χρησιμοποιώντας τη μέθοδο hasErrors() και να ορίσουμε ανάλογα την κλάση του γονικού στοιχείου:

<div n:class="$form[username]->hasErrors() ? 'error'">
	{input username}
	{inputError username}
</div>

`{form}`

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

Αυτόματη απόδοση

Με τις ετικέτες {input} και {label}, μπορούμε εύκολα να δημιουργήσουμε ένα γενικό πρότυπο για οποιαδήποτε φόρμα. Θα επαναλαμβάνει και θα αποδίδει όλα τα στοιχεία της διαδοχικά, εκτός από τα κρυμμένα στοιχεία, τα οποία αποδίδονται αυτόματα όταν η φόρμα τερματίζεται με την εντολή </form> ετικέτα. Θα περιμένει το όνομα της αποδιδόμενης φόρμας στη μεταβλητή $form.

<form n:name=$form class=form>
	<ul class="errors" n:ifcontent>
		<li n:foreach="$form->getOwnErrors() as $error">{$error}</li>
	</ul>

	<div n:foreach="$form->getControls() as $input"
		n:if="$input->getOption(type) !== hidden">
		{label $input /}
		{input $input}
		{inputError $input}
	</div>
</form>

Οι χρησιμοποιούμενες αυτοκλειόμενες ετικέτες ζεύγους {label .../} εμφανίζουν τις ετικέτες που προέρχονται από τον ορισμό της φόρμας στον κώδικα PHP.

Μπορείτε να αποθηκεύσετε αυτό το γενικό πρότυπο στο αρχείο basic-form.latte και για να αποδώσετε τη φόρμα, απλά να το συμπεριλάβετε και να περάσετε το όνομα της φόρμας (ή την περίπτωση) στην παράμετρο $form:

{include basic-form.latte, form: signInForm}

Αν θέλετε να επηρεάσετε την εμφάνιση μιας συγκεκριμένης φόρμας και να σχεδιάσετε ένα στοιχείο διαφορετικά, τότε ο ευκολότερος τρόπος είναι να προετοιμάσετε μπλοκ στο πρότυπο που μπορούν να αντικατασταθούν αργότερα. Τα μπλοκ μπορούν επίσης να έχουν δυναμικά ονόματα, ώστε να μπορείτε να εισάγετε σε αυτά το όνομα του στοιχείου που πρόκειται να σχεδιαστεί. Για παράδειγμα:

...
	{label $input /}
	{block "input-{$input->name}"}{input $input}{/block}
...

Για το στοιχείο π.χ. username αυτό δημιουργεί το μπλοκ input-username, το οποίο μπορεί εύκολα να παρακαμφθεί με τη χρήση της ετικέτας {embed}:

{embed basic-form.latte, form: signInForm}
	{block input-username}
		<span class=important>
			{include parent}
		</span>
	{/block}
{/embed}

Εναλλακτικά, ολόκληρο το περιεχόμενο του προτύπου basic-form.latte μπορεί να οριστεί ως μπλοκ, συμπεριλαμβανομένης της παραμέτρου $form:

{define basic-form, $form}
	<form n:name=$form class=form>
		...
	</form>
{/define}

Αυτό θα διευκολύνει ελαφρώς τη χρήση του:

{embed basic-form, signInForm}
	...
{/embed}

Χρειάζεται να εισάγετε το μπλοκ μόνο σε ένα σημείο, στην αρχή του προτύπου διάταξης:

{import basic-form.latte}

Ειδικές περιπτώσεις

Αν θέλετε να αποδώσετε μόνο το εσωτερικό μέρος της φόρμας χωρίς ετικέτες HTML <form>, για παράδειγμα κατά την αποστολή αποσπασμάτων, αποκρύψτε τα χρησιμοποιώντας το χαρακτηριστικό n:tag-if:

<form n:name=signInForm n:tag-if=false>
	<div>
		<label n:name=username>Username: <input n:name=username></label>
		{inputError username}
	</div>
</form>

Η ετικέτα formContainer βοηθά στην απόδοση των εισόδων μέσα σε ένα δοχείο φόρμας.

<p>Which news you wish to receive:</p>

{formContainer emailNews}
<ul>
	<li>{input sport} {label sport /}</li>
	<li>{input science} {label science /}</li>
</ul>
{/formContainer}

Εκτέλεση χωρίς Latte

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

$form->render();

Η εμφάνιση της φόρμας που αποδίδεται μπορεί να αλλάξει με τη ρύθμιση των παραμέτρων του Renderer και των μεμονωμένων στοιχείων ελέγχου.

Χειροκίνητη απόδοση

Κάθε στοιχείο φόρμας διαθέτει μεθόδους που δημιουργούν τον κώδικα HTML για το πεδίο και την ετικέτα της φόρμας. Μπορούν να τον επιστρέψουν είτε ως συμβολοσειρά είτε ως αντικείμενο Nette\Utils\Html:

getControl(): Html|string επιστρέφει τον κώδικα HTML του στοιχείου
getLabel($caption = null): Html|string|null επιστρέφει τον κώδικα HTML της ετικέτας, εάν υπάρχει.

Αυτό επιτρέπει την απόδοση της φόρμας ανά στοιχείο:

<?php $form->render('begin') ?>
<?php $form->render('errors') ?>

<div>
	<?= $form['name']->getLabel() ?>
	<?= $form['name']->getControl() ?>
	<span class=error><?= htmlspecialchars($form['name']->getError()) ?></span>
</div>

<div>
	<?= $form['age']->getLabel() ?>
	<?= $form['age']->getControl() ?>
	<span class=error><?= htmlspecialchars($form['age']->getError()) ?></span>
</div>

// ...

<?php $form->render('end') ?>

Ενώ για ορισμένα στοιχεία το getControl() επιστρέφει ένα μόνο στοιχείο HTML (π.χ. <input>, <select> κ.λπ.), για άλλα επιστρέφει ένα ολόκληρο κομμάτι κώδικα HTML (CheckboxList, RadioList). Σε αυτή την περίπτωση, μπορείτε να χρησιμοποιήσετε μεθόδους που παράγουν μεμονωμένες εισόδους και ετικέτες, για κάθε στοιχείο ξεχωριστά:

getControlPart($key = null): ?Html επιστρέφει τον κώδικα HTML ενός μεμονωμένου στοιχείου.
getLabelPart($key = null): ?Html επιστρέφει τον κώδικα HTML για την ετικέτα ενός μεμονωμένου στοιχείου.

Αυτές οι μέθοδοι έχουν ως πρόθεμα το get για ιστορικούς λόγους, αλλά το generate θα ήταν καλύτερο, καθώς δημιουργεί και επιστρέφει ένα νέο στοιχείο Html σε κάθε κλήση.

Renderer

Είναι ένα αντικείμενο που παρέχει την απόδοση της φόρμας. Μπορεί να οριστεί από τη μέθοδο $form->setRenderer. Μεταβιβάζεται ο έλεγχος όταν καλείται η μέθοδος $form->render().

Εάν δεν ορίσουμε έναν προσαρμοσμένο renderer, θα χρησιμοποιηθεί ο προεπιλεγμένος renderer Nette\Forms\Rendering\DefaultFormRenderer. Αυτός θα αποδώσει τα στοιχεία της φόρμας ως πίνακα HTML. Η έξοδος μοιάζει με αυτό:

<table>
<tr class="required">
	<th><label class="required" for="frm-name">Name:</label></th>

	<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" required value=""></td>
</tr>

<tr>
	<th><label>Gender:</label></th>
	...

Πολλοί σχεδιαστές ιστοσελίδων προτιμούν διαφορετικά markups, για παράδειγμα μια λίστα. Μπορούμε να ρυθμίσουμε το DefaultFormRenderer έτσι ώστε να μην αποδίδεται καθόλου σε πίνακα. Απλά πρέπει να ορίσουμε τα κατάλληλα $wrappers. Ο πρώτος δείκτης αντιπροσωπεύει πάντα μια περιοχή και ο δεύτερος το στοιχείο της. Όλες οι αντίστοιχες περιοχές εμφανίζονται στην εικόνα:

Από προεπιλογή, μια ομάδα controls τυλίγεται σε <table>, και κάθε pair είναι μια γραμμή πίνακα <tr> που περιέχει ένα ζεύγος label και control (κελιά <th> και <td>). Ας αλλάξουμε όλα αυτά τα στοιχεία περιτύλιξης. Θα τυλίξουμε το controls σε <dl>, θα αφήσουμε το pair μόνο του, θα βάλουμε το label στο <dt> και θα τυλίξουμε το control στο <dd>:

$renderer = $form->getRenderer();
$renderer->wrappers['controls']['container'] = 'dl';
$renderer->wrappers['pair']['container'] = null;
$renderer->wrappers['label']['container'] = 'dt';
$renderer->wrappers['control']['container'] = 'dd';

$form->render();

Αποτελέσματα στο ακόλουθο απόσπασμα:

<dl>
	<dt><label class="required" for="frm-name">Name:</label></dt>

	<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" required value=""></dd>


	<dt><label>Gender:</label></dt>
	...
</dl>

Τα περιτυλίγματα μπορούν να επηρεάσουν πολλά χαρακτηριστικά. Για παράδειγμα:

να προσθέσετε ειδικές κλάσεις CSS σε κάθε είσοδο φόρμας
διάκριση μεταξύ μονών και ζυγών γραμμών
να σχεδιάζετε διαφορετικά τα υποχρεωτικά και τα προαιρετικά
ορίστε, αν τα μηνύματα σφάλματος εμφανίζονται πάνω από τη φόρμα ή κοντά σε κάθε στοιχείο

Επιλογές

Η συμπεριφορά του Renderer μπορεί επίσης να ελεγχθεί με τον καθορισμό επιλογών σε μεμονωμένα στοιχεία της φόρμας. Με αυτόν τον τρόπο μπορείτε να ορίσετε το tooltip που εμφανίζεται δίπλα στο πεδίο εισαγωγής:

$form->addText('phone', 'Number:')
	->setOption('description', 'This number will remain hidden');

Αν θέλουμε να τοποθετήσουμε περιεχόμενο HTML σε αυτό, χρησιμοποιούμε την κλάση Html.

use Nette\Utils\Html;

$form->addText('phone', 'Phone:')
	->setOption('description', Html::el('p')
		->setHtml('<a href="...">Terms of service.</a>')
	);

Το στοιχείο Html μπορεί επίσης να χρησιμοποιηθεί αντί της ετικέτας: $form->addCheckbox('conditions', $label).

Ομαδοποίηση εισόδων

Το Renderer επιτρέπει την ομαδοποίηση στοιχείων σε οπτικές ομάδες (σύνολα πεδίων):

$form->addGroup('Personal data');

Η δημιουργία νέας ομάδας την ενεργοποιεί – όλα τα στοιχεία που προστίθενται περαιτέρω προστίθενται σε αυτή την ομάδα. Μπορείτε να δημιουργήσετε μια φόρμα ως εξής:

$form = new Form;
$form->addGroup('Personal data');
$form->addText('name', 'Your name:');
$form->addInteger('age', 'Your age:');
$form->addEmail('email', 'Email:');

$form->addGroup('Shipping address');
$form->addCheckbox('send', 'Ship to address');
$form->addText('street', 'Street:');
$form->addText('city', 'City:');
$form->addSelect('country', 'Country:', $countries);

Ο renderer σχεδιάζει πρώτα τις ομάδες και στη συνέχεια τα στοιχεία που δεν ανήκουν σε καμία ομάδα.

Υποστήριξη Bootstrap

Μπορείτε να βρείτε παραδείγματα διαμόρφωσης του Renderer για Twitter Bootstrap 2, Bootstrap 3 και Bootstrap 4

Χαρακτηριστικά HTML

Μπορείτε να ορίσετε οποιαδήποτε χαρακτηριστικά HTML σε στοιχεία ελέγχου φόρμας χρησιμοποιώντας το setHtmlAttribute(string $name, $value = true):

$form->addInteger('number', 'Number:')
	->setHtmlAttribute('class', 'big-number');

$form->addSelect('rank', 'Order by:', ['price', 'name'])
	->setHtmlAttribute('onchange', 'submit()'); // καλεί τη συνάρτηση JS submit() κατά την αλλαγή


// applying on <form>
$form->setHtmlAttribute('id', 'myForm');

Ρύθμιση τύπου εισόδου:

$form->addText('tel', 'Your telephone:')
	->setHtmlType('tel')
	->setHtmlAttribute('placeholder', 'Please, fill in your telephone');

Μπορούμε να ορίσουμε το χαρακτηριστικό HTML σε μεμονωμένα στοιχεία σε λίστες ραδιοφώνου ή checkbox με διαφορετικές τιμές για κάθε ένα από αυτά. Προσέξτε την άνω και κάτω τελεία μετά το style: για να διασφαλίσετε ότι η τιμή επιλέγεται με βάση το κλειδί:

$colors = ['r' => 'red', 'g' => 'green', 'b' => 'blue'];
$styles = ['r' => 'background:red', 'g' => 'background:green'];
$form->addCheckboxList('colors', 'Colors:', $colors)
	->setHtmlAttribute('style:', $styles);

Renders:

<label><input type="checkbox" name="colors[]" style="background:red" value="r">red</label>
<label><input type="checkbox" name="colors[]" style="background:green" value="g">green</label>
<label><input type="checkbox" name="colors[]" value="b">blue</label>

Για ένα λογικό χαρακτηριστικό HTML (το οποίο δεν έχει τιμή, όπως το readonly), μπορείτε να χρησιμοποιήσετε ένα ερωτηματικό:

$colors = ['r' => 'red', 'g' => 'green', 'b' => 'blue'];
$form->addCheckboxList('colors', 'Colors:', $colors)
	->setHtmlAttribute('readonly?', 'r'); // χρήση πίνακα για πολλαπλά κλειδιά, π.χ. ['r', 'g']

Renders:

<label><input type="checkbox" name="colors[]" readonly value="r">red</label>
<label><input type="checkbox" name="colors[]" value="g">green</label>
<label><input type="checkbox" name="colors[]" value="b">blue</label>

Για τα selectboxes, η μέθοδος setHtmlAttribute() ορίζει τα χαρακτηριστικά του <select> στοιχείου. Αν θέλουμε να ορίσουμε τα χαρακτηριστικά για κάθε <option>, θα χρησιμοποιήσουμε τη μέθοδο setOptionAttribute(). Επίσης, η άνω τελεία και το ερωτηματικό που χρησιμοποιήθηκαν παραπάνω λειτουργούν:

$form->addSelect('colors', 'Colors:', $colors)
	->setOptionAttribute('style:', $styles);

Renders:

<select name="colors">
	<option value="r" style="background:red">red</option>
	<option value="g" style="background:green">green</option>
	<option value="b">blue</option>
</select>

Πρωτότυπα

Ένας εναλλακτικός τρόπος για να ορίσετε χαρακτηριστικά HTML είναι να τροποποιήσετε το πρότυπο από το οποίο παράγεται το στοιχείο HTML. Το πρότυπο είναι ένα αντικείμενο Html και επιστρέφεται από τη μέθοδο getControlPrototype():

$input = $form->addInteger('number');
$html = $input->getControlPrototype(); // <input>
$html->class('big-number');            // <input class="big-number">

Το πρότυπο ετικέτας που επιστρέφεται από την getLabelPrototype() μπορεί επίσης να τροποποιηθεί με αυτόν τον τρόπο:

$html = $input->getLabelPrototype(); // <label>
$html->class('distinctive');         // <label class="distinctive">

Για τα στοιχεία Checkbox, CheckboxList και RadioList μπορείτε να επηρεάσετε το πρότυπο στοιχείου που περιβάλλει το στοιχείο. Επιστρέφεται από το getContainerPrototype(). Από προεπιλογή είναι ένα “κενό” στοιχείο, οπότε δεν αποδίδεται τίποτα, αλλά δίνοντάς του ένα όνομα θα αποδίδεται:

$input = $form->addCheckbox('send');
echo $input->getControl();
// <label><input type="checkbox" name="send"></label>

$html = $input->getContainerPrototype();
$html->setName('div'); // <div>
$html->class('check'); // <div class="check">
echo $input->getControl();
// <div class="check"><label><input type="checkbox" name="send"></label></div>

Στην περίπτωση των CheckboxList και RadioList είναι επίσης δυνατό να επηρεαστεί το μοτίβο διαχωρισμού στοιχείων που επιστρέφεται από τη μέθοδο getSeparatorPrototype(). Από προεπιλογή, είναι ένα στοιχείο <br>. Αν το αλλάξετε σε στοιχείο ζεύγους, θα τυλίγει τα μεμονωμένα στοιχεία αντί να τα διαχωρίζει. Είναι επίσης δυνατό να επηρεάσετε το πρότυπο στοιχείου HTML των ετικετών στοιχείων, το οποίο επιστρέφει η μέθοδος getItemLabelPrototype().

Μετάφραση

Αν προγραμματίζετε μια πολύγλωσση εφαρμογή, πιθανόν να χρειαστεί να αποδώσετε τη φόρμα σε διαφορετικές γλώσσες. Το Nette Framework ορίζει μια διεπαφή μετάφρασης για το σκοπό αυτό Nette\Localization\Translator. Δεν υπάρχει προεπιλεγμένη υλοποίηση στο Nette, μπορείτε να επιλέξετε ανάλογα με τις ανάγκες σας από διάφορες έτοιμες λύσεις που μπορείτε να βρείτε στο Componette. Η τεκμηρίωσή τους σας ενημερώνει για τον τρόπο διαμόρφωσης του μεταφραστή.

Η φόρμα υποστηρίζει την έξοδο κειμένου μέσω του μεταφραστή. Το περνάμε χρησιμοποιώντας τη μέθοδο setTranslator():

$form->setTranslator($translator);

Από εδώ και στο εξής, όχι μόνο όλες οι ετικέτες, αλλά και όλα τα μηνύματα σφάλματος ή οι καταχωρίσεις σε πλαίσια επιλογής θα μεταφράζονται σε άλλη γλώσσα.

Είναι δυνατό να ορίσετε έναν διαφορετικό μεταφραστή για μεμονωμένα στοιχεία της φόρμας ή να απενεργοποιήσετε εντελώς τη μετάφραση με το null:

$form->addSelect('carModel', 'Model:', $cars)
	->setTranslator(null);

Για τους κανόνες επικύρωσης, συγκεκριμένες παράμετροι μεταβιβάζονται επίσης στον μεταφραστή, για παράδειγμα για τον κανόνα:

$form->addPassword('password', 'Password:')
	->addRule($form::MinLength, 'Password has to be at least %d characters long', 8)

ο μεταφραστής καλείται με τις ακόλουθες παραμέτρους:

$translator->translate('Password has to be at least %d characters long', 8);

και έτσι μπορεί να επιλέξει τη σωστή μορφή πληθυντικού αριθμού για τη λέξη characters by count.

Γεγονός onRender

Λίγο πριν την απόδοση της φόρμας, μπορούμε να έχουμε την κλήση του κώδικά μας. Αυτό μπορεί, για παράδειγμα, να προσθέσει κλάσεις HTML στα στοιχεία της φόρμας για τη σωστή εμφάνιση. Προσθέτουμε τον κώδικα στον πίνακα onRender:

$form->onRender[] = function ($form) {
	BootstrapCSS::initialize($form);
};

Μορφές απόδοσης

Απεικόνιση με Latte

{control}

n:name

{label} {input}

{inputError}

{form}

Αυτόματη απόδοση

Ειδικές περιπτώσεις

Εκτέλεση χωρίς Latte

Χειροκίνητη απόδοση

Renderer

Επιλογές

Ομαδοποίηση εισόδων

Υποστήριξη Bootstrap

Χαρακτηριστικά HTML

Πρωτότυπα

Μετάφραση

Γεγονός onRender

`{control}`

`n:name`

`{label}` `{input}`

`{inputError}`

`{form}`