No, most, hogy már az ablakunk kinézetét kitaláltuk, rátérhetünk a kódra.

Ám azelőtt, hogy az ablak-kialakító függvényeinket megírnánk, néhány függvényt még érdemes megírnunk. Igencsak megkönnyítheti a programaink átláthatóságát, ha objektum orientáltan készítjük el. Ezek a kódrészletek nem kötelezőek és valószynű, hogy nem a legszebbek, vagy legprofibbak, de a saját céljainknak megfelel és nem a legjobbat akarjuk kihozni, hanem valami olyat, amit könnyen megértünk.

Az alábbi kódrészlettel egy olyan alaposztályt definiálunk, menek a tulajdonságait fogja örökölni az ablakkezelő származtatott osztályunk.

{code type=javascript}var ObjectClass = function ObjectClass(cla,obj){
this.priv = {
‘cla’: cla,
‘obj’: obj,
‘uid’: (new Date()).getTime(),
}
this.priv.eid = cla+’#’+obj+’#’+this.priv.uid;
}{/code}

A kostruktorunk két paramétert fog várni 1) az osztály nevét (ez majd a Dialog lesz), ill. 2) az objektum nevét (ez utóbbi elvileg bármi lehet, gyakorlatban, majd a változó neve lesz). Ezek hasznosak lehetnek, ha nyomon szeretnénk követni, hogy mikor milyen osztályunk függvényünk éppen mit csinál, továbbá az utóbbi egy nagyonegyszerű megoldást kínál arra, hogy a vezérlőelemek az objektumaink függvényeit meg tudják hívni.

A változókat “priv” nevű struktúrában tároljuk. Ennek több praktikus oka van. Így lehet ugyanaz egy esetleges hívó függvénynek és a váltózónak és nem kell mondjuk aláhúzással megkülönböztetni. Továbbá, mivel “privát”, azaz lokális változó esetén – esetlegesen – gondot okozhat, ha van egy ugyanolyan nevű globális változó.

A priv struktúránk három adatot fog tartalmazni 1) az osztály nevét, 2) a változó nevét, 3) az 1970 január elsejétől eltelt időt ezredmásodpercben. Ez utóbbi kicsit furcsa lehet, de ez pl. tökéletesen alkalmas arra, hogy bármilyen objektumot megkülönböztessünk egymástól. És, ha az ezredmásodperc nem lenne elég, ott a többi.

Az eid már csak a fenti 3 adatból származik. Az ablak osztályunkban tulajdonképpen csak ezt fogjuk használni.

Mint az első fejezetben említettem a tartalmi területnek a méretét számolnunk kell. Ehhez pedig két dolog kell: 1) az ablak magassága, 2) egyes elemek tulajdonsága, amit viszont a stíluslapban definiáltuk. No, ezeket az edetokat még ki kell bányásznunk valahogy onnan, ugyanis a html elemeink ezeket az előre definiált tulajdonságokat nem fogják tudni megmondani.

{code type=javascript}function getCssIntValue(id,selector,property,fail){
var css = document.getElementById (id);
var sheet = css.sheet ? css.sheet : css.styleSheet;
var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
for (i=0;i<rules.length;i++){
if (rules[i].selectorText==selector){
return +(rules[i].style[property].replace(‘px’,”));
}
}
return +fail;
}{/code}

Az “id” paraméter alatt a stíluslap azonosítóját értjük. A “selector” alatt, azt amivel az adott stílust azonosítjuk a stíluslapban (ott jelenleg osztályok, pl. “div.DialogClass”). A “property” az a tulajdonság (pl. height). A “fail” pedig egy előre definiált változó, hogyha nem jönne össze valami miatt a bányászás. (Ez utóbbi persze csak akkor jelent megoldást, ha a stíluslapon nem változtattunk, ha igen, akkor itt jobb, ha hibaüzenetet küldünk.)

No, akkor lássuk mit csinál ez a függvény. A getElementById egy azonosító alapján megad egy elemet. Ez a css fájlunk. Itt jön a feketeleves, ugyanis a továbbiak böngészőnként eltérnek.

Az adatlapot egyes böngészőknél sheet, másoknál styleSheet néven érhetjük el. A C szerű nyelvekben van egy ?: utasításkészlet, ami ide pont megfelel. A böngészőként eltérő viselkedés folytatódik, plusz megspékelve azzal, hogy egyes böngészőknél a kód már csak akkor működik, ha webszerverren keresztül futtatjuk (javascript ide-oda).

Most már csak annyi a dolgunk, hogy megkeressük az adott szelektort és lekérdezzük a tulajdonság értékét. Mivel ezek méretek és pixelben megadottak el kell távolítanunk a “px” végződést, hogy szimpla számot kapjunk. Persze ez így messze nem tökéletes, mert többek között pl. egy “padding” mögött több szám is állhat. Most tételezzük fel, hogy az opcionálisan több paraméteres tulajdonságok mögött is csak egy szám áll. Később még mindig tökéletesíthetjük a kódot.

Most elkezdhetjük felkészíteni a programunkat a magyar, vagy a többi nyelvre.

{code type=javascript}DialogClassTxt = {
‘Close’:’Bezárás’,
‘Maximize’:’Maximalizálás’,
‘Restore’:’Visszaállítás’,
‘Ok’:’Ok’,
‘Yes’:’Igen’,
‘No’:’Nem’,
‘Cancel’:’Mégsem’,
‘Apply’:’Alkalmaz’,
}{/code}

Hát azt hiszem ezen nincs mit magyarázni. Ez egy olyan struktúra, melyet beleteszünk egy “DialogClassHu.js”-be, amit tetszés szerint betöltünk.

Adjuk meg a bitképeknek (ikonoknak) a helyzetét:

{code type=javascript}DialogClassImgPath = ‘./image/’;
DialogClassImg = {
‘Close’: ‘dialog-close.png’,
‘Maximize’: ‘view-fullscreen.png’,
‘Restore’: ‘view-restore.png’,
‘Unknownapp’: ‘unknownapp.png’,
‘Ok’:’dialog-ok.png’,
‘Yes’:”,
‘No’:”,
‘Cancel’:’dialog-cancel.png’,
‘Apply’:’dialog-ok-apply.png’,
}{/code}

Én az oxigén ikonokat használtam, melyeket a script könyvtáramból nyíló image könyvtárba másoltam. Ehhez még kevesebbet lehet hozzáfűzni.

A sorozat harmadik részében már a tényleges ablak-rajzoló osztályt fogom ismertetni.

A sorozat előzménye: D.I.Y. “beágyazott” ablak javascriptben – stíluslap