Lekcja 2.1: Formatowanie tabeli danych

1. Kliknij dwukrotnie stronę all_records.jsp w widoku Eksplorator projektów.
2. Kliknij nagłówek kolumny Maincategory w tabeli danych.
3. W widoku Właściwości kliknij zakładkę h:outputText i zmień pole tekstowe Wartość z KategoriaGłówna na Kategoria.
4. W razie potrzeby zmień nazwy pozostałych kolumn.
5. Zapisz stronę.

1. Kliknij na stronie komponent wyjściowy {PRICE}.
2. W widoku Właściwości odszukaj listę rozwijaną Typ i wybierz pozycję Waluta. Teraz cena każdej pozycji będzie wyświetlana w formacie walutowym, a nie jako zwykła liczba. Dla różnych typów danych są dostępne inne style i formaty, takie jak wartości procentowe, daty i godziny. Można również dostosować format komponentu wyjściowego, aby wyświetlał typ danych, który nie występuje w widoku Właściwości, taki jak numer telefonu.
3. Zapisz stronę.

1. Kliknij prawym przyciskiem myszy all_recordlist (ADS) w widoku Dane strony (Okno > Pokaż Widok > Dane strony) i wybierz opcję Konfiguruj z menu kontekstowego. Zostanie otwarte okno Konfiguruj listę rekordów relacyjnych. Jeśli wyświetlony zostanie komunikat ostrzegawczy informujący o niemożności nawiązania połączenia z bazą danych, oznacza to, że po zakończeniu testowania serwisu WWW pozostawiono działający serwer. W takim przypadku kliknij przycisk anulowania w każdym oknie dialogowym i zatrzymaj serwer w sposób opisany w sekcji "Zatrzymywanie serwera" w ćwiczeniu Testowanie serwisu WWW.
2. Zaznacz opcje Wybierz istniejący rekord lub listę rekordów z zasięgu i Ponownie wykorzystaj definicję metadanych z istniejącego rekordu lub listy rekordów, a następnie kliknij przycisk Dalej.
3. W następnym oknie zaznacz ADS, a następnie kliknij przycisk Dalej.
4. Po prawej stronie następnego okna kliknij przycisk Porządkuj wyniki. Zostanie otwarte okno Porządkowanie.
5. Na panelu Dostępne kolumny kliknij pozycję MAINCATEGORY.
6. Kliknij przycisk >, aby przenieść kolumnę MAINCATEGORY na panel Uporządkowanie według. Okno powinno wyglądać następująco:
   
7. Kliknij przycisk Zamknij, aby zamknąć okno Porządkowanie.
8. Kliknij przycisk Zakończ, aby zastosować zmiany. Teraz dane zostaną uporządkowane według kategorii. Można je sortować według dowolnej kolumny bazy danych.

1. Kliknij w dowolnym miejscu wewnątrz tabeli danych.
2. W widoku Właściwości kliknij znacznik h:dataTableEx na liście znaczników HTML z lewej strony widoku.
3. Kliknij zakładkę Opcje wyświetlania pod znacznikiem h:dataTableEx.
4. W polu Wierszy na stronę wpisz wartość 5.
5. Kliknij przycisk obok pozycji Dodaj program stronicujący w stylu WWW. Obraz wyglądu programu stronicującego zostanie wyświetlony u dołu tabeli danych. Wizualizacja programu stronicującego w Projektancie stron jest obiektem zastępczym i nie odpowiada rzeczywistej liczbie wyświetlanych stron, ponieważ można ją określić tylko po załadowaniu strony w przeglądarce.
6. Zapisz stronę. W razie potrzeby można wypróbować różne style programów stronicujących i komponentu statystyk strony w celu wybrania stylu, który najlepiej pasuje do strony.

1. Kliknij szufladę Rozszerzone komponenty składnika Faces w widoku Paleta, aby ją otworzyć. Przeciągnij komponent Panel - okno grupy do kolumny TITLE tabeli danych. Zostanie otwarte okno Wybór typu.
2. W oknie Wybór typu wybierz opcję Okno jako typ pola grupy i kliknij przycisk OK. W tym polu grupy znajdujące się w nim komponenty są układane w jednej kolumnie lub wierszu w pionie lub w poziomie.
3. Kliknij pole grupy, aby je wybrać.
4. Za pomocą widoku Właściwości zmień pole Orientacja na Pionowa.
5. Przeciągnij komponent {TITLE} do pola grupy listy. Tekst instrukcji w polu grupy zniknie po dodaniu do niego komponentu.
6. Przeciągnij komponent Obraz z szuflady Rozszerzone komponenty składnika Faces w widoku Paleta do pola grupy listy. Upuszczenie komponentu obrazu na dolnej krawędzi pola grupy pomaga zapewnić, że obraz zostanie umieszczony pod tytułem.
7. Kliknij właśnie dodany komponent obrazu.
8. Użyj obszaru Wielkość w widoku Właściwości do ustawienia parametru Szerokość na 60 piksli i parametru Wysokość na 50 piksli. Zapewni to, że bez względu na wielkość obrazów w bazie danych będą one zawsze wyświetlane na stronie w polu o wielkości 60x50.
9. Powiąż komponent obrazu z kolumną Fotografia listy all_recordlist, przeciągając kolumnę Fotografia z widoku Dane strony na komponent obrazu. Spowoduje to, że komponent obrazu będzie wyświetlał dane obrazu z kolumny Fotografia każdego rekordu. Jeśli kolumny Fotografia (ByteArray) nie ma na liście, kliknij prawym przyciskiem myszy all_recordlist (ADS) w widoku Dane strony i wybierz z menu opcję Konfiguruj. Kliknij przycisk OK, aby zamknąć okno URL, jeśli się otworzy. W oknie Konfiguruj listę rekordów relacyjnych kliknij przycisk Dalej. Wybierz ADS, a następnie kliknij przycisk Dalej. Zaznacz pole wyboru obok Fotografia (ByteArray), a następnie kliknij przycisk Zakończ.
10. Kliknij wstawiony rysunek. Na zakładce hx:graphicImageEx w widoku Właściwości kliknij przycisk Wybierz obiekt danych strony znajdujący się obok pola Typ. Zostanie otwarte okno Wybierz obiekt danych strony.
11. Kliknij, aby rozwinąć pozycje: all_recordlist (Service Data Object) > all_recordlist (ADS).
12. Kliknij pole IMAGETYPE (String).
13. Kliknij przycisk OK, a następnie zapisz stronę.

Strona powinna wyglądać teraz następująco:

1. Przeciągnij komponent Panel - okno grupy z szuflady Rozszerzone komponenty składnika Faces w widoku Paleta do kolumny DESCRIPTION tabeli danych. Zostanie otwarte okno Wybór typu.
2. Kliknij opcję Siatka jako typ komponentu do dodania, a następnie kliknij przycisk OK.
3. Kliknij nowe pole grupy siatki.
4. W widoku Właściwości ustaw wartość Kolumny dla tego pola grupy na 2.
5. Upuść komponent Dane wyjściowe z szuflady Komponenty Faces w widoku Paleta na pole grupy siatki. Ten komponent wyjściowy będzie etykietą opisu sprzedawanego przedmiotu. Każdy komponent wyjściowy będzie miał podobną etykietę w lewej komórce tabeli.
6. Kliknij komponent Dane wyjściowe (jest on wyświetlany w Projektancie stron jako outputText) i użyj widoku Właściwości do przypisania mu wartości Description: w polu Wartość.
7. Przeciągnij istniejący komponent {DESCRIPTION} na dolną krawędź pola grupy siatki. Jeśli wystąpią problemy podczas przeciągania komponentów w odpowiednie miejsce pola grupy, spróbuj przytrzymać przycisk myszy i przyjrzeć się kursorowi. Położenie kursora w polu grupy wskazuje, gdzie pojawi się komponent po zwolnieniu przycisku myszy. Do celów tego ćwiczenia należy zwolnić przycisk myszy, gdy kursor znajdzie się z prawej strony poprzedniego komponentu.
8. Przeciągnij kolejny komponent Dane wyjściowe z widoku Paleta i upuść go z prawej strony pola grupy.
9. Użyj widoku Właściwości do przypisania mu wartości Price: w polu Wartość.
10. Przeciągnij istniejący komponent wyjściowy {PRICE} na prawo od tekstu wyjściowego Price.
11. W taki sam sposób przeciągnij nowy komponent Dane wyjściowe dla etykiety komponentu {PHONE} i określ jego etykietę jako Phone:.
12. Przeciągnij istniejący komponent {PHONE} do pola grupy siatki z prawej strony tekstu wyjściowego Phone. Strona powinna wyglądać teraz następująco:
    
13. Usuń puste kolumny PRICE i PHONE tabeli danych. Aby usunąć kolumnę, kliknij ją i otwórz widok Właściwości. Następnie kliknij znacznik h:dataTable na liście znaczników HTML z lewej strony widoku, wybierz kolumnę do usunięcia z listy z prawej strony widoku, a następnie kliknij przycisk Usuń.
14. Kliknij nagłówek kolumny Description i użyj widoku Właściwości do zmiany tekstu w polu Wartość na Details. Strona powinna wyglądać następująco:
    
15. Zapisz stronę i przetestuj ją. Jeśli nie wiesz, jak uruchamiać aplikacje na serwerze, zapoznaj się z sekcją Lekcja 1.3: Testowanie serwisu WWW.

Podczas testowania strona powinna wyglądać następująco:

Dla ogłoszeń, do których nie jest przypisany obrazek, zostanie wyświetlony niepoprawny odsyłacz. W kolejnej lekcji, użytkownik dowie się w jaki sposób dodać komponent ładowania pliku do strony w celu dodawania lub zmiany obrazka dla ogłoszenia.

Lekcja 2.1 została zakończona. W ramach tej lekcji użytkownik nauczył się formatować tabelę danych na różne sposoby.