Lekce 2.1: Formátování tabulky dat

1. Poklepejte na stránku all_records.jsp v pohledu Průzkumník projektů.
2. Klepněte na hlavičku sloupce HlavníKategorie v tabulce dat.
3. V pohledu Vlastnosti klepněte na kartu h:outputText a změňte textové pole Hodnota z HlavníKategorie na Kategorie.
4. Chcete-li, přejmenujte další sloupce.
5. Uložte stránku.

1. Klepněte na výstupní komponentu {CENA} na stránce.
2. V pohledu Vlastnosti najděte rozbalovací seznam Typ a vyberte Měna. Nyní se zobrazí cena každé položky ve stylu měny namísto řádného čísla. Ostatní styly a formáty jsou dostupné pro odlišné typy dat, jako jsou celková procenta, data a časy. Můžete také přizpůsobit formát výstupní komponenty pro zobrazení typu dat, které nejsou uvedeny v pohledu Vlastnosti, jako např. telefonní číslo.
3. Uložte stránku.

1. Klepněte pravým tlačítkem myši na all_recordlist (ADS) v pohledu Data stránky (Okno > Zobrazit pohled > Data stránky) a klepněte na Konfigurovat v kontextuální nabídce. Otevře se okno Konfigurace seznamu relačních záznamů. Pokud se objeví varovná zpráva a sděluje vám, že připojení k vaší databázi nemohlo být zavedeno, nechte server běžet po testování webu. Pokud se toto stane, klepněte na zrušení každého dialogu a zastavte server, jak je vysvětleno v sekci "Zastavení serveru" v Testování webu.
2. Vyberte Načíst existující záznamy nebo seznam záznamů z rozsahu platnosti a Znova použijte definici metadat z existujícího záznamu nebo seznamu záznamů, potom klepněte na tlačítko Další.
3. V dalším okně klepněte, abyste vybrali ADS, pak klepněte na Další.
4. Na pravé straně dalšího okna klepněte na Uspořádat výsledky. Otevře se okno Pořadí.
5. V podokně Dostupné sloupce klepněte na HLAVNÍKATEGORIE.
6. Klepnutím na tlačítko > pro přesunete sloupce HLAVNÍKATEGORIE do Pořadí podle podokna. Okno by mělo vypadat takto:
   
7. Klepněte na Zavřít, abyste zavřeli okno Pořadí.
8. Klepněte na Dokončit, abyste použili změny. Nyní budou data seřazena podle kategorie. Můžete třídit podle jakýkoli sloupců v databázi.

1. Klepněte kdekoli uvnitř tabulky dat.
2. V pohledu Vlastnosti klepněte na h:dataTableEx ze seznamu karet HTML nalevo od pohledu.
3. Klepněte na kartu Zobrazení voleb pod h:dataTableEx.
4. V poli Řádky na stránku zadejte 5.
5. Klepněte na tlačítko u Přidání stránkovače ve webovém stylu. Obrázek, který naznačí, jak bude vypadat stránkovač, se objeví v dolní části tabulky dat. Vizualizace stránkovače v Návrháři stránek je obrázek zástupného objektu a ve skutečnosti nereflektuje, kolik stránek bude zobrazeno, protože toto může být určeno, když se stránka zavádí do prohlížeče.
6. Uložte stránku. Můžete experimentovat s jinými styly stránkovačů a komponentou statistiky stránky, abyste vyhledali správnou velikost stránky, pokud chcete.

1. Klepněte na zásuvku Rozšířené komponenty Faces v paletě, abyste ji otevřeli. Přetáhněte Panel - Skupinové okénko do sloupce NÁZEV tabulky dat. Otevře se okno Vybrat typ.
2. Vyberte Okénko jako typ skupinového okénka v okně Výběr typu a klepněte na OK. Toto skupinové okénko rozvrhne komponenty umístěné uvnitř v jednotlivém sloupci nebo řádku a může být orientováno buď vertikálně nebo horizontálně.
3. Klepněte na skupinové okénko pro jeho výběr.
4. S pomocí pohledu Vlastnosti změňte Orientaci na Vertikální.
5. Přetáhněte komponentu {NÁZEV} do skupinového okénka se seznamem. Instruktážní text v okénku skupiny zmizí, jakmile do něj přidáte komponentu.
6. Přetáhněte komponentu Obraz ze zásuvky Rozšířené komponenty Faces palety do skupinového okénka se seznamem. To pomáhá uvolnit komponentu obrazu na dolní hraně skupinového okénka, abyste se ujistili, že obraz bude umístěn pod název.
7. Klepněte na komponentu obrazu, kterou jste právě přidali.
8. Použijte oblast Velikost pohledu Vlastnosti pro nastavení Šířky na 60 pixelů a Výšky na 50 pixelů. Toto zajistí, že ať je jakákoli velikost obrázků v databázi, vždy se na stránce objeví jako 60x50.
9. Propojte komponentu obrazu se sloupcem FOTO all_recordlist přetáhnutím sloupce FOTO z okna na komponentu obrazu. Toto způsobí, že komponenta obrazu zobrazí obrazová data nalezená ve sloupci FOTO pro každý záznam. Pokud není sloupec FOTO (ByteArray) vypsán, klepněte pravým tlačítkem myši na all_recordlist (ADS) v pohledu Data na stránce a vyberte v nabídce Konfigurovat. Klepněte na OK, abyste zavřeli okno URL, když se otevře. V okně Konfigurace seznamu relačních záznamů klepněte na Další. Vyberte ADS a pak klepněte na Další. Klepněte do zaškrtávacího pole u FOTO (BajtovéPole) a klepněte na Dokončit.
10. Klepněte na grafiku, kterou jste vložili. Na kartě hx:graphicImageEx pohledu Vlastnosti klepněte na tlačítko Výběr datového objektu na stránce vedle pole Typ. Otevře se okno Vybrat datový objekt stránky.
11. Klepněte, abyste rozbalili all_recordlist (Service Data Object) > all_recordlist (ADS).
12. Klepněte na TYPOBRAZU (řetězec).
13. Klepněte na OK a poté uložte stránku.

Vaše stránka by nyní měla vypadat takto:

1. Přetáhněte komponentu Panel - Skupinové okénko ze zásuvky Rozšířené komponenty Faces palety do sloupce POPIS tabulky dat. Otevře se okno Vybrat typ.
2. Klepněte na Mřížku jako typ komponenty pro přidání a klepněte na OK.
3. Klepněte na novou mřížku skupinového okénka.
4. Použijte pohled Vlastnosti pro nastavení počtu Sloupců pro toto skupinové okénko na 2.
5. Uvolněte komponentu Výstup ze zásuvky komponent Faces palety do mřížky skupinového okénka. Tato výstupní komponenta bude štítkem pro popis položky na prodej. Každá vstupní komponenta bude mít štítek jako tento v levé buňce tabulky.
6. Klepněte na komponentu Výstup (objeví se v návrháři stránek jako výstupníText) a použijte pohled Vlastnosti pro přiřazení Hodnoty popisu:
7. Přetáhněte existující komponentu {POPIS} do dolní hrany mřížky skupinového okénka. Pokud máte potíže s přetáhnutím komponent na správné místo ve skupinovém okénku, zkuste držet tlačítko myši dole a sledujte kurzor. Umístění kurzoru ve skupinovém okénku označuje, kde se komponenta objeví, když pustíte tlačítko myši. Pro toto cvičení byste měli uvolnit tlačítko myši, když je kurzor vpravo od předchozí komponenty.
8. Přetáhněte Výstupní komponentu z palety a přejděte na pravou stranu skupinového okénka.
9. Použijte pohled Vlastnosti pro přiřazení Hodnoty Ceny:.
10. Přetáhněte existující výstupní komponentu {CENA} napravo od výstupního textu Ceny.
11. Stejným způsobem přetáhněte novou Výstupní komponentu pro štítek pro komponentu {TELEFON} a označte ji Telefon:.
12. Přetáhněte existující komponentu {TELEFON} do mřížky skupinového okénka doprava od výstupního textu Telefon. Vaše stránka by nyní měla vypadat takto:
    
13. Odstraňte prázdné sloupce CENA a TELEFON v tabulce dat. Sloupec odstraníte klepnutím na sloupec a otevřením pohledu Vlastnosti. Poté klepněte na h:dataTable ze seznamu značek HTML nalevo od pohledu, vyberte sloupec, který chcete odstranit ze seznamu napravo od pohledu a klepněte na Odebrat.
14. Klepněte na hlavičku sloupce Popis a použijte pohled Vlastnosti pro změnu jeho pole Hodnota na Podrobnosti. Stránka by nyní měla vypadat takto:
    
15. Uložte stránku a otestujte ji. Pokud nejste seznámeni se spuštěním aplikací na serveru, viz Lekce 1.3: Testování webu.

Když testujete stránku, měla by vypadat takto:

Libovolné inzeráty, které jste přidružili k obrazu, se zobrazí v přerušeném odkazu. V další lekci se naučíte, jak přidat komponentu pro odeslání souboru na stránku, abyste mohli přidat změny obrazů inzerátu.

Dokončili jste lekci 2.1. V této lekci jste se naučili, jak různými způsoby formátovat tabulku dat.