Interaktywne formularze – Spry w praktyce | Paweł Zakrzewski - Adobe Certified Expert

Wielu z nas budując formularze na stronach WWW spotkało się z problemem poprawnego wypełniania konkretnych pól przez użytkowników. Puste pola, błędny format wprowadzonych informacji, nie ułatwiają później automatycznej obsługi przesłanych danych.

Dzięki użyciu elementów Spry i programu Adobe Dreamweaver CS4, problem ten można niemal całkowicie wyeliminować.

Do analizy tego przykładu posłużymy się fragmentem strony internetowej i gotowym już formularzem . Na naszej stronie zbudowany jest prosty formularz, wykorzystywany do przesyłania typowych informacji zwrotnych – hipotetycznego zamówienia – wstępnego zgłoszenia na szkolenie komputerowe.

Cały formularz wykonany jest i formatowany na podstawie prostej dwukolumnowej tabeli oraz kilku dodatkowych definicji stylów CSS. Na pierwszy rzut okna, nie różni się niczym od tysięcy innych znanych z różnorodnych stron WWW.

Wszystkie jego elementy posiadają już unikalne ID oraz przypisaną odpowiednią klasę CSS. Sam formularz jest już skonfigurowany i jego użycie pozwoli na przesyłanie wprowadzonych danych. Jest tylko jeden problem. Co stanie się w chwili, gdy użytkownik nie wprowadzi wszystkich danych niezbędnych do wysłania formularza?

Zwykle walidacja formularza odbywa się na poziomie serwera i wymaga użycia specjalnych skryptów napisanych w języku CGI, PHP, ASP czy innym. Oznacza to, że każdy twórca strony internetowej powinien dysponować w swym arsenale odpowiednim skryptem, umieć go skonfigurować i wykorzystać w praktyce.

Czy tak zawsze jest? Nie trzeba czarodziejskiej kuli by szybko zdąć sobie sprawę, że nie zawsze takie rozwiązanie jest łatwe a nawet możliwe do użycia. Może więc zrobić to nieco inaczej?

Dzięki użyciu Adobe Dreamweaver CS4, elementów Spry i gotowych skryptów w języku JavaScript możemy pokusić się o wykonanie walidacji formularza bezpośrednio na stronie bez konieczności użycia żadnych technologii serwerowych. Jest to niezwykle wygodne rozwiązania. Co więcej, bardzo dobrze wygląda na stronie i bezbłędnie działa. Nie wymaga też wiele pracy.

Dreamweaver i Spry

Już w poprzedniej wersji Dreamweaver CS3 udostępniał szereg elementów Spry ułatwiających projektowanie serwisów WWW oraz właśnie formularzy. Dziś w najnowszej odsłonie oznaczonej numerem CS4, mamy jeszcze więcej ciekawych możliwości. Czym jest więc Spry? Jak można go wykorzystać w praktyce?

Spry to nic innego jak framework technologii AJAX wykorzystany w programie Dreamweaver.

Dzięki umiejętnemu połączeniu JavaScriput, stylów CSS i często także danych zapisanych w postaci XML, Spry oferuje nam naprawdę niesamowite możliwości tworzenia ciekawych, interaktywnych stron WWW. Walidacja formularzy to tylko niezwykle ciekawy dodatek, jednak jak bardzo użyteczny, przekonajmy się w budując niewielki przykład.

Uwaga!

Dużo ciekawych informacji o technologii Adobe Spry można znaleźć w Internecie. Najlepszym miejscem, gdzie powinniśmy rozpocząć poszukiwanie własnej inspiracji jest z pewnością serwis http://labs.adobe.com/technologies/spry/home.html. Serdecznie namawiam do lektury i przeglądania dostępnych tam przykładów. Okazuje się, że Adobe Spry to wiele więcej niż kilka prostych gadżetów dostępnych w programie Dreamweaver CS4.

Aby szybko przygotować walidację czyli sprawdzanie poprawności wypełnienia poszczególnych pól formularza wykorzystamy właśnie najnowsze elementy Spry dostępne w zakładce Spry panelu Insert. Dla wygody pracy (i nieco z przyzwyczajenia) cały panel Insert, domyślnie umieszczony w pionie po prawej stronie okna Dreamweavera, przeniosłem ponad górną część strony.

W ten sposób jest mi nieco łatwiej korzystać z dostępnych tu elementów. W dużym stopniu zadziałało tuż też przyzwyczajenie. Zwykle właśnie w ten sposób konfiguruje sobie ekran roboczy Dreamweavera.

Dodajemy elementy Spry do formularza

Aby skorzystać z możliwości walidacji formularzy jakie oferuje nam Dreamweaver CS4, musimy przebudować nieco nasza stronę. Pracę rozpoczynamy od modyfikacji samego formularza.

Zaznaczamy pierwsze pole formularza i w dolnym panelu Properties sprawdzamy jego nazwę – ID. To ważny moment, ponieważ za chwilę usuniemy oryginalne pole, wprowadzając w jego miejsce element Spry. Aby ten zadziałał poprawnie w przygotowanym wcześniej formularzu, musi posiadać identyczną nazwę – ID. Możemy oczywiście ułatwić sobie pracę, i widoczną w panelu Properties nazwę pola po prostu skopiować. Użyjemy ja niebawem.

Uwaga!

Oczywiście, wszystkie wprowadzane modyfikacje można także przeprowadzić w podglądzie kodu źródłowego. Adobe Dreamweaver różnorzędnie traktuje oba tryby pracy.

Przechodzimy do panelu Insert, wskazujemy zakładkę Spry, a następnie lokalizujemy element Spry Validation Text Field.

Upewniamy się, że kursor wstawiania znajduje się w odpowiednim miejscu i dodajemy nowy element formularza. W wyświetlonym oknie uważnie wprowadzamy (lub wklejamy) nazwę ID poprzednio usuniętego pola.

W rezultacie otrzymamy niemal identyczne pole formularza, zamknięte jednak w sekcji Spry o turkusowym zabarwieniu. Ten układ oferuje nam szereg ciekawych możliwości. Tym jednak zajmiemy się nieco później. Oczywiście, możemy aby zachować jednakowy wygląd formularza, zaznaczamy dodane pole i nadajemy mu wcześniej użytą klasę i ewentualnie ograniczenie co do ilości znaków.

W rezultacie pole formularza Spry wygląda niemal identycznie jak usunięty wcześniej oryginał.

Teraz w podobny sposób usuwamy i wprowadzamy kolejne elementy formularza. W trakcie tych działań należy zwrócić baczną uwagę, by zachować oryginalne nazwy nowych elementów Spry.

Oczywiście, podczas tych prac zachować należy odpowiedni typ dodawanych elementów. Tam gdzie mieliśmy do czynienia z przyciskami radiowymi, wprowadzamy element Spry Validation Radio Group (nowość w CS4), tam gdzie były to zwykłe przyciski wyboru – wprowadzamy odpowiednio Spry Validation Checkbox.

Listę programów czyli element formularza o nazwie List/Menu zastępujemy odpowiednio Spry Validation Select. W każdym przypadku zachowujemy oryginalną nazwę (ID) wymienionego obiektu. Naturalnie w tym przypadku, wprowadzamy także wszystkie konieczne dane samej listy.

Podgląd elementów Spry i formularza

Niezwykle wygodną funkcją najnowszej wersji Adobe Dreamweavera CS4 jest możliwość podglądu działania budowanej strony bezpośrednio w oknie programu. W tym celu możemy wykorzystać przycisk Live View widoczny w górnej części strony. W rezultacie, formularz, jak i inne elementy strony prezentowane są w postaci, która będzie widoczna na stronie.

A wszystko to bez opuszczania okna Dreamweavera CS4. To niezwykle wygodne. Co więcej w tym trybie możemy nawet normalnie pracować i wprowadzać odpowiednie poprawki, także w kodzie.

Aby możliwe było testowanie bieżącej strony w oknie przeglądarki internetowej, konieczne jest zapisanie efektów naszej pracy. W chwili, gdy wywołamy polecenie Save, wyświetlony zostanie zaskakujący komunikat Copy Dependend Files.

Informuje on o fakcie utworzenia dodatkowego foldera – SpryAssets ewnątrz naszego site’a. Naturalnie chcąc przesłać działającą stronę na serwer WWW, nie można zapomnieć o przesłaniu także tego właśnie katalogu. W nim bowiem zapisane są odpowiedni kod JavaScript, oraz style CSS odpowiedzialne za działanie elementów Spry.

Dodajemy walidację elementów formularza

Aby prawidłowo skonfigurować elementy walidacji formularza, zaznaczamy pierwszy przykładowy element – pole tekstowe. Staramy się kliknąć nie bezpośrednio w pole a w turkusową nazwę Spry TextField widoczną ponad nazwa pola. Wszystkie właściwości zaznaczonych elementów Spry dostępne są w dolnym panelu Properties.

Jeśli wprowadzenie danych dla bieżącego pola jest wymagane, odznaczamy i ponownie zaznaczamy przycisk Required (tak najpierw odznaczamy, a następnie ponownie zaznaczamy). Daje to nam dodatkowe możliwości. W oknie formularza widoczny jest teraz niewielki tekst w postaci: „A value is required”.

Jest to informacja tekstowa, która wyświetlona zostanie wówczas, gdy użytkownik pozostawi edytowane pole bez żadnej treści i spróbuje przesłać dane formularza. Dokładnie ten sam efekt można uzyskać zmieniając domyślny format prezentacji danych za pomocą przełącznika Preview States. Wskazanie opcji Required w miejsce Initial także aktywuje podgląd komunikatu z alertem walidacji.

Wyświetlenie tej treści zdecydowanie ułatwia edycję komunikatu w trybie wizualnym. Oczywiście, wszyscy, którzy preferują pracę z kodem HTML, mogą stosowne edycje wprowadzić bezpośrednio w źródle strony dostępnym za pomocą górnego przełącznika – Source.

W naszym przypadku wprowadzamy polski tekst w postaci typu: „wprowadź imię”, „wprowadź wymagane dane” itp. Oczywiście, dla wygody dobrze będzie jeśli skopiujemy użyty tekst by wykorzystać go później jako komunikat do kolejnych elementów naszego formularza.

Nie są to jedyne właściwości jakie możemy modyfikować dla aktywnego pola formularza. Spry pozwala także na określenie typu wprowadzanych danych. W tym celu należy skorzystać z listy Type i wskazać odpowiedni zakres treści. Dla bardziej zaawansowanych zastosowań dostępne są dodatkowe pola walidacji: Format, Pattern, Hint itd.

Dokładnie w ten sam sposób zaznaczamy kolejny element formularza zamówienia, a następnie uruchamiamy podgląd komunikatu o wymaganej treści. W miejsce oryginalnego angielskiego alertu wklejamy wykorzystany wcześniej tekst w języku polskim i ewentualnie modyfikujemy nieco jego treść. O ile to konieczne (lub przydatne) określamy także typ oraz format wprowadzonych danych.

Nieco inaczej wygląda sprawa wykorzystania elementu Spry Select czyli rozwijanej listy – List/Menu. W tym przypadku także możliwe jest wykorzystanie walidacji elementu formularza za pomocą narzędzi Spry, wykonamy to jednak w nieco inny sposób.

Do walidacji elementy Spry Select konieczne jest odpowiednie przygotowanie danych elementu <Select> formularza. W tym przypadku wprowadzamy odpowiednio etykiety – Label oraz wartości – Value dla kolejnych pozycji listy.

Ostatnią typu „Wybierz” czy też „Zaznacz program” pozostawiamy albo bez wprowadzania żadnej wartości w polu Value, lub też wprowadzamy konkretną wartość liczbową np. -1.

Obie formy możemy wykorzystać do walidacji naszej listy.

W tym celu zaznaczamy turkusowy obszar z nazwą Spry Select widoczny nieco ponad rozwijaną listą na stronie i zaznaczamy odpowiednie pole w oknie Properties.

Jeśli dodatkowe pole Value pozostało puste wskazujemy przycisk Do not allow: Balnk Value. Jeśli dodatkowa etykieta na liście zawiera konkretną wartość liczbową (u nas w przykładzie -1) wprowadzamy ją po aktywacji opcji Do not allow: Invalid value w polu obok.

Naturalnie także w przypadku rozwijanej listy wybieramy opcję Required w polu Preview States, a następnie wprowadzamy odpowiedni komunikat tekstowy.

Jeszcze inaczej wygląda sprawa walidacji przycisków typu Spry Radio Group. Mimo, że nie wykorzystujemy ich w naszej pracy, możemy jednak oznaczyć grupę przycisków jako wymaganą do przesłania formularza, a następnie za pomocą dwóch opcji: Empty Value lub Invalid Value sposób przeprowadzenia walidacji.

Ostatni ciekawy sposób walidacji dotyczy pól typu Spry Checkbox także niewykorzystywanych w naszej pracy. W tym przypadku mamy możliwość nie tylko oznaczenia przycisku jako wymagany (Requied), ale także wymuszenia wskazania dwóch lub większej liczby opcji jednocześnie. Pola Required oraz Enforce Range dostępne są po zaznaczeniu turkusowego obszaru Spry Checkbox na stronie.

Dla obu typu przycisków Spry Radio Group oraz Spry Checkbox powinniśmy wprowadzić stosowne komunikaty walidacyjne w języku polskim. Po zaznaczeniu opcji Required w polu Initial Value wprowadzamy odpowiedni tekst alertu. Oczywiście wszystkie treści możemy także zmienić w widoku kodu źródłowego strony. Odnalezienie miejsc wymagających zmiany w kodzie strony, z pewnością nie będzie trudnym zadaniem.

Po wprowadzeniu stosownych zmian nie pozostaje nic innego jak przetestować działanie formularza w oknie przeglądarki internetowej. Jeśli bez wprowadzenia wymaganych danych użyjemy przycisku Zamówienie, wyświetlone zostaną wszystkie przygoptowane komunikaty walidacyjne.

Wszystko działa całkiem dobrze, jest jednak jedno małe ale… Zarówno sposób podświetlania pól formularza jak i wygląd komunikatów nie pasują do naszej strony. Cóż z tym można zrobić? Nic prostszego, za pomocą edycji dołączonych stylów CSS z łatwością zmodyfikujemy wygląd wszystkich detali formularza i komunikatów walidacji.

Formatujemy elementy Spry

Do zmiany wyglądu sposobu podświetlenia pól tekstowych skorzystamy oczywiście ze stylów kaskadowych. Co ważne, dzięki użyciu Framework Spry, nie mamy konieczności tworzenia wszystkich definicji stylów CSS od początku. Elementy walidacji formularza – Spry to bowiem zestaw odpowiedniego kodu JavaScript jak i gotowych stylów CSS. Naszym zadaniem jest zatem edycja istniejących właściwości.

W tym celu przechodzimy do panelu CSS Styles i lokalizujemy arkusz (automatycznie tworzony jest zewnętrzny arkusz stylów) o nazwie Spry Validation Text Field, Spry Validation Select itp.

Tam odnajdziemy odpowiednie właściwości CSS odpowiedzialne za wygląd poszczególnych elementów walidacji.

Przykładowo aby zmienić wygląd komunikatu o wymaganych elementach zamówienia lokalizujemy definicję o nazwie: .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg i w dolnej części panelu CSS Styles wprowadzamy zmiany koloru tekstu czy obramowania.

Oczywiście o ile to konieczne możemy także kliknąć dwukrotnie w nazwę stylu by przejść do jego edycji w oknie edytora CSS. Wszystkie zmiany w stylach możemy wykonać także ręcznie modyfikując dokument CSS.