Permalink
Browse files

updated screenshots, removed unnecessary

  • Loading branch information...
dg committed Apr 2, 2018
1 parent cafcefd commit b658606b7d1af08a3337a0a4b6cf8d16f2004145
@@ -123,8 +123,6 @@ addCheckbox(string|int $name, $caption=null): static .[method]

Přidá zaškrtávací políčko (třída [Checkbox |api:Nette\Forms\Controls\Checkbox]). Políčko vrací hodnotu buď `true` nebo `false`, podle toho, zda je zaškrtnuté či nikoliv.

[* checkbox-cs.png .[border] *]

/--php
$form->addCheckbox('agree', 'Souhlasím s podmínkami')
->setRequired('Je potřeba souhlasit s podmínkami');
@@ -136,8 +134,6 @@ addRadioList(string|int $name, $label=null, array $items=null): static .[method]

Přidá přepínací tlačítka (třída [RadioList |api:Nette\Forms\Controls\RadioList]). Pole nabízených hodnot předáme jako třetí parametr.

[* radiolist-cs.png *]

/--php
$sex = [
'm' => 'muž',
@@ -171,8 +167,6 @@ addSelect(string|int $name, $label=null, array $items=null): static .[method]

Přidá select box (třída [SelectBox |api:Nette\Forms\Controls\SelectBox]). U select boxů má často první položka speciální význam, slouží jako výzva k akci. K přidání takové položky slouží metoda `setPrompt()`. Pole nabízených hodnot předáme jako třetí parametr. Pole může být i dvourozměrné:

[* selectbox-cs.png *]

/--php
$countries = [
'Europe' => [
@@ -116,8 +116,6 @@ $form->addText('age', 'Věk:')

V nejpokročilejších prohlížečích, jako je Chrome, Safari nebo Opera, se zobrazí šipečky pro snadnější změnu hodnoty, iPhone zobrazí optimalizovanou klávesnici s číslicemi.

[* form-html5-cs.png *]

Vraťme se k prvku `password`, který taktéž učiníme povinným a ještě ověříme minimální délku hesla (`Form::MIN_LENGTH`), opět s využitím zástupného znaku:

/--php
@@ -39,7 +39,7 @@ http://localhost/nette-blog/www/

a uvidíme úvodní stránku Nette Frameworku:

[* welcome-620.jpg *]
[* qs-welcome.png *]

Aplikace funguje a můžete začít dělat úpravy.

@@ -80,19 +80,19 @@ Nejdůležitější složka je pro nás `app/`. Zde nalezneme soubor `bootstrap.
Web Project obsahuje úvodní stránku, kterou smažeme předtím, než začneme něco programovat - bez obav tedy nahradíme obsah souboru `app/presenters/templates/Homepage/default.latte` za "Hello world!".


[* quick-hello.png *]
[* qs-hello.png *]


Tracy (debugger)
================

Extrémně důležitý nástroj pro vývoj je [ladicí nástroj Tracy |tracy:]. Vyzkoušejte si vyvolání nějaké chyby v souboru `app/presenters/HomepagePresenter.php` (např. odstraněním posledního písmene ze slova `public` v definici metody renderDefault) a podívejte se, co se stane. Vyskočí oznamovací stránka, která chybu srozumitelně popisuje.
Extrémně důležitý nástroj pro vývoj je [ladicí nástroj Tracy |tracy:]. Vyzkoušejte si vyvolání nějaké chyby v souboru `app/presenters/HomepagePresenter.php` (např. odstraněním složené závorky v definici třídy HomepagePresenter) a podívejte se, co se stane. Vyskočí oznamovací stránka, která chybu srozumitelně popisuje.

[* debugger-620.png .(debugger screen) *]
[* qs-tracy.png .(debugger screen) *]

Tracy nám ohromně pomůže, až budeme hledat chyby v aplikaci. Také si všimněte plovoucího debug panelu v pravém dolním rohu obrazovky, který obsahuje informace z běhu aplikace.

[* quick-tracy-info.png *]
[* qs-tracybar.png *]

V produkčním módu je Tracy samozřejmě vypnuta a nezobrazuje žádné citlivé informace. Všechny chyby jsou v tomto případě uloženy ve složce `log/`. Pojďme si to vyzkoušet, v souboru `app/bootstrap.php` odkomentujeme následující řádek a změníme parametr volání na `false`, aby kód vypadal takto:

@@ -103,7 +103,7 @@ $configurator->enableTracy(__DIR__ . '/../log');

Po obnovení stránky již Tracy neuvidíme. Místo ní se zobrazí uživatelsky přívětivá zpráva:

[* server-error-620.png .(error screen) *]
[* qs-fatal.png .(error screen) *]

Nyní se podívejme do adresáře `log/`. Zde (v souboru exception.log) nalezneme zalogovanou chybu a také již známou stránku s chybovou hláškou (uloženou jako HTML soubor s názvem začínající na `exception-`).

@@ -124,8 +124,6 @@ addCheckbox(string|int $name, $caption=null): static .[method]

Adds a checkbox (class [Checkbox |api:Nette\Forms\Controls\Checkbox]). The return value is either Boolean `true` or `false`, as checked or not checked.

[* checkbox-en.png .[border] *]

/--php
$form->addCheckbox('agree', 'I agree with terms')
->setRequired('You must agree with our terms');
@@ -137,8 +135,6 @@ addRadioList(string|int $name, $label=null, array $items=null): static .[method]

Adds radio buttons (class [RadioList |api:Nette\Forms\Controls\RadioList]). Array of offered values is passed as the third argument.

[* radiolist-en.png *]

/--php
$sex = [
'm' => 'male',
@@ -172,8 +168,6 @@ addSelect(string|int $name, $label=null, array $items=null): static .[method]

Adds select box (class [SelectBox |api:Nette\Forms\Controls\SelectBox]). Array of offered values is passed as third argument. Might as well be two-dimensional. The first item is often used as a call-to-action message, but worthless when actually selected - that's what method `setPrompt()` is for.

[* selectbox-en.png *]

/--php
$countries = [
'Europe' => [
@@ -117,8 +117,6 @@ $form->addText('age', 'Age:')

In the most advance browsers, namely Google Chrome, Safari and Opera, tiny arrows are rendered next to the input. Safari for iPhone shows an optimized keyboard with numbers.

[* form-html5-en.png *]

Let's return to the *password* field, make it *required*, and verify the minimum password length (`Form::MIN_LENGTH`), again using the substitute characters in the message:

/--php
@@ -39,7 +39,7 @@ http://localhost/nette-blog/www/

and you should see the Nette Framework welcome page:

[* welcome-620.jpg *]
[* qs-welcome.png *]

The application works and you can now start making changes to it.

@@ -79,19 +79,19 @@ Cleanup
The Web Project contains welcome page, which we can remove - feel free to delete the `app/presenters/templates/Homepage/default.latte` file and replace it with text "Hello world!".


[* quick-hello.png *]
[* qs-hello.png *]


Tracy (debugger)
================

An extremely important tool for development is [a debugger called Tracy |tracy:]. Try to make some errors in your `app/presenters/HomepagePresenter.php` file (e.g. remove a letter from the word `class` in code) and see what happens. A red-screen page will pop up with understandable error description.
An extremely important tool for development is [a debugger called Tracy |tracy:]. Try to make some errors in your `app/presenters/HomepagePresenter.php` file (e.g. remove a curly bracket from the definition of class HomepagePresenter) and see what happens. A red-screen page will pop up with understandable error description.

[* debugger-620.png .(debugger screen) *]
[* qs-tracy.png .(debugger screen) *]

Tracy will significantly help you while hunting down errors. Also note the floating Debugger bar in the bottom right corner, which informs you about important runtime data.

[* quick-tracy-info.png *]
[* qs-tracybar.png *]

In the production mode, Tracy is, of course, disabled and does not reveal any sensitive information. All error are saved into `log/` directory instead. Just try it out. In `app/bootstrap.php`, find the following piece of code, uncomment the line and change the method call parameter to `false`, so it looks like this:

@@ -102,7 +102,7 @@ $configurator->enableTracy(__DIR__ . '/../log');

After refreshing the web page, the red-screen page will be replaced with user-friendly message:

[* server-error-620.png .(error screen) *]
[* qs-fatal.png .(error screen) *]

Now look into the `log/` directory. You can find the error log there (in exception.log file) and also the page with error message (saved in an HTML file with name starting with `exception`).

BIN -1.28 KB files/checkbox-cs.png
Binary file not shown.
BIN -4.66 KB files/checkbox-en.png
Binary file not shown.
Binary file not shown.
BIN +2.13 KB (210%) files/form-cs.png
Binary file not shown.
BIN -2.38 KB (62%) files/form-en.png
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN +44 KB files/qs-fatal.png
Binary file not shown.
BIN +36 KB files/qs-hello.png
Binary file not shown.
BIN +44.4 KB files/qs-tracy.png
Binary file not shown.
Binary file not shown.
BIN +66.3 KB files/qs-welcome.png
Binary file not shown.
BIN -35.6 KB files/quick-hello.png
Binary file not shown.
Binary file not shown.
BIN -1.29 KB files/radiolist-cs.png
Binary file not shown.
BIN -5.13 KB files/radiolist-en.png
Binary file not shown.
BIN +59.5 KB (510%) files/routing-debugger.png
Binary file not shown.
BIN -3.08 KB files/selectbox-cs.png
Binary file not shown.
BIN -12.6 KB files/selectbox-en.png
Binary file not shown.
Binary file not shown.
BIN -69.9 KB files/welcome-620.jpg
Binary file not shown.

0 comments on commit b658606

Please sign in to comment.