ugrás a tartalomhoz

HTML Overlays - megoldás kliens oldali sablonozásra

Hojtsy Gábor · 2004. Aug. 31. (K), 09.34
A legtöbb tapasztalattal rendelkező szerver oldali programozó tudja, hogy igazán kényelmes sablonokkal megoldani a programok kimeneteit, hiszen sok weblapon ismétlődnek a fejléc-lábléc komponensek, sőt sokszor az oldalsávok is azonos megjelenéssel bukkannak fel a különböző oldalakon. Szerver oldali sablonokkal a szokásos keretbe tudjuk önteni a változó tartalmat. Ezzel a megoldással azonban végső soron minden oldalnál le kell küldenünk ugyanazt a tartalmat a böngészőhöz, ami nem túl kellemes erőforrás felhasználási szempontból. Lássuk hogyan lehet ezt megoldani kliens oldalon.

Daniel Glazman a Disruptive Innovations webhelyén publikálta HTML Overlays névre keresztelt megoldását, mely a XUL Overlay ötletén alapul. A technika középpontjában egy HTML sablon áll, melyet teljesen hagyományos módon készítünk el, a közös részeket azonban nem tesszük bele. Helyettük azonosítókkal megjelölt elemeket helyezünk el.

<div id="navBar"/>
<div id="main">
  <p>Facts about our company:
     blah blah blah</p>
</div>
Az itt megjelölt navBar és main komponenseket befolyásolja az overlay, amely a következőket tartalmazza:

<div id="navBar">
  <a href="/index.html">Home</a>
  <a href="/products.html">Products</a>
  <a href="/news.html">News</a>
  <a href="/company.html">About us</a>
</div>

<div id="main">
  <hr/>
  <h6>Copyright (c) OurCompany 2004.</h6>
</div>
Az overlay tartalmát az eredeti dokumentumba mossa a JavaScriptet használó megoldás, így az eredményül adódó dokumentum a következő lesz:

<div id="navBar">
  <a href="/index.html">Home</a>
  <a href="/products.html">Products</a>
  <a href="/news.html">News</a>
  <a href="/company.html">About us</a>
</div>
<div id="main">
  <p>Facts about our company:
     blah blah blah</p>
  <hr/>
  <h6>Copyright (c) OurCompany 2004.</h6>
</div>
Annak érdekében, hogy mindez működhessen, bekapcsolt JavaScriptre van szükség a böngésző oldalán, ezen túl azonban nincs böngésző korlát, legalábbis jelenleg még nem ismert, hogy valamely böngészőnek problémája lenne a megoldással.

Sok esetben nem lehet jó ötlet az overlay alapértelmezett működése, mégpedig hogy az eredeti dokumentum tartalmi részeinek végére kerül a közös tartalom. Ezt néhány új HTML paraméter bevezetésével lehet elérni, mely sajnálatos módon oda vezet, hogy a dokumentum nem lesz érvényes HTML. Aki ezzel és a JavaScript követelménnyel meg tud békélni, az mindenesetre egy igen kellemesen használható kliens oldali sablonozási megoldást kap, hiszen jelentős mértékben csökkentheti oldala méreteit, a kliens oldali gyorsítótárazást kihasználva pedig a sávszélesség felhasználása is sokat csökkenhet.
 ■
1

cache + formazatlan tartalom

Jano · 2004. Aug. 31. (K), 12.06
Jo otlet de gyakorlatban nem feltetlenul mukodik.

Egy eset amikor nincs hatasa:
Arra epit ha jol ertem, hogy a layout xml fajlt bekesseli (igy van ez magyarul? - begyorsitotarazza) a bongeszo igy azt nem kell ujra tolteni.
IE-ben be lehet allitani, hogy minden alkalommal szedje fajlt ennel a specialis beallitasnal ez a fajl is ujra letoltesre kerul.

Rosszabb latogatoi elmeny lehet vege:
2 fajlt parhuzamosan tolti. Oldal addig nem tud vegleges formajara rendezodni mig teljes oldal be nem toltodott mert csak onloadra hivja meg a berendezest. A bongeszok ennel sokkal jobb algoritmussal rendelkeznek (maramelyik). Kirakjak a tartalmat es szepen utana belerakjak a kepeket, hatterkepeket stb.
Rettento idegesito, hogy jon le formazatlan tartalom, bongeszo kirakja, user elkezdi olvasni es aztan ugrik egyet amikor berendezodik szerkezetbe. Olvaso keresheti, hogy hol tartott!
2

Nem értem ezt a cikket. Nem

Anonymous · 2004. Aug. 31. (K), 13.23
Nem értem ezt a cikket. Nem lehetne bővebben? Hogy jön ide a Javascript?
3

Hír :)

Hojtsy Gábor · 2004. Aug. 31. (K), 13.49
Ez hír. Utal egy részletesebb magyarázatra, ahol mindez ki van fejtve. Ha alaposan kifejtettük volna, akkor nem itt jelenne meg, hanem cikként. A hivatkozott oldalon részletesen le van írva minden. Különben JavaScript tölti be az overlay-t, és az rakja be a dokumentum megfelelő helyeire az overlay tartalmait.