Klientské technológie - CodeArea 2

1 Funkcia programu

CodeArea je webový zvýrazňovač syntaxe implementovaný v JavaScripte. Počas editovania textu zvýrazňuje text podľa nastavených pravidiel, ktoré sú opísané pomocou regulárnych výrazov.

Toto je už druhá verzia prvku CodeArea 1 a obsahuje niekoľko významných vylepšení. Pri jeho vývoji ma inšpiroval projekt Helene, ktorý je jediným podobným produktom, aký som našiel na Internete. Testoval som ho v prehliadačoch IE 6.0 (plná podpora), Mozilla 1.7.8 (plná podpora) a Opera 8.5 (čiastočná podpora), všetky na operačnom systéme Windows.

Nasledujúca ukážka umožňuje okrem zvýrazňovania syntaxe komunikuje so serverom zadaním nasledujúcich príkazov:

Save
poslať obsah prvku na server bez znovunačítania stránky,
Load
načítať obsah prvku zo serveru bez znovunačítania stránky
Submit
a poslať obsah prvku na server klasickou metódou so znovunačítaním stránky.

2 Spôsob návrhu a realizácie

Prvok CodeArea bol navrhnutý tak, aby vylepšil prvok textarea na stránke s čo najmenším zásahom do HTML kódu stránky. Pre jeho použitie stačí pridať do stránky odkazy na zdrojové kódy a definíciu štýlov.

<link href="highlight.css" type="text/css" rel="stylesheet" />
<link href="editor.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript" src="editor.js"></script>

Následne sa do obsluhy udalosti onload pridá inicializácia prvku na to určenou funkciou:

<script type="text/javascript">
	var codeArea;

	document.onload = function ()
	{
		codeArea = CodeArea.setup ("code-area");
	}
</script>

Takýmto spôsobom sa nainicializuje prvok textarea so zadaným id.

<textarea id="code-area" class="textarea">

Funkcionalita je rozdelená na dve časti, ktoré sú od seba oddelené aj tým, že sú v samostatných súboroch. Samotný editor, jeho zobrazovanie a ovládanie je definované v súbore editor.js v triede CodeArea. Zvýrazňovanie syntaxe spolu s ukážkovými zvýrazňovačmi pre XHTML, JavaScript a Occam sú implementované v súbore highlight.js.

CodeArea

Na začiatku sa tento prvok nainicializuje podľa už existujúceho prvku textarea. Z existujúceho prvku sa zoberie hlavne text, ale aj napríklad jeho atribút class, aby sa zachoval rovnaký štýl pri zobrazovaní.
Nakoniec sa v objektovom modeli dokumentu (DOM) nahradí pôvodný prvok textarea vytvorenými elementami. Počas používateľovej práce s prvkom sa už iba obsluhujú udalosti stlačenia klávesy alebo interakcie myšou.

Oproti staršej verzii pribudla odolnosť prvku voči zmene veľkosti písma. V staršej verzii sa pozícia aktuálneho riadka pri zmenenej veľkosti písma nevypočítala správne. Teraz je pozícia aktuálneho riadka stále rovnaká (pevne určená v súbore s kaskádovými štýlmi), pričom jeho pozícia je určená pozíciou prvku v DOM (pri prechádzaní kurzorom medzi riadkami sa presúva aktuálny riadok v DOM)
Ďalším vylepšením je zvýrazňovanie syntaxe aktuálneho riadka. Aby to bolo možné, využil som správanie sa prehliadačov, ktoré zobrazujú kurzor v editovanom poli (element textarea, resp. input type="text") vždy navrchu dokumentu. Aktuálny riadok sa zobrazuje pod zvýrazneným textom, ale kurzor je pritom viditeľný. Je však nutné poznamenať, že hoci toto správanie nie je definované v štandardoch (ale nie je definované ani iné správanie), prehliadač Opera sa chová úplne inak než zvyšné majoritné prehliadače. Keď nejaký prvok prekryje kurzor, Opera sa nestará a kurzor jednoducho nezobrazí. Preto som pridal detekciu prehliadača Opery, v ktorej zobrazujem aktuálny riadok nad zvýrazneným textom.

Highlighter

Zvýrazňovač syntaxe zvýrazňuje text vždy po jednom riadku, pretože by bolo príliš zaťažujúce zvýrazňovať po každom stlačení klávesy celý text. Po zvýraznení syntaxe riadku sa podľa stavu, v ktorom skončil lexikálny analyzátor, zistí, či je nutné zvýrazniť syntax aj v nasledujúcom riadku.

Pri zvýrazňovaní sa používa zásobník zvýrazňovačov, čo umožňuje zvýrazňovať syntax viacerých jazykov v jednom texte (napríklad kód JavaScriptu, ktorý je vložený do kódu XHTML).

Ajax

V rámci zadania bolo nutné implementovať komunikáciu so serverom. Zvolil som využitie XHR (XmlHttpRequest), pretože potrebujem posielať údaje na server metódou POST. Druhou možnosťou by bolo použitie skrytého elementu iframe, čo by zvládol väčší počet prehliadačov, avšak nebolo by to už také pekné riešenie.

Stránka umožňuje uložiť (asynchrónne), resp. nahrať (synchrónne) obsah prvku CodeArea pomocou požiadaviek na server bez znovunačítania stránky.

3 Zhodnotenie

Prvok CodeArea zvýrazňuje syntax priamo na webovej stránke, avšak jeho použitie je určené hlavne pre rýchlejšie počítače (testoval som ho na počítači s procesorom Pentium 166 MHz, 164MB RAM). Pri písaní kódu som uprednostnil čitateľnosť pred krátkym zápisom, čo sa odrazilo na veľkosti výsledného kódu. Keďže je všetok kód umiestnený v externom súbore, nemusí byť veľkosť vďaka využitiu cache veľkým problémom. Predpokladám, že po použití obfuscatora, ktorý by skrátil názvy premenných a odstránil nepotrebné biele znaky, by sa veľkosť kódu mohla zmenšiť aj o viac než 50%.

Problémy pri implementácii som s prehliadačmi Internet Explorer a Mozilla nemal žiadne. To bolo spôsobené hlavne tým, že chyby týchto prehliadačov som vychytal v prvej verzii prvku CodeArea.

Opera

Podpora prvku v prehliadači Opera je čiastočná si zaslúži samostatnú kapitolu. Je to hlavne kvôli tomu, že tento prehliadač neumožňuje štandardným (a ani neštandardným, skrátka nijakým) spôsobom zastaviť udalosť, resp. umožňuje, ale len niektoré. Ide hlavne o zastavenie udalosti v metóde s obsluhou klávesnice, keď Opera dovolí zakázať stlačenie napr. klávesy "a", ale nedovolí zakázať stlačenie tabelátora a kurzorových šípiek.

Medzi ďalšie nedostatky tohto prehliadača patrí nesprávne zobrazovanie elementu pre vkladanie textu (textarea alebo input type="text"), kvôli ktorému som musel trochu zväčšiť výšku tohto prvku tak, že aktuálny riadok zasahuje trochu nad a trochu pod daný riadok.

Kvôli neschopnosti prehliadača Opera zobraziť v elemente pre vkladanie textu (textarea alebo input type="text") tabelátor sa pri práci v tomto prehliadači konvertujú všetky tabelátory na určený počet medzier (predvolene 4 medzery).

Posledný nedostatok Opery, ktorý som ošetril je, že neumožňuje nastaviť pozíciu kurzora v prvku input type="text". Z tohto dôvodu je aktuálny riadok zobrazovaný prvkom textarea, v ktorom už prekvapivo zvláda nastavenie pozície aj Opera.

4 Zoznam súborov

codearea.html
Ukážka zvýrazňovača syntaxe a stručná dokumentácia.
editor.js
Implementuje správanie sa editora, reaguje na klávesy a myš.
highlight.js
Zvýrazňuje syntax jazykov XHTML, JavaScript a Occam.
ajax.js
Komunikuje so serverom prostredníctvom XHR, posiela asynchrónne POST požiadavky a synchrónne GET požiadavky.
codearea.css
Definuje kaskádové štýly aplikácie a dokumentácie.
editor.css
Určuje výzor editora (napr. farbu aktuálneho riadku).
highlight.css
Udáva farbu pre zvýraznený kód (farbu komentárov, kľúčových slov, reťazcov a pod.).
© 2005 P. Prikryl (p.prikryl@gmail.com)