CSS keretrendszer

Felületi elemek
Böngésző kompatibilitás
Képernyő képek

A CSS keretrendszerek előre elkészített és válogatott stílusokat tartalmaznak, segítségükkel lerövidíthetjük a rendszermodulok felületeinek fejlesztési idejét, megspóroljuk a tesztelések és próbálgatások nagy részét. Léteznek publikus, általános célú keretrendszerek, melyek általában nagy méretűek, hogy bármilyen lehetséges tartalmat megfelelően tudjanak formázni. Ha több darabba vannak felszeletelve, akkor megnövelik a HTTP lekérdezések számát, ezzel lassítva az oldalt.

A BOB egységes, célorientált felületet és összefüggő HTML/CSS környezetet kínál a webalkalmazások fejlesztésénél jellemzően használt elemekkel (szöveg, navigáció, űrlapelemek, stb.). Szilárd alapot ad és rengeteg időt takarít meg a fejlesztésből, tesztelésből, finomításból és a későbbiekben a bővítésből. Emellett a párhuzamosan dolgozó fejlesztők sokkal könnyebben átláthatják egymás munkáját, így a karbantartást valamint a kódok újrahasznosítását is jelentősen egyszerűsíti.

Kialakításánál kiemelt figyelmet fordítottunk a platform- és böngészőfüggetlenségre, hogy lehetőleg ugyanaz a látvány fogadja a felhasználókat a különféle operációs rendszerek legelterjedtebb böngészőiben.

A BOB az alábbi elemeket kínálja a webalkalmazások fejlesztéséhez:

Felületi elemek

A felület elrendezését meghatározó elemek
1. Blokkok és panelek
  A tagolt tartalom elrendezését teszik lehetővé a blokk és panel típusú elemek. A két elemtípus közötti legfőbb különbség (a külsőségeken kívül), hogy a blokkokhoz lehet elérési utat és menüsávot rendelni, míg a panelekhez nem. Blokk tartalmazhat paneleket és blokkokat is, a panelek viszont nem tartalmazhatnak blokk elemet (további paneleket viszont igen).
  Mindkét elemtípusra igaz (mint ahogy a BOB felületi elemeire általában), hogy négyféle szélesség közül választhatunk a felület kialakításakor: 25%, 50%, 75% és a rendelkezésre álló helyet teljes szélességében kihasználó 100% közül.
2. Listák
  Nagy mennyiségű strukturált adatok megjelenítésére használhatjuk a lista elemeket. Az oszlopok száma szabadon definiálható, az egy vagy többsoros cellákban kötetlenül helyezhetünk el szöveges információt és űrlapelemeket, parancsikonokat.
  A hosszabb listákat lapozhatóvá tehetjük a lapozósáv segítségével.
3. Hierarchikus adatok kezelése
  A fa-struktúrába szervezett adatokmegjelenítésére és kezelésére szolgál. A felépítés mélysége nincs korlátozva, az adott sorra vonatkozó műveleteken kívül lehetőség van több sorra vonatkozó, csoportos műveletek létrehozására is.
4. Táblázatok
  Nem túl meglepő módon, a táblázatos adatok megjelenítését teszi lehetővé.
Navigációs elemek
1. Elérési út
  
  Összetett felületek esetén könnyíti meg a felhasználók dolgát, ha az aktuális űrlaphoz, képernyőhöz vezető elérési utat külön is jelezzük neki. Az előzményekre mutató linkek alatt további információkat is megjelentethetünk, tovább egyértelműsítve a navigációt.
  A BOB a legtöbb elem (elérési út, lapozósáv, beviteli mezők, stb.) beillesztéséhez paraméterezhető makrókat kínál. Használatuk esetén nem csak a kimeneti sablonok lesznek átláthatóbbak, hanem a későbbi változtatások is jelentősen leegyszerűsödnek, hiszen elég a makró központi leírásánál változtatni, ráadásul így a korábban megírt modulok is kompatibilisek maradhatnak.
2. Menüsávok
  
  A menüpontok száma és mélysége nincs korlátozva, megjelenésében választhatunk az oldalsó menü-oszlop, vagy a vízszintes, füles elrendezés között. Utóbbi esetben az almenüpontok lehulló menüként jelennek meg.
3. Lapozósáv
  
  Hosszabb listák esetén célszerű azokat több oldalra bontani, az oldalak közötti navigációt segíti a lapozósáv. A megjelenő gombok segítségével lapozhatunk előre illetve hátra, vagy ugorhatunk a kívánt oldalszámra.
4. Párbeszédpanelek
  
  Értesítések, hibaüzenetek megjelenítésére, megerősítő kérdések feltételére szolgálnak a párbeszédpanelek, melyeknek jelenleg öt típusa használható:
  - Művelet(ek) sikeres végrehajtását jelző üzenet;
  - Felhasználói tippek megjelenítése;
  - Figyelmeztető üzenet;
  - Hibajelzések;
  - Megerősítést kérő párbeszédpanel.
5. Nyomógombok
  
  A felületen gombokat háromféle magasságban jeleníthetjük meg, ikonnal vagy anélkül, felirattal vagy felirat nélkül, illetve ezek bármilyen kombinációjában. Ezenkívül a lehetséges a keret nélküli megjelenés is, ha például csak egy ikont szeretnénk megjeleníteni.
  A BOB a több mint ezer ikont tartalmazó FamFamFam ikonkészletet kínálja alapértelmezésként, de természetesen további ikonok is használhatóak, igény szerint.

Űrlapelemek
input_118

A BOB a beviteli mezők esetében számos előre definiált típust kínál (szöveg, szám, dátum, email, URL, IP cím, stb.), valamint ezek szabadon bővíthetőek (például adószám, bankszámlaszám, chip-kártya száma, stb.). A bejövő adatok validációs szűrését a rendszer elvégzi kliens és szerver oldalon egyaránt.
Ezeken kívül az űrlapok esztétikus megjelenésének és az informatív, felhasználóbarát felületek kialakításához is számos sablont kínálunk:

Beviteli mezők
Az adatbeviteli mezők (egysoros szöveg és jelszóbevitel, legördülő választómezők) kiegészítéséhez az alábbi - opcionális - kiegészítőket használhatjuk:
- Címke: a mező funkciójának leírása. Az űrlapok kialakításánál figyelembe kellett vennünk, hogy sok esetben többnyelvű környezetben kell megjeleníteni az űrlap elemeit. Ezért - bár ergonómiailag a mezők előtt elhelyezkedő címkéket sok esetben helyesebbnek tartják, - a BOB felületén a mezők funkciójára utaló címkék a mezők fölött helyezkednek el, hogy esztétikus megjelenést biztosítsanak rövid és hosszú szövegek esetén egyaránt.
- Kitöltési javaslat: a mező fölé tolva az egeret további tippek, példák jelenhetnek meg a mező helyes kitöltésévél kapcsolatban, valamint itt jelennek meg a hibás kitöltésre figyelmeztető üzenetek is. A hibásan kitöltött mezőket a keret színének megváltoztatásával is kiemeli a rendszer.
- Utótag: elsősorban mértékegységek megjelenítésére használható. (A legördülő választómezők után nem adható meg utótag!)
- Tipp az utótaghoz: mivel az utótagok rendelkezésére álló hely meglehetősen szűkös, ezt ki lehet egészíteni további magyarázatokkal, melyek az egér mutatójának az utótag fülé kerülésekor jelenik meg. (például: "km/ó": "óránként megtett kilométerek száma")
- Alcímke: a mező alatt jelenik meg, és további segítségeket jeleníthetünk meg általa a mező kitöltésével kapcsolatban.
Többsoros szöveg bevitele

Az úgynevezett szövegdoboz esetén - az egysoros beviteli mezőkhöz hasonlóan - megadhatunk címkét, alcímkét és kitöltési javaslatot, viszont mértékegység megadására itt nincs lehetőség.
Több részből álló beviteli mezők

Szorosan összetartozó információk (például a bankszámlaszám három számcsoportja) bevitelére szolgálnak a több részből álló beviteli blokkok. Mind az egy soros, mind a többsoros szövegbeviteli mezők blokkosíthatóak.
Egy blokkon belül maximum négy elemet helyezhetünk el, szövegbeviteli vagy legördülő választómezőket vegyesen. Az elemek mérete 25, 50, 75 vagy 100 százalék lehet. Ilyen esetekben a mezők közti összekötő karaktereket a mezők utótagjaiban célszerű elhelyezni.

Böngésző kompatibilitási teszt

OS	Bönngésző	Böngésző verzió	BOB CSS keretrendszer
OS	Bönngésző	Böngésző verzió	v.1.0	v.2.0
Windows XP	Internet Explorer	6	^*
WindowsXP	Internet Explorer	7
Windows XP	Internet Explorer	8
Windows XP	Mozilla Firefox	3.*
Windows XP	Google Chrome	9
Windows XP	Google Chrome	10
Windows XP	Opera	9-11
Linux (Ubuntu)	Chromium	9
Linux (Ubuntu)	Chromium	11
Linux (Ubuntu)	Mozilla Firefox	3.*
Linux (Ubuntu)	Opera	9-11
Mac OS-X	Safari	5
Mac OS-X	Mozilla Firefox	3.*

^*: Internet Explorer 6 esetén az keretrendszer 1.0 verziójában hibásan jelentek
meg a vízszintes (füles) elrendezéső navigációs sáv almenüjei.

Képernyőképek

Block
Panel
dialogbox
InputCheckboxList
InputRadiobuttonList
Button
List
MultiInputText