Pre príspevky s tagom ‘XSLT’

XSLT šablóna pre dátové modely MySQL Workbench (MWB)

Štvrtok, Marec 4th, 2010

Ak pracujete na rozsiahlejšom webovom projekte (alebo inej rozsiahlej aplikácii využívajúcej databázu), je pravdepodobné, že ste v rámci tvorby dokumentácie vytvárali aj dokumentáciu dátových modelov. Už pomerne dávno som na tento účel používal FabForce DBDesigner, ktorého štafetu prebral MySQL Workbench (MWB). Ide o veľmi šikovný nástroj, ktorý dovoľuje na slušnej úrovni vizualizovať štruktúru databázy.

Často sa však stáva, že niekto nemá daný softvér nainštalovaný alebo si ho ani nainštalovať nemôže. A práve od neho by ste potrebovali radu alebo pripomienky k vašej databáze. Sám som mal podobné problémy, preto som sa rozhodol tento problém riešiť pre svoj tím, a naše riešenie chceme uvoľniť ako opensource.

Keďže sú dátové modely MySQL Workbench iba zazipované XML, je riešením otvoriť *.mwb súbor, vyextrahovať súbor worbench.xml a pracovať už s ním. A ako každé XML, aj tieto dátové modely je možné zobrazovať pomocou XSLT šablóny. Takúto šablónu som vytvoril za pomoci CSS, javascriptu, jQuery a HTML5 canvasu. Dokáže prečítať MWB XML, zobrazť tabuľky aj so zoznamom stĺpcov, pozíciovať ich rovnako ako MySQL Workbench. Tabuľky zoskupuje do oblastí rovnako ako softvérový ekvivalent a nakoniec do HTML5 canvasu vykreslí čiary pre relácie medzi tabuľkami. Renderovanie takéhoto dátového modelu v prehliadačoch na báze Mozilly alebo opery je potom pomerne rýchle a výsledok je viac než uspokojivý.

Na to, aby bolo možné XML transformovať pomocou šablóny, je nutné pridať do hlavičky link na *.xsl súbor, ktorý sa dá zadarmo stiahnuť. Upravený začiatok hlavičky potom vyzerá nejako takto:


<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="http://onkokubo.sk/files/workbench.xsl" ?>

XML súbor s aplikovanou šablónou potom vyzerá nasledovne:

Dátový model vytvorený v MySQL Workbench zobrazený pomocou XSLT šablóny

Problémom je už teraz iba to, ako automatizovať otvorenie archívu a vloženie odkazu na šablónu. Nástroj určený na tento účel zverejním čoskoro ako samostatný webový projekt :-) .

Obrázky vložené priamo do CSS

Štvrtok, Február 25th, 2010

Možno sa už i vám stalo, že ste potrebovali vytvoriť čo najkopaktnejší HTML dokument, ktorý mal napriek malému počtu súborov (ideálne jednému) obsahovať aspo? minimalistickú grafiku. Ide napríklad o tiene a iné gradienty.
Ja sám som tento problém riešil pri vytváraní XSLT šablóny. Chcel som v ?om mať obsiahnuté aj javascripty (vrátane frameworku jQuery) a kaskádové štýly.
Problém nastal, keď som chcel prvkom nastaviť ako pozadie gradient a pritom nepoužívať linky na externé zdroje. V tomto prípade je možné nastaviť ako URL obrázka jeho obsah zakódovaný pomocou base64.
Na tento účel veľmi dobre poslúžia online enkódery, ktorých je na webe neúrekom. Po uploade obrázka na? stačí skopírovať už zakódovaný text. Ja som použil napr. tento . Takto získaný base64 reťazec už môžeme vložiť priamo do url pre pozadie.

.gradient {
     background: url(data:image/png;base64,base64string);
}

V mojom prípade je base64string nasledovný reťazec (bez zalomenia riadkov):

R0lGODdhAQAUAIQUAAddmQ1hmhNlnRppnyFuoShyoy93pjd7pz1/
qUSDq0uIrlKMsFmQsmCVtGaZtm2euHWiunynvYOrvomwwI6zwo6zwo6z
wo6zwo6zwo6zwo6zwo6zwo6zwo6zwo6zwo6zwiwAAAAAAQAUAAAFES
AQCANRGAeSKAvTOA8USVMIADs=

Takto naštýlovanú triedu môžeme hneď použiť:

<div class="gradient">Trieda s pozadím</div>

A ako sa potom takto naštýlovaný element zobrazí?

Trieda s pozadím

Jediným jediným problémom ostáva prehliadač MSIE, ktorému sa v starších verziách takto definovaný obrázok vôbec nepáči.

Ak máš čo povedať, bloguj. Neviem, kto to povedal, neviem, či som túto vetu neskomolil. Ale takto nejak chápem úlohu blogu. Dať ľuďom, ktorí ma chcú počuť, vedieť, že som tu, že mám svoj názor a nehanbím sa zaň. Je ťažké zhrnúť, o čom budem písať inak ako "o tom, čo ma baví". Nechcem si dávať fixné hranice, ale nechcem sa tváriť ako odborník na všetko. Tento svet je perfektný a okolo nás je toľko fajn vecí, že je asi hriech o nich nepísať. Tak ja tu doťuknem pár riadkov o tom, čo okolo seba vidím svojimi očami. A prosím: Ak niečo napíšem nešikovne, ak sa zle vyjadrím, ak nechtiac napíšem niečo, čo radšej napísané byť nemalo, prepáčte mi. Prosím... :-)

A čo to mám rád? Fotenie. Obrázky toho, čo pekné sa dá vidieť. Asi žiadne výtvarné umenie ma neoslovuje tak ako práve fotografia. Hudba. Perfektný relax a odstraňovač bolehlavov. Milujem akustickú hudbu, ska-jazz, pop, folk, rock.... Medzi tým, čo počúvam sa nájde Paulo Nutini, Jarek Nohavica, Jack Johnson, Norah Jones, Nerina Pallot a milión ďalších (nebo tak nějak). Film. Vždy poteší pekný príbeh v pohyblivých obrázkoch. Technika. Je to tiež akési umenie, ktoré ukazuje, čo všetko dokážeme, aké sú naše možnosti. Príroda. Ak sú tie predchádzajúce veci umením ľudí, toto je umením Boha. Tu ukázal, žo dokáže (fakt svelý chlap - alebo žena? :-D ).

A ak mám vypichnúť zopár vecí, ktoré mám fakt rád, tu je môj minizoznam:

  • Aďka
  • iPod nano & Koss Porta pro
  • Nerina Pallot: Fires
  • Petti di pollo al forno
  • Leffe blonde
  • Wacom bamboo
  • Nikon D40
  • Garmont Nagevi
  • Tolkien's books
  • Lunch on skyscraper
  • I Am Sam
Grafika by Števo Bačkor running Wordpress