< Wstecz | Dalej >

Lekcja 2.1: Formatowanie tabeli danych

Tabela danych na stronie all_records.jsp ma funkcjonalny wygląd. Są tu wyświetlane wszystkie rekordy z bazy danych oraz odsyłacze do innych stron, zgodnie z zamierzeniami, ale nie jest zbyt atrakcyjna. W tym ćwiczeniu użytkownik poprawi wygląd tabeli danych, dodając program stronicujący, reguły stylu oraz obrazy przedmiotów na sprzedaż.

Zmiana nazw nagłówków kolumn

O tym zadaniu
W wielu przypadkach niepożądane jest, aby nagłówki kolumn w tabeli danych były takie same, jak nazwy kolumn w bazie danych. Poniższe kroki pokazują sposób zmiany nazw nagłówków kolumn tabeli danych na bardziej odpowiednie.
  1. Kliknij dwukrotnie stronę all_records.jsp w widoku Eksplorator korporacyjny.
  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ę.

Formatowanie komponentów wyjściowych

O tym zadaniu
Można również sformatować komponenty wyjściowe. W ramach tych kroków użytkownik sformatuje komponent wyjściowy {PRICE} tak, aby wyglądał jak wartość walutowa, a nie zwykła liczba.
  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ę.

Sortowanie danych

O tym zadaniu
Obecnie dane nie są wyświetlane w żadnej kolejności. Aby udostępnić użytkownikom lepiej zorganizowaną listę ogłoszeń, należy uporządkować listę rekordów według kategorii w celu zgrupowania podobnych pozycji.
  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:
    Panel Uporządkowanie według w oknie Konfiguruj listę rekordów relacyjnych.
  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.

Dodawanie programu stronicującego

O tym zadaniu
Zamiast wyświetlać od razu każdy rekord w tabeli danych można użyć programu stronicującego. Program stronicujący automatycznie dzieli rekordy na strony o określonej wielkości bez tworzenia w projekcie nowych plików JSP.
  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.

Tworzenie układu komponentów pola grupy jako listy

O tym zadaniu
Zamiast wyświetlania dokładnie jednego komponentu wyjściowego w każdej kolumnie tabeli danych można połączyć elementy w kolumnach w celu utworzenia ciekawszego układu. Do uporządkowania komponentów posłuży pole grupy użyte w sposób podobny, jak ukryta tabela HTML. W szczególności po dodaniu komponentu obrazu w celu wizualnego udoskonalenia serwisu większość informacji tekstowych na temat każdego ogłoszenia zostanie umieszczonych w pojedynczej kolumnie tabeli danych, która następnie otrzyma nazwę DETAILS.
  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 karcie 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ę.
Wyniki
Strona powinna wyglądać teraz następująco:
Aktualny wygląd strony.

Dopracowywanie układu za pomocą pola grupy siatki

O tym zadaniu
Pole grupy może również porządkować dane w formie podobnej do tabeli. Pole grupy typu lista może mieć tylko jeden wiersz lub kolumnę, ale pole grupy typu siatka może mieć dowolną liczbę wierszy i kolumn. W ramach tych kroków użytkownik przeniesie komponenty {PRICE} i {PHONE} do kolumny DESCRIPTION tabeli danych i dołączy ich etykiety.
  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:
    Aktualny wygląd strony.
  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:
    Aktualny wygląd strony.
  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.
Wyniki
Podczas testowania strona powinna wyglądać następująco:
Aktualny wygląd strony podczas testowania.

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.

Punkt kontrolny lekcji

Lekcja 2.1 została zakończona. W ramach tej lekcji użytkownik nauczył się formatować tabelę danych na różne sposoby.
Użytkownik nauczył się, w jaki sposób:
  • Zmieniać nagłówki kolumn.
  • Sortować dane w tabeli.
  • Dodawać program stronicujący, aby podzielić dane na kilka mniejszych stron WWW.
  • Korzystać z pól grup na różne sposoby, aby zmienić układ tabeli na stronie WWW.
< Wstecz | Dalej >
Opinie