Mellékelt példa megnyitása előtt szükséges egy AutoSizeText nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
Windows-os alkalmazásainkban ezt igen egyszerűen megoldhatjuk, hiszen a .NET számtalan grafikus lehetőséget biztosít. Webes alkalmazásainkban ehhez igénybe kell vegyük a DHTML nyelv képességeit.
A feladatban azt az esetet modelleztük, amikor a lapot két részre osztjuk egy tábla segítségével (annak két oszlopával), és minden rekord két cellájában egy lista egy-egy pontját helyeztük el. A cellákban egy-egy mondat található, melyeket úgy szeretnénk elhelyezni a lapon, hogy azokból csak annyi látszódjon, amennyi az adott rendelkezésre álló cellaterületen elfér, a többi mondatrész létezésére három pont utaljon, akár csak egy fájl kezelő két oszlopában (például a Windows Commander alkalmazásban). Valamint, ha a hasznos képernyőterület szélességében megváltozik, akkor változzon a mondat látható részének hossza is. Lássuk, hogy mit is kell tennünk ennek érdekében.
A mellékelt példában egy táblázat egyetlen rekordjának két cellájában helyeztük el azokat a <DIV> HTML elemeket, melyek a méretre szabandó mondatokat tartalmazzák. A mondatok azonosak, formázásuk több lépésben történik. Első lépésben a tábla attribútumait kell úgy megadnunk, hogy az kitöltse a képernyőt, vagyis nem égetjük be a szélesség adatokat.
<TABLE border="0" style="WIDTH: 100%;..." id="main">
Ezt tesszük a tábla adott celláinak esetében is:
<td id="column1" width="50%" height="30">
A cellákban elhelyezett DIV-ekben szerveroldali Label kontrolokat helyeztünk a lapra a szöveg tárolására. A DIV-ek esetén kalkuláljuk az adott székességet a képernyő méretei alapján. Ebben segít nekünk a DHTML, mely még azt is megspórolja nekünk, hogy egy JScript kódon belül kelljen meghívnunk a setExpression metódust, paraméterként megadva a beállítandó attribútum nevét és értékét, helyette az adott elem deklarációjában adhatjuk meg, hogy miből számolja a böngésző az adott méretet, amikor betölti az oldalunkat. A DIV elemek style attribútumának feltöltésekor a szélességadatot a következő módon adhatjuk meg:
<div class="jw" style="WIDTH:expression(document.body.clientWidth/2);...">
A számításnál a document.body objektum clientWidth property-jében kérdezhetjük le a képernyő aktuális méretére vonatkozó információkat.
Meg kell említenünk, hogy szövegeinket csak akkor tudjuk megfelelően formázni a feladatnak megfelelően, ha a DIV elemen belül a Label kontrolt egy <NOBR></NOBR> elempáros közé illesztjük, mely megakadályozza, hogy a szöveg sortöréssel jelenjen meg:
<DIV id=”...” ...>
<NOBR>
<asp:Label ...>
</NOBR>
</DIV>
A szöveg aktuális hosszt figyelembe vevő megjelenítéséhez a DIV elemünket speciális módon formáznunk kell. A stílusra vonatkozó jellemzőket egy Default.css stílusállományban helyeztük el, melynek egyetlen, „d” osztálya tartalmazza a jellemzőket:
.d
{
text-overflow: ellipsis;
overflow: hidden;
}
Ezt megadjuk a DIV CLASS attribútumában:
A böngésző méreteinek változtatásakor a méretadatok frissülnek, így a metódus az aktuális értékekkel dolgozhat, a szövegek látható része pedig rugalmasan követi ezeket a méretváltozásokat.