Do tworzenia aktywnych formularzy
Pobieranie 380.04 Kb.
|
|
których wartości są adresami skryptów wywołujących wyżej opisane akcje: function akcja2() { document.fgColor = 'green'; //foreground } function akcja3() { document.fgColor = 'black'; //foreground } Za pomocą zdarzenia onfocus=”akcja1” umieszczonego w obrębie <input> z id=”lastname” i skryptu zyskany został po kliknięciu w polu Nazwisko efekt wyświetlenia następującego komunikatu(rys.3): 
Rys.3 Zdarzenie wywołania komunikatu po kliknięciu kursorem myszy w polu Nazwisko W obrębie znacznika <from> atrybut onsubmit po naciśnięciu przez użytkownika przycisku submit wywołuje proces walidacji skryptu Java Script : Skrypty można umieszczać w obszarze znaczników <head> i <body>, a ich liczba w dokumencie jest dowolna. Należy jednak starać się unikać zagnieżdżania znacznika <script>. Dobrym rozwiązaniem, które daje nam czwarta wersja HTMLA jest możliwość umieszczenia w jego dokumentach bloków skryptowych z zewnątrz przy. Można to zrobić podając adres pliku (src) zawierającego interesujący nas kod skryptowy: <script type=”text/javascript” src=”javas.js”> script> albo za pomocą wspomnianych w poprzednim rozdziale zdarzeń. Metoda ukrywania skryptów przed starszymi przeglądarkami Aby uniknąć nieporozumień, w sytuacji gdy użytkownik korzysta z przeglądarki nie obsługującej Java Script, opracowano prostą metodę. Wystarczyło umieścić skrypt między znaczniki komentarza z dodatkiem znaków // w znaczniku zamykającym. Przeglądarki obsługujące Java Script ignorują znaczniki komentarza, a te które skryptu nie obsługują traktują go jako komentarz: <script type=”text/javascript”> Koniec częśąci ukrytej script> Walidacja formularza Kandydat przy pomocy języka Java Script Jednym z najczęstszych sposobów wykorzystywania Java Script - w połączeniu z programami po stronie serwera - jest sprawdzanie poprawności danych wprowadzonych do formularzy. Wstępna walidacji służy uniknięciu przesłania niepoprawnie wypełnionego lub niekompletnego w dane formularza na serwer. Dzięki takiemu zapobiegliwemu działaniu możliwy jest przyspieszony proces wymiany informacji nadesłanych z formularza na serwer. Każde bowiem dodatkowe połączenie spowalnia tą procedurę. W celu ukazania możliwości sprawdzania poprawności wprowadzonych do formularza za pomocą Java Script wykorzystany został wyżej zaprezentowany na rys.1 formularz Kandydat. Pierwszym krokiem walidacji naszego formularza jest sprawdzenie czy wszystkie wymagane pola zostały wypełnione. Jeśli użytkownik pominął któreś z tych pól, program przypomni o konieczności ich uzupełnienia, blokując równocześnie proces przesłania niekompletnych danych na serwer. Proces sprawdzania rozpoczyna się w momencie gdy użytkownik kliknie na przycisk zatwierdzający wprowadzone dane. Tym aktem zostaje uruchamiany proces checkMandatory(), który sprawdza czy pole np. Adres domowy jest puste lub czy został zaznaczony przełącznik. Gdy pole zostanie wypełnione zwraca wartość true W przypadku jego nie wypełnienia zwracana jest wartość folse , która następnie jest przypisana zmiennej the_result. Gdy skrypt zwróci wartość folse w uchwycie zdarzenia onsubmit, przeglądarka nie prześle zawartości formularza. Wyświetlony zostaje za to przy pomocy ciągu error_string +=”dowolny komunikat.\n” informacja dotyczących pominiętych pól (rys.4) 
Rys.4 Komunikat wyświetlający informację o niewypełnionych polach formularza Bardziej skomplikowany skrypt od którego właściwie powinniśmy zacząć analizę dotyczy sprawdzania przełączników. W formularzu Kandydat użyte zostały dwa przełączniki umożliwiające zaznaczenie płci. Aby upewnić się, że Któraś z opcji została zaznaczona należy przeanalizować wszystkie pozostałe w tej samej grupie (id=”gender”). Służy temu pętla loop przyjmująca początkowo wartość 0. Wartość ta zwiększa się o 1 przy każdym przeanalizowanym przełączniku. Gdy któraś z opcji zostanie zaznaczona zmienna rad_select z wartością ”on” zmieni się na ”yes”. W przypadku gdy początkowa wartość ta nie ulegnie zmianie wyświetlony zostanie komunikat wzywający do wybrania którejś z podanych opcji: if (rad_select == "no") { error_string += "Proszę podać płeć.\n"; } Nasz skrypt walidacyjny musi sprawdzić dwie listy wyboru o następujących identyfikatorach: id=”wojewodztwo” id=”profilszkoly” . Nasz kandydat do szkoły zaznaczając wybraną pozycję z listy automatycznie przypisze jej odpowiednią wartość: 0 w przypadku pierwszej opcji, 1 w przypadku drugiej itd. Jeśli nasz uczeń pominie omawiane pole, zmienna selectedIndex przypisze mu wartość -1 i zostanie wyświetlony dowolnej treści komunikat jak poniżej: if (window.document.formularz_kandydata.wojewodztwo.selectedIndex < 0) { error_string += " Podaj województwa.\n"; } Możliwości walidacyjne skryptów Java Script nie kończą się na sprawdzeniu czy obowiązkowe pola formularza zostały wypełnione. Przy pomocy wyżej wspomnianego języka programowania można konstruować skrypty sprawdzające poprawność wpisanych danych. Wymienić można dwie drogi interesującej interesującej nas walidacji. Pierwsza, która została zastosowana w niniejszej pracy przyjmuje następujący porządek: walidacja { (czy pole jest uzupełnione?/folse/true/) → (czy dane zostały poprawnie wprowadzone? folse/true/) → (czy pole jest uzupełnione?/folse/true/) → … } koniec walidacji Jeśli pole zostało wypełnione, ale wpisane dane nie spełniają wymaganego kryterium, skrypt nie będzie kontynuował sprawdzania pozostałych elementów formularza, do momentu, gdy spełniony zostanie z góry ustalony standard. Drugi droga walidacji danych formularza najpierw zezwala na sprawdzenie czy wszystkie obowiązkowe pola zostały wypełnione a następnie analizuje poprawność wprowadzonych danych: walidacja { (czy pole jest uzupełnione?/folse/true/) → (czy pole jest uzupełnione?/folse/true/) → (czy dane zostały poprawnie wprowadzone?folse/true/)→ (czy dane zostały poprawnie wprowadzone? folse/true/) →… } koniec walidacji Wypełnienie wszystkich obowiązkowy pól pozwala skryptowi przejść do etapu drugiego, sprawdzania poprawności wprowadzonych znaków. Do sprawdzenia poprawności wpisanej daty urodzenia i kodu pocztowego został użyty Split()wykorzystujący znak lub grupę znaków w celu podzielenia ciągu znaków na tzw. podciągi. W skrypcie walidacyjnym naszego Kandydata dni, miesiące lata zostały podzielone na fragmenty ciągu znakiem ”.” wg wzoru dd.mm.rrrr., a kod pocztowy według następującego 00-000. Podciągi umieszczane są w tablicy, gdzie każdy fragment ciągu otrzymuje swój numer począwszy od zera. Dniom (dd. ) przypisany został numer 0, miesiącom (mm) numer 2, a latom (rrrr) 3. Gdy użytkownik umieści dane w wyznaczonym formacie skrypt upewnia się, czy liczby umieszczone w podciągach spełniają wyznaczone normy np. rok zawężony został do lat 1993- 1995. W przypadku niespełnienia ustalonego kryterium przez klienta wyświetlony zostaje komunikat wzywający do poprawnego wpisania danych. Dzięki programom językowym takim jak choćby zaprezentowany w tym rozdziale Java Script nadal sam w sobie statyczny formularz HTML 4.01 nabiera życia. Jednak praktyka stosowania takiej kombinacji zrodziła potrzebę, aby choć w części uwolnić formularze od języków skryptowych w procesie walidacji, możliwości dynamicznego zmieniania wyglądu, treści, zachowania formularzy itd. Obecność języków skryptowych w dokumentach zawierających kod formularzy HTML wydaje się nadmiernie je rozbudowywać, utrudniając tym samym pracę z samym dokumentem. Do tego jeszcze dochodzą problemy wynikające z bezstanowości interakcji w WWW, objawiające się w trudności zachowania wpisanych wartości w przypadku cofnięcia się do poprzedniej strony, ryzyko wielokrotnego wykonania operacji, czy przeładowywania stron po każdorazowej interakcji z serwerem w skutek stosowania rozbudowanej grafiki. Następny więc rozdział jest poświęcony aplikacji, która jest krokiem na przód w próbie rozwiązania wyżej opisanych problemów
W roku 2003 zaprezentowana została alternatywa dla formularzy HTML4.01 w postaci formularzy xForms, które twórcom interaktywnych stron internetowych dają większe możliwości działania. XForms jest dzieckiem konsorcjum W3C, aplikacją XML opisującą formularze, a jego trzecia edycja XForms 1.0 została opublikowana 29 pażdziernika 2007 roku. Dwa lata później rekomendowana została wersja 1.116. Nowy język formularzy jest bogatszy od HTML –owego o możliwość oddzielenie modelu danych i samych danych od prezentacji, operowania na złożonych danych zapisanych w XML oraz przechowywanie aktualnego stanu tych danych po stronie klienta, łatwego realizowania złożonych formularzy, możliwość dynamicznego sterowania sposobem prezentacji: kolorami, wyświetlaniem i aktywnością pól, rozbudowania możliwości walidacji danych, określenia sposobu reagowania na zdarzenia bez potrzeby dodatkowego programowania oraz możliwość wykonywania obliczeń i wyświetlania ich rezultatów i wstawiania tych rezultatów do wynikowych danych17. Kod aplikacji XForms umieszczany jest najczęściej wśród znaczników XHTML lub XLM. Model danych formularza XForms W odróżnieniu do forumarzy HTML, w tworzeniu formularzy XFforms wykorzystuje się modelowy formularz danych umieszczony w obrębie znacznika <head>, lub w zewnętrznym dokumencie służący jako wzorzec dla formularzy dostępnych dla użytkowników. Nie na darmo użyłem liczby mnogiej „formularzy”, gdyż model może służyć dowolnej ich liczbie. Struktura modelu danych zapisywana jest w XML i zawiera specyfikacje przypisań, nadające poszczególnym danym identyfikatory, wartości początkowe i wyliczane, typy danych i inne ograniczenia oraz określenie przeznaczenia danych wynikowych18. Układ formularza Analizując kod przykładowego formularza dostrzegamy, że jego układ zbudowany jest ze znaczników języka macierzystego np.,XHTML bądź XML, mieszczącego w sobie znaczniki XForms. W obszarze <body> znaczniki te definiują poszczególne pola formularzy oraz sposób ich powiązania z modelem danych. Do tworzenia pól wykorzystuje się znaczniki input w rozszerzonej foramie Pola zachowywać się mogą różnie w zależności od zadeklarowanego typu danych. Mogą np. występować w postaci listy. W celu wyświetlenia różnego rodzaju wyników obliczeń XForms używa pól typu out put. Wszystkie pola, za wyjątkiem tych pól muszą zawierać w sobie przypisaną etykietkę. W obrębie znaczników podobnie jak w HTML umieszczane są atrybuty ref czy nodeset odpowiedzialne za podanie ścieżki xPath odnajdującej określone dane w modelu danych co obrazuje poniższy przykład: … <body> body> Aplikacja XForms umożliwia łączenie pól w grupie, co ułatwia pisanie odwołań xPath, a także przy pomocy konstrukcji repeat można dokonywać odpowiedniego zbioru pól tyle razy ile jest wystąpień elementu zapisz w strukturze danych. Powtarzającymi się danymi można sterować, czemu służy znacznik Pobieranie i przesyłanie danych Po wypełnieniu formularza przez użytkownika, jego dane umieszczane są w strukturze danych określonej przez model, a sama operacja wysyłania danych (submission), wykorzystuje różne metody protokołu HTTP get, post, put. Dane można również zapisać w lokalnym pliku i wysłać drogą elektroniczną. Domyślnym formatem jest XML, ale akceptowane są także inne formaty jak choćby zgodne z formatem HTML. W momencie przesłania dokumentu formularza na serwer i dokonaniu przez niego walidacji XForms aktywnie uczestniczy w nadesłaniu sprawdzonych danych. Na ekranie monitora pojawić się więc może formularz zastępujący dotychczas widoczny z komunikatem dotyczącym powodzenia lub niepowodzenia wysyłki danych. Odpowiedź z serwera może również zostać wpisana do struktury danych formularza, zastępując grupę wysłanych danych w formacie XML, albo wysłane dane mogą zostać zlekceważone20. Walidacja po stronie klienta Aplikację XForms cechuje pluralizm walidacyjny, umożliwiający oznaczenie elementów wartością not null, przez określenie typu danych XML Schema pozwalający na sprawdzenie zgodności wprowadzonych danych z zadeklarowanym typem. Za porównanie podanych danych ze schematem odpowiedzialny jest procesor XForms. W celach walidacyjnych wykorzystuje się wyrażenia logiczne, które przypisane do poszczególnych elementów modelu sprawdzają poprawność działania narzuconym tym elementom reguł. XForms i dynamiczna prezentacja Formularze XForms są plastyczne. Dzięki posiadanym odpowiednim atrybutom możliwe jest prezentowanie interesującej nas w danej chwili ilości elementów formularza. Innymi słowy mówiąc poszczególne pola formularza mogą być wyłączone lub ponownie aktywowane, zamieniać swoją wartość. Dzięki takiemu podejściu twórców W3C XForms dynamicznie reaguje na rodzaj wprowadzonych danych, łącznie z listami wyboru, z możliwością wyboru wartości kreowaną przez dane zawarte w modelu danych. XForms w sposób ogólny kształtuje wygląd formularza np. nadając mu odpowiednią kolorystykę, pozostawiając szczegóły formatowania przeglądarce lub CSS. Zdarzenia i akcje Struktura formularzy omawianej aplikacji umożliwia stosowanie zdarzeń w standardzie XML Ewents [W3C03]. Akcje, które są przez nie wywoływane to: wprowadzenie określonej przez użytkownika treści do formularza, wysłanie tych danych z całą strukturą, ich czyszczenie, dodawanie lub ujmowanie wierszy, pozycjonowanie linii w wielowierszowych częściach formularza, pozycjonowanie kursora w wybranym polu, , wymuszanie walidacji, wyliczenia, odświeżanie formularza i wyświetlanie komunikatów. Obok wyświetlanych komunikatów, komentarze zaliczyć można do grupy następstw zainicjowanego zdarzenia, pełniących role pomocy podczas pracy z formularzem. W procesie walidacji komentarze mogą np. informować użytkownika o zaistniałym błędzie. Kombinacja Form i CSS pozwala wyeksponować wybrane elementy z całej struktury formularza, a jego pola można zaopatrzyć w zdeklarowany tekst. Takie gotowce umieszcza się w zewnętrznym dokumencie, aby umożliwić ich wielokrotne wykorzystanie w różnego typu formularzach21. XForms i jego implementacja Przedstawiając bogactwo możliwości aplikacji XFroms nie sposób dostrzec jednej poważnej jego wady dotyczącej omawianego formatu – problem z jego obsługą w różnego typu przeglądarkach. Niezbyt duża popularność tego standardu objawia się również bardzo skąpą literaturą w języku polskim. Mimo tego Zafascynowani możliwościami XForms wyrażali swoje nadzieje, że pozostawiony w cieniu HTML zostanie powszechnie stosowany.22 Zaskoczeniem mogła się okazać decyzja konsorcjum W3C z dnia 2.07.2009 roku, o rozwiązaniu grupy roboczej nad XHTML 2 z końcem tegoż roku. W zamian zostały zwiększone zasoby na grupę roboczą HTML, którego celem stało się przyspieszenie rozwoju standardu HTML 523. Wydaje się, że nowy standard HTML a w nim nowe możliwości formularzy jak dotąd będą preferowane przez najpopularniejsze przeglądarki kosztem XForms.
Powszechnie już wiadomo, że HTML5 będzie nowym standardem zastępujący obecny HTML4.01. Producenci najpopularniejszych przeglądarek internetowych intensywnie wspierają rozwój tego języka, dzięki czemu istnieje już możliwość korzystania z pewnej grupy nowych znaczników, przy tworzeniu stron WWW. Obecnie najlepiej wspiera HTML5 udostępniona 8 czerwca bieżącego roku przeglądarka Safari5 dla systemu Mac OS, która przechodząc test dla obsługi omawianego standardu zdobyła 215/300 punktów możliwych do zdobycia24. Nie od razu twórcy HTML5 mogli cieszyć się takim wsparciem. Wszystko się zmieniło 2 lipca 2009 roku, gdy konsorcjum W3C ogłosiło rozwiązanie grupy pracującej nad konkurencyjną w stosunku do HTML5 specyfikacją XHTML2. Różnica pomiędzy tymi projektami polega na tym, że HTML5 jest kontynuacją specyfikacji HTML 4.01 i jego XML – owej odmiany XHTML1, a XHTML2 miał wprowadzić wiele znaczących zmian do języka bez względu na kompatybilność z poprzednimi wersjami XHTML. Najnowszy szkic HTML5 z datą aktualizacji 18 czerwiec 2010 rok25, prezentuje, w stosunku do swojego poprzednika szereg nowości jak choćby nowe elementy usprawniające tworzenie serwisów i aplikacji internetowych, doprecyzowanie niejasności w specyfikacji HTML 4, dotyczących przede wszystkich sposobu obsługi błędów, czy samodzielna walidacja formularzy po stronie kienta, itd. Czwarty obszerny rozdział dokumentu HTML5 A vocabulary and associated APIs for HTML and XHTML poświęcony został formularzom. Analizujący ją czytelnik już na samym początku zauważy jego ewolucyjny charakter, gdzie to co stare i wartościowe łączy się z nowym, tworząc ulepszony i ułatwiającym pracę system tworzenia dynamicznych formularzy WWW.
W podrozdziale 4.10.7 dokumentu HTML5 zaprezentowane zostały typy znacznika w liczbie 23. Wśród znanych nam elementów jak text, reset, submit, pojawiło się kilkanaście nowych: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color26. Treść jaką w sobie noszą wyżej przedstawione typy bez głębszej analizy sugerują ich zastosowanie. W niniejszej pracy pozwoliłem się ograniczyć do zaprezentowania wybranych elementów zastosowanych w formularzu Kandydaci. Dodatkowo w celu zwiększenia jego czytelności , przy pomocy znacznika <legend> wprowadziłem podział opcji i pól na wyraźnie zarysowujące się grupy co przy omawianiu typów znacznika : michal michal -> H = 7 bez samocytowań michal -> Antoni kęPIŃski: LĘK – teoria – doświadczenie – tekst michal -> Antoni kęPIŃski: LĘK – teoria – doświadczenie – tekst michal -> Zarządzanie Finansami Przedsiębiorstw [ue wrocław] sem zimowy 2008 na 2009 michal -> Rozdział I informacje ogólne michal -> Podziękowania za tłumaczenie, korekcję i ogólne wsparcie dla michal -> 1 Józef Kupczyk2 wpływ ryzyka pogodowego na finansową efektywnośĆ przedsiębiorstwa michal -> Artykuły w czasopismach recenzowanych i pojedyncze rozdziały w monografiach michal -> Grzegorz Michalski, Wroclaw University of Economics Mój indeks h = 4 bez samocytowań
|