Nápověda jako vystřižená z Windows – rejstřík

V předchozím článku o simulaci Windows nápovědy pomocí Java Scriptu jsme si ukázali, jak vytvoříme seznam témat a „podtémat“ v rozbalovacím stromu a zobrazení odpovídajících textů nápovědy. Dnes tento skript rozšíříme o další význačný rys Windows nápovědy – rejstřík.

Protože celý skript je dosti rozsáhlý, omezíme se v tomto článku jen na popis změn oproti předchozímu článku, ale i tak jich bude více než dost, snad to nebude vadit. Nejprve ale opět malá ukázka, jak rejstřík funguje (data, tedy texty nápovědy, jsou stejná jako minule):

Po kliknutí na položku rejstříku v nejlevějším formulářovém poli je do prostředního pole vypsán seznam témat, v nichž bylo dané slovo nalezeno, po výběru tématu v prostředním poli je poté do nejpravějšího z trojice polí vypsán text příslušné nápovědy. Určitě jste postřehli jednu odlišnost oproti standardní Windows nápovědě, totiž střední okno, které je zde tak trochu navíc – ve Windows je místo toho, je-li nalezených témat k danému slovu víc, zobrazeno malé „popup“ okénko se seznamem témat. Důvody, které vedly k této odlišnosti, jsou dva: prvním je podle mého názoru uživatelsky trochu nepohodlá manipulace se dvěma okny, druhým důvodem je podobné „nepohodlí“ z hlediska obsluhy JavaScriptem (snad si pamatujete na problémy s dvojklikem pod Netscape, popsané v minulém článku).

Pojďme k samotnému kódu. První změnu musíme učinit už v přidávání textů nápovědy do instance objektu MeHelp – je totiž potřeba nějak označit, které slovo v textu se má zařadit do rejstříku. Zde je k ohraničení slova použit znak dvojité mřížky alias plotu (pod českou klávesnicí Ctrl+Alt+X):

Tato změna nás nutí k úpravě metody Add objektu MeHelp – upravená metoda musí zajistit přidání všech „oplocených“ slov do rejstříku (volání this.index.Add…) a také to, aby text nápovědy ukládaný do interních struktur byl očištěn od tohoto pomocného znaku:

Pochopitelně, členská proměnná Index musí být předem nainicializována, což zajistíme v konstruktoru přidáním následujícího řádku – ano, členská proměnná Index je také objekt, tentokrát instance nové třídy MeHelpIndex:

Než si ukážeme kód objektu MeHelpIndex, dokončíme nutné úpravy v objektu MeHelp – zbývají nám dvě, první se týká úpravy metody SetForm, kdy objekt MeHelp prolinkováváme i na třetí (prostřední) pole HTML formuláře, zde nazvané subfield, druhá úprava se rovněž týká tohoto formulářového pole – jde o novou metodu DeleteSubField, která má za úkol vyčistit toto pole podobně, jako to s polem selectfield minule činila metoda DeleteSelect:

Objekt MeHelpIndex

Stejně jako minule si delší kód objektu uvedeme po částech. Začneme hlavičkou objektu a inicializací jeho interních struktur:

Členská proměnná parent obsahuje odkaz na nadřízený objekt MeHelp; arrNames je pole jednotlivých slov – položek rejstříku, arrNodes obsahuje odkazy na ty položky nadřízeného objektu MeHelp, v nichž se dané slovo vyskytuje – uloženy jsou ve formě řetězce s čísly oddělenými středníky, např: „5;7;12;21;35;“ atd.

Metoda Add, jak již název napovídá, přidává slovo do rejstříku. Pokud je slovo nové, vytvoří pro něj nový záznam v poli arrNames, pokud již v rejstříku existuje, přidá pouze „odkaz“ na položku z nadřízeného objektu MeHelp do pole arrNodes:

V závěru metody Add jsou obě pole přetřiďována metodou Sort – jedná se o obyčejný BubbleSort, k tomu ne příliš efektivně napsaný – pro potencionálně velké nápovědy by určitě stálo zato nahradit jej lepším způsobem třídění:

Metoda WriteIndex pouze vypíše do nejlevějšího pole formuláře všechny položky rejstříku – zde by neměla číhat žádná záludnost:

Metoda WriteSubIndex musí (při výběru odpovídajícího slova z levého formulářového pole) naplnit prostřední pole seznamem témat, v nichž se dané rejstříkové slovo nachází – a před tím si samozřejmě přislušné pole musí vyčistit. Poslední řádek funkce (this.parent.textfield…) slouží k vyčištění pravého pole formuláře při změně výběru v levém poli – záleží na vámi požadovaném chování nápovědy, zda jej v kódu ponecháte či nikoliv:

Konečně metoda WriteTxt, volaná po klepnutí na položku v prostředním poli, je opět prostinká – má za úkol pouze vypsat kýžený text nápovědy do pravého pole. Opět zde máme jednu pravou závorku navíc jako ukončení definice celého objektu MeHelpIndex:

HTML kód formuláře je trochu odlišný – přibylo nám jedno (prostřední) pole SELECT, naopak ubyl skript rozlišující prohlížeče MSIE a NN. Z handlerů událostí onChange voláme tentokrát odpovídající metody objektu MeHelpIndex, ukrytého v nadřízené instanci objektu MeHelp:

A konečně, krátký JS kód za formulářem, který nám tak jako minule „připraví“ formulář na spolupráci s objektem nápovědy, je také jiný:

Na závěr jedna stručná poznámka k přepínání mezi nápovědou ve stylu „Obsah“ a „Rejstřík“ – ačkoliv JavaScript kód vzniklý sloučením tohoto a předchozího článku zvládá obě úlohy, je pro každou z nich potřeba trochu jiný formulář – nejjednodušší cestou je nesnažit se dostat oba formuláře na jednu stránku (a přepínat např. nastavováním vlastnosti visible), ale umístit kód, potažmo inicializaci nápovědy do sdíleného .js> souboru a každý z obou pohledů umístit na samostatnou stránku, mezi nimiž se přepneme jednoduchým odkazem.

Příště nás čeká další funkční vylepšení JavaScriptové nápovědy – tentokrát půjde o vyhledávání.

Přeji vám příjemný den.