Umíme ve Flashi – 16. díl – návštěvní kniha II.

V dnešním díle přidáme do návštěvní knihy funkce pro kontrolu správnosti vstupních údajů, vysvětlíme a popíšeme si nově použitou komponentu Alert a nakonec se zmíníme o správném kódování zdrojových dat knihy.

Kontrola vstupních údajů

Návštěvní kniha z minulého dílu umožňuje základní funkce, které od této aplikace požadujeme. Jedná se o zápis vstupních dat do souboru a o funkci pro jejich přečtení a zobrazení v textovém poli. Jako vylepšení dnes přidáme kontrolu správnosti vstupních údajů. Nechceme totiž, aby se v návštěvní knize vyskytovaly prázdné hodnoty apod.

Než začneme psát skript pro kontrolu vstupních údajů, upravíme vstupní textová pole tak, že vedle polí připíšeme popisy, označující, co se v kterém poli má objevit a přímo z textových polí vymažeme ukázkový text (zdrojový soubor knihy z minulého dílu je k dispozici zde).

Klepněte pro větší obrázek

Upravený formulář pro zadávání vstupních údajů

Skript, kontrolující správnost vstupních údajů, bude zjišťovat délku textu, který je v jednotlivých textových polích vložen. Pokud bude délka menší než 1, znamená to, že do daného pole není vložen žádný text. Dále budeme kontrolovat obsah textového pole pro vložení emailové adresy. Zde, kromě délky textu, budeme zjišťovat přítomnost symbolu „@“. V případě, že nebude přítomen, je zřejmé, že adresa není vyplněna správně.

Podíváme se na akce prvního snímku hlavní časové osy a doplníme skript pro kontrolu vstupních údajů:

import mx.controls.Alert;
chckFields = function () {
 errText = "";
 if (form.jmeno.text.length<1) {
  errText += "Nebylo vyplěno jméno; ";
 }
 if (form.mail.text.length<1 || form.mail.text.indexOf("@") == -1) {
  errText += "Nesprávná emailová adresa; ";
 }
 if (form.urls.text.length<1) {
  errText += "Není zadaná www adresa; ";
 }
 if (errText.length>1) {
  textAlert = "Formulář nebyl správně vyplněn, prosím opravte tyto chyby:"+newline+errText;
  Alert.show(textAlert, "Vyskytly se chyby v odesílané zprávě", Alert.OK);
  return false;
 } else {
  return true;
 }
};

V tomto skriptu využíváme flashovou komponentu „Alert“, pomocí které zobrazíme chyby v nesprávně vyplněných políčkách. Aby skript fungoval, musíme do knihovny dokumentu vložit komponentu Alert (můžeme komponentu vložit přímo do knihovny, nebo ji přetáhneme na scénu a poté ji na ploše vymažeme)

Alert komponenta

Protože jsme se touto komponentou ještě nezabývali, ve stručnosti si jí popíšeme. Uvedená komponenta se využívá v případech, kdy chceme uživatele upozornit na nějakou událost a nabídnout mu další postup. Komponenta umožňuje zobrazení dvou tlačítek, nejčastěji se jedná o tlačítka OK a CANCEL nebo YES a NO.

Použití této komponenty má navíc tu výhodu, že deaktivuje veškerá tlačítka a objekty na scéně, uživatel tak musí zvolit jednu z nabízených možností dalšího postupu. Metodou Alert.show() zobrazíme komponentu na scéně, jejíž vzhled a funkčnost ovlivňují tyto parametry:

  • message – text zobrazený v okně komponenty
  • title – text v horní části komponenty
  • flags – nepovinný parametr, pomocí kterého máme možnost určit, která tlačítka budou v okně komponenty zobrazena. Možné hodnoty jsou Alert.OK, Alert.CANCEL, Alert.YES a Alert.NO
  • parent – okno, vůči kterému se komponenta zarovnává, defaultně je nastavena hodnota _root
  • clickHandler – zde lze uvést funkci, která se vykoná po kliknutí na jedno z tlačítek komponenty
  • icon – ikonka, která se zobrazí v levé části komponenty
  • defaultButton – pomocí tohoto parametru lze určit tlačítko, které je označené jako první, možné hodnoty jsou totožné jako v případě parametru flags

Funkce kontroly

Vložili jsme novou funkci, která provádí kontrolu obsahu vstupních polí. Pokud je vše v pořádku, vrátí funkce hodnotu true. V případě chyby dojde k zobrazení komponenty Alert, ve které je uveden seznam chyb, které se vyskytly. Dále v případě chybného vyplnění některého z políček vrátí funkce kontroly hodnotu false.

Dalším postupem bude vyčlenění části kódu, která se stará o načítání dat, z funkce, kterou jsme umístili na tlačítko pro odesílání zpráv. Tento kód vložíme do nové funkce, pojmenované „loadVzkazy“:

loadVzkazy = function () {
 var vzkazy:LoadVars = new LoadVars();
 vzkazy.onLoad = function(success:Boolean) {
  if (success) {
   if (firstStart != false) {
    texty.text = vzkazy.texts;
   } else {
    form.gotoAndStop(2);
    texty.text = vzkazy.texts;
   }
   firstStart = false;
  } else {
   texty.text = "Chyba aplikace";
  }
 };
 var vzkaz:LoadVars = new LoadVars();
 vzkaz.jmeno = form.jmeno.text;
 vzkaz.vzkaz = form.vzkaz.text;
 vzkaz.mail = form.mail.text;
 vzkaz.url = form.urls.text;
 if (firstStart != false) {
  vzkaz.Odeslano = "ne";
 } else {
  vzkaz.Odeslano = "ano";
 }
 vzkaz.sendAndLoad("gb.php", vzkazy, "POST");
};
var odesilatel:Object = new Object();
odesilatel.click = function(evt:Object) {
 chck = chckFields();
 if (chck) {
  loadVzkazy();
 }
};
loadVzkazy();

Trochu netradičně se podíváme na spodní řádek, kde voláme funkci „loadVzkazy“. Funkci zde voláme, protože chceme zobrazit obsah návštěvní knihy ihned při načtení swf souboru. Pokud bychom ovšem nechali skript funkce „loadVzkazy“ bez úpravy, automaticky by nám přeskočil MC s formulářem na snímek číslo dva, kde informujeme o správném odeslání dat. Z toho důvodu vložíme na začátek funkce „loadVzkazy“ podmínku, kde testujeme první spuštění uvedené funkce.

Pokud se tak stalo, načteme hodnoty návštěvní knihy bez přeskoku na druhý snímek MC s formuláři. Na konci funkce „loadVzkazy“ musíme provést podobnou úpravu, která zajistí, že php kód pouze načte data z txt souboru. Úprava se týká proměnné „Odeslano“, která v případě jiné hodnoty než „ano“ zajistí v php skriptu načtení obsahu návštěvní knihy bez uložení dat.

Php strana nedozná žádných změn, pouze se zde zmíníme o formátu, ve kterém se data ukládají. V minulém díle jsme se nevěnovali kódování, které je v tomto případě velmi důležité. Je totiž nutné, aby zdrojová data byla kódovaná v UTF-8. Toto kódování lze nastavit tak, že soubor gb.txt uložíme v editačním programu (např. poznámkový blok) s UTF-8 kódováním a stejný proces provedeme se souborem gb.php. Po této změně bude návštěvní kniha správně zobrazovat i české znaky.

Po uvedených úpravách a nahráním potřebných souborů na server se návštěvní kniha zobrazí v této podobě.

Zdrojové soubory dnešní ukázky jsou k dispozici zde.

Diskuze (1) Další článek: Ke stažení: nový open source e-mailový klient

Témata článku: Software, Programování, Kniha, Success, Spodní řádek, Pole, Cancel, Emailová adresa, Druhý snímek, Díl, Alert, Zobrazená data, Editační program, Textové pole, Elsa, Icon


Určitě si přečtěte

Podívejte se na Windows z roku 1990. Před 30 lety přišly Windows 3.0 a líbily se nám

Podívejte se na Windows z roku 1990. Před 30 lety přišly Windows 3.0 a líbily se nám

** 22. května 1990 uvedl Microsoft Windows 3.0 ** Systém z Microsoftu definitivně udělal lídra na desktopu ** Tehdejší Windows byly vlastně grafickou nadstavbou nad MS-DOS

Jakub Čížek | 75

WindowsFX: Nainstalujte to mamce a taťkovi. Ani nepoznají, že to je Linux

WindowsFX: Nainstalujte to mamce a taťkovi. Ani nepoznají, že to je Linux

** Po dvou měsících tu máme další linuxovou kopii ** Tentokrát jde o imitaci Desítek ** Sestavili ji brazilští geekové nad Ubuntu

Jakub Čížek | 135

Zahodil jsem Windows, přešel na Linux a nezbláznil se z toho

Zahodil jsem Windows, přešel na Linux a nezbláznil se z toho

** Měsíc jsem se nedotkl Windows a byl závislý jen na Linuxu ** Jaká byla pozitiva a negativa přechodu? ** Se kterými aplikacemi jsem (ne)zápasil a které bych doporučil?

Lukáš Václavík | 233

Nejlepší programy z roku 2000: Podívejte se, bez čeho jste tehdy vůbec nemohli fungovat!

Nejlepší programy z roku 2000: Podívejte se, bez čeho jste tehdy vůbec nemohli fungovat!

** Dnes už skoro všechno uděláte ve webovém prohlížeči a na mobilu ** Před dvaceti lety to ale bylo jiné ** Zavzpomínejte na legendy, které jste pravděpodobně také používali

Jakub Čížek | 128

Testy procesorů Intel Comet Lake pro desktopy jsou venku. Teď už je jasné, jakého dostaly Ryzeny soupeře

Testy procesorů Intel Comet Lake pro desktopy jsou venku. Teď už je jasné, jakého dostaly Ryzeny soupeře

** Embargo pro testy nových desktopových procesorů Comet Lake od Intelu skončilo ** Spousta recenzí a testů ukazuje výhody a nevýhody nových modelů ** Dokáží nové procesory konkurovat modelům od AMD?

Karel Javůrek | 47


Aktuální číslo časopisu Computer

Megatest: nejlepší notebooky do 20 000 Kč

Test 8 levných IP kamer

Jak vybrat bezdrátová sluchátka

Testujeme Android 11