Zobrazení dynamických informací na webových stránkách s pomocí JavaServer Faces

Transkript

1 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

2 ii Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

3 Obsah Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 1 Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces Modul 1: Vytoření weboých stránek s datoými připojeními Lekce 1.1: Import požadoaných prostředků a nastaení cíloého sereru Lekce 1.2: Připojení k databázi a zobrazení dat na weboé stránce Lekce 1.3: Testoání webu Lekce 1.4: Vytoření noého záznamu pro zobrazení a aktualizaci databáze Lekce 1.5: Programoání zadáacího tlačítka Lekce 1.6: Vytoření aktualizační stránky Modul 1: Souhrn Modul 2: Přidání rozšířených funkcí Lekce 2.1: Formátoání tabulky dat Lekce 2.2: Použití komponenty pro nahrání souborů..35 Lekce 2.3: Použití naigačních praidel Lekce 2.4: Použití automatického generoání klíče..39 Modul 2: Souhrn Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces iii

4 i Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

5 Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces Tento ýukoý program ás naučí, jak narhnout dynamickou weboou stránku, která bude fungoat jako krátká inzertní sekce noin. Weboá stránka je kompletní weboá aplikace J2EE, která použíá komponenty JSF (JaaSerer Faces) a SDO (Serice Data Objects). Weboá aplikace použíá technologii JSF k ytáření dynamických weboých stránek, které jsou propojeny s databází, která ukládá krátká inzertní data. Přetažením komponent JSF na sé stránky můžete ytořit weboou aplikaci JSF známou jako aplikaci CRUD, protože může ytořit, číst, aktualizoat a odstranit záznamy z databáze. Užiatelé sereru mohou tyto funkce použíat pro spráu krátkých inzerátů databázi. Cíle ýuky Tento ýukoý program je rozdělen na da moduly, každý se sým lastním cílem ýuky. Můžete proést kterýkoli z těchto modulů nebo oba moduly. V každém modulu musíte dokončit cičení, aby weboá stránka spráně fungoala. Modul 1: Vytoření weboých stránek s datoými připojeními V tomto modulu se naučíte, jak nastait připojení k databázi a zobrazit informace z databáze na weboé stránce. Naučíte se: připojit weboé stránky k databázi ytořit stránky, které mohou zobrazit, ytořit, uprait a odstranit záznamy z databáze odeslat data z jedné stránky do další Modul 2: Přidání rozšířených funkcí V tomto modulu se naučíte íce ýkonných způsobů, jak použít data z databáze. Naučíte se: formátoat záznamy databáze na weboé stránce přidat komponentu, která umožňuje nahrání souborů do databáze u weboé stránky automaticky naigoat ze stránky na stránku automatizoat některé administrační úlohy databáze Až budete připraeni, začněte s Modulem 1: Vytoření weboých stránek s datoými připojeními. Požadoaný čas Celkem: 3 hodiny a 30 minut Modul 1: 2 hodiny Modul 2: 1 hodina a 30 minut Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces Tento ýukoý program ás naučí, jak narhnout dynamickou weboou stránku, která bude fungoat jako krátká inzertní sekce noin. Weboá stránka je kompletní weboá aplikace J2EE, která použíá komponenty JSF (JaaSerer Faces) a SDO (Serice Data Objects). Weboá aplikace použíá technologii JSF k ytáření dynamických weboých stránek, které jsou propojeny s databází, která ukládá krátká inzertní data. Přetažením komponent JSF na sé stránky můžete ytořit weboou aplikaci JSF známou jako aplikaci CRUD, protože může ytořit, číst, aktualizoat a odstranit záznamy z databáze. Užiatelé sereru mohou tyto funkce použíat pro spráu krátkých inzerátů databázi. 1

6 Tento ýukoý program může yžadoat některé olitelně instaloatelné komponenty. Chcete-li se ujistit, že jste nainstaloali odpoídající olitelné komponenty, prohlédněte seznam systémoých požadaků. Po dokončení ýukoého programu si mohou užiatelé sereru zobrazit nejen položky určené k prodeji, ale mohou také přidáat noé položky, měnit podrobnosti o každé položce (například cenu a popis), nebo hledat konkrétní položku. I když je tento ýukoý program naržen jednoduše, principy a technologie, které pokrýá, se použíají i na mnohem ětších a komplikoanějších weboých stránkách. Cíle ýuky Tento ýukoý program je rozdělen na da moduly, každý se sým lastním cílem ýuky. Můžete proést kterýkoli z těchto modulů nebo oba moduly. V každém modulu musíte dokončit cičení, aby weboá stránka spráně fungoala. Modul 1: Vytoření weboých stránek s datoými připojeními V tomto modulu se naučíte, jak nastait připojení k databázi a zobrazit informace z databáze na weboé stránce. Naučíte se: připojit weboé stránky k databázi ytořit stránky, které mohou zobrazit, ytořit, uprait a odstranit záznamy z databáze odeslat data z jedné stránky do další Modul 2: Přidání rozšířených funkcí V tomto modulu se naučíte íce ýkonných způsobů, jak použít data z databáze. Naučíte se: formátoat záznamy databáze na weboé stránce přidat komponentu, která umožňuje nahrání souborů do databáze u weboé stránky automaticky naigoat ze stránky na stránku automatizoat některé administrační úlohy databáze Až budete připraeni, začněte s Modulem 1: Vytoření weboých stránek s datoými připojeními. Požadoaný čas Celkem: 3 hodiny a 30 minut Modul 1: 2 hodiny Modul 2: 1 hodina a 30 minut Úroeň znalostí Střední Publikum Výojáři weboých aplikací, nárháři weboých užiatelských rozhraní. Systémoé požadaky Chcete-li dokončit tento ýukoý program, musíte nejpre nainstaloat a nakonfiguroat běhoý serer. Tento ýukoý program byl testoán na následujících sererech: WebSphere Application Serer Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

7 Další informace o implementaci SDO na jiné serery než WebSphere Application Serer uádí Téma nápoědy: Implementace SDO na jiných sererech než WAS. Tento ýukoý program požaduje některé schopnosti, které nebyly během instalace produktu inicioané. Pokud se ám nepodařilo najít užiatelsky definoané olby e ýukoém programu, ujistěte se, že jste poolili odpoídající schopnosti (klepnutím na Okno Předolby Schopnosti). Tento ýukoý program dokončíte pomocí následujících schopností: Jaa Deeloper Web Deeloper (typické) XML Deeloper Database Deeloper Enterprise Jaa Deeloper Data Chcete-li použít tento ýukoý program, musíte mít nainstaloaný a nakonfiguroaný aplikační serer. Oěřte, že je běhoé prostředí sereru k dispozici, klepněte na Okno Předolby, rozbalte Serer a pak klepněte na Instaloané běhoé komponenty. Můžete použít toto podokno, abyste přidali, odebrali a upraili instaloanou definici běhoé komponenty. Můžete také stáhnout a instaloat podporu pro noý serer. Předpoklady Pro dokončení tohoto ýukoého programu byste měli znát: základní koncepty nárhu weboé stránky, jako jsou weboé serery, stránky, prohlížeče a serery jak ytořit jednoduchou statickou weboou stránku prky weboé stránky, jako jsou tabulky, hypertextoé odkazy, formuláře a obrazy termíny databáze, jako jsou tabulky, záznamy, sloupce a pole Také pomůže, pokud rozumíte: jak použít perspektiy a pohledy praconího prostředí jak uprait kód HTML pro weboou stránku Očekáané ýsledky Až bude weboá aplikace dokončena, domoská stránka bude ypadat jako níže uedený obrázek. Naigace e weboém sereru, která se přidá na weboé stránky pomocí šablony sereru, odkazuje na stránky, které ám umožňují ytořit noé inzeráty nebo si zobrazit šechny inzeráty. Akce řádku níže zobrazené tabulce ás přesune na aktualizoanou stránku, kde můžete měnit informace přidružené ke konkrétnímu inzerátu. Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 3

8 Souisející informace Zobrazit erzi PDF tohoto ýukoého programu. Modul 1: Vytoření weboých stránek s datoými připojeními V tomto modulu se naučíte, jak ytořit weboé stránky, které ám umožní zobrazit, uprait, odstranit a ytořit informace z databáze. Naučíte se o technologii JaaSerer Faces (JSF) a budete ji použíat ke snadnému proádění složitých operací programoání. Cíle ýuky V tomto modulu se naučíte, jak nastait připojení k databázi a zobrazit informace z databáze na weboé stránce. Naučíte se: připojit weboé stránky k databázi ytořit stránky, které mohou zobrazit, ytořit, uprait a odstranit záznamy z databáze 4 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

9 odeslat data z jedné stránky do další Požadoaný čas Dokončení tohoto modulu by mělo trat přibližně 2 hodiny. Pokud se rozhodnete zkoumat další fazety dynamických weboých stránek při práci s ýukoým programem, dokončení může trat déle. Lekce 1.1: Import požadoaných prostředků a nastaení cíloého sereru Než začnete, budete muset importoat požadoané prostředky pro tento ýukoý program: sadu weboých stránek a ukázkoou databázi Derby. Hlaním účelem tohoto ýukoého programu je naučit ás, jak ytořit weboou aplikaci, která umožní užiateli přistupoat a manipuloat s daty databázi. Výukoý program nezachází do podrobností nárhu zhledu weboé stránky. Proto byl pro ás již připraen nárh weboé stránky. Pro dokončení tohoto ýukoého programu potřebujete zpřístupnit existující sadu souborů JaaSerer Faces JSP a ukázkoou databázi Derby. Tyto základní weboé stránky a ukázkoá databáze jsou zahrnuty souboru ZIP. Tato lekce ás proede kroky importoání souboru ZIP, takže můžete použít weboé stránky a databázi. Také nastaíte cíloý serer pro dynamický weboý projekt. Weboé stránky a databáze, které budete použíat pro tento ýukoý program, jsou zahrnuty souboru ZIP. Obsah souboru ZIP importujete takto: Import souboru s ukázkoým projektem 1. Importoat projekt. Přepněte na weboou perspektiu (klepnutím na Okno Oteřít perspektiu Web). 2. V pohledu Průzkumník projektů weboé perspektiy se ujistěte, že projekt ClassifiedsTutorial ypadá jako následující obrázek: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 5

10 Nastaení cíloého sereru pro dynamický weboý projekt: Nastaení cíloého sereru pro weboý projekt ám umožňuje testoat prostředky, které budete ytářet tomto ýukoém programu. Chcete-li nastait cíloý serer: 1. V pohledu Průzkumník projektů weboé perspektiy klepněte praým tlačítkem myši na ClassifiedsTutorial a yberte Vlastnosti. 2. V seznamu lastností klepněte na Serer. 3. V seznamu ýchozích sererů yberte serer, který chcete použít jako předolbu. Klepněte na Použít. 4. V seznamu lastností klepněte na Zaměřené běhoé komponenty. 5. V seznamu běhoých komponent klepněte na weboou komponentu, která odpoídá sereru, který jste ybrali. Klepněte na OK. Pokud serer, který chcete použít, není seznamu zaměřených běhoých komponent, zařete praconí prostředí a nainstalujte serer, který chcete použít. Když je serer nainstaloán, postupujte podle instrukcí, abyste nastaili cíloý serer. Poznámka: Pokud neidíte žádné serery seznamu Předolených sererů a nainstaloali jste běhoé komponenty sererů, je možné, že bude potřeba serer nakonfiguroat. Chcete-li nakonfiguroat serer, můžete proést následující: 1. Klepněte praým tlačítkem myši na soubor all_records.jsp, pak klepněte na Spustit jako Spustit na sereru. 2. Vyberte Ručně definoat noý serer. 3. Vyberte serer, který jste nainstaloali. 4. Následujte pokyny průodce, abyste nakonfiguroali serer. Při prním spuštění na sereru můžete obdržet chybu. Chybu opraíte tak, že nastaíte cíloý serer dle ýše uedeného popisu, restartujete serer pohledu Serery a znou zaedete weboou stránku prohlížeči. Pokud půjdete zpět dříe popsanými kroky pro nastaení cíloého sereru, zjistíte, že předolený serer je ten, který jste nakonfiguroali. Pokud je serer nainstaloán, ale ne nakonfiguroán, nyní se objeí seznamu sererů, z nichž můžete ybrat předolený cíl. Další informace o implementaci SDO na jiné serery než WebSphere Application Serer uádí Téma nápoědy: Implementace SDO na jiných sererech než WAS. Kontrolní bod lekce Nyní jste naimportoali dynamický weboý projekt ClassifiedsTutorial a nastaili cíloý serer. Můžete procházet soubory e weboém projektu ýukoého programu. Abyste oteřeli soubor, poklepejte na něj okně Průzkumník projektů. Chcete-li zobrazit znázornění toho, jak stránky souisejí, jako mapu, poklepejte na Naigace weboé stránky Průzkumníku projektů. Většinu aší práce tomto zorku bude zahrnoat následující soubory: all_records.jsp Toto je domoská stránka webu. Zobrazí každý krátký inzerát databázi. new_record.jsp Tato stránka bude použita pro ytoření noého krátkého inzerátu. update_record.jsp Tato stránka bude použita databázi pro změnu podrobností o inzerátu nebo pro jeho odstranění. classifiedtemplate.jtpl Jedná se o šablonu pro stránky sereru. Zahrnuje prky jako tabulku a šedý pruh s logem Vítejte Classifieds, které jsou na každé stránce. Tato stránka má také dě naigační karty pod šedým pruhem s logem, které edou do domoské stránky a do noé stránky krátkých inzerátů. 6 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

11 Nyní jste připraení začít Cičení 1.2: Práce se seznamem relačních záznamů a komponentami tabulky dat. Lekce 1.2: Připojení k databázi a zobrazení dat na weboé stránce V této lekci se naučíte, jak se připojit k databázi a zobrazit datoé záznamy na weboé stránce. Také se naučíte, jak přidat seznam relačních záznamů na weboou stránku. Weboý serer tomto ýukoém programu použíá dynamické weboé stránky s komponentami JaaSerer Faces pro zpřístupnění informací o databázi a zobrazení na stránce. Tento ýukoý program použíá relační záznamy a seznam relačních záznamů pro znázornění dat databázi, tak aby data byla zobrazena na stránce e formátu tabulky dat nebo řádné tabulky HTML. Jaa objekty beans pro přístup jsou nyní použity těmito komponentami. Více informací o objektech bean pro přístup k datům: Objekty bean pro přístup k datům jsou Jaa znázornění objektu bean enterprise bean. Jsou obykle použíány klientských programech, které zaměstnáají soubory JaaSerer Pages (JSP), serlety nebo objekty enterprise bean, které jsou souladu s ostatními objekty enterprise bean. Přístupoé objekty bean ás chrání před složitostmi spráy žiotních cyklů enterprise bean. To znamená, že můžete programoat do enterprise beans, tak jednoduše, jak programujete do Jaa objektů beans, což zjednodušuje aše klientské programy enterprise bean a zredukuje čas ýoje. Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 7

12 Více informací o komponentách JaaSerer Faces a Faces: JaaSerer Faces je technologie, která ám pomůže ystaět užiatelská rozhraní pro dynamické weboé aplikace, které běží na sereru. Struktura JaaSerer Faces sprauje sta UI prostřednictím požadaků sereru a nabízí jednoduchý model pro ýoj událostí na straně sereru, které jsou aktioány klientem. Technologie JaaSerer Faces je založena na struktuře MVC (model-iew-controller). Pro JaaSerer Faces to znamená, že řadič je serlet, model znázorňují objekty JaaBeans, a pohled se skládá z komponent JaaSerer Faces s malým nebo žádným aplikačním kódem. Cílem tohoto modelu je oddělit obsah od znázornění. Nástroje, jako jsou komponenty Faces, ám pomohou použíat tuto technologii e weboých aplikacích. Komponenty Faces zahrnují přizpůsobenou knihonu značek JSP (JaaSerer Page) pro yjádření rozhraní JaaSerer Faces na stránce. Tento průodce ám pomůže ytořit soubory JSP, které mohou použíat komponenty Faces. Komponenty Faces ám umožňují yinout weboou aplikaci přetažením komponent ze zásuky Faces pohledu Paleta a jejich umístěním na weboé stránky, které práě ytáříte. Například, můžete přetáhnout pole s stupním textem a uolnit jej do formuláře na stránce. Pak můžete přetáhnout pole Zadat edle pole se stupním textem. Nakonec můžete připojit pole stupního textu do ašeho zdroje dat. To umožní koncoým užiatelům zadáat data z weboé aplikace do zdroje dat. Jiná ýhoda aplikací sestaených s pomocí komponent Faces je, že užiatelské rozhraní je ykresleno nezáisle na základní logice programu. To znamená, že aplikace mohou spouštět a přistupoat k datům na různých platformách, jako jsou prohlížeče nebo příruční zařízení. 8 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

13 Přidání seznamu relačních záznamů V této lekci ytoříte seznam relačních záznamů pro znázornění šech krátkých inzerátů databázi. Poté se připojíte k databázi a yberete tabulku, která zadržuje informace, které potřebujete seznamu relačních záznamů. Nakonec zobrazíte tento seznam relačních záznamů na stránce tabulce dat. Relační záznamy se připojují pouze k jednomu záznamu z databáze. V tomto případě relační záznam předstauje jediný krátký inzerát z ukázkoé databáze. Použitím relačního záznamu můžete ytořit noý záznam, uprait existující záznam nebo odstranit starý záznam. Seznamy relačních záznamů se připojují k íce než jednomu záznamu z databáze. V tomto případě seznam relačních záznamů znázorňuje od dou do šech krátkých inzerátů ukázkoé databázi. Tabulky dat zobrazují data ze seznamu relačních záznamů na stránce. Tabulky dat jednoduše označují místo pro seznamy záznamů; neformátují data do řádků a sloupců stejným způsobem, tak jako proádí tabulka HTML. Naučte se íce o tabulkách dat: Tabulka dat je komponenta e stránce Faces JSP, která zadržuje datoé objekty, jako např.: seznam relačních záznamů. Ačkoli se zdá, že tabulka dat má řádky a sloupce jako tabulka HTML, nefunguje stejně. Chcete-li formátoat stupní a ýstupní oladače jako tabulce, musíte použít Panel - Skupinoé okénko ze zásuky komponent Rozšířené komponenty Faces paletě. Toto je obsaženo e Cičení 2.2: Formátoání tabulky dat. Jelikož jsou tabulky dat komponentami Faces a ne komponentami HTML, jsou kontroloány přes pohled Vlastnosti a ne přes pohled Nárháře stránek. Použitím pohledu Vlastnosti můžete přizpůsobit tabulku dat různými způsoby: přidejte, odeberte a změňte pořadí sloupců formátujte text a pozadí přidejte hlaičku, zápatí a okraje přidejte stránkoání, aby se zobrazily ýsledky Vytoření noého seznamu relačních záznamů: 1. V pohledu Průzkumník projektů weboé perspektiy klepněte praým tlačítkem myši na ClassifiedsTutorial WebContent. 2. Ve složce WebContent poklepejte na all_records.jsp. Soubor all_records.jsp se oteře editoru. 3. Odstraňte předolený text Předolený obsah těla. 4. V pohledu Paleta rozbalte zásuku Data. 5. Přetáhněte komponentu Seznam relačních záznamů z palety do oblasti s prázdným obsahem. Oteře se okno Přidat seznam relačních záznamů. 6. V poli Náze zadejte all_recordlist. Názy seznamu relačních záznamů a relačních záznamů se musí podřídit Jaa standardním konencím pojmenoání pro názy proměnných (např.: nemohou obsahoat žádné mezer). 7. Ujistěte se, že je ybráno Přidat oladače dat. Když je ybráno Přidat oladače dat, průodce ytoří tabulku dat pro zobrazení seznamu záznamů na stránce. Jinak průodce ytoří pouze seznam záznamů a neytoří žádné znázornění dat na stránce. Prozatím to bude průodce, kdo ytoří předolenou tabulku dat a y ji přizpůsobíte později. Okno Přidat seznam relačních záznamů by mělo ypadat takto: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 9

14 Klepněte na Další. 8. V poli Náze připojení na další stránce průodce klepněte na Noý, abyste ytořili noé připojení k databázi. Oteře se dialogoé okno Noé připojení JDBC. Vyberte přepínač Vytořit noé připojení, pak klepněte na Další. 9. V seznamu Vybrat spráce databáze rozbalte Derby, pak yberte V poli Umístění databáze klepněte na Procházet a yberte <workspace_location>\classifiedstutorial\ WebContent\\database, kde je <workspace_location> adresářem aší aktuální praconí oblasti. Klepněte na OK, abyste zařeli okno Najít složku. 11. V poli Umístění třídy zadejte umístění souborů JAR, které implementují třídu oladače JDBC, nebo klepněte na Procházet, abyste ybrali umístění ze systému souborů. Jakmile zolíte umístění souborů JAR, klepněte na tlačítko Oteřít. 12. Možná budete muset zadat ID užiatele pro přístup do databáze. Heslo není požadoáno. Průodce Noé připojení k databázi by měl ypadat takto: 10 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

15 13. V průodci Noá připojení JDBC klepněte na tlačítko Dokončit. Vrátíte se do průodce Přidání seznamu relačních záznamů. 14. Klepněte na Konfiguroat připojení databází projektu. Oteře se okno Vlastnosti připojení JDBC. 15. Klepněte na Uprait edle sekce Podrobnosti připojení běhoých komponent. Vyberte Použít připojení spráce oladače jako typ připojení běhoé komponenty. Klepněte na Dokončit, pak se klepnutím na OK raťte do dialogu Přidat seznam relačních záznamů. Nyní, když jste ytořili připojení do databáze Derby, musíte si ybrat tabulku nebo seznam záznamů pro znázornění. Průodce Přidat seznam relačních záznamů zobrazuje tabulky databázi. 16. Rozbalte W5SAMPLE a yberte ADS. Klepněte na Další. Zbýající stránky průodci ám umožní yloučit sloupce z ašeho seznamu záznamů a proést rozšířené olby, jako např.: definoání primárního klíče, přidání relací do jiných tabulek a určení filtru a seřazení podmínek. V dalších cičeních se dozíte íce o těchto stránkách. Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 11

16 17. Na stránce Přidání relačního záznamu dialogoém okně uedete sloupce, které chcete zahrnout do relačního záznamu. Klepněte na Další. 18. Pro tento ýukoý program potřebuje zobrazit jen náze, popis, cenoou kategorii a telefonní číslo každého krátkého inzerátu. Předoleně jsou ybrány šechny sloupce; klepněte, abyste yčistili šechny kromě následujících sloupců pro zobrazení: HLAVNÍKATEGORIE: Řetězec NÁZEV: Řetězec POPIS: Řetězec CENA: VelkéDesetinné TELEFON: Řetězec 19. Organizaci zobrazení tabulky dat na aší weboé stránce můžete upřesnit. Chcete-li uspořádat sloupce, yberte sloupec a klepejte na šipky nahoru a dolů, dokud nebude sloupec požadoané pozici. Uspořádejte sloupce následujícím pořadí: NÁZEV POPIS HLAVNÍKATEGORIE CENA TELEFON Klepněte na Dokončit. Weboá stránka nyní ypadá takto: 12 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

17 20. Uložte stránku. V této lekci uidíte, jak tato stránka ypadá na skutečném weboém sereru. Existuje mnoho oleb pro formátoání tabulek dat a komponent JaaSerer Faces. Některé z těchto oleb jsou zahrnuty dalším modulu. Také můžete sami prozkoumat pohled Vlastnosti pro různé komponenty JaaSerer Faces na stránce (např. tabulka dat nebo indiiduální ýstupní komponenta). Kontrolní bod lekce Dokončili jste lekci 1.2. V této lekci jste se naučili, jak se připojit do databáze a zobrazit datoé záznamy na weboé stránce s pomocí seznamu relačních záznamů. Lekce 1.3: Testoání webu Když jste připraeni publikoat aši weboou aplikaci, potřebujete serer, který ji bude hostit, tak aby užiatelé měli přístup k webu přes Internet; nicméně, pro testoání ašeho webu můžete použít testoací prostředí. V této lekci spustíte JSP testoacím prostředí, abyste simuloali, jak bude stránka ypadat, když bude opradu publikoána. Také se naučíte, jak spustit a zastait serer. Kdykoli během ýoje ašeho webu můžete oteřít stránku Nárháři stránek a použít kartu Náhled, abyste iděli, jak bude ypadat áš nárh prohlížeči. Nicméně, pohled Náhledu ám nepooluje, abyste iděli dynamické aspekty aší stránky (takoé jako připojení k databázi), protože by zobrazily spuštění ze sereru. Tip: Jakmile jste jednou spustili serer, musíte ho zastait, než budete moci pokračoat práci se stránkou. Chcete-li použít tento ýukoý program, musíte mít nainstaloaný a nakonfiguroaný aplikační serer. Oěřte, že je běhoé prostředí sereru k dispozici, klepněte na Okno Předolby, rozbalte Serer a pak klepněte na Instaloané běhoé komponenty. Můžete použít toto podokno, abyste přidali, odebrali a upraili instaloanou definici běhoé komponenty. Můžete také stáhnout a instaloat podporu pro noý serer. Pro testoání weboé stránky na sereru: 1. V pohledu Průzkumník projektů, klepněte praým tlačítkem myši na soubor all_records.jsp, poté klepněte na Spustit jako Spustit na sereru. Oteře se okno Spuštění na sereru. Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 13

18 2. Musíte použít ten samý serer, jaký jste zolili za cíloý serer Lekci 1.1. Použití jiného sereru tomto kroku způsobí chyby. Chcete-li testoat weboou stránku na dříe definoané konfiguraci sereru: a. Vyberte Zolit existující serer. b. Vyberte serer, který chcete použít, z dostupného seznamu. Chcete-li testoat weboou stránku na noé konfiguraci sereru: a. Vyberte Ručně definoat noý serer. b. Vyberte typ sereru, který chcete použít, z dostupného seznamu. 3. Klepněte na Dokončit. Nástroje sereru ytáří noý serer, spusťte ho a oteřete stránku interním weboém prohlížeči praconího prostředí. Toto může chilku trat. V pohledu Konzola můžete sledoat zpráy o tom, jak nástroje sereru spouští serer. Jakmile je proces dokončen, můžete nahlédnout, jak bude ypadat stránka a pracoat, jakmile je jednou publikoána na weboý serer. Klepněte na odkazy, zadejte data do formulářů a uidíte liboolný dynamicky generoaný obsah e stránce, který se nemusí objeit pohledu Vlastnosti. Také pokud si chcete prohlédnout aši stránku odlišných weboých prohlížečích, můžete kopíroat URL z weboého prohlížeče praconího prostředí do prohlížeče, který si zolíte. Musíte zastait serer dříe, než budete moci pokračoat s ýukoým programem. Pokud necháte serer spuštěný, uidíte chyboé zpráy, když budete pokračoat s ýukoým programem. Tyto chyby se objeí, protože serer je připojen k ukázkoé databázi, která ás chrání před připojením k databázi, aby změnila informace zobrazené na webu. Zastaení sereru: 1. Oteřete pohled Serery. Tento pohled je obykle umístěn dole uprostřed praconího prostředí. Pokud nemůžete najít pohled Serery, klepněte na Okno Zobrazit pohled Serery hlaní nabídce. 2. Vyberte serer, který chcete zastait. Všimněte se, že sta sereru je ypsán jako Spuštěný. 3. Klepněte na tlačítko Zastait serer prao nahoře pohledu Serery. Sta sereru se změní na Zastauje se. Uidíte zpráy pohledu Konzola, když se serer ypne. Když se Sta sereru pohledu Serery změní na Zastaeno, serer je zastaený a můžete pokračoat činnosti na webu. Tip: Můžete kdykoli testoat áš web na sereru, ale pamatujte, že musíte serer zastait, když skončíte. Kontrolní bod lekce Dokončili jste lekci 1.3. V této lekci jste otestoali JSP testoacím prostředí, abyste simuloali, jak bude stránka ypadat, když se skutečně publikuje. Také jste se naučili, jak spustit a zastait serer. Lekce 1.4: Vytoření noého záznamu pro zobrazení a aktualizaci databáze V této lekci budete ytářet stránku, která užiatelům poolí ytořit noé krátké inzeráty a poolí je posílat do databáze. Nejpre ytoříte relační záznam pro znázornění noého záznamu databázi a poté ytoříte izualizaci záznamu na aší stránce jako sadu stupních polí. 14 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

19 Pro ytoření noého relačního záznamu: 1. Poklepejte na soubor new_record.jsp pohledu Průzkumník projektů pro jeho oteření. 2. Odstraňte předolený text Předolený obsah těla. 3. V pohledu Paleta klepněte na oladač Dat pro jeho rozbalení. 4. Přetáhněte Relační záznam z palety na oblast prázdného obsahu. Oteře se okno Přidat relační záznam. Poznámka: Pokud se objeí aroná zpráa a sděluje ám, že připojení k aší databázi nemohlo být zaedeno, nechte serer běžet po testoání webu. Pokud se toto stane, klepněte na Zrušit každém dialogu a zastate serer, tak jak ysětluje Lekce Do pole Náze zadejte create_record. 6. Pod Vytořit oladače pro klepněte na Vytoření noého záznamu. 7. Ujistěte se, že je ybráno Přidat oladače stupu/ýstupu pro zobrazení záznamu na weboé stránce. Okno Přidat relační záznam by mělo ypadat takto: 8. Klepněte na Další. 9. V okénku tabulky rozbalte W5SAMPLE a yberte ADS. Klepněte na Další. 10. Znou klepněte na Další. Oteře se stránka Obslužné prky konfigurace dat. Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 15

20 Tip: Stránka Obslužné prky konfigurace dat ám pomáhá přizpůsobit izualizaci ašeho relačního záznamu. Např.: můžete změnit sloupce, štítky pro pole a zadáací tlačítko na ašem stupním formuláři. Poté, co dokončíte tyto kroky, bude na této stránce zcela funkční stupní formulář. 11. V sekci Pole pro zobrazení ymažte zaškrtáací okénko edle každého názu pole kromě těch, které chcete e ašem stupním formuláři: POPIS ID HLAVNÍKATEGORIE TELEFON CENA NÁZEV 12. Uspořádejte pole následujícím pořadí klepnutím na tlačítko Nahoru a Dolů: ID NÁZEV POPIS HLAVNÍKATEGORIE CENA TELEFON 13. Přejmenujte štítky, jak chcete. Např.: zkraťte štítek HlaníKategorie jen na Kategorie. Pro přejmenoání štítků generoaných pro stupní pole, klepněte na štítek ze sloupce Štítek. Ikona myši se změní na kurzor, takže můžete psát noý text. 14. Vyberte HLAVNÍKATEGORIE, pak klepněte na Volby. Okno Volby se oteře. 15. Ujistěte se, že je ybraná olba Zadáací tlačítko. 16. Zadejte Zapsat noý ýpis do pole Štítek. Pak klepněte na OK. Okno Přidat relační záznam by mělo nyní ypadat takto: 16 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

21 17. Klepněte na Dokončit pro generoání stupního formuláře. Měl by ypadat takto: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 17

22 Poznámka: Formulář má pole pro Chyboou zpráu. Toto neznamená, že projekt obsahuje chyby; pole označuje místo, kde budou chyby zobrazeny, pokud nějaké budou, když užiatel zadá formulář. 18. Uložte stránku. Jakmile je zadán stupní formulář, stránka automaticky přidá noý záznam do databáze. V další lekci budete programoat tlačítko Zapsat noý ýpis pro nárat do stránky all_records.jsp, abyste si okamžitě mohli zobrazit noý záznam databázi. Kontrolní bod lekce Dokončili jste lekci 1.4. V této lekci jste ytořili stránku, která umožní užiatelům ytořit noé krátké inzeráty a umístit je do databáze. Lekce 1.5: Programoání zadáacího tlačítka Jakmile je zadán stupní formulář, stránka automaticky přidá noý záznam do databáze. V této lekci budete programoat zadáací tlačítko Zapsat noý ýpis pro nárat do stránky all_records.jsp, abyste si okamžitě mohli zobrazit noý záznam databázi. Chcete-li programoat zadáací tlačítko: 1. V souboru new_record.jsp klepněte praým tlačítkem myši na tlačítko Zadat noý ýpis, které jste ytořili e formuláři na weboé stránce, a yberte Vlastnosti. 2. Klepněte na Přidat praidlo. Oteře se okno Přidání naigačního praidla. 3. V rozbaloacím seznamu Stránka yberte all_records.jsp, pak klepněte na OK. 4. Uložte stránku. Pokud se chcete pokusit přidat záznam do databáze, abyste oěřili, že se rátíte na stránku all_records.jsp, spusťte new_record.jsp na testoacím sereru. Zabránění duplicitním klíčům Důležité: 18 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

23 Protože sloupec ID je primárním klíčem tabulce ADS, nemůžete přidat záznamy s hodnotou ID, která již tabulce existuje. V modulu 2 uidíte, jak použíat automatické generoání klíčů pro automatické ytoření noého nepoužitého klíče pro každý noý záznam. Do té doby musíte zadat nepoužité číslo ID na této stránce, abyste přidali noý záznam. Záznamy, které přicházejí s databází, použíají čísla ID od 1 do 24, takže můžete zadat liboolné číslo yšší než 24 jako primární klíč. Ujistěte se, že nebudete duplikoat klíče, když zadáte íce než jeden záznam. Sázání stupu s relačním záznamem (olitelné) Vstupní formulář na stránce je sada stupních polí JaaSerer Faces, která byla sázána s relačním záznamem, který jste ytořili. Vzpomeňte si, že jste ytořili relační záznam, který předstauje noý záznam tabulce ADS databáze. Vázání je metoda, kterou můžete spojit stupní komponentu JaaSerer Faces se sloupcem relačním záznamu. Když jste ytořili relační záznam, průodce automaticky sázal šechny jeho sloupce se stupními poli na stránce. Pokud chcete proést změny ručně, můžete sázat další sloupce s jinými stupními poli. Chcete-li sázat sloupec z relačního záznamu se stupním polem, přetáhněte sloupec z pohledu Data na stránce do pole. Můžete experimentoat s tímto procesem odstraněním a opakoaným ytářením stupního pole Popis na formuláři. Více informací o pohledu Data na stránce: Pohled Data na stránce se obykle nachází leém dolním rohu praconího prostředí. Pokud jej nemůžete najít, přejděte na pruh nabídky a klepněte na Okno Zobrazit pohled Data na stránce. Obecně se pohled Data na stránce použíá pouze když ytáříte dynamické weboé stránky. Pohled Data na stránce ukládá připojení ke zdrojům dat, jako jsou databáze, e formě datoých objektů, jako jsou relační záznamy nebo seznamy relačních záznamů. Tyto datoé objekty nepředstaují samotný zdroj dat nebo jinou komponentu na stránce. Místo toho, tyto objekty předstaují spojení mezi projektem a zdrojem dat. Když je toto spojení ytořeno, můžete přetáhnout datoý objekt z pohledu Data na stránce na weboou stránku, abyste dokončili připojení a zobrazili informace ze zdroje dat na weboé stránce. Například, zde je obrázek pohledu Data na stránce zobrazujícího seznam relačních záznamů ytořený během tohoto ýukoého programu: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 19

24 Na tomto obrázku můžete idět seznam relačních záznamů all_recordlist (ADS) následoaný šemi sloupci tomto seznamu relačních záznamů. Když je tento datoý objekt definoán a pohledu Data na stránce, můžete tyto sloupce přetáhnout na stupní komponenty na weboé stránce tolikrát kolikrát chcete, bez toho, že byste se museli znou připojoat k databázi. Například, pokud byste chtěli zobrazit hodnotu sloupce POPIS na weboé stránce, nejpre přetáhnete textoé ýstupní pole na stránku a pak přetáhnete sloupec POPIS z pohledu Data na stránce do tohoto pole. Tomu se říká sázání sloupce s ýstupním polem. Jinak, pokud byste chtěli nechat užiatele zapsat noou hodnotu pro sloupec POPIS databázi, mohli byste přetáhnout textoé stupní pole na stránku. Pak přetáhněte sloupec POPIS do daného textoého stupního pole. Jsou poskytnuty následující kroky pro ilustraci konceptu stupního pole a procesu ázání; nicméně tyto kroky jsou tomto ýukoém programu olitelné. Pokud je nechcete proést, přejděte na další lekci. 1. V souboru new_record.jsp klepněte na stupní pole Popis. Stiskněte kláesu Odstranit. 2. V pohledu Paleta klepněte na zásuku Rozšířené komponenty Faces a rozbalte ji. 3. Přetáhněte komponentu Vstup z palety do buňky, která obsahoala stupní pole Popis, které jste práě odstranili. Nyní existuje stupní pole této buňce, ale není zde text, jako {ID} nebo {NÁZEV}, protože toto stupní pole není sázáno s žádným sloupcem. 4. Klepněte pohledu Data na stránce a rozbalte Relační záznamy create_record (Serice Data Object) create_record (ADS) a přetáhněte sloupec POPIS na komponentu Vstup, kterou jste práě ytořili. Text unitř komponenty Vstup se změní a bude indikoat, že je nyní sázán se sloupcem POPIS, jako na tomto obrázku: 5. Uložte soubor a pak spusťte stránku na testoacím sereru, chcete-li. Kontrolní bod lekce Dokončili jste lekci 1.5. V této lekci jste se naučili naprogramoat tlačítko s příkazem a sázat data se stupním polem přetažením modulu widget JSF z palety na weboou stránku. Lekce 1.6: Vytoření aktualizační stránky V tomto bodě jste ytořili stránky pro zobrazení a ytoření ýpisů pro weboou stránku. V tomto cičení ytoříte stránku, která umožní užiatelům aktualizoat a odstranit ýpisy. Aktualizační stránka bude ypadat skoro přesně jako stránka pro ytoření, krom toho, že na aktualizační stránce budou stupní pole zobrazoat data z existujícího záznamu, která užiatel změní. Nejpre ytoříte relační záznam, který předstauje existující záznam databázi. Dále ytoříte aktualizační formulář JaaSerer Faces pro tento relační záznam a po několika malých změnách bude aše stránka připraena pro testoání. Vytoření relačního záznamu pro aktualizaci 1. Oteřete soubor update_record.jsp poklepáním pohledu Průzkumník projektů. 2. Odstraňte předolený text Předolený obsah těla. 20 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

25 3. V pohledu Paleta klepněte na oladač Dat pro jeho rozbalení. 4. Přetáhněte Relační záznam z palety na oblast prázdného obsahu. Oteře se okno Přidání relačního záznamu. 5. V poli Náze zadejte update_record. 6. Pod Vytořit oladače pro klepněte na Aktualizace existujícího záznamu. 7. Ujistěte se, že je ybrána olba Přidat oladače stupu/ýstupu pro zobrazení relačního záznamu na weboé stránce. 8. Klepněte na Další. 9. V okénku Tabulka rozbalte W5SAMPLE a yberte ADS. 10. Klepněte na Další. Oteře se stránka Přidat relační záznam. Filtroání ýsledků Relační záznam může zobrazit pouze jeden záznam z databáze. Proto musíte filtroat tabulku databáze, aby se objeil pouze jeden záznam, který užiatel upraí. (V předchozích cičeních jste nemuseli filtroat databázi, protože jste ytořili noý záznam a proto neexistoaly ýsledky z databáze pro filtroání.) Poněadž každý záznam databázi má jedinečné číslo ID, budete filtroat ýsledky podle daného čísla ID. 1. Stránka Přidat relační záznamy obsahuje seznam odkazů na úlohu. Pod odkazem Úlohy klepněte na Filtroat ýsledky. Okno Filtry se oteře a loží podmínky předoleného filtru ID = #{param.id} do sloupce Filtr. Okno Filtry ypadá takto: Tento kód filtruje záznamy databázi, takže se relačním záznamu objeí pouze záznam s uedeným číslem ID. Více informací o této podmínce se dozíte sekci Akce přidat řádek, která přijde tomto cičení na pořadí později. Klepněte na Zařít. 2. Klepněte na Další. Oteře se stránka Obslužné prky konfigurace dat. 3. V sekci Pole pro zobrazení ymažte zaškrtáací okénko edle každého názu pole kromě těch, které chcete zobrazit e ašem stupním formuláři: ID NÁZEV POPIS HLAVNÍKATEGORIE CENA TELEFON 4. Klepnutím na Nahoru nebo Dolů uspořádejte názy polí následujícím způsobem: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 21

26 ID NÁZEV POPIS HLAVNÍKATEGORIE CENA TELEFON 5. Pro pole ID yberte Výstupní pole z rozbaloacího seznamu e sloupci Typ oladače. I když chcete, aby užiatelé mohli zobrazit číslo ID záznamu, nechcete, aby jej mohli aktualizoat. Přeměna pole ID na Výstupní pole zabrání problému duplicitních ID. 6. Klepněte na Volby. Oteře se okno Volby. Ujistěte se, že je ybraná olba Zadáací tlačítko. Zadejte Aktualizace poli Štítek. Klepněte na OK. Okno Přidat relační záznam by mělo nyní ypadat takto: 7. Klepněte na Dokončit, abyste generoali aktualizační formulář na stránce, jak je zobrazeno níže: 22 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

27 Programoání tlačítka pro aktualizaci a odstranění Opět přidáte kód, který odkáže užiatele na stránku all_records.jsp, kde se zobrazí změněný záznam spolu se šemi ostatními záznamy. 1. Klepněte praým tlačítkem myši na tlačítko Aktualizoat, které jste práě ytořili na weboé stránce, a yberte Vlastnosti. 2. Klepněte na Přidat praidlo. Oteře se okno Přidání naigačního praidla. 3. V rozeíracím seznamu Stránka yberte all_records.jsp. V rámečku Toto praidlo použíá klepněte na Pouze tato akce. Ujistěte se, že pole obsahuje: #{pc_update_record.doupdate_recordupdateaction}. Klepněte na OK. 4. Opakujte kroky 1-3, abyste upraili kód stejným způsobem pro tlačítko Odstranit na weboé stránce. Ujistěte se, že pole Toto praidlo použíá obsahuje: #{pc_update_record.doupdate_recorddeleteaction} 5. Uložte stránku. Pokud se chcete pokusit přidat záznam do databáze, abyste oěřili, že se rátíte na stránku all_records.jsp, spusťte new_record.jsp na testoacím sereru. Přidání noé akce Nyní přidáte noou akci řádku na stránku all_records.jsp, takže si užiatel bude moci ybrat záznam databázi, který aktualizuje. #{param.id} předstauje číslo ID záznamu, který aktualizační stránka aktualizuje. Když užiatel klepne na řádek, číslo ID záznamu se odešle na stránku update_record.jsp jako parametr #{param.id}. Pak se pouze filtroaný relační záznam, který jste práě ložili na stránku update_record.jsp, zobrazí pro aktualizaci. 1. V pohledu Průzkumník projektů poklepejte na soubor all_records.jsp, aby se oteřel editoru. Klepněte kdekoli unitř tabulky dat. Oteřete pohled Vlastnosti. 2. V pohledu Vlastnosti klepněte na kartu Akce řádku pod odkazem hx:datatableex seznamu značek HTML. 3. Klepněte na Přidat akci, která se proede, pokud klepnete na řádek. Oteře se dialog Konfiguroat akci řádku. Vyberte Klepnutí na řádek odešle požadaek na serer; informace o řádku se odešlou jako parametry, potom klepněte na tlačítko OK. Do tabulky dat se přidá sloupec. 4. V pohled Vlastnosti klepněte na kartu hx:requestrowaction. 5. Klepněte na Přidat praidlo. Oteře se dialog Přidat praidlo naigace. 6. V rozeíracím seznamu Stránka yberte update_records.jsp. V rámečku Toto praidlo použíá yberte Pouze tato akce. Pole Pouze tato akce se automaticky zaplní parametrem #{pc_all_records.dorowaction1action}, Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 23

28 který byl ytořen při přidáání akce řádku. Klepněte na OK. Pokud se pole neyaplní automaticky ýše uedenou metodou, zapište ji do pole a přidejte následující do prostředků ClassifiedsTutorial/Jaa Resources: src/pagecode/all_records.jaa: public String dorowaction1action() { return ""; 7. V pohledu Vlastnosti klepněte na kartu Parametr pod hx:requestrowaction. Klepněte na Přidat parametr a pak zadejte ID do pole Náze. Musíte sázat parametr ID se sloupcem ID. Sázání akce řádku se sloupcem ID seznamu dat znamená, že když klepnete na řádek, požadoaný parametr bude ID záznamu seznamu. a. Klepněte na tlačítko Hodnota, potom na Vybrat datoý objekt stránky. b. Na kartě Datoý objekt rozbalte all_recordlist (serisní datoé objekty) all_recordlist (ADS) a yberte ID (jaa.lang.integer). c. Klepněte na OK. Nyní, když užiatel klepne na řádek, weboá stránka umožní užiateli aktualizoat informace o krátkém inzerátu. Uložte soubor a otestujte stránku, pokud chcete. Nezapomeňte, že musíte nejpre oteřít all_records.jsp, protože to je stránka, která odkazuje na update_record.jsp. Kontrolní bod lekce Dokončili jste lekci 1.6. V této lekci jste se naučili, jak ytářet weboé stránky, které aktualizují záznamy databázi. Modul 1: Souhrn Dokončili jste Modul 1: Vytoření weboých stránek s datoými připojeními. Naučené lekce Nyní íte jak: Zobrazit informace z databází na weboých stránkách. Pracoat s relačními záznamy, seznamy relačních záznamů a tabulkami dat. Zobrazit, ytořit, uprait a odstranit záznamy databáze z weboé stránky. Propojit záznam nebo sadu záznamů s pomocí akce řádku komponentě tabulky dat. Tento modul ám předstail technologii a nástroje JaaSerer Faces. Je toho mnohem íce, co můžete proést, aby byla aše stránka atraktinější, použitelnější a účelnější. V dalším modulu, Modul 2: Přidání rozšířených funkcí na stránce 25, se naučíte, jak tuto jednoduchou krátkou inzertní stránku přetoříte na izuálně přijatelnější a komplexnější aplikaci. Pokračujte do dalšího modulu, pokud chcete ědět, jak stránku můžete přetořit, aby ypadala takto: 24 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

29 Modul 2: Přidání rozšířených funkcí V tomto modulu se naučíte, jak použíat rozšířené funkce pro úprau formátu weboých stránek, přidat funkci, která umožňuje užiatelům nahrání souborů do databáze, jak nastait praidla, která automaticky odešlou užiatele na konkrétní stránku a jak automatizoat některé administratiní úlohy, jako je generoání klíčů. Cíle ýuky V tomto modulu se naučíte íce ýkonných způsobů, jak použít data z databáze. Naučíte se: formátoat záznamy databáze na weboé stránce přidat komponentu, která umožňuje nahrání souborů do databáze u weboé stránky automaticky naigoat ze stránky na stránku automatizoat některé administrační úlohy databáze Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 25

30 Požadoaný čas Dokončení tohoto modulu by mělo trat přibližně 1 hodinu a 30 minut. Pokud se rozhodnete zkoumat další fazety dynamických weboých stránek při práci s ýukoým programem, dokončení může trat déle. Předpoklady Pokud jste již dokončili Modul 1: Vytoření weboých stránek s datoými připojeními, přeskočte zbytek této sekce předpokladů a přejděte do Lekce 2.1: Formátoání tabulky dat na stránce 29. Pokud začínáte pracoat s tímto ýukoým programem s modulem 2, bez toho, že byste nejpre proedli modul 1, musíte nejpre naimportoat požadoané prostředky, nastait cíloý serer a nastait připojení k databázi. Import požadoaných prostředků: 1. Importoat projekt. Přepněte na weboou perspektiu (klepnutím na Okno Oteřít perspektiu Web). 2. V pohledu Průzkumník projektů weboé perspektiy se ujistěte, že projekt ClassifiedsTutorial ypadá jako následující obrázek: Chcete-li nastait cíloý serer: 1. V pohledu Průzkumník projektů weboé perspektiy klepněte praým tlačítkem myši na ClassifiedsTutorial a yberte Vlastnosti. 2. V seznamu lastností klepněte na Serer. 3. V seznamu ýchozích sererů yberte serer, který chcete použít jako předolbu. Klepněte na Použít. 4. V seznamu lastností klepněte na Zaměřené běhoé komponenty. 5. V seznamu běhoých komponent klepněte na weboou komponentu, která odpoídá sereru, který jste ybrali. Klepněte na OK. Pokud serer, který chcete použít, není seznamu zaměřených běhoých komponent, zařete praconí prostředí a nainstalujte serer, který chcete použít. Když je serer nainstaloán, postupujte podle instrukcí, abyste nastaili cíloý serer. 26 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

31 Poznámka: Pokud neidíte žádné serery seznamu Předolených sererů a nainstaloali jste běhoé komponenty sererů, je možné, že bude potřeba serer nakonfiguroat. Chcete-li nakonfiguroat serer, můžete proést následující: 1. Klepněte praým tlačítkem myši na soubor all_records.jsp, pak klepněte na Spustit jako Spustit na sereru. 2. Vyberte Ručně definoat noý serer. 3. Vyberte serer, který jste nainstaloali. 4. Následujte pokyny průodce, abyste nakonfiguroali serer. Při prním spuštění na sereru můžete obdržet chybu. Chybu opraíte tak, že nastaíte cíloý serer dle ýše uedeného popisu, restartujete serer pohledu Serery a znou zaedete weboou stránku prohlížeči. Pokud půjdete zpět dříe popsanými kroky pro nastaení cíloého sereru, zjistíte, že předolený serer je ten, který jste nakonfiguroali. Pokud je serer nainstaloán, ale ne nakonfiguroán, nyní se objeí seznamu sererů, z nichž můžete ybrat předolený cíl. Další informace o implementaci SDO na jiné serery než WebSphere Application Serer uádí Téma nápoědy: Implementace SDO na jiných sererech než WAS. Chcete-li nastait připojení k databázi: 1. V pohledu Průzkumník projektů klepněte praým tlačítkem myši na ClassifiedsTutorial a yberte Vlastnosti. Oteře se okno ClassifiedsTutorial pro pohled Vlastnosti. 2. Klepněte na Připojení JDBC. 3. Ve lastnostech připojení JDBC klepněte na Noé. Oteře se okno Noé připojení JDBC. 4. Klepněte na Vytořit noé připojení, potom na tlačítko Další. 5. V seznamu Vybrat spráce databáze rozbalte Derby, pak yberte V poli Umístění databáze klepněte na Procházet a yberte <workspace_location>\classifiedstutorial\ WebContent\\database, kde je <workspace_location> adresářem aší aktuální praconí oblasti. Klepněte na OK, abyste zařeli okno Najít složku. 7. V poli Umístění třídy zadejte umístění souborů JAR, které implementují třídu oladače JDBC, nebo klepněte na Procházet, abyste ybrali umístění ze systému souborů. Jakmile zolíte umístění souborů JAR, klepněte na tlačítko Oteřít. 8. Možná budete muset zadat ID užiatele pro přístup do databáze. Heslo není požadoáno. Průodce Noé připojení k databázi by měl ypadat takto: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 27

32 9. V průodci Noá připojení JDBC klepněte na tlačítko Dokončit. Vrátíte se do okna Vlastnosti pro ClassifiedsTutorial. 10. Klepněte na Konfiguroat připojení databází projektu. Oteře se okno Vlastnosti připojení JDBC. 11. Klepněte na Uprait edle sekce Podrobnosti připojení běhoých komponent. Vyberte Použít připojení spráce oladače jako typ připojení běhoé komponenty. Klepněte na Dokončit, pak klepněte na OK. Můžete procházet soubory e weboém projektu ýukoého programu. Abyste oteřeli soubor, poklepejte na něj okně Průzkumník projektů. Chcete-li zobrazit znázornění toho, jak stránky souisejí, jako mapu, poklepejte na Naigace weboé stránky Průzkumníku projektů. Většinu aší práce tomto zorku bude zahrnoat následující soubory: all_records.jsp Toto je domoská stránka webu. Zobrazí každý krátký inzerát databázi. new_record.jsp Tato stránka bude použita pro ytoření noého krátkého inzerátu. 28 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

33 update_record.jsp Tato stránka bude použita databázi pro změnu podrobností o inzerátu nebo pro jeho odstranění. classifiedtemplate.jtpl Jedná se o šablonu pro stránky sereru. Zahrnuje prky jako tabulku a šedý pruh s logem Vítejte Classifieds, které jsou na každé stránce. Tato stránka má také dě naigační karty pod šedým pruhem s logem, které edou do domoské stránky a do noé stránky krátkých inzerátů. Lekce 2.1: Formátoání tabulky dat Tabulka dat na stránce all_records.jsp má užitkoý zhled. Zobrazuje šechny záznamy databázi a odkazy na další stránky, jak bylo zamýšleno, ale není příliš atraktiní. V tomto cičení zlepšíte tuto tabulku dat přidáním údajů, jako je stránkoač, praidla stylů a obrázky položek na prodej. Přejmenoání hlaiček sloupců Ve ětšině případů nechcete, aby hlaičky sloupců e aší tabulce dat měly stejné názy sloupce z databáze. Následující kroky ám ukazují, jak přejmenoat hlaičky sloupců tabulky dat na něco hodnějšího. 1. Poklepejte na stránku all_records.jsp pohledu Průzkumník projektů. 2. Klepněte na hlaičku sloupce HlaníKategorie tabulce dat. 3. V pohledu Vlastnosti klepněte na kartu h:outputtext a změňte textoé pole Hodnota z HlaníKategorie na Kategorie. 4. Chcete-li, přejmenujte další sloupce. 5. Uložte stránku. Formátoání ýstupních komponent Můžete také formátoat ýstupní komponenty. Nyní budete formátoat ýstupní komponentu {CENA}, aby se objeila jako hodnota měny namísto řádného čísla. 1. Klepněte na ýstupní komponentu {CENA} na stránce. 2. V pohledu Vlastnosti najděte rozbaloací seznam Typ a yberte Měna. Nyní se zobrazí cena každé položky e stylu měny namísto řádného čísla. Ostatní styly a formáty jsou dostupné pro odlišné typy dat, jako jsou celkoá procenta, data a časy. Můžete také přizpůsobit formát ýstupní komponenty pro zobrazení typu dat, které nejsou uedeny pohledu Vlastnosti, jako např. telefonní číslo. 3. Uložte stránku. Třídění dat Práě teď nejsou data uedena žádném pořadí. Aby užiatelé měli k dispozici íce organizoaný seznam inzerátů, seřaďte seznam záznamů podle kategorie, tak aby byly podobné položky společně seskupeny. 1. Klepněte praým tlačítkem myši na all_recordlist (ADS) pohledu Data stránky (Okno Zobrazit pohled Data stránky) a klepněte na Konfiguroat kontextuální nabídce. Oteře se okno Konfigurace seznamu relačních záznamů. Pokud se objeí aroná zpráa a sděluje ám, že připojení k aší databázi nemohlo být zaedeno, nechte serer běžet po testoání webu. Pokud se toto stane, klepněte na zrušení každého dialogu a zastate serer, jak je ysětleno sekci Zastaení sereru Testoání webu. 2. Vyberte Načíst existující záznamy nebo seznam záznamů z rozsahu platnosti a Znoa 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 ybrali ADS, pak klepněte na Další. 4. Na praé straně dalšího okna klepněte na Uspořádat ýsledky. Oteř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 ypadat takto: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 29

34 7. Klepněte na Zařít, abyste zař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ů databázi. Přidání stránkoače Můžete použít stránkoač, spíše než zobrazoání každého záznamu naší tabulce dat. Stránkoač automaticky rozdělí záznamy do stránek nastaené elikosti bez ytáření jakýchkoli noých souborů JSP e ašem projektu. 1. Klepněte kdekoli unitř tabulky dat. 2. V pohledu Vlastnosti klepněte na h:datatableex ze seznamu karet HTML naleo od pohledu. 3. Klepněte na kartu Zobrazení oleb pod h:datatableex. 4. V poli Řádky na stránku zadejte Klepněte na tlačítko u Přidání stránkoače e weboém stylu. Obrázek, který naznačí, jak bude ypadat stránkoač, se objeí dolní části tabulky dat. Vizualizace stránkoače Nárháři stránek je obrázek zástupného objektu a e skutečnosti nereflektuje, kolik stránek bude zobrazeno, protože toto může být určeno, když se stránka zaádí do prohlížeče. 6. Uložte stránku. Můžete experimentoat s jinými styly stránkoačů a komponentou statistiky stránky, abyste yhledali spránou elikost stránky, pokud chcete. Rozržení komponent e skupinoém okénku jako na seznamu Místo toho, abyste měli jednu ýstupní komponentu každém sloupci tabulky dat, je možné kombinoat prky unitř sloupců, abyste produkoali íce atraktiních rozržení. Použijete skupinoé okénko pro uspořádání komponent podobně, jako byste použili skrytou tabulku HTML. Poté co přidáte komponentu obrazu, abyste izuálně zlepšili web, ezmete ětšinu textoých informací o každém inzerátu a umístíte je do jednotliého sloupce tabulky dat, což bude poté označeno jako PODROBNOSTI. 1. Klepněte na zásuku Rozšířené komponenty Faces paletě, abyste ji oteřeli. Přetáhněte Panel - Skupinoé okénko do sloupce NÁZEV tabulky dat. Oteře se okno Vybrat typ. 30 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

35 2. Vyberte Okénko jako typ skupinoého okénka okně Výběr typu a klepněte na OK. Toto skupinoé okénko rozrhne komponenty umístěné unitř jednotliém sloupci nebo řádku a může být orientoáno buď ertikálně nebo horizontálně. 3. Klepněte na skupinoé okénko pro jeho ýběr. 4. S pomocí pohledu Vlastnosti změňte Orientaci na Vertikální. 5. Přetáhněte komponentu {NÁZEV} do skupinoého okénka se seznamem. Instruktážní text okénku skupiny zmizí, jakmile do něj přidáte komponentu. 6. Přetáhněte komponentu Obraz ze zásuky Rozšířené komponenty Faces palety do skupinoého okénka se seznamem. To pomáhá uolnit komponentu obrazu na dolní hraně skupinoého okénka, abyste se ujistili, že obraz bude umístěn pod náze. 7. Klepněte na komponentu obrazu, kterou jste práě přidali. 8. Použijte oblast Velikost pohledu Vlastnosti pro nastaení Šířky na 60 pixelů a Výšky na 50 pixelů. Toto zajistí, že ať je jakákoli elikost obrázků databázi, ždy se na stránce objeí jako 60x 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í obrazoá data nalezená e sloupci FOTO pro každý záznam. Pokud není sloupec FOTO (ByteArray) ypsán, klepněte praým tlačítkem myši na all_recordlist (ADS) pohledu Data na stránce a yberte nabídce Konfiguroat. Klepněte na OK, abyste zařeli okno URL, když se oteř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áacího pole u FOTO (BajtoéPole) a klepněte na Dokončit. 10. Klepněte na grafiku, kterou jste ložili. Na kartě hx:graphicimageex pohledu Vlastnosti klepněte na tlačítko Výběr datoého objektu na stránce edle pole Typ. Oteře se okno Vybrat datoý objekt stránky. 11. Klepněte, abyste rozbalili all_recordlist (Serice 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 ypadat takto: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 31

36 Upřesnění rozržení s mřížkou skupinoého okénka Skupinoé okénko může také organizoat komponenty e formátu jako tabulka. Typ seznamu skupinoého okénka může mít pouze jeden řádek nebo sloupec, ale typ mřížky skupinoého okénka může mít liboolný počet řádků a sloupců. V těchto krocích přesunete komponenty {CENA} a {TELEFON} do sloupce POPIS tabulky dat a zahrnete pro ně štítky. 1. Přetáhněte komponentu Panel - Skupinoé okénko ze zásuky Rozšířené komponenty Faces palety do sloupce POPIS tabulky dat. Oteř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 noou mřížku skupinoého okénka. 4. Použijte pohled Vlastnosti pro nastaení počtu Sloupců pro toto skupinoé okénko na Uolněte komponentu Výstup ze zásuky komponent Faces palety do mřížky skupinoého okénka. Tato ýstupní komponenta bude štítkem pro popis položky na prodej. Každá stupní komponenta bude mít štítek jako tento leé buňce tabulky. 6. Klepněte na komponentu Výstup (objeí se nárháři stránek jako ý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 skupinoého okénka. Pokud máte potíže s přetáhnutím komponent na spráné místo e skupinoém okénku, zkuste držet tlačítko myši dole a sledujte kurzor. Umístění kurzoru e skupinoém okénku označuje, kde se komponenta objeí, když pustíte tlačítko myši. Pro toto cičení byste měli uolnit tlačítko myši, když je kurzor prao od předchozí komponenty. 8. Přetáhněte Výstupní komponentu z palety a přejděte na praou stranu skupinoého okénka. 9. Použijte pohled Vlastnosti pro přiřazení Hodnoty Ceny:. 10. Přetáhněte existující ýstupní komponentu {CENA} naprao od ýstupního textu Ceny. 11. Stejným způsobem přetáhněte noou 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 skupinoého okénka dopraa od ýstupního textu Telefon. Vaše stránka by nyní měla ypadat takto: 32 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

37 13. Odstraňte prázdné sloupce CENA a TELEFON tabulce dat. Sloupec odstraníte klepnutím na sloupec a oteřením pohledu Vlastnosti. Poté klepněte na h:datatable ze seznamu značek HTML naleo od pohledu, yberte sloupec, který chcete odstranit ze seznamu naprao od pohledu a klepněte na Odebrat. 14. Klepněte na hlaičku sloupce Popis a použijte pohled Vlastnosti pro změnu jeho pole Hodnota na Podrobnosti. Stránka by nyní měla ypadat takto: 15. Uložte stránku a otestujte ji. Pokud nejste seznámeni se spuštěním aplikací na sereru, iz Lekce 1.3: Testoání webu na stránce 13. Když testujete stránku, měla by ypadat takto: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 33

38 Liboolné inzeráty, které jste přidružili k obrazu, se zobrazí 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. Kontrolní bod lekce Dokončili jste lekci 2.1. V této lekci jste se naučili, jak různými způsoby formátoat tabulku dat. Naučili jste se, jak: změnit hlaičky sloupců třídit data tabulce přidat stránkoač pro rozdělení dat do několika menších weboých stránek použít skupinoá okénka různými způsoby pro změnu rozržení tabulky na weboé stránce 34 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

39 Lekce 2.2: Použití komponenty pro nahrání souborů V této lekci se naučíte, jak poskytoat užiatelům schopnost odesílat obrázky pro krátké inzeráty. Tato funkce je důležitá hlaně na stránkách new_record.jsp and update_record.jsp. Komponenta pro nahrání souborů užiatelům pooluje, aby procházeli systémem souborů, nahráli si soubor do databáze a zobrazili si tento soubor okamžitě databázi. Poněadž procedura pro použíání aktualizační komponenty souboru je podobná jak pro ytořené tak aktualizační případy, toto cičení poolí aktualizační stránce, aby změnila aktuální obraz pro jakýkoli ýpis. Chcete-li, můžete proést ty samé změny do noé stránky pro záznam, jakmile skončíte s aktualizační stránkou. Přidání aktuální fotky na stránku Všimněte si, že aktualizační formulář není nic íc než tabulka HTML s nějakým statistickým textem a nějakými stupními komponentami sázanými ke sloupcům relačním záznamu update_record. Můžete přidat řádky a sloupce pro modifikoání formátu, tak jako modifikoání jakékoli tabulky HTML. V následujících krocích přidáte noý řádek pro zobrazení aktuální fotky. Přidání řádku a sloupců je komplikoanější tabulce dat zobrazující seznam relačních záznamů. Informace o přidání sloupců do tabulky dat iz Lekce 1.2: Připojení k databázi a zobrazení dat na weboé stránce na stránce Poklepejte na stránku update_record.jsp pohledu Průzkumník projektů. 2. Umístěte kurzor do prní buňky (leá horní) tabulky. Tato buňka je označena ID. 3. V hlaní nabídce klepněte na Tabulka Zadat a přidat. Oteře se dialog Přidat řádky nebo sloupce. Klepněte na Řádky, potom na Nad zolenou buňku. Takto ytoříte noý řádek horní části tabulky, který bude obsahoat aktuální fotku záznamu. Klepněte na OK. 4. Co leé buňky noého řádku zapište Aktuální fotka:; tento zápis bude mít funkci štítku. 5. Přetáhněte komponentu Obraz ze zásuky komponent Faces palety do buňky, která je nejíce prao od noého řádku. Na rozdíl od předešlého cičení poolíte užiateli, aby si prohlédl úplný obraz bez omezení elikosti, neměňte šířku a ýšku pohledu Vlastnosti. 6. Sažte komponentu obrazu do FOTO sloupce update_record přetáhnutím sloupce FOTO z pohledu Data stránky na noou komponentu obrazu. Komponenta obrazu je nyní sázána do sloupce FOTO databáze. 7. S ybraným grafickým obrazem přejděte do pohledu Vlastnosti a klepněte na tlačítko Vybrat datoý objekt stránky edle pole Typ. Oteře se okno Vybrat datoý objekt stránky. 8. Klepněte na update_record (serisní datoé objekty) update_record (ADS) IMAGETYPE (řetězec). 9. Klepněte na OK. Nyní se na stránce zobrazí aktuální fotografie pro krátký inzerát, pokud nějakou má. Vaše stránka by nyní měla ypadat takto: Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 35

40 Přidání komponenty pro nahrání souborů na stránku Dále přidejte noý řádek na konec tabulky, abyste zahrnuli komponentu pro nahrání souborů. 1. Nastate kurzor na poslední řádek a klepněte na něj. 2. Z pruhu nabídky klepněte na Tabulka Přidat řádek pod. 3. Do prní buňky noého řádku zadejte Noá fotografie: jako štítek. 4. Přetáhněte komponentu pro nahrání souborů ze zásuky Rozšířené komponenty Faces palety do poslední buňky noého řádku. 5. Tak jak jste připojili komponentu obrazu, připojte komponentu pro nahrání souborů do sloupce FOTO relačního záznamu update_record. {FOTO} se zobrazí textoém poli, aby bylo idět, že je tato komponenta sázána se sloupcem FOTO a že se nahraný soubor umístí do daného sloupce. Vaše stránka by nyní měla ypadat takto: 36 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

41 6. Uložte stránku a otestujte ji, pokud chcete. Kontrolní bod lekce Dokončili jste lekci 2.2. V této lekci jste se naučili, jak manipuloat s tabulkou na aktualizační stránce, přidat aktuální fotografii do tabulky a přidat komponentu pro nahráání souborů do tabulky. Lekce 2.3: Použití naigačních praidel V této lekci se naučíte, jak se nastait praidla naigace pro přesměroání užiatele sereru na konkrétní weboé stránky. V nastaení stránky new_record.jsp musí být užiatel elmi opatrný a nezadat číslo ID, které se již použíá, protože každý záznam databázi musí mít jedinečné číslo ID. To bylo podrobněji ysětleno poznámce Předcházení duplicitním klíčům sekci Lekce 1.5: Programoání zadáacího tlačítka na stránce 18. V této lekci zkontrolujete, zda je zadané ID jedinečné, a pokud nebude, pošlete užiatele na chyboou stránku, která popisuje problém a radí užiateli, jak jej oprait. Naigační praidla ám umožňují nasměroat užiatele na chyboou stránku nebo na stránku all_records.jsp poté, co se zkontroluje, zda užiatel zadal duplicitní číslo ID nebo ne. Přiřadíte aliasy těmto děma možným ýstupům a pak tyto da aliasy propojíte se spránými cíloými stránkami. V tomto příkladě bude chyba na stránce create_record.jsp signalizoat alias ERROR_CREATE, který odešle užiatele na chyboou stránku. Pokud užiatel spráně yplní stránku create_record.jsp, bude signalizoat alias MAIN, který bude spojen se stránkou all_records.jsp, jako obykle. Nastaení praidel 1. Poklepejte na stránku new_record.jsp pohledu Průzkumník projektů. 2. Klepněte na tlačítko Zapsat noý ýpis na stránce. Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 37

42 3. V pohledu Vlastnosti klepněte na Přidat praidlo. Oteře se okno Přidání naigačního praidla. Prní praidlo odešle užiatele na chyboou stránku s názem create_error.jsp, pokud je něco špatně při ytáření a potrzoání noého záznamu databázi. 4. V poli Stránka zadejte error_create.jsp. Tato stránka neexistuje, ale pro účely tohoto ýukoého programu si můžete předstait, že ano. 5. Klepněte na přepínač Výsledek s názem. 6. Zadejte ERROR_CREATE do textoého pole za přepínačem Výsledek s názem. 7. Klepněte na přepínač Pouze tato stránka, protože neexistuje jiná stránka na webu, kde by mohl užiatel spustit tuto konkrétní chybu zadáním duplicitního čísla ID. Klepněte na OK. Další praidlo poede na all_records.jsp, pokud užiatel zadal platné číslo ID. 8. Klepněte na tlačítko Přidat praidlo, abyste znou oteřeli okno Přidání naigačního praidla. 9. Použijte rozeírací okénko Stránka pro ýběr all_records.jsp. 10. Klepněte na zaškrtáací políčko Výsledek s názem a pak zadejte MAIN do textoého pole. 11. Poněadž možná budete chtít znou použít toto praidlo na jiné stránce (například, stránka update_record.jsp), klepněte na přepínač Všechny stránky pod Toto praidlo se použíá pro. Klepněte na OK. Tato dě praidla se nyní zobrazí pohledu Vlastnosti. Akce příkazů return pro aliasy z tlačítka Vše, co nyní zbýá, je aktioat noá naigační praidla. Přidáte da příkazy return do kódu pro tlačítko Zapsat noý ýpis. Tyto příkazy return yzou odpoídající alias, takže bude užiatel odeslán na odpoídající stránku, která je nastaena naigačním praidle. 1. Klepněte na tlačítko Zapsat noý ýpis. 2. Oteřete pohled Rychlá úpraa. 3. V pohledu Rychlá úpraa najděte řádek, kde je napsáno } catch (Throwable e) {. Tato funkce catch se spustí, když užiatel zadá duplicitní číslo ID. 4. Odeberte šechen kód mezi leou složenou záorkou { na konci tohoto řádku a další praou složenou záorkou } o několik řádků níže. Neodebírejte ani jednu ze záorek. 5. Na místo kódu mezi záorkami zadejte tento text:return "ERROR_CREATE"; 6. Dále odeberte šechen kód pod poslední praou složenou záorkou } a na jeho místo zadejte tento text: return "MAIN"; Tento krok odebere akci gotopage, kterou jste přidali e cičení 1.4. Tento kód již nepotřebujete, protože naigační praidla dělají totéž. Kód tlačítka by nyní měl ypadat takto: 38 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

43 7. Uložte stránku a otestujte ji, chcete-li. Volitelně můžete ytořit jednoduchou chyboou stránku s názem create_error.jsp, která ysětlí užiatelům, že nastala chyba při ytáření ýpisu, a zkusí jinou hodnotu ID. Pak můžete otestoat tato naigační praidla tak, že se pokusíte přidat noý ýpis, který bude použíat existující hodnotu ID (jako je 1). Kontrolní bod lekce Dokončili jste lekci 2.3. V této lekci jste se naučili, jak použíat naigační praidla pro ytoření chyby, když se užiatel pokusí zadat neplatnou hodnotu ID, nebo odeslat užiatele na all_recordlist.jsp, pokud zadá spráné ID. Lekce 2.4: Použití automatického generoání klíče V předchozí lekci jste nastaili naigační praidla, abyste se ujistili, že užiatelé zadali jedinečné ID pro noé krátké inzeráty. Tento proces je náročný a nerealistický, protože nechcete, aby užiatelé sereru zjistili jedinečné ID postupem pokus a omyl. V této lekci nastaíte automatické generoání klíče, takže databáze přiřadí jedinečné číslo každému noému záznamu databázi automaticky. Automatické generoání klíčů je složité téma, ale stručně řečeno, databáze může ybrat noé klíče, pokud má speciální tabulku yhrazenou pro generaci klíče. Tato tabulka musí mít seznam nepoužíaných klíčů jednom sloupci (sloupec přírůstek) a seznam čísel pořadí začínajícím 1 jiném sloupci (sloupec identita). Když databáze potřebuje noý klíč, ezme klíč z řádku s 1 totožném sloupci a poté připraí noý klíč pro příště. Více informací o automatickém generoání klíčů: Abyste mohli nastait automatické generoání klíčů, musíte ědět pár ěcí o tom, jak to funguje. Chcete-li použít automatické generoání klíčů, databáze musí mít stranou tabulku určenou pro tento účel. Tato tabulka má da sloupce: Sloupec přírůstek ukládá dostupné klíče. Když databáze potřebuje noý jedinečný klíč, načte jej z tohoto sloupce. Sloupec identita je seznam čísel s pouze jednou instancí čísla 1. Tento sloupec říká databázi, který klíč ybrat ze sloupce přírůstek. Sloupec identita je primárním klíčem tabulky pro generoání klíčů. Když databáze potřebuje noý jedinečný klíč, yhledá řádek s hodnotou sloupce identity 1. Hodnota sloupce s přírůstkem tohoto řádku drží další dostupný klíč. Databáze použije tento klíč a aktualizuje tabulku, takže příště bude k dispozici noý klíč. Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 39

44 Zde je příklad tabulky pro generoání klíčů. Jaký je další dostupný klíč pro tuto databázi? Odpoěď je pod tabulkou. Tabulka 1. Tabulka pro generoání klíčů Sloupec Identita Sloupec Přírůstek Dalším dostupným klíčem této tabulce je 65, protože tento klíč (e sloupci s přírůstkem) je e stejném řádku jako 1 e sloupci identity. Poté, co zachytíte další dostupný klíč z tabulky, tabulka se aktualizuje pro příště. Databáze může také načíst íce klíčů najednou, když ezme hodnotu sloupce přírůstku z íce než jednoho řádku. Zkráceně, aby automatické generoání klíčů fungoalo, musíte mít pouze nastaenou tabulku pro generoání klíčů se děma sloupci: sloupec s primárním klíčem, který se použije jako sloupec identity, a sloupec pro uložení dalšího dostupného klíče. Tato tabulka musí být inicializoána s jedním záznamem, jehož hodnota sloupce identity je 1 a jehož hodnota sloupce přírůstků je prním dostupným klíčem, který se použije. Když máte toto nastaení, jste připraeni použít automatické generoání klíčů. Nastaení automatického generoání klíčů Ukázkoá databáze poskytoaná tímto ýukoým programem má tabulku pro generoání klíče pojmenoanou KLÍČE. Její da sloupce, jak je popsáno nahoře, budou dodáat noé číslo ID pro každý noý záznam. V těchto krocích nastaíte relační záznam create_record, aby bral číslo ID z tabulky KLÍČE. 1. Poklepejte na stránku new_record.jsp pohledu Průzkumník projektů. 2. Poklepejte na relační záznam create_record pohledu Data na stránce. Oteře se okno Konfigurace relačního záznamu. 3. Klepněte na Opakoané použití definice metadat z existujícího záznamu nebo seznamu záznamů a Vyplnit záznam existujícími daty z databáze, pak klepněte na Další. 4. Vyberte připojení k databázi z rozbaloacího seznamu, pak klepněte na Další. 5. Na praé straně okna Konfigurace seznamu relačních záznamů je seznam odkazů. Klepněte na Automatické generoání klíče. Oteře se okno Generoání klíčů. 6. Vyberte Použít automatické generoání klíče. 7. Klepněte a rozbalte seznam W5SAMPLE, pak klepněte na tabulku KEYS. 8. V poli Výběr sloupce identity klepněte na KEY_ID. 9. V poli Výběr sloupce přírůstku klepněte na NEXT_KEY. Poněadž potřebujete pouze jeden klíč pro ID inzerátu, necháte Klíče zachycené současně, nastaené na 1. Pokud byste potřeboali ícenásobné klíče, toto nastaení by nechalo databázi ybrat šechny najednou. Okno Konfigurace datoého objektu by mělo ypadat takto: 40 Zobrazení dynamických informací na weboých stránkách s pomocí JaaSerer Faces

45 10. Klepněte na Zařít, abyste zařeli okno Generace klíče, pak na Dokončit, abyste použili změny. Nyní bude ID pole automaticky generoáno pro každý noý záznam. Dále musíte odebrat stupní pole pro ID, aby užiatel nemohl zadat hodnotu. 11. Umístěte kurzor horním řádku tabulky stupního formuláře klepnutím na text Id:. 12. Klepněte na Tabulka Odstranit Odstranit řádek. 13. Uložte stránku. Volitelně: pokud jste chtěli idět, který klíč je pro ás práě generoán, mohli jste místo toho odstranit stupní komponentu pro číslo ID a nahradit ji ýstupní komponentou sázanou ke sloupci create_record. Poté by se automaticky objeil generoaný klíč na začátku formuláře, ale užiatel by jej nemohl změnit. Testoání dokončeného ýukoého programu Když jste připraeni publikoat aši weboou aplikaci, potřebujete serer, který ji bude hostit, tak aby užiatelé měli přístup k webu přes Internet. Nicméně, pro testoání ašeho webu můžete použít dostupný běhoý serer pro simulaci sereru pro testoací účely. Informace o tom, jak testoat weboou stránku, iz Lekce 1.3: Testoání webu na stránce 13. Kontrolní bod lekce Dokončili jste lekci 2.4. V této lekci jste se naučili, jak nastait automatizoané generoání klíčů. Modul 2: Souhrn Dokončili jste Modul 2: Přidání rozšířených funkcí. Zobrazit dynamické informace na weboých stránkách s JaaSerer Faces 41