neděle 8. ledna 2012

A opět do oblak …

Minulý rok v září uspořádal Microsoft konferenci BuildWindows. Zde mimo jiné zazněla i myšlenka, že budoucí vývoj pro Windows bude probíhat v HTML a javascriptu. Následovaly úvahy o budoucnosti .NETu, C#, jak budou aplikace vypadat apod. V tomto příspěvku nehodlám tyto úvahy rozvíjet – spíše ukážu, jak napsat aplikaci v HTML. I ta bude ale závislá na C# – web stránky jsou realizováný pomocí MVC technologie a celý backend generování kartiček je napsán v C#. Klientská část naproti tomu spoléhá zcela na javascript a vzhled stránkua je řešen pomocí CSS – samotná stránka tak obsahuje téměř čisté HTML.
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í
                                          image    image

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:
image
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í:
image

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.js

Uklá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:

image

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:
image
Jakmile jsou údaje nalezeny, vyplní se kartičky nalezenými údaji:
image
Je možné na kterýkoliv údaj kliknout a změnit jej:
image
Jakmile jste s kartičkou spokojeni, klikněte na tlačítko Ulož a slovíčko se objeví v seznamu:
image
  • 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
Všimněte si, že dva poslední styly nejsou přímo odkazovány ani ve view, ano v layoutu – je na ne odkaz v prvních třech souborech:
image
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
Jak pro skripty, tak i pro styly je použit bundle.txt soubor, který upřesňuje řazení skriptu a stylů.
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)
Aplikace funguje správně jen v posledních verzích prohlížečů Chrome, Opera, Firefox a asi i v IE (zde nefunguje export do csv). Cílem nebylo ani tak nabídnout naprostou funkčnost, spíše ukázat, jak udělat funkční aplikaci čistě v prohlížeči – i serverová podpora je omezena na generování PDF dokumentů, které nelze z asi pochopitelných důvodů generovat v prohlížeči (a nebo o tom zatím nevím).

Zdrojový kód

Aplikace běží na adrese http://flashcard.apphb.com/ a zdrojové kódy jsou k prohlédnutí na CodePlex. Komentáře v kódu moc nejsou, snažil jsem se vše popsat v tomto článku.

sobota 7. ledna 2012

ASP.NET– kazeta stále žije…..

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).
Knihovnu  naleznete na stránkách http://getcassette.net/.  Může vám pomoci při vývoji WebForms a nebo MVC webů (já ji použil pro zatím jeden malý projekt v MVC).
Řeší problém se správou skriptů a stylů –pro snazší údržbu a vývoj je vhodné mít styly uložené ve více css souborech, podobně i skripty. Jenže čím více toho musí prohlížeč pro zobrazení stránek stáhnout, tím je celková odezva stránek pomalejší a zátěž serveru a využití internetového spojení vyšší. A přesně tento problém Cassette řeší – při vývoji a ladění webu  zachovává malé soubory – můžete tedy snadno využívat klientských ladících nástrojů například ve Firefoxu, ostrá verze pak obsahuje soubory jak sloučené, tak minimalizované.
V případě MVC pak navíc nemusí stránky(views) obsahovat spousty tagů se skript soubory či linky na css. Stačí jen deklarovat, které soubory jsou pro dané View potřeba:
  1. @{
  2.     ViewBag.Title = "Index";
  3.  
  4.     Bundles.Reference("Scripts/Cards/export.js");
  5.     Bundles.Reference("Scripts/Cards/flashcard.js");
  6.     Bundles.Reference("Scripts/Cards/search.js");
  7.     Bundles.Reference("Content/inputBox.css");
  8.     Bundles.Reference("Content/card.css");
  9.     Bundles.Reference("Content/cards.css");
  10. }
  11. <div id="inputBox">
V MasterView souboru pak stačí na příslušných místech, kde mají byt tagy, zavolat:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>@ViewBag.Title</title>
  5.     @Bundles.RenderScripts()
  6.     @Bundles.RenderStylesheets()
  7. </head>
  8. <body>
  9.     <div class="wrapper">
Všimněte si tak=, že nemusíte přímo odkazovat na jQuery knihovnu – ve skriptech, které si vytvoříte se stačí na tuto knihovnu odkázat a bude tak zahrnuta do vašich skriptů:
image
(ten odkaz by jste tam dávali asi tak jako tak, díky tomu vám začne fungovat intelliSense nápověda pro JQuery metody).
Totéž platí i o stylech, i  v nich můžete napsat odkaz na “nadřízený” styl:
image
Nyní můžeme v případě, že svůj web ladíme, získat všechny soubory:
image
Celková velikost jen skriptů je přes 600kB:
image
Naopak jakmile vývoj dokončíme a web nasadíme, začne nám Cassette soubory slučovat a minimalizovat:
image
Například JavaScripty jsou nyní jen v jednom souboru, který má velikost téměř sedmkrát menší:

image
Na webu autora knihovny  a nebo fórech pak lze nalézt další tipy, třeba jak vypnout minimalizaci:

  1. bundles.Add<ScriptBundle>("Scripts", b => b.Processor = new ScriptPipeline().Remove<MinifyAssets>());

Další informace o této knihovně jsou k dispozici na webu knihovny, popřípadě na tomto blogu. Instalace je jednoduchá, základní použití je popsáno na webu autora.