Vyrobte si v JavaScriptu průvodce á la Windows

Téměř každý uživatel operačního systému Windows ví, jak se ovládají takzvaní „průvodci“ neboli „wizards“. Této skutečnosti můžeme s výhodou využít, pokud po návštěvníkovi stránky požadujeme vyplnění delšího formuláře – prostě jej rozčleníme po vzoru průvodce do několika obrazovek. V článku uvedený JavaScript tuto práci do značné míry zjednodušuje.

Použití JavaScriptu při tvorbě průvodce přináší v zásadě dvě výhody. Za prvé nám zjednodušuje práci – místo tvorby třeba deseti samostatných obrazovek stačí vyplnit parametry již jednou hotového JavaScriptu a ten veškerou práci udělá za nás. Druhou podstatnou výhodou je obejití nutnosti použít serverové skripty pro uchovávání mezivýsledků. Vše je uchováno v cookie na straně prohlížeče a tak nám stačí jediný skript pro závěrečné zpracování.

Dosti teorie, přejděme k praktické ukázce. Kliknutím na tento odkaz spustíte průvodce výběrem psa ve fiktivním zverimexu. Na poslední stránce průvodce se v tomto příkladu po stisku tlačítka „Dokončit“ zobrazí výpis všech zadaných hodnot zformátovaných jako parametry URL adresy. V „ostrém“ provozu by samozřejmě místo toho následovalo odeslání formuláře. Za použitou grafiku se předem omlouvám.

Otevření průvodce

Pro otevření samostatného okna s průvodcem byl v předchozím odstavci použit následující krátký JavaScript kód, který myslím není potřeba dále komentovat:

… v hlavičce stránky:
function openWizard() {
    window.open(‚wizard.htm‘,’wizard‘,’width=440,height=320′);
}
….a v textu:
<a href="javascript:openWizard()">Kliknutím zde spustíte průvodce</a>

Soubor wizard.htm

Veškerý kód průvodce je uložen v jednom souboru – v tomto případě v souboru wizard.htm. Nyní si popíšeme jeho jednotlivé části, použitý JavaScript a HTML kód. Nejprve sada funkcí, použitých v hlavičce.

Objekt Wizard a definice vzhledu průvodce

Pro uložení dat o jednotlivých obrazovkách průvodce slouží objekt Wizard. Je poměrně jednoduchý, kromě ukládání dat vlastně žádnou jinou funkčnost nemá. Zde je jeho javaskriptový kód:

function Wizard( title, image, txt ) {
    this.title = title;
    this.txt = txt;
    this.image = image;
    this.optionscount = 0;
    this.options = new Array()
    this.AddOption = function( txt ) {
        this.options[this.optionscount] = txt
        this.optionscount++;
    }
    this.AddEdit = function( txt ) {
        this.edit=txt;
    }
}

Parametry konstruktoru objektu Wizard jsou (v tomto pořadí): titulek obrazovky, adresa použitého obrázku a text, který se zobrazí v hlavní ploše obrazovky. Dále objekt obsahuje dvě metody, jednu pro přidání pole formuláře typu přepínač (radiobutton) a druhou pro přidání pole formuláře typu textové pole (edit). Nedoporučuji kombinování obou druhů polí na jedné stránce, kód tuto eventualitu neošetřuje.

Použití objektu Wizard si nejlépe osvětlíme na příkladu – definici dat pro konkrétního průvodce. Následující část kódu je vlastně jedinou věcí, kterou je potřeba změnit při vytváření nového průvodce (vyjma tvorby vlastních obrázků, pochopitelně). Uvedeného virtuálního psího průvodce můžeme tedy definovat nějak takto (poznámka: proměnná count obsahuje celkový počet obrazovek průvodce):

var Wizards = new Array();
Wizards[1] = new Wizard( "Vítá Vás průvodce konfigurací Psa", "wizard1.gif", "Tento průvodce Vás provede několika nezbytnými kroky ke správnému výběru psa v našem virtuálním obchodě se psy" );
Wizards[2] = new Wizard( "Výběr hlavy", "wizard2.gif", "Nejprve si vyberte vhodnou hlavu pro Vašeho nového psa." );
    Wizards[2].AddOption("Malá");
    Wizards[2].AddOption("Střední");
    Wizards[2].AddOption("Velká");
Wizards[3] = new Wizard( "Výběr délky chlupů", "wizard3.gif", "Jak chlupatého psa preferujete?" );
    Wizards[3].AddOption("Málo chlupatý");
    Wizards[3].AddOption("Velmi chlupatý");
Wizards[4] = new Wizard( "Jméno psa", "wizard4.gif", "Posledním krokem je vybrat Vašemu novému psovi vhodné jméno." );
    Wizards[4].AddEdit("Jméno psa:");
count = 4;

Dalším úkolem pro skript je zjištění, na jaké stránce průvodce se právě nacházíme. Parametr čísla stránky je předáván v URL. To zabezpečí následující kód (aktuální stránka je uložena v proměnné as):

var as = 1;
if((index = location.search.indexOf("?"))!=-1) {
    var pomstr = location.search.slice(index+4)
    if( pomstr.length > 0 ) {
        as = Math.ceil(pomstr)
    }
}

Dále budeme potřebovat pomocný objekt MyCookie, zapouzdřující poněkud kulturnějším způsobem práci s cookies:

var MyCookie = {
    Write:function(name,value,days) {
        var D = new Date();
        D.setTime(D.getTime()+86400000*days)
        document.cookie = escape(name)+"="+escape(value)+
            ((days == null)?"":(";expires="+D.toGMTString()))
        return (this.Read(name) == value);
    },
    Read:function(name) {
        var EN=escape(name)
        var F=‘ ‚+document.cookie+‘;‘, S=F.indexOf(‚ ‚+EN);
        return S==-1 ? null : unescape( F.substring(EN=S+EN.length+2,F.indexOf(‚;‘,EN)) );
    }
}

Tlačítka „Další“ a „Zpět“ slouží k přesunu mezi jednotlivými obrazovkami. Pomáhají jim v tom následující funkce (při přesunu „dopředu“ jsou zároveň ukládána data zadaná uživatelem do cookie – k tomu slouží pomocná funkce SaveToCookie):

function Back() {
    location.replace("wizard.htm?as="+(1*as-1));
}
function Next() {
    SaveToCookie();
    location.replace("wizard.htm?as="+(1*as+1));
}
function SaveToCookie() {
    var i;
    for(i=0;i<Wizards[as].optionscount;i++) {
        x = eval( "document.forms[0].radio_"+as);
        if( x[i].checked )
            MyCookie.Write("radio_"+as,x[i].value,1);
    }
    if(Wizards[as].edit!=null) {
        x = eval( "document.forms[0].edit_"+as);
        MyCookie.Write("edit_"+as,x.value,1);
    }
}

Předposlední částí kódu v hlavičce stránky je funkce, která bude volána po stisku tlačítka „Dokončit“. Tato funkce uloží případná data zadaná na poslední stránce průvodce do cookie, ze všech hodnot uložených v cookie „poskládá“ URL adresu a předá na ni řízení – jinými slovy odešle získaná data serverovému skriptu. Samotné odeslání lze samozřejmě řešit i jinak, např s využitím skrytých polí formulářů. Zde je tedy kód příslušné funkce; nazveme ji Finish:

function Finish() {
    SaveToCookie();
    var t="result.php?submit=ok"
    var i;
    var s;
    for(s=1;s<=count;s++) {
        if(Wizards[s].optionscount) {
            t += "&radio_"+s+"="+MyCookie.Read("radio_"+s);
        }
        if(Wizards[s].edit!=null) {
            t += "&edit_"+s+"="+escape(MyCookie.Read("edit_"+s));
        }
    }
    location.replace(t);
}

Posledním úkolem v hlavičce stránky je vypsat aktuální nadpis, uložený v objektu Wizard. Tím se již dostáváme k druhé (kratší) části – výpisu uložených hodnot do těla stránky. Vypsání nadpisu zajišťuje tento kód:

document.write("<title>"+Wizards[as].title+"</title>");

Tělo stránky

V místě, kde chceme vypsat text a formulářová políčka příslušné stránky průvodce, použijeme tento kód (kód nevypisuje „rámovací“ tagy form, ty musí být vypsány v HTML):

document.write(Wizards[as].txt+"<br><br>");
for(i=0;i<Wizards[as].optionscount;i++) {
    document.write(‚<input type="radio" value="’+i+’" ‚+(i==0?"checked":"")+‘ name="radio_‘ + as + ‚">’+Wizards[as].options[i]+"<br>");
}
if(Wizards[as].edit!=null) {
    document.write(Wizards[as].edit+’&nbsp;<input type="text" value="" name="edit_’+as+’">’+"<br>");
}

Obrázek vykreslíme třeba takto:

document.write(‚<img src="’+Wizards[as].image+’" width="122" height="228">‘);

Zbývá vypsat tlačítka „Zpět“, „Další“ a případně „Dokončit“…

if(as>1) document.write(‚<input type="button" value="&lt; Zpět " onClick="Back()" name="back">‘);
if(as<count)
    document.write(‚<input type="button" value="Další &gt;" onClick="Next()" name="next">‘);
else
    document.write(‚<input type="button" value="Dokončit" onClick="Finish()" name="ok">‘);

… HTML kód tlačítka „Storno“ může vypadat třeba takto:

<input type="button" value="Storno" name="cancel" onClick="window.close()">

Pokud se vám nechce opisovat použité kódy po částech, můžete si stáhnout kompletní kód.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.