Univerzita Karlova v Praze Matematicko-fyzikální fakulta
BAKALÁŘSKÁ PRÁCE
Marek Zelc Browser jako prohlížeč závislostních stromů Ústav formální a aplikované lingvistiky
Vedoucí bakalářské práce: Mgr. Jan Ptáček Studijní program: Informatika, obor Programování
2010
Chtěl bych poděkovat svému vedoucímu, Mgr. Janu Ptáčkovi, za vedení této práce, za rady při řešení problémů a poskytnutí mnoha informací potřebných pro vypracování této práce.
Prohlašuji, že jsem svou bakalářskou práci napsal(a) samostatně a výhradně s použitím citovaných pramenů. Souhlasím se zapůjčováním práce a jejím zveřejňováním. V Praze dne
Marek Zelc
2
Obsah 1 Specifikace 1.1 Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Současné řešení - TrEd . . . . . . . . . . . . . . . . . . . . . 1.3 Implementované řešení - PMLView . . . . . . . . . . . . . .
6 6 6 7
2 PML 2.1 Úvod . . . . . . . . . . . . . . 2.2 Prostředky PML . . . . . . . 2.2.1 Datové typy . . . . . . 2.2.2 Role . . . . . . . . . . 2.2.3 Hlavička instance PML
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
8 8 8 9 9 10
3 Dostupné technologie 3.1 Úvod . . . . . . . . 3.2 SVG . . . . . . . . 3.3 Canvas . . . . . . . 3.4 Flash . . . . . . . . 3.5 XSL . . . . . . . . 3.6 JavaScript . . . . . 3.7 Local Storage . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
11 11 12 14 15 15 17 18
. . . . . .
20 20 21 22 23 25 25
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
4 PMLView - Implementace 4.1 Zvolená technologie . . . . . . . . . . . . . . . . . . . . . 4.2 Architektura PMLView . . . . . . . . . . . . . . . . . . . 4.3 Transformace . . . . . . . . . . . . . . . . . . . . . . . . 4.4 Zobrazení . . . . . . . . . . . . . . . . . . . . . . . . . . 4.5 Uložení zobrazeného stromu do samostatného dokumentu 4.6 Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
. . . . . .
5 PMLView - Uživatelská dokumentace 5.1 Instalace . . . . . . . . . . . . . . . . 5.2 Zobrazení závislostních stromů . . . . 5.3 Editor stylů . . . . . . . . . . . . . . 5.4 Vytvoření vlastního stylu . . . . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
28 28 28 29 30
6 Závěr
32
Literatura
33
4
Název práce: Browser jako prohlížeč závislostních stromů Autor: Marek Zelc Katedra (ústav): Ústav formální a aplikované lingvistiky Vedoucí bakalářské práce: Mgr. Jan Ptáček e-mail vedoucího:
[email protected] Abstrakt: Cílem této práce je prozkoumat technologie, kterými je možné v prohlížeči zobrazit obrazová data a poté implementovat prohlížeč závislostních stromů uložených ve formátu PML. Důraz je kladen na jednoduchost instalace i užívání výsledného nástroje. Klíčová slova: závislostní stromy, PML, prohlížeč, SVG
Title: In-Browser Dependency Tree Viewer Author: Marek Zelc Department: Institute of Formal and Applied Linguistics Supervisor: Mgr. Jan Ptáček Supervisor’s e-mail address:
[email protected] Abstract: In the present work we study available technologies capable of displaying graphical data within internet browsers. Futher, we implement a tool for viewing dependency trees stored as PML data. The main goal is a straight installation process and simple usage of the resulting tool. Keywords: dependency trees, PML, internet browser, SVG
5
Kapitola 1 Specifikace 1.1
Úvod
Ústav formální a aplikované lingvistiky se zabývá zpracováním přirozeného jazyka pomocí počítače: strojovým překladem, automatickým určováním slovního druhu nebo například generováním přirozeného jazyka. Lingvistická data (zdrojový text s anotacemi) pro tyto úlohy ukládáme do XML souborů. Strukturu těchto datových souborů popisujeme pomocí takzvaného PML schématu. PML (Prague Markup Language1 ) definuje základní datové typy, které se v ligvistických datech (syntaktických stromech, slovnících, apod.) často vyskytují.
1.2
Současné řešení - TrEd
V současné době se pro zobrazení lingvistických dat používá aplikace TrEd. TrEd je prohlížeč a zároveň i skriptovatelný editor, pracuje se závislostními i složkovými stromy, s valenčními slovníky a dalšími lingvistickými anotacemi. TrEd je implementovaný v jazyce Perl. Díky tomu je přenositelný, funguje na Windows, OS X, BSD, Linuxu a dalších Unixech. Ke svému běhu ale potřebuje zkompilovat knihovny, které nejsou běžnou součástí těchto systémů a jejichž instalace se pro běžného uživatele ukazuje jako obtížná. Lingvistické stromy TrEd zobrazuje s nastavitelnou mírou detailů. Uživatel si předepisuje styl zobrazení pomocí stylesheetu, mezi styly pak může v editoru TrEd přepínat. Předpis stylu zpravidla obsahuje výrazy v jazyce 1
http://ufal.mff.cuni.cz/jazz/PML
6
Perl, které se při zobrazení vyhodnotí. Z Perlu lze testovat atributy právě zobrazovaného uzlu i dalších uzlů ve stromě a zobrazení přizpůsobit aktuálnímu kontextu.
1.3
Implementované řešení - PMLView
Cílem bakalářské práce je zobrazit PML data v internetovém prohlížeči. ve srovnání s TrEdem odpadnou obtíže s instalací knihoven. Zároveň PMLView umožní vkládat lingvistické stromy do webových stránek přímo z jejich zdrojového souboru, místo nutné konverze do bitmapového obrázku. Bitmapový obrázek je statický, oproti tomu vykreslení pomocí PMLView umožňuje zobrazit atributy uzlu rozkliknutím myši. Ústav používá pro sdílení společných dokumentů systém Wiki, kde takový způsob zobrazení bude také vítaný. Existující stylesheety z TrEdu nejsou v prohlížeči přímo použitelné, interpreter Perlu nebývá z prohlížeče běžně dostupný. Styl zobrazení se v PMLView definuje pomocí JavaScriptu. Běžní uživatelé využijí Drag&Drop editor stylů, pokročilí mohou výsledný předpis ještě ručně upravit a zobrazení podmínit výrazy v JavaScriptu. PMLView je navrženo tak, aby fungovalo s internetovými prohlížeči, které podporují zobrazení dat ve formátu SVG, současně s podporou JavaScriptu nad SVG DOM (Document Object Model). Z nejvíce rozšířených prohlížečů tyto technologie nepodporuje v potřebném rozsahu pouze Microsoft Internet Explorer, ostatní (např. Mozilla Firefox, Opera, Google Chrome nebo Apple Safari) tyto technologie podporují a je tedy možné s nimi PMLView používat. Původním záměrem rovněž bylo, aby PMLView nebylo závislé na internetovém připojení. Tohoto bylo docíleno pro samotné PMLView (s výjimkou uložení aktuálního stromu do SVG souboru), ovšem editor k fungování potřebuje server, který je schopen vytvořit soubor se stylem a nabídnout jej uživateli ke stažení. Toto online propojení je nutné vzhledem k bezpečnostním politikám, implementovaným v internetových prohlížečích. Pro spuštění PMLView je nutné naprosté minimum dalšího softwaru. na platformě Windows je potřeba k operačnímu systému (používá se koncept dávkových souborů) přidat pouze XSLT procesor. U Unixových platforem tato starost odpadá, jelikož XSLT procesor je součástí běžné instalace tohoto systému (namísto dávkových souborů jsou použity skripty shellu).
7
Kapitola 2 PML 2.1
Úvod
PML (Prague Markup Language)[11] je XML formát pro zápis lingvistických anotací jako např. morfologické značkování nebo závislostní stromy a další. PML definuje abstraktní datové typy a struktury často užívané v lingvistických anotacích a slovnících. PML je navrženo tak, aby bylo možné s ním pracovat pomocí běžných nástrojů pro práci s XML daty. PML definuje užší schéma než je schéma XML. PML je nástrojem pro sjednocení zápisů lingvistických dat tak aby, různí uživatelé měli způsob jakým svá data popsat a přitom byla tato data stejně strukturovaná.
2.2
Prostředky PML
Plně specifikované XML splňující požadavky definované pomocí PML je nazýváno aplikací PML. Tato PML specifikace je formálně definována zvláštním XML souborem, který se nazývá PML schéma. Toto schéma definuje strukturu dokumentu pomocí PML datových typů a PML rolí. Schéma dat vytvořené na základě PML se nazývá instancí PML. Datové typy PML zahrnují jak atomické typy (identifikátory, řetězce a další), tak komplexní typy (například seznamy nebo alternativy). Datové typy definují strukturu dat. Role definují způsoby, jak se jednotlivá data používají.
8
2.2.1
Datové typy
Atomický datový typ je chápán jako řetězec znaků. Velmi podobný je tzv. výčtový typ. Jedná se o atomický typ, který má pevně dánu množinu hodnot, kterých můžeš nabývat. Datový typ struktura slouží jako základní abstraktní datový typ. Položky struktury jsou označovány jako prvky. Tyto prvky mohou být opět různých typů. Tyto prvky také mohou reprezentovat elementy nebo atributy XML. Také mohou být některé prvky označeny jako povinné a je tedy nutné, aby měly definovánu hodnotu. Dalším důležitým typem je seznam. Seznamy svou funkčnosti odpovídají polím známým z vyšších programovacích jazyků (není však dovoleno vytvářet seznamy seznamů). Prvky seznamu mohou být v instanci PML schématu onačeny elementem LM (tedy List Member), které označují jeden z prvků seznamu. Velmi podobné použití jako seznamy mají sekvence, které ovšem nevyžadují, aby jejich prvky byly stejného typu. Kontejnery jsou jednodušší variantou struktur. Jejich obsahem mohou být pouze textové hodnoty. v XML jsou reprezentovány pomocí samostatného elementu.
2.2.2
Role
Základní osou rolí v PML jsou #TREES, #NODE a #CHILDNODES, které určují, že se jedná o stromy, uzly, případně označují element, který obsahuje reprezentaci dětí daného uzlu. Role #ID označuje, že hodnota, která má tuto roli, slouží jako jedinečný identifikátor. Role #ORDER označuje element nebo atribut podle kterého se jednotlivé uzly řadí při zobrazení. Hodnotami jsou nezáporná celá čísla, tak, aby byly v každém stromě jedinečné. Role #KNIT u elementu obsahujícího odkaz (ve formě ID) na jiný PML element říká, že program zpracovávající daný PML dokument může odkaz nahradit přímo odkazovanými daty. To je užitečné při načítání lingvistických anotací, které popisují větu na několika různých úrovních lingvistického popisu. Poslední rolí je #HIDE, která značí, že element by měl být uživateli skryt, dokud nepožádá o jeho zobrazení.
9
2.2.3
Hlavička instance PML
Hlavička (element head obsahuje doplňující informace o PML dokumentu, takzvaná metadata: element schema odkazuje na schéma, podle kterého lze ověřit validitu dokumentu. Element references obsahuje výčet dokumentů, na které se z dat odkazuje.
10
Kapitola 3 Dostupné technologie 3.1
Úvod
Pro zobrazení obrazových dat v prohlížeči existuje několik různých technologií, které se liší jak metodou zpracování, tak podporou v samotných prohlížečích. Pro účely této práce budu zmiňovat pouze prohlížeče, které v dubnu 2010 měly aspoň 2% podíl na trhu dle statistiky W3Counter [13]. Těmito prohlížeči jsou Microsoft Internet Explorer (nejvíce zastoupen ve verzi 8), Mozilla Firefox (verze 3.6), Google Chrome (verze 4), Safari (verze 4) a Opera (verze 10).
Obrázek 3.1: Procentuální zastoupení prohlížečů Pro zobrazení grafiky v internetových prohlížečích je možné použít několik technologií. Tou základní je HTML, ve které je možné grafický výstup vytvořit, ovšem není k tomu přímo určena a práce s dynamicky se měnícím grafickým zobrazením je pracná. Dále jsou zde novější technologie (SVG, 11
Canvas, Flash a další), které ovšem nejsou ve všech prohlížečích podporovány stejně. Jako příklad uveďmě chybějící podporu pro SVG v prohlížeči Microsoft Internet Explorer. Z technologií schopných zobrazit obrázky na webu už jsme zmínili SVG. Další možností pro zobrazení obrázků je element
, který je součástí standardu HTML5[3]. Adobe Flash je rovněž použitelný. V prohlížečích je také možné použít řadu podpůrných technologií, které sice samy o sobě grafický výstup nemají, ale usnadňují práci se zobrazením grafiky. Skriptování je možné provádět JavaScriptem, pro nějž je dostupná celá řada knihoven, které mají implementovány některé běžné operace nad daty zobrazovanými prohlížečem. Skriptovacích jazyků existuje celá řada. Můžeme zmínit rovněž Visual Basic Script, vyvíjený společností Microsoft. Pro práci s daty ve formátu XML slouží jazyk XSL. Pomocí něj je možné data nejen formátovat, ale i měnit. Dostupných technologií je mnohem více, ovšem jsou méně rozšířené a tudíž ne všechny prohlížeče je podporují. Jako příklad můžeme zmínit technologii Microsoft ActiveX, která má široké možnosti použití, bohužel je vázána pouze na použití v prohlížeči Microsoft Internet Explorer. Další možností je použití Google Gears, jedná se o technologii, která rozšiřuje možnosti internetových prohlížečů (v současné době podpora Microsoft Internet Explorer, Mozilla Firefox a Google Chrome). Nevýhodou této technologie je nutnost instalace, jelikož není součástí prohlížečů. Google Gears mimo jiné umožňují přístup k informacím offline nebo poskytovat data na základě geografického umístění počítače. Rozšiřuje také možnosti lokálního uložení informací prostřednictvím internetových stránek. Toto vše může vyústit v ohrožení bezpečnosti počítače a proto jsou Google Gears navržena tak, aby uživatel musel jejich použití schválit., který se používá jako podelement elementu svg a také sebe sama. Při překrývání se tvarů platí, že tvar definovaný později je zobrazen nejvýše a překrývá dříve vykreslené tvary. To je třeba zohlednit při vykreslení lingvistických stromů, abychom si například spojnicemi uzlů nepřekryli popisky uzlů. Možnost formátování pomocí kaskádových stylů nám dává nástroj pro úpravu zobrazení, protože nám umožní definovat výchozí vlastnosti zobrazení všech prvků, které můžeme později (skriptem) změnit. Současná specifikace SVG pro druhou verzi kaskádových stylů (CSS2)[10]. SVG lze zobrazit v prohlížeči několika způsoby. První možností je zobrazit pouze samotný SVG dokument, element svg je kořenový element a prohlížeč vykreslí pouze grafická data. Dále lze SVG vkládat do HTML. K tomu účelu slouží HTML element , který zobrazí SVG soubor odkazovaný v atributu data. Nevýhodou elementu je nemožnost skriptování SVG, v tomto ohledu je výhodnější element <iframe>, případně <embed>. Použití elementu <embed> je vázáno na použití s aplikací Adobe SVG Veiwer, na druhou stranu použití <iframe> není možné s novějšími verzemi Adobe SVG Viewer[12]. Pro práci s externími daty (ve formátu XML) SVG poskytuje element <desc>, který může obsahovat značkovaný text z jiného namespace. Tato vlastnost může být využita pro vložení dalších informací, potřebných například pro pozdější skriptování. Podobnou úlohu jako <desc>, má element . Rozdíl v těchto elementech je závislý na interpretu SVG kódu (nemusí být žádný). Element title bývá interpretován jako popisek výsledného obrázku, pokud SVG zobrazujeme v rámci HTML stránky. Užitečnou vlastností kreslení veškerých čar v SVG (elementy <line>, <polyline>, <path> a další), je možnost přiřadit čáře koncovou (nebo také 13<br />
<br />
středovou) značku, element <marker>. Tato konstrukce umožňuje například nakreslení šipky na koncích čar a to dokonce tak, že samotný interpreter dopočítá úhel pod jakým musí být šipka zobrazena, aby správně navazovala na čáru. Pro použití elementu <marker>, je nutné jej definovat (v sekci <defs>) a přiřadit mu jedinečné id, na které se odvoláme při kreslení čáry pomocí atributu marker-end, marker-start nebo marker-mid objektu reprezentujícího čáru.<br />
<br />
3.3<br />
<br />
Canvas<br />
<br />
Element <canvas>je součástí specifikace HTML5 [3], která je v současnosti návrhem konsorcia W3C. Canvas je implementován ve většině moderních prohlížečů, opět s výjimkou Internet Exploreru. Zde je ovšem k dispozici proprietální technologie VML, pomocí které funkce elementu canvas nabízí JavaScriptová knihovna Explorercanvas. Na rozdíl od vektorové technologie SVG, vykresluje element canvas grafická data na rastr. Obraz je v rastrové grafice popsán pomocí barevných bodů sestavených do mřížky. Rozdíl v těchto dvou přístupech je v reprezentaci obrazových dat a má důsledky hlavně při změně měřítka zobrazených obrazových dat. Zatímco u vektorové grafiky je možné obraz libovolně přiblížit bez ztráty ostrosti, u rastrové grafiky se obraz při zvětšení stavá neostrý. Canvas umožňuje dynamické zobrazení rovinných tvarů a bitmapových obrázků pomocí canvas API. Používá se jako jedem z elementů jazyka HTML a určuje oblast, ve které je možné vykreslovat grafické objekty pomocí definovaného rozhraní (např. body, texty, úsečky). Rozdíl mezi canvasem a SVG je především v principu práce s vykreslovanými objekty, kdy SVG je reprezentováno statickým XML a kdykoliv je změněn některý atribut objektu, je celá scéna překreslena, zatímco v canvasu, jakmile je cokoliv vykresleno, zůstává tento objekt vykreslen a není možné změnit jeho vlastnosti. Jako příklad může sloužit požadavek na přidání akce přiřazené ke kliknutí na objekt. V SVG je tato akce přidána k objektu jako jeho vlastnost, zatímco při použití canvasu není nic takového možné. Pokud bychom chtěli objektu vykreslenému v canvasu přiřadit nějakou akci při kliknutí myší, museli bychom tuto akci přiřadit oblasti plochy, na které je objekt vykreslen. Co se týče možností kresby základních tvarů, má canvas totožné možnosti jako SVG. Canvas má navíc podporu vkládání již hotových obrázků 14<br />
<br />
na vykreslovací kontext.<br />
<br />
3.4<br />
<br />
Flash<br />
<br />
Flash je grafický vektorový program vyvíjený společností Adobe Systems (dříve Macromedia). Používá se pro vytváření animací (zejména v internetovém prostředí) a prezentací. Součástí Flashe je také tzv. ActionScript, což je objektově orientovaný programovací jazyk, který umožňuje scriptovat animace a vytvářet tak například interakci s uživatelem. Pro přehrání Flashe v prohlížečích je nutný Adobe Flash Player, který je obvykle instalován ve formě zásuvného modulu prohlížeče.<br />
<br />
3.5<br />
<br />
XSL<br />
<br />
Jazyk XSL (z anglického eXtensible Stylesheet Language) je podobně jako SVG založen na formátu XML. V současnosti se XSL (ve specifikaci XSL 1.0) dělí do dvou větví a sice XSLT (transformace) a XSL FO (formátovací objekty). Pro potřebu této práce je zajímavé právě XSLT, které umožňuje transformaci XML dat. XSL FO je vhodné spíše pro formátování výstupu XML dokumentu a proto se nehodí pro prohlížení stromů, protože mimo zobrazení je rovněž potřeba vybírat data, která se budou zobrazovat a tato data následně napozicovat (například u T stromů musí být uzly seřazeny pomocí parametru deepord). Práce s XSLT šablonou spočívá ve spuštění XSLT procesoru, jak ukazuje Obrázek 3.2. Pro XSLT existují dvě základní specifikace XSLT 1.0[16] a XSLT 2.0[17]. Tyto verze se liší v možnostech transformací a také podporou XSLT procesorů. Zatímco XSLT 1.0 je široce podporována, XSLT 2.0 není v operačních systémech běžně dostupné. Práce s XSLT spočívá ve vytváření šablon, které se aplikují na elementy transformovaného dokumentu. V jazyce XSLT je možné použít dva typy šablon, jednak jde o šablony pojmenované (ty se poté tímto názvem volají) a také o šablony, které odpovídají danému XPath výrazu (XPath je jazyk navržený pro dotazování nad XML dokumentem). V XSLT je možné použít různé programovací konstrukce jako jsou proměnné, cykly nebo například podmínky. Je však nutné si uvědomit, že XSLT není procedurálním jazykem a práce s těmito obraty tomu odpovídá. XSLT má jako výchozí zabudované tři šablony, které uživateli usnadňují práci. 15<br />
<br />
Obrázek 3.2: Princip práce s XSL šablonou Tyto šablony říkají, že vždy bude aplikována šablona na synovské elementy (pokud je tato šablona definována), vždy budou na výstup vypsány všechny textové elementy a hodnoty atributů. Třetí výchozí šablona udává, že budou ignorovány všechny komentáře. Příklad XSLT šablony: <xsl:template match="element"> <DIV> <xsl:variable name="promenna" select="./text()"/> <xsl:value-of select="$promenna"/> <xsl:apply-templates/> </DIV> </xsl:template> Tato šablona se provede pro každý element <element> ve zdrojových datech. Nejdříve je vypsán tag <DIV>. Poté je inicializována proměnná textem obsaženým v elementu <element>. Tato proměnná je následně vypsána (xsl:value-of) na výstup a poté se volají šablony na všechny podelementy aktuálního uzlu (xsl:apply-templates). Na pořadí uvádění definic šablon záleží v případě, že lze na jeden element aplikovat více šablon. V takovém případě bude výstup zpracován podle šablony, která byla nadefinována jako poslední. Tímto způsobem je tedy možné změnit i implicitní šablony. Toto lze provést předefinováním implicitní šablony. Pro účel této práce budeme používat pro zpracování XSL šablon utility pro příkazový řádek operačního systému (tedy msxsl.exe pro platformu 16<br />
<br />
Windows a xsltproc pro unixové platformy). XSLT procesory jsou také součástí moderních prohlížečů a je možné jejich použití deklarovat přímo v kterémkoliv XML souboru. Tento přístup se pro PMLView nehodí, jelikož si za cíl klademe při zobrazení zohlednit informace z použitého PML schématu a je tedy nutné provést transformací více. Pro použití XSL šablon existuje v prohlížečích bezpečnostní omezení Same Origin Policy. Spočívá v nemožnosti spustit šablonu XSL z jiné domény, než ze které byla načtena aktuální stránka. Toto omezení neplatí pouze pro XSL šablony, ale také pro odkazované soubory JavaScriptu a další potenciálně nebezpečné soubory. Ačkoli je XSL široce podporováno, je možné v různých implementacích nalézt nedostatky. Problém je například spouštění skriptů nad SVG DOM v prohlížeči Mozilla Firefox po spuštění šablony XSLT. Jedná se o chybu v implementaci, které se týká například zpráva číslo 204987 v systému Bugzilla[2]. Tento problém se týká předčasného spuštění události onLoad prvku document ve výše popsaném případě. Tato událost je spuštěna dříve, než je načten celý strom dokumentu do DOM a není tedy možné s ním pomocí JavaScriptu pracovat. Toho je možné se vyvarovat zpožděním volání jakýchkoliv funkcí pracujících s DOM. Z našeho testování vyplynulo, že je postačující (pro PML soubor o velikosti řádu stovek kilobajtů je dostatečné pozdržet spuštění tohoto skriptu o cca 30 milisekund), například pomocí funkce JavaScriptu setTimeout(). Specifikace XSL 2.0 přináší vylepšení specifikace 1.0. Jedná se o rozšířenou definici tzv. datových modelů, kde byly v XSL 1.0 definovány pouze základní typy jako element, či atribut. Tyto jsou nyní rozšířeny. Dále jsou zesíleny možnosti podmínek a cyklů a tyto podmínky je možné využívat i v XPath výrazech. Také je možné používat kvalifikační kriteria every a some. Nově je též možné definovat uživatelské funkce pro zjednodušení zápisu kódu. Z hlediska tranformací přibyla možnost výstupu do více souborů. Také je možné používat regulární výrazy.<br />
<br />
3.6<br />
<br />
JavaScript<br />
<br />
JavaScript je objektově orientovaný skriptovací jazyk, jehož autorem je Brendan Eich. Roku 1997 byl JavaScript standardizován asociací ECMA (Europen Computer Manufacturers Association), o rok později byl standardizován také ISO(International Organization for Standardization). Standardizovaná verze JavaScriptu je označována jako ECMAScript[9]. 17<br />
<br />
JavaScript je skriptovací jazyk běžně interpretovaný na klientském počítači (tedy narozdíl od PHP nebo ASP není obyčejně kód vykonán už na serveru). Tím je autorovi stránky dána možnost upravit svou stránku například podle typu používaného prohlížeče. Také umožňuje interakci s uživatelem bez nutnosti kontaktovat server. Další předností JavaScriptu je jeho široká podpora v prohlížečích. Použití JavaScriptu v prohlížečích je spojeno s použitím rozhraní DOM (Document Object Model), které umožňuje měnit objekty ze zobrazeného dokumentu. DOM je specifikován jak nad HTML tak nad XML. Pomocí DOM je možné přistupovat ke kterémukoliv objektu na stránce. Při práci s JavaScriptem se jedná především o přístup pomocí jedinečného identifikátoru, jelikož JavaScript neumožňuje procházení dokumentu s pomocí jazyka XPath (lze toho dosáhnout pomocí rozšiřující knihovny). DOM není jediným rozhraním používaným nad XML dokumenty. Některé vyšší programovací jazyky(například Java) používají také rozhraní SAX, které dokument zpracovává proudově. Pro PMLView se ovšem toto rozhraní nehodí, protože nemá podporu v prohlížečích. Bezpečnostním omezením JavaScriptu spouštěného v prohlížeči je nemožnost pracovat se souborovým systémem lokálního počítače, protože by útočník mohl získat přístup k citlivým souborům na disku. Číst soubory z disku je ovšem možné pomocí objektu XMLHttpRequest nad URL s protokolem file://. Tento přístup byl z bezpečnostních důvodů znemožněn v prohlížečích Chrome, Safari a Opera. XMLHttpRequest je však především používán pro předání požadavku na službu serveru bez nutnosti načtení nové stránky. Tento požadavek může být jak synchronní, tak asynchronní. Pomocí XMLHttpRequest je rovněž možné zaslat serveru požadavek včetně parametrů ve formátu GET i POST. Bohužel se možnosti XMLHttpRequest liší podle použitého prohlížeče. Mozilla Firefox, počínaje verzí 3.5 začala uplatňovat poměrně striktní Same Origin Policy a požadavky POST do jiné domény musí být posílány pouze jako prostý textu (tedy nelze použít typ obsahu běžný pro POST požadavky). Ostatní prohlížeče toto omezení prozatím nezavedly.<br />
<br />
3.7<br />
<br />
Local Storage<br />
<br />
Jako Local Storage je označována vlastnost DOM elementu document s názvem localStorage[14]. Tento atribut slouží jako uložiště dat ve formátu klíčhodnota na klientském počítači. Toto úložiště je vázáno na doménu odkud 18<br />
<br />
je voláno a také má pro každou doménu omezenu velikost ukládaných dat. Toto omezení se pohybuje v rozmezí 5 - 10 MB[14]. Podobnou funkčnost jako vlastnost localStorage má také sessionStorage, která však neukládá data trvale, ale pouze po dobu aktuální uživatelské relace. Použití Local Storage při otevření souboru z lokálního systému souborů (v prohlížeči realizováno protokolem file://) je nemožné. Tato chyba se týká všech výše zmíněných prohlížečů s výjimkou Safari. Chyba spočívá v nekorektním chování úložiště, jelikož při použití vlastnosti localStorage v případě protokolu file://, je sice hodnota uložena a je možné k ní po dobu načtení stránky přistupovat, ovšem tato hodnota je smazána po opuštění této stránky, případně po jejím znovunačtení. Tato chyba se vyskytuje i přesto, že je specifikací[14] definováno chování při použití různých protokolů. Chybu s použitím localStorage zároveň s protokolem file není možné obejít (při zachování požadavku na lokální spuštění). Řešením by vzhledem ke konstrukci localStorage (ukládání dat v závislosti na doméně), byla změna domény přímo v dokumentu JavaScriptem. Tato možnost je však z bezpečnostních důvodů zakázána samotným prohlížečem - je možné změnit doménu pouze na sufix současné domény. Protokolu file je však jako doména přiřazen prázdný řetězec.<br />
<br />
19<br />
<br />
Kapitola 4 PMLView - Implementace 4.1<br />
<br />
Zvolená technologie<br />
<br />
Pro implementaci PMLView jsme zvolili technologii SVG kombinovanou s použitím XSLT šablon a JavaScriptem. Přímá transformace mezi zdrojovými daty do SVG pomocí XSLT bez použití dodatečného skriptu není možná vzhledem k tomu, že XSL nemá nástroje k určení délky zobrazených textů. Skutečnou délku textu je možné zjistit až po načtení tohoto textu do DOM. Tuto délku je možné získat jako návratovou hodnotu metody getComputedTextLength() objektu reprezentujícího element <text>. PMLView je dávkovým souborem (skriptem shellu), který spouští nad zobrazovaným souborem XSLT transformaci, jejímž výsledkem je v prohlížeči zobrazitelný XML soubor, obsahující SVG strukturní dokument. Strukturním dokumentem rozumějme dokument obsahující pouze strukturu zobrazovaných dat(elementy <svg> a <g>) a data samotná, reprezentovaná v SVG elementu <desc>, v rámci tohoto elementu jsou data uložena v elementu <item> a jeho atributech name a value, item už není ze svg namespace. v tomto dokumentu jsou rovněž připojeny skripty nutné ke zobrazení konkrétních závislostních stromů. Jedná se především o skript pro pozicování prvků stromu. Tento strukturní dokument je pomocí JavaScriptu v prohlížeči naformátován a následně uživateli zobrazen. Formátování pomocí JavaScriptu zahrnuje rovněž vytvoření ovládacích prvků pro posun v souborech obsahujících více stromů a také vytvoření ovládacího prvku pro uložení aktuálního stromu ve formátu svg. Tyto ovládací prvky jsou do stránky přidány na základě možnosti JavaScriptu přidávat do existujícího DOM další uzly. 20<br />
<br />
Pro možnost přizpůsobit si výsledné zobrazení závislostních stromů, obsahuje PMLView také nástroj pro editaci vzhledu zobrazovaných dat. Tímto editorem je možné tvořit styly, které jsou tak použity namísto výchozího zobrazení. Editor stylů je implementován jako HTML stránka, která kontaktuje server, který pomocí PHP skriptu vytvoří soubor se stylem a tento styl je obratem poslán klientovi ke stažení. Samotné styly jsou ve formě JavaScriptových funkcí, které jsou následně volány v PMLView. V průběhu vývoje jsme chtěli pracovat s ukládáním stylů pomocí HTML5 Local Storage, bohužel jsme zjistili, že v prohlížečích není možné použít HTML5 Local Storage s kombinaci s protokolem file://. Toto je způsobeno tím, že data uložená v Local Storage jsou vázána na doménu, ve které byla uložena. Pokud ovšem použijeme protokol file://, prohlížeče tomuto souboru přiřadí jako doménu prázdný řetězec (což je podle specifikace W3C správně), bohužel už však nejsou schopny data pro tuto doménu uložit a tato data jsou přístupná pouze do znovunačtení dané stránky. Vzhledem k tomu, že uživatelské styly jsou vlastně skripty v JavaScriptu, může si uživatel napsat vlastní styl bez použití editoru. Tento přístup přinese především širší možnosti definování zobrazení. Nevýhodou je nižší pohodlnost tvorby stylu a nutnost ovládnout základy syntaxe JavaScriptu.<br />
<br />
4.2<br />
<br />
Architektura PMLView<br />
<br />
PMLView se skládá z několika samostatných souborů. Je nutné, aby se tyto soubory nacházely ve stejném adresáři, kde jsou data, která si přejeme zobrazit. PMLView je dávkový soubor pmlview.bat (skript pmlview.sh pro Unix), který přijímá jako argument název souboru se zobrazovanými daty. Celý proces zobrazení se skládá z několika kroků. Nejdříve je ze schématu PML dat vygenerována XSL šablona obsahující instrukce pro zpracování samotných dat. Tato šablona se generuje z vnořeného dávkového souboru, který je rovněž dynamicky nagenerován, tato technika je nutná z důvodu omezených možností příkazové řádky ve Windows, především pak nemožnosti získat ze zdrojového souboru název schématu, podle kterého je PML dokument vytvořen. Jako alternativa k použítí dávkových souborů by mohl být systémem vykonávaný skript (pro Windows nejlépe Visual Basic Script, vyvíjený přímo společností Microsoft). Pro použití dávkových souborů jsme se rozhodli díky 21<br />
<br />
jejich jednoduchosti a bezproblémové podpoře na všech Windows systémech, jelikož vytvoření pomocného dávkového souboru není při použití XSL procesoru problémem. Ve druhém kroku je poté použita tato vygenerovaná XSL šablona pro vytvoření nového XML souboru, který obsahuje SVG strukturní dokument. Posledním krokem je pak samotné spuštění prohlížeče, který pomocí JavaScriptu vyplní požadované texty v uzlech a provede pozicování jednotlivých elementů stromu. Současně tento skript umožňuje procházení souborů, které obsahují více stromů. Pokud chceme použít vlastní styl pro zobrazení, je nutné tento styl umístit do souboru style.js, který musí být ve stejné složce jako PMLView. Je možné použít styl vygenerovaný editorem stylů, ovšem je také možné tento styl napsat přímo, což rozšiřuje možnosti jeho tvorby (stylem je JavaScriptová funkce, je tedy možné použít veškeré možnosti JavaScriptu - editor není schopen všechny tyto možnosti adekvátně použít). Pro operační systém Windows, který neobsahuje v instalaci žádný nástroj pro práci s XSLT styly, je nutné dodat některou z utilit pro příkazovou řádku společně s PMLView. Pro PMLView jsme zvolili nástroj msxsl.exe, který vyvíjí Microsoft[6].<br />
<br />
4.3<br />
<br />
Transformace<br />
<br />
Významnou částí PMLView je použití XSLT transformace, při zpracování každého dokumentu je tato transformace použita dvakrát. Nejprve je vygenerována šablona pro transformaci vlastních dat ze schématu těchto dat. Toto schéma tedy musí být přítomno v adresáři se zobrazovaným souborem. Tento mezikrok zajišťuje, že bude vždy možné pracovat s aktuální verzí dat. Dále už je jen na vstupní soubor aplikována tato vygenerovaná šablona a do výstupního souboru, jsou zapsána data ve formátu SVG. Pro zobrazení je potřeba podle schématu určit zobrazitelné elementy dat. Tyto jsou ve schématu označeny pomocí atributu role, který musí mít hodnotu #NODE. Pokud hodnota atributu role má hodnotu #TREES, jedná se o element, který obsahuje všechny stromy. Poslední významnou hodnotou atributu role, je #CHILDNODES, která značí, že takto označený element obsahuje potomky aktuálního uzlu. V tomto je poněkud problematické zpracování schématu pro soubory *.tmt, kde má element s rolí #TREES vloženo jedno patro, kdy žádný z podelementů nemá roli #NODE, není tedy explicitně jasné, které prvky mají 22<br />
<br />
Obrázek 4.1: Schéma fungování transformací v PMLView být zobrazeny. Pro potřeby PMLView jsme toto ošetřili přímo v šabloně. Také je pro snadnější orientaci v kódu použit zvláštní soubor se skriptem (dynamicScript.js). Pomocí transformace je tedy vytvořen strukturní SVG dokument (SVG elementy <svg> a <g> ), samotná data jsou pak vkládana do elementů <desc>, které jsou mimo jiné určeny pro uložení dat v jiném namespace než SVG. Konkrétně u PMLView jsou všechna data ukládána jako elementy XML <item> , přičemž atribut name udává název každé hodnoty, atribut value udává hodnotu samotnou. Pokud má prvek podle schématu roli #ORDER, je přidán ještě atribut isOrder s hodnotou jedna. Toto je důležité pro řazení prvků ve výsledném stromě. Transformace navíc přidává přímo do výstupních souborů informaci o tom, jaké skripty mají být pro zobrazení připojeny. Tímto způsobem připravený soubor je už plně připraven pro samotné zobrazení prohlížečem.<br />
<br />
4.4<br />
<br />
Zobrazení<br />
<br />
Zobrazení samotných dat je realizováno internetovým prohlížečem (podporujícím skriptovatelné SVG). Toto zobrazení používá sadu skriptů, které máme v dokumentu připojeny z transformace. Samotný skript pro vykreslení pracuje v několika fázích. V zásadě jde o rozdělení jednotlivých kroků, které jsou potřebné pro postavení samotného stromu. Hlavními fázemi jsou tedy: 23<br />
<br />
• průchod aktuálním stromem a načtení jeho reprezentace do vnitřní paměti, • naplnění požadovaných textů, jejich nastylování, • spočtení délky jednotlivých textů a horizontální rozmístění prvků stromu, • přidání pozadí pod texty, aby do těchto textů nezasahovaly spojnice uzlů. Průchod stromem je průchod do hloubky (ekvivalentně je možné použít i průchod do šířky, tím by však bylo potřeba vytvořit další datovou strukturu pro frontu, průchod do hloubky nám zajistí rekurze). Toto zabezpečuje funkce getIds(current, parent, depth), kde current je aktuální uzel, ve kterém pracuji, parent označuje rodičovský uzel a depth hloubku, ve které se právě nacházím. Do strukturního dokumentu je doplněna pro každý uzel hrana spojující jej s rodičovským uzlem a je také doplněna značka pro text v prvním řádku. Zároveň je nastavena souřadnice y (tedy hloubka uzlu) a do paměti je načten objekt obsahující informace o uzlu samotném. Naplňování požadovaného textu do uzlů se děje na základě předdefinovaného skriptu (odvozeného od zobrazení v TrEdu), případně pomocí uživatelsky definovaného stylu style.js. Jednotlivé položky textu jsou vkládány do elementů <tspan>, aby mohly být samostatně nastylovány barvou. Elementy se pro zobrazení vkládají do elementu <text>. V této fázi jsou rovněž vytvořeny značky uzlů na základě předdefinované funkce. Délka textů na obrazovce je počítána funkcí getComputedTextLength(), tuto délku je samozřejmě nutné počítat až po doplnění všech textů, proto nemohou být druhý a třetí krok prohozeny. Když známe délku, můžeme prvky rozmístit i horizontálně (vertikální rozmístění je provedeno už v prvním kroku) funkcí calcX(). Rozmisťujeme podle pořadí, které je definováno. Pokud není definováno pořadí explicitně, jsou prvky seřazeny podle pořadí ve zdrojových datech. Při rozmisťování je také nutné počítat s hodnotou ukotvení textů (v PMLView je použito kotvení středem, aby byly všechny texty zarovnány na střed značky uzlu). Protože v SVG není možné nijak explicitně nastavit pozadí textu, je nutné pod veškeré texty přidat odbélníky v barvě pozadí, aby nebyla kvůli hranám snížena čitelnost textu, který by se jinak s hranami prolínal. SVG vykresluje elementy podle jejich pořadí ve zdrojových datech, tedy vždy je viditelný objekt, který je ve struktuře dokumentu definován poslední. Proto je třeba hrany definovat dříve než texty a jejich obdélníková pozadí. 24<br />
<br />
Součástí skriptů jsou také pomocné funkce usnadňující vykreslování. Jedná se především o funkci getValue(node,key), která pro zadaný uzel node zjistí jakou hodnotu má položka se jménem key. Další zajímavou funkcí je findOrder(current), která ve stromě current nalezne označení pořadí uzlu (v PML specifikováno rolí #ORDER, pokud takový prvek ve stromě není, přiřadí výchozí číslování podle pořadí v dokumentu). Funkce nextBundle() a prevBundle() zabezpečují posouvání jednotlivých stromů v dokumentu, který jich obsahuje více.<br />
<br />
4.5<br />
<br />
Uložení zobrazeného stromu do samostatného dokumentu<br />
<br />
Pomocí PMLView je rovněž možné ukládat aktuálně prohlížený strom do *.svg souboru. To je realizováno pomocnou HTML stránkou, vygenerovanou z hlavního výstupního souboru, obsahující skrytý HTML formulář, kterým je serveru předána textová reprezentace aktuálně prohlíženého stromu. Server tato data doplní o další potřebné údaje a odešle klientovi zpět veškerá požadovaná SVG data s hlavičkou vynucující stažení obsahu. Touto hlavičkou je: Content-Type: application/force-download a také hlavička určující název stahovaného souboru Content-Disposition: attachment; filename="soubor.xyz". Na stejném principu funguje i stahování uživatelsky vytvořených stylů.<br />
<br />
4.6<br />
<br />
Editor<br />
<br />
Hlavním účelem editoru stylů je dát uživatelům PMLView možnost upravit si vykreslení lingvistických závislostních stromů. Uživatelské rozhraní je plně grafické a běží ve webovém prohlížeči. Dalším důležitým cílem je, aby editor reflektoval případné změny provedené ve specifikaci formátu dat, pro která je určen. Tedy získávat podklady přímo ze schématu tak, aby byl editor aktuální při každém použití. Editor jsem se rozhodl vybudovat jako HTML stránku. Důvodem této volby je především to, že vzhledem k povaze editoru je HTML plně dostačující technologií pro jeho zobrazení. Jako pomocnou technologii pro vytvoření příjemného uživatelského rozhraní jsem si vybral JavaScriptovou knihovnu jQuery. Tuto knihovnu jsem<br />
<br />
25<br />
<br />
zvolil z dvojice kandidátů (jQuery a Scriptaculous) pro její možnosti v oblasti prohledávání objektů na stránce, což je velmi důležité vzhledem k potřebě generovat data pro editaci přímo ze schematu pml dokumentů. K načtení schematu JavaScriptem je navíc použito technik AJAXu pro kontaktování serveru pro dodatečné informace (v tomto případě se nekontaktuje server, ale lokální systém souborů). Jako výstup z editoru jsem zvolil formu JavaScriptového spustitelného kódu, který bude spouštěn přímo hlavní komponentou pmlview, která má na starosti pozicování prvků. Tuto formu jsme zvolil proto, aby byla možná budoucí rozšiřitelnost, například na úroveň podobnou TrEdu, kde je možné do stylů přidávat přímo useky kódu v Perlu. Knihovna jQuery [5] je knihovna, která je určena pro zjednodušení práce s JavaScriptem. Především jde o procházení dokumentu, animace, zpracování událostí a mnoho dalších.Tento editor používá zejména nástroje pro procházení dokumentu ( použití tzv. CSS selectorů) a dále funkce pro vytvoření efektu drag-and-drop. Instalace a použití této knihovny není nikterak složité. Stačí si pouze stáhnout soubor s knihovnou a připojit jej ke stránce. Pokud chceme s knihovnou řešit i další efekty, např. již zmíněný drag-and-drop, musíme si ještě stáhnout jQuery UI (jakousi nadstavbu jQuery) obsahující požadovaný efekt. Pro načtení schématu, které je na souborovém systému uloženo jako samostatný soubor je použita funkce JavaScriptu XMLHttpRequest, která umožňuje kdykoliv odeslat HTTP požadavek serveru (popřípadě lokálnímu systému souborů). Příklad: var req = new XMLHttpRequest(); req.open(’GET’, ’file:///home/user/file.json’, false); req.send(null); if(req.status == 0) dump(req.responseText); Důležité je při testu úspěchu dotazu na lokální soubor porovnávat status s 0 nikoliv s konstantou 200, která značí úspěch protokolu HTTP. Toto je z důvodu absence serveru při dotazu na lokální soubor. Tato funkcionalita je zatím bohužel nedostupná pro prohlížeče Google Chrome, Opera a Safari, které s touto funkcí nepracují dle specifikace. Po načtení se v pravé části obrazovky objeví všechny typy stromů, která dané schéma povoluje. (Aby editor fungoval korektně je nutné, aby byl na stejném umístění jako schéma). Po kliknutí na vybrané schéma je na26<br />
<br />
hrán samotný editor, který sestává z fragmentu stromu (který je opět zvolen dle možností konkrétního stromu) a menu s položkami, které mohou být ve stromě obsaženy. Samotná editace stylu sestává z umístění požadovaných položek do připravených slotů. Pokud chceme ze stromu některé položky odstranit, stačí je přetáhnout na oblast THRASH. Pokud jsme ukončili editaci zvoleného typu stromu a chcem e editovat další, klikneme na volbu NEXT TREE.<br />
<br />
27<br />
<br />
Kapitola 5 PMLView - Uživatelská dokumentace 5.1<br />
<br />
Instalace<br />
<br />
PMLView je navrženo tak, aby bylo možné zobrazovat závislostní stromy z PML co nejjednodušším postupem s minimální obtížností instalace nástroje. Instalace PMLView spočívá ve zkopírování složky obsahující nástroj do požadovaného umístění na místním systému souborů, tedy místo odkud bude nástroj spouštěn při každém použití.<br />
<br />
5.2<br />
<br />
Zobrazení závislostních stromů<br />
<br />
Práce s PMLView se v detailu odlišuje při použití s operačními systémy Windows a při práci se sytémy založenými na platformě Unix. Tento rozdíl spočívá v rozdílném spustitelném souboru. Pro operační systém se používá dávkový soubor (pmlview.bat), pro unixové prostředí se používá skript shellu (pmlview.sh). Dále už je práce s PMLView totožná. PMLView se spouští v příkazové řádce a přijímá jeden argument, kterým je jméno souboru, který chceme zobrazit. Soubor se může nacházet kdekoliv v souborovém systému (uživatel spouštějící PMLView musí mít dostatečné oprávnění pro čtení požadovaného souboru).Dále od uživatele není vyžadována žádná akce, data budou automaticky zobrazena v prohlížeči, který je přiřazen pro soubory *.xml. Je důležité mít na zřeteli, že PMLView funguje pouze v prohlížečích<br />
<br />
28<br />
<br />
podporujících SVG a jeho skriptování (např. Mozilla Firefox, Opera, Google Chrome nebo Safari). Pro posun v souborech obsahujících více stromů slouží červené šipky, pokud se při prohlížení dostaneme na konec souboru, skript to ohlásí dialogem. Pro stažení aktuálního stromu je nutné kliknout na zelenou šipku. Po kliknutí je otevřena nová stránka obsahující pouze aktuální strom v SVG. Pro zobrazení detailů o uzlu je nutné kliknout na značku uzlu, pro zavření detailů je nutné kliknout na červenou oblast nad těmito detaily.<br />
<br />
5.3<br />
<br />
Editor stylů<br />
<br />
Editor Stylů je HTML stránka spustitelná v prohlížeči (v případě lokální verze je možné spustit editor pouze v prohlížeči Mozilla Firefox, v případě verze ze serveru http://www.f11.cz/pmlview/creator.php omezení na Firefox neplatí). Po načtení webové stránky do prohlížeče je nutné vybrat si, pro který typ stromu chceme editovat styl(pokud schéma definuje více typů stromů). Na zvolený strom klikneme a zobrazí se nabídka se všemi atributy, které podle daného schématu může aktuální typ stromu obsahovat. Tato nabídka se nachází v pravé části obrazovky. V levé části obrazovky je podkladový fragment stromu, kam můžeme přetahovat jednotlivé položky z nabídky. Je tovněž možné přetahovat položky přímo ve stromě. Struktura základního editoru je zvolena tak, aby odpovídala běžnému členění stromů a rozlišuje několik typů uzlů podle vlastnosti nodetype. Ve stylu tak můžeme zvlášť nadefinovat pro kořenový element, pro běžný element stromu a pak dále pro uzly, které mají vlastnost nodetype rovnu hodnotě qcomplex nebo coap (a také můžeme nadefinovat styl pro děti uzlu s hodnotou coap)[1]. Pokud jsme s nadefinovaným stylem spokojeni, uložíme jej stiskem tlačítka Save style. Nyní máme na výběr jestli chceme přidat styl pro jiný typ stromu nebo chceme získat kompletní nadefinovaný styl. Pokud chceme pokračovat v editaci dalšího typu stromu, stiskneme tlačítko Next tree. Opět se zobrazí nabídka pro výběr typu stromu a dál pokračuje editace stejně jako v prvním případě. Pokud chceme získat soubor s vygenerovaným stylem, stiskneme tlačítko Get style. Poté je kontaktován server, který vytvoří soubor stylu. Tento soubor je potřeba uložit do složky s PMLView a pojmenovat style.js. Při příštím spuštění PMLView bude pro zobrazení použit tento styl. 29<br />
<br />
5.4<br />
<br />
Vytvoření vlastního stylu<br />
<br />
Mimo možnosti vytvořit styl pomocí editoru stylů je pro PMLView možné vytvořit soubor obsahující uživatelský styl i přímým zápisem. Toto je možné díky tomu, že stylem je běžný JavaScriptový kód. Při vytváření stylu přímou editací kódu je nutné dodržet několik věcí. Pro rozpoznání přítomnosti uživatelského stylu je nutné nastavit ve vytvářeném skriptu hodnotu proměnné isMyStyle na hodnotu 1. Tímto bude zajištěno, že hlavní vykreslovací skript pmlview použije uživatelem definovaný skript pro zobrazení stromu. Dále je nutné dodržet to, že kód zodpovědný za vlastní stylování musí být uzavřen ve funkci pojmenované myStyle(). Tato funkce nesmí přijímat žádné parametry a nemusí mít žádnou návratovou hodnotu. Další důležitou věcí je nutnost nastavit hodnoty zobrazení pro veškeré uzly ve stromu. Reprezentace všech těchto uzlů jsou uloženy v globálním poli nodes. Jednotlivé uzly jsou pak reprezentovány objekty. Důležitou vlastností těchto objektů je id, které uchovává id daného uzlu. Druhou důležitou vlastností je n, které uchovává odkaz na DOM objekt, který obsahuje daný uzel v SVG reprezentaci. Pokud chceme získat některou hodnotu, použijeme funkci getValue(uzel, hodnota), kde uzel označuje uzel, ve kterém jsou uloženy veškeré elementy <desc>, nesoucí informace o obsahu dat v aktuálním uzlu (tedy hodnotu nodes[i].n.parentNode, i je index aktuálního uzlu). Parametr hodnota pak označuje textově reprezentovaný název hodnoty, kterou hledáme. Hledaná hodnota je návratovou hodnotou této funkce. Pokud specifikovaná hodnota není nalezena, je vrácen prázdný řetězec. Pro vytvoření nové položky v jednotlivých řádcích je možné využít funkci createN2(obsah, barva), kde obsah je text, který bude zobrazen a barva je označení barvy (je možné použít jakékoliv označení barvy srozumitelné pro internetový prohlížeč) jakou má být tento text zobrazen. Funkce vrátí odkaz na nově vytvořený SVG element <tspan>, který je možné připojit do výsledného zobrazení. Podobnou funkčnost má funkce createN(obsah), která nespecifikuje barvu, kterou má být text zobrazen a je tedy použita barva implicitní (zpravidla černá). Obě tyto funkce vrací elementy SVG s namespace, které odpovídá zbytku dokumentu. Pro stylování jiného řádku než prvního, je potřeba pro tento řádek nejprve vytvořit element <text>, do kterého budou vkládány další texty. Při 30<br />
<br />
vytváření dalších řádků je nutné dodržet konvenci pro vytváření identifikátoru elementu. Pokud je id identifikátor aktuálního uzlu (nodes[i].id), musí mít druhý řádek identifikátor t2.id, třetí pak t3.id. Při ukládání výsledného stylu už je pak pouze nutné uložit jej pod názvem style.js do složky, ve které se nachází PMLView.<br />
<br />
31<br />
<br />
Kapitola 6 Závěr V této práci jsme vyvinuli uživatelsky jednoduchý nástroj pro zobrazení lingvistických stromů v interetovém prohlížeči. Jeho hlavní předností je jednoduchost instalace a použití. Lokální verze editoru stylů je díky příliš striktní implementaci Same Origin Policy v prohlížečích funkční pouze v jediném prohlížeči a také pokročilejší funkce (jako je vytvoření vlastního stylu) vyžadují více akcí uživatele než by bylo ideálně nutné (nutnost manuálního stažení stylů do složky obsahující zbytek PMLView). Tyto odchylky od původních cílů jsou způsobeny implementací využívaných technik v současných prohlížečích. Pokud by došlo k přesné specifikaci Same Origin Policy v kombinaci s protokolem file:// a ke sjednocení implementace v prohlížečích, bude možné PMLView upravit tak, aby se dosáhlo původních záměrů (tedy interního uložení stylů samotným prohlížečem a jejich následné použítí bez nutnosti manipulace s dalšími soubory). Vývoj prohlížečů v současnosti však jde spíše opačným směrem. Způsoby, kterými mohou zobrazované stránky ukládat svá data na klientských systémech, jsou spíše omezovány z důvodu zachování bezpečnosti těchto systémů.<br />
<br />
32<br />
<br />
Literatura [1] Mikulová M., Bémová A., Hajič J.,Hajičová E., Havelka J., Kolářová V., Kučová L., Lopatková M., Pajas P.,Panevová J., Ratímová M., Sgall P., Štěpánek J., Urešová Z., Veselá K., Žabokrtský Z. Anotace na tektogramatické rovině Pražského závislostního korpusu http://ufal.mff.cuni.cz/pdt2.0/doc/manuals/cz/tlayer/html/pr03s01.html Zobrazeno dne 19.5.2010. [2] Mozilla Corporation. Bug 204987 https://bugzilla.mozilla.org/show bug.cgi?id=204987 Zobrazeno dne 19.5.2010. [3] Editoři: Hickson I., Hyatt D. HTML 5 http://www.w3.org/TR/2010/WD-html5-20100304/ Zobrazeno dne 19.5.2010. [4] Microsoft Corporation. Internet Explorer 9 Test Drive http://ie.microsoft.com/testdrive/ Zobrazeno dne 10.5.2010. [5] The jQuery Project. jQuery http://jquery.com/ Zobrazeno dne 21.5.2010. [6] Microsoft Corporation. Msxsl.exe download http://www.microsoft.com/downloads/details.aspx?familyid=2fb55371c94e-4373-b0e9-db4816552e41&displaylang=en Zobrazeno dne 22.5.2010. [7] Hajič J.,Hajičová E., Hlaváčová J., Klimeš V., Mírovský J., Pajas P., Štěpánek J., Vidová Hladká B., Žabokrtský Z. Průvodce PDT 2.0<br />
<br />
33<br />
<br />
http://ufal.mff.cuni.cz/pdt2.0/doc/pdt-guide/cz/html/ch03.html#adata-formats-pml Zobrazeno dne 20.5.2010. [8] Editoři: Ferraiolo J., Fujisawa J., Jackson D. Scalable Vector Graphics (SVG) 1.1 Specification http://www.w3.org/TR/SVG11/ Zobrazeno dne 19.5.2010. [9] Ecma International. Standard ECMA-262 ECMAScript Language Specification http://www.ecma-international.org/publications/files/ECMAST/Ecma-262.pdf Zobrazeno dne 19.5.2010. [10] Editoři: Ferraiolo J., Fujisawa J., Jackson D. Styling SVG with CSS http://www.w3.org/TR/SVG/styling.html#StylingWithCSS Zobrazeno dne 22.5.2010. [11] Pajas P. The Prague Markup Language (Version http://ufal.mff.cuni.cz/pdt2.0/doc/data-formats/pml/index.html Zobrazeno dne 21.5.2010.<br />
<br />
1.1)<br />
<br />
[12] w3schools.com. W3C Schools - SVG in HTML pages http://www.w3schools.com/svg/svg inhtml.asp Zobrazeno dne 21.5.2010. [13] Konsorcium W3C. Web Browser Market Share http://www.netmarketshare.com/browser-market-share.aspx?qprid=0 Zobrazeno dne 10.5.2010. [14] Editor: Hickson I. Web Storage http://dev.w3.org/html5/webstorage/#thelocalstorage-attribute Zobrazeno dne 19.5.2010. [15] Editoři: Clark J., DeRose S. XML Path Language (XPath) Version 1.0 http://www.w3.org/TR/xpath/ Zobrazeno dne 20.5.2010. [16] Editor: Clark J. XSL Transformations http://www.w3.org/TR/xslt/ Zobrazeno dne 19.5.2010. 34<br />
<br />
(XSLT)<br />
<br />
Version<br />
<br />
1.0<br />
<br />
[17] Editor: Kay M. XSL Transformations (XSLT) Version http://www.w3.org/TR/xslt20/ Zobrazeno dne 19.5.2010.<br />
<br />
35<br />
<br />
2.0<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/marek-zelc-browser-jako-prohlie-zavislostnich-strom" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Marek Zelc Browser jako prohlížeč závislostních stromů"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script> 
