Před pár týdny jsem zde popsal řešení pro tisk kartiček – nejprve jsem se věnoval tomu, jak generovat vlastní PDF dokumentu, v druhém pokračování pak přesunu tohoto generování do cloudu. Oba díly naleznete zde:
V tomto příspěvku popíši, jak vytvářet vlastní kartičky. Pomocí formuláře v prohlížeči se zadají jednotlivé hodnoty a ty se posléze odešlou na server a zpět dostanete PDF dokument. Podobných stránek jsou ale na webu mraky, takže zkusím odlišit se trochu funkčností – vytváření kartiček bude fungovat tak, že jen zadáte slovíčko a vyhledají se jak jeho překlad do češtiny, tak i přepis jeho výslovnosti a příklad použití. Tyto vyhledané údaje si budete moci upravit. Navíc se kartičky budou lokálně ukládat ve vašem prohlížeči, práci tedy budete moci kdykoliv přerušit a opět v ní začít bez výslovného ukládání.
Jak získat údaje o slovíčku
Na webu je plno on line slovníků – já si vybral dva, WordReference EnCz Slovník a Oxford Advanced Learner’s Dictionary. Pro jejich využíti je ale potřeba vyřešit tyto problémy:- jak je volat a předat jím slovo, které hledáme
- jak je volat v rámci naší stránky – tedy cross-domain problém
- jak vyhledat potřebné údaje v tom, co nám stránky vratí
Volání
To je ta nejjednodušší část, v případě stránek Oxford slovníku stačí volat adresu http://oald8.oxfordlearnersdictionaries.com/dictionary/ + dané slovo, v případě WordReference pak http://www.wordreference.com/encz/ + dané slovo;Řešení Cross-domain omezení
Z jedné stránky není možné volat a získat obsah z jiné domény. Částečně je to řešeno tím, že lze volat a použít skript z jiné domény a pokud tedy dotyčný web umí vracet JSON data, není potřeba nic vymýšlet a lze použít přímo metod knihovny jQuery a Ajax volání. Nicméně v našem případě žádná z vybraných stránek toto nepodporuje. Naštěstí i zde existuje řešení a to služba YQL společnosti Yahoo a knihovna jquery.xdomainajax.js.YQL je vlastně web služba, která získá obsah stránky, upraví jej tak, aby jej bylo možné zaslat jako skript (rozuměj ve formátu Json) a tak jej pošle volajícímu:
Knihovna xdomainajax pak jen volání YQL obaluje tak, aby s ním bylo možné pracovat tak, jako s ajax voláním, takže skript, který slovník volá, vypadá stejně, jako pro normální ajax volání:
Vyhledání údajů
To je opět snadná část, využívám možností jQuery selektorů a vyhledám příslušné informace – vyhledávání pro oba zvolené slovníky lze najít v souboru search.jsUkládání v prohlížeči
Zde si opět usnadním práci pomocí existující knihovny jStorage. Každou vytvořenou kartičku ukládám lokálně v prohlížeči. Pro zobrazení je pak využíván formulář, který se případně, v případě že má uživatel zájem o PDF kartičky, odesílá na server. Využívá se zde tzv. nesouvislých indexů, které jsem popsal v příspěvku ASP.NET MVC3–Binding příklad.Možnosti exportu
Uživateli jsou nabízeny dvě možnosti, jak data dostat z prohlížeče “ven”. Buď si může data vyexportovat jako csv soubor a nebo je odeslat na server a získat PDF dokument. Řešení popsané v příspěvku Vzhůru do oblak bylo ještě rozšířeno o možnost přijímat data z formuláře.Postup práce s aplikací
Prosím mějte na paměti, že aplikace je jen příklad, není to žádné mistrovské dílo a má spíše jen demonstrovat, že lze vyvinout v HTML aplikaci s komfortem desktopové aplikace. Základní rozložení je velmi jednoduché, aplikace má tři hlavní části – v horní se zadává hledané slovíčko, prostřední slouží pro náhled a editaci kartičky a dole je seznam kartiček:
Do horního políčka napíšete slovo, pro které chcete vytvořit kartičku a stisknete Enter – ikonky slovníků se změní na dobu, kdy se slovo vyhledává a signalizují tak probíhající činnost:
Jakmile jsou údaje nalezeny, vyplní se kartičky nalezenými údaji:
Je možné na kterýkoliv údaj kliknout a změnit jej:
Jakmile jste s kartičkou spokojeni, klikněte na tlačítko Ulož a slovíčko se objeví v seznamu:
- Kliknutím na kterékoliv slovíčko v seznamu se kartička vyplní jeho údaji a je možné kartičku aktualizovat či odstranit.
- Práci můžete kdykoliv přerušit a prohlížeč zavřít – všechna data jsou uložena automaticky a při opětovném zavolání stránky se tato obnoví i se seznamem.
- Výsledky své práce můžete uložit jak ve formátu CSV, tak si i nechat zaslat slovíčka v PDF dokumentu jako kartičky.
Další zajímavosti a popis řešení
Pro správu skriptů a css soubory je použita knihovna Cassette, kterou jsem ve stručnosti popsal v příspěvku ASP.NET– kazeta stále žije…...Každá část obrazovky má svůj vlastní css styl:
- inputBox.css – styly pro vrchní vyhledávací box
- card.css – styly pro kartičky
- cards.css – styly pro seznam kartiček
- basicLayout.css – styly pro obecný vzhled stránky, tj. umístnění hlavičky, patičky apod.
- site.css – styl dodaný MS
Funkčnost na straně klienta je také rozdělena do několika javascriptů:
- buttonEvents.js – co se provede po kliku na tlačítka a také co se má provést po načtení stránky a vytvoření nové kartičky v seznamu (createEntry)
- flashcard.js – je zde metoda pro export do csv (exportData), testování, zda podobná kartička již neexistuje (isCardAlreadyStored) , vypsání seznamu uložených kartiček (listCard), vyplnění kartičky (fillCard) a také seznam operací, které se provedou, pokud vyhledáváte nové slovíčko (submitEdit)
- search.js – dvě metody pro vyhledávání ve zvolených slovnících, pro každý slovník jedna
Mimo tito skripty jsou použity tyto knihovny:
- jQuery – netřeba představovat
- jQuery.editable.js – umožňuje editaci na stránce po kliknutí, použití je velmi jednoduché,
- jQuery.xdomainajax.js – umožňuje snadné použíti YQL, volá se jako bežné Ajax volání
- jStorage.js – sjednocuje práci s lokálním uložištěm (HTML 5)
Nadpis je asi trochu matoucí a snad na vysvětlenou pro ty mladší by bylo dobré zmínit, že kdysi dávno se hudba nekopírovala pomocí mp3, ale existovaly analogové kazety. Kopírování bylo zdlouhavé a s každou kopií klesala kvalita. Názvem tohoto média se inspiroval autor zajímavé knihovny(nepátral jsem proč a doufám, že to neznamená, že kvalita knihovny bude s každou verzí klesat).
