< Vissza | Tovább >

2.1. lecke: Adattábla formázása

Az all_records.jsp oldal adattáblájának puritán a megjelenése. Megjeleníti az adatbázis összes rekordját, és más oldalakra hivatkozik, de nem túl vonzó. Ebben a leckében oldaltörések, stílusszabályok és az eladó tételek képének hozzáadásával fejleszteni fogja az adattáblát.

Oszlopfejlécek átnevezése

Sok esetben nem kívánatos, hogy az adattábla oszlopainak fejléce pontosan megegyezzen az adatbázis oszlopneveivel. A következő lépések bemutatják, hogy miképpen nevezheti át az adattábla oszlopainak fejlécét egy megfelelőbb kifejezésre.
  1. Kattintson duplán az all_records.jsp oldalra a Projektböngésző nézetben.
  2. Kattintson az adattábla Főkategória oszlopfejlécére.
  3. A Tulajdonságok nézetben kattintson a h:outputText lapra, és módosítsa az Érték szövegmezőt Főkategóriáról Kategória értékre.
  4. Átnevezheti a többi oszlopot is.
  5. Mentse az oldalt.

Kimeneti összetevők formázása

A kimeneti összetevőket is formázhatja. Ezekkel a lépésekkel az {ÁR} kimeneti összetevőt fogja formázni, hogy az ne egy egyszerű számként jelenjen meg, hanem pénznemben kifejezett értékként.
  1. Kattintson az oldalon az {ÁR} kimeneti összetevőre.
  2. Keresse meg a Tulajdonságok nézetben a Típus legördülő listát, és válassza a Pénznem lehetőséget. Most már minden tétel ára pénznem stílusban jelenik meg egyszerű számjegyek helyett. Egyéb stílusok és formátumok is elérhetők az adatok különböző típusai számára, mint például százalék, dátum és idő. A kimeneti összetevők formátuma olyan módon is személyre szabható, amely nincs a listában a Tulajdonságok nézetben, mint például egy telefonszám.
  3. Mentse az oldalt.

Az adatok rendezése

Jelenleg a listában felsorolt adatok semmilyen módon nincsenek rendezve. Ha jobban szervezett listát szeretne nyújtani a felhasználóknak a hirdetésekről, akkor rendezze a rekordlistát kategória szerint, így a hasonló elemek egy csoportba kerülnek.
  1. Kattintson a jobb egérgombbal az all_recordlist (ADS) elemre az Oldaladatok nézetben (Ablak > Nézet megjelenítése > Oldaladatok), és kattintson az előugró menü Beállítás menüpontjára. Megjelenik a Relációs rekordlista beállítása ablak. Ha egy figyelmeztető üzenet jelenik meg, amely szerint nem lehet kapcsolatot létesíteni az adatbázissal, akkor a webhely tesztelése után nem zárta be a kiszolgálót. Ez esetben kattintson a Mégse gombra minden párbeszédablakban, és állítsa le a kiszolgálót, ahogy az a "Kiszolgáló leállítása" részben le van írva (A webhely tesztelése).
  2. Jelölje ki az A hatókör létező rekordjának vagy rekordlistájának lekérése és a Meglévő rekordok vagy rekordlisták metaadatainak újrafelhasználása beállításokat, és kattintson a Tovább gombra.
  3. A következő ablakban jelölje ki az ADS lehetőséget, majd kattintson a Tovább gombra.
  4. A következő oldal jobb oldalán kattintson a Rendelési eredmények gombra. Ez megnyitja a Rendelések ablakot.
  5. Az Elérhető oszlopok ablaktáblán kattintson a FŐKATEGÓRIA elemre.
  6. Kattintson a > gombra, hogy a FŐKATEGÓRIA oszlopot a Rendezés a következő szerint ablaktáblára helyezze. Az ablaknak így kéne kinéznie:
    Rendelés laponként a Relációs rekordlista beállítása ablakban.
  7. A Rendelések ablak bezárásához kattintson a Bezár gombra.
  8. A módosítások alkalmazásához kattintson a Befejezés gombra. Most az adatok már kategória szerint rendezve jelennek meg. Bármely oszlop alapján rendezheti az adatokat az adatbázisban.

Tördelő hozzáadása

Minden rekord egyesével történő megjelenítése helyett az adattáblában használhat tördelőt is. A tördelő automatikusan felosztja a rekordokat a beállított méret szerinti oldalakra, a projektben bármilyen új JSP fájl létrehozása nélkül.
  1. Kattintson bárhova az adattáblában.
  2. A Tulajdonságok nézet bal oldalán kattintson a h:dataTableEx értékre a HTML címkék közt.
  3. Kattintson a Megjelenítési beállítások lapra a h:dataTableEx részben.
  4. A Sorok száma egy oldalon mezőben adja meg az 5 értéket.
  5. Kattintson a Webstílus tördelő hozzáadása elemre. Az adattábla alján megjelenik egy kép arról, hogy a tördelés miként fog kinézni. Az Oldaltervezőben megjelenő tördelő csak egy helykitöltő kép, és valójában nem tükrözi a megjelenő oldalak számát, mivel ez csak akkor határozható meg, ha az oldalt betölti egy böngésző.
  6. Mentse az oldalt. Ha kívánja, kísérletezhet a különböző stílusú tördelőkkel és az oldal statisztika összetevővel, hogy megtalálja az oldalhoz legjobban illő megjelenést.

Csoportpanel összetevőinek elrendezése listaként

Ahelyett, hogy az adattábla minden egyes oszlopában pontosan egy kimeneti összetevő legyen, lehetőség van az oszlopok elemeinek kombinálására, és így jobb elrendezés érhető el. Csoportpanel segítségével fogja elrendezni az összetevőket, hasonlóan egy rejtett HTML táblázat használatához. Gyakorlatilag az oldal bővítésére használt kép összetevő hozzáadása után, minden egyes hirdetés legtöbb szöveges információját egyetlen adattábla oszlopba fogja helyezni, amelynek címkéje majd RÉSZLETEK lesz.
  1. Kattintson a Paletta Bővített Faces összetevők fiókjára. Húzzon át egy Panel - Csoportpanel összetevőt az adattábla CÍM oszlopába. Megjelenik a Típus kiválasztása ablak.
  2. A csoportpanel típusa legyen Panel a Típus kiválasztása ablakban. Kattintson az OK gombra. Ez felsorolás csoportpanel a benne elhelyezett összetevőket egyetlen oszlopban vagy sorban jeleníti meg, és függőlegesen vagy vízszintesen rendezhető.
  3. Kattintson a csoportpanelre annak kiválasztásához.
  4. A Tulajdonságok nézetben változtassa a Tájolást Függőlegesre.
  5. Húzza a {CÍM} összetevőt a felsorolás csoportpanelre. Az útmutató szöveg eltűnik a csoportpanelből miután hozzáad egy összetevőt.
  6. Húzzon a Paletta Bővített Faxes összetevők fiókjából egy Kép összetevőt a lista csoportpanelre. Ez segít a kép összetevőt a csoportpanel alsó szélére helyezni, ezzel biztosítva, hogy a kép a cím alá kerüljön.
  7. Kattintson a most hozzáadott kép összetevőre.
  8. A Tulajdonságok nézet Méret területének segítségével állítsa a Szélességet 60 képpontra, a Magasságot pedig 50 képpontra. Ez biztosítja, hogy az adatbázisban tárolt kép méretétől függetlenül azok mindig 60x50 képpontos méretben jelenjenek meg.
  9. A FOTÓ oszlop Oldaladatok nézetből a kép összetevőbe húzásával kösse a képösszetevőt az all_recordlist FOTÓ oszlopához. Ezzel a kép összetevő az egyes rekordok FOTÓ oszlopában található képadatokat fogja megjeleníteni. Ha a FOTÓ (ByteArray) oszlop nincs a listában, akkor kattintson a jobb egérbombbal az all_recordlist (ADS) elemre az Oldaladatok nézetben, és válassza a Beállítás menüpontot. Ha megjelenik az URL ablak, az OK gombra kattintással zárja be. A Relációs rekordlista beállítása ablakban kattintson a Tovább gombra. Válassza az ADS lehetőséget, és kattintson a Tovább gombra. Kattintson a FOTÓ (ByteArray) melletti jelölőnégyzetre, majd a Befejezés gombra.
  10. Kattintson a beillesztett grafikára. A Tulajdonságok nézet hx:graphicImageEx lapján kattintson a Típus mező melletti Oldaladat objektum kiválasztása  gombra. Megjelenik az Oldaladat objektum kiválasztása ablak.
  11. Kattintson az all_recordlist (Service Data Object) > all_recordlist (ADS) menüpontra.
  12. Kattintson a KÉPTÍPUS (String) elemre.
  13. Kattintson az OK gombra, és mentse az oldalt.
Az oldalnak most a következőképpen kell kinéznie:
Jelenlegi oldalmegjelenés.

Elrendezés finomítása csoportpanel ráccsal

Csoportpanellel az összetevők táblázathoz hasonló formátumba is szervezhetők. A felsorolás típusú csoportpanel csak egy sorból vagy oszlopból áll, de a rács típusú csoportpanel bármilyen számú sorral és oszloppal rendelkezhet. Ezen lépések során az {ÁR} és {TELEFON} összetevőket fogja az adattábla LEÍRÁS oszlopába helyezni, és címkékkel ellátni.
  1. Az adattábla LEÍRÁS oszlopába húzzon be egy Panel - Csoportpanel összetevőt a Paletta Bővített Faces összetevők fiókjából. Megjelenik a Típus kiválasztása ablak.
  2. Kattintson a Rács összetevőtípusra, majd pedig az OK gombra.
  3. Kattintson az új rács csoportpanelre.
  4. A Tulajdonságok nézet segítségével állítsa a csoportpanel Oszlopainak számát 2-re.
  5. A rács csoportpanelre húzzon be egy Kiemenet összetevőt a Paletta Faces összetevők fiókjából. Ez a kimeneti összetevő lesz az eladásra szánt árucikk leírásának címkéje. Minden kimeneti összetevő rendelkezik majd egy ilyen címkével a táblázat bal oldali cellájában.
  6. Kattintson a Kimenet összetevőre (az Oldaltervezőben outputText elemként jelenik meg), és a Tulajdonságok nézet segítségével adjon hozzá Leírás Értéket:
  7. Helyezze át a jelenlegi {LEÍRÁS} összetevőt a rács csoportpanel alsó szélére. Ha problémák lépnek fel az összetevők megfelelő helyre mozgatása közben, akkor tartsa lenyomva az egérgombot, és figyelje a kurzort. A kurzor helye jelzi, hogy az összetevő hol fog megjelenni a csoportpanelen belül, ha elengedi az egérgombot. Ebben a gyakorlatban az egérgombot akkor kell elengednie, ha a kurzor az előző összetevőtől jobbra jelenik meg.
  8. Fogjon egy újabb Kimenet összetevőt a Palettából, és helyezze azt a csoportpanel jobb oldalára.
  9. A Tulajdonságok nézet segítségével rendelje hozzá az Ár Értéket.
  10. A jelenlegi {ÁR} kimeneti komponenst helyezze az Ár kimeneti szöveg jobb oldalára.
  11. Ugyanígy húzzon egy Kimenet összetevőt a {TELEFON} összetevő címkéjére, és nevezze el Telefon: értékre.
  12. A jelenlegi {TELEFON} összetevőt helyezze a rács csoportpanelben a Telefon kimeneti szöveg jobb oldalára. Az oldalnak most a következőképpen kell kinéznie:
    Jelenlegi oldalmegjelenés.
  13. Törölje az adattábla üres ÁR és TELEFON oszlopait. Az oszloptörléshez kattintson a kívánt oszlopra, majd nyissa meg a Tulajdonságok nézetet. Ezután a nézet bal oldalán található HTML címkék felsorolásában kattintson a h:dataTable elemre, válassza ki a törölni kívánt oszlopot a nézet jobb oldalán található listában, majd kattintson az Eltávolítás elemre.
  14. Kattintson a Leírás oszlop fejlécére, és a Tulajdonságok nézetben módosítsa az Érték mezőt Részletek értékre. Az oldalnak most a következőképpen kell kinéznie:
    Jelenlegi oldalmegjelenés.
  15. Mentse el az oldalt, és tesztelje. Ha nincs gyakorlata alkalmazások kiszolgálón futtatásában, akkor olvassa el a következő részt: 1.3. lecke: A webhely tesztelése.
Az oldalnak a következőképpen kell kinéznie teszteléskor:
Az aktuális oldal megjelenése teszteléskor.

A képpel nem rendelkező hirdetéseknél megszakadt hivatkozás jelenik meg. A következő leckében megtanulja, hogy adhat fájlfeltöltés összetevőt az oldalhoz, amivel felveheti vagy módosíthatja egy hirdetés képét.

Előadás ellenőrzési pont

Befejezte a 2.1-es leckét. Több módszert is megtanult, amivel formázhatja az adattáblát.

Tudja, hogy kell elvégezni a következőket:
  • Oszlopfejléc módosítása.
  • A tábla adatainak rendezése.
  • Tördelés hozzáadása, így az adatokat kisebb weboldalakra tördelheti.
  • Csoportpanelek számos használati módja, a weboldal tábla elrendezésének módosítására.
< Vissza | Tovább >