Artykuł

mar 18 2012
0

Tworzenie efektownych kreatorów formularzy w jQuery

Dzisiejszy Internet praktycznie w niczym nie przypomina pierwszych witryn internetowych stworzonych na początku lat 90-siątych przez Tima Tima Bernesa Lee oraz jego współpracowników. Tak naprawdę, to obecnym stronom bliżej właściwie do klasycznych aplikacji desktopowych, aniżeli do tego co kiedyś ukrywało się pod terminem strona WWW. O skali ich obecnego zaawansowania niech świadczy choćby fakt, że już niedługo na stronach WWW (dzięki technologii Flash) będzie możliwe zagranie w gry oparte na bardzo potężnym silniku graficznym Unreal Engine 3.

Jeśli wspomnimy jeszcze o coraz szerszym wykorzystaniu chmur obliczeniowych, to szybko zdamy sobie sprawę, że niedługo do większości operacji realizowanych przez przeciętnego użytkownika wystarczy przeglądarka internetowa (na co z pewnością ma nadzieje choćby Google, promujący swoje Chromebooki).

Wróćmy jednak do tematu, ponieważ dziś chciałem Wam pokazać rozwiązanie, które przy wykorzystaniu HTMLa oraz jQuery pozwoli na stworzenie interaktywnych kreatorów formularzy, które można wykorzystać choćby w skrypcie rejestracji użytkowników. Zapraszam do dalszej lektury:-)

Co chcemy osiągnąć?

Naszym zadaniem będzie stworzenie prostego formularza zawierającego trzy kolejne ekrany. Na pierwszym z nich, użytkownik poda swoje imię. Na kolejnym nazwisko, a ostatni pozwoli na podsumowanie wszystkich, zgromadzonych wcześniej danych. Oczywiście gdyby każdy internetowy formularz był tak bardzo rozdrobniony, to byśmy mogli zaklikać się na śmierć. W tym przypadku chodzi jednak tylko i wyłącznie o prosty przykład.

Formularz będzie uruchamiany po kliknięciu na przycisk i będzie pojawiać się w oknie modalnym (w tym celu wykorzystamy dialog jQuery UI).

Gotowe rozwiązanie możecie zobaczyć na żywo tutaj i/lub na poniższym screenie.

Co będzie nam potrzebne?

Przede wszystkim, potrzebna nam będzie podstawowa znajomość HTMLa (ja zastosowałem HTML5) oraz jQuery.

Oprócz tego, potrzebować będziemy następujące biblioteki:

W przypadku pobierania jQuery UI, możemy dopasować bibliotekę do naszych potrzeb - wybrać skórkę oraz elementy składowe. Nam zasadniczo wystarczy dostęp do komponentów Button, Dialog oraz komponentów od nich zależnych (strona dostarcza nam informacji o zależnościach).

Po pobraniu wszystkich elementów, umieszczamy je w określonej lokalizacji.

Paczkę z wszystkimi elementami składowymi oraz z samym skryptem znajdziecie w dziale download.

Kod HTML

W kodzie HTML musimy zrealizować trzy kluczowe rzeczy:

  • Podłączyć wszystkie zewnętrzne biblioteki (oraz oczywiście nasz kod)
  • Dodać przycisk uruchamiający kreator
  • Dodać dialog zawierający w sobie formularz kreatora wraz z wszystkimi krokami. Dialog domyślnie powinien być niewidoczny

Cały powyższy plan, realizuje następujący listing kodu:

<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Jerzy Piechowiak" />
		<title>FormWizard</title>
		<link rel="stylesheet" 
			href="css/cupertino/jquery-ui-1.8.18.custom.css" /> 
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
		<script src="js/jquery.form.wizard-min.js"></script>
		<script src="js/test.js"></script>
	</head>
	<body>
		<button id="btn-run">Uruchom kreator</button>
		<div id="dialog-example" style="display: none;">
			<form action="#" id="dialog-example-form">
				<div id="dialog-example-form-first" class="step">
					<label for="name">Imię</label>
					<input type="text" name="name" id="name" />
				</div>
				<div id="dialog-example-form-second" class="step">
					<label for="surname">Nazwisko</label>
					<input type="text" name="surname" id="surname" />
				</div>
				<div id="dialog-example-form-third" class="step">
					<h1>Podsumowanie:</h1>
					<p>Imię: <span id="spname" /></p>
					<p>Nazwisko: <span id="spsurname" /></p>
				</div>				
			</form>
		</div>		
	</body>
</html>

Nic odkrywczego raczej ten kod nie wnosi. To na co warto zwrócić uwagę, to identyfikatory zastosowane dla poszczególnych elementów. Oczywiście stosując jQuery w łatwy sposób moglibyśmy drastycznie zmniejszyć ich ilość, korzystając z bardziej zaawansowanych selektorów, w tym przypadku nie chciałem jednak za bardzo komplikować kodu i postawiłem na przejrzystość.

Kod jQuery

Kod jQuery jest już nieco odrobinę bardziej wyrafinowany. Kluczowym jego elementem będzie funkcja InitDialogAndWizard, której głównym zadaniem jest inicjalizowanie dialogu oraz formularza. Została ona wykonana w sprytny sposób, który sprawdza czy dialog nie został już utworzony. Jeśli nie, to tworzy go oraz inicjalizuje Formwizard. W przeciwnym wypadku, aktualizujemy tylko stan przycisków.

function InitDialogAndWizard(){
    var oDialogNode = $("#dialog-example");
    var oForm = oDialogNode.find("form");
    if (!oDialogNode.data("dialog-created")) {
        oForm.formwizard({
            disableUIStyles: true
        }); 
        oForm.bind("step_shown", function(oEvent, oData) {
			ManageStepButtons(oForm);
			if("dialog-example-form-third" == oData.currentStep){
				$('#spname').html($('#name').val());
				$('#spsurname').html($('#surname').val());
			}
        });
        oDialogNode.dialog({
            width: 500,
            height: 320,
            title: "Kreator",
			modal: true,
            create: function(oEvent, oUi) {
                $(this).data("dialog-created", true);
            },			
            beforeclose: function() {
                $(this).find(':input').val('');
            },
            buttons: [{
                id: "dialog-example-backbtn",
                text: "Wstecz",
                click: function() {
                    oForm.formwizard("back");
                },
                css: { "width": "120px" }
            },
            {
                id: "dialog-example-nextbtn",
                text: "Dalej",
                click: function() {
                    if (oForm.formwizard("state").isLastStep) {
                        alert("Koniec!");
                    } else {
                        oForm.formwizard("next");
                    }
                },
                css: { "width": "120px" }
            },
            {
                text: "Zamknij",
                click: function() {
                    $(this).dialog("close");
                },
                css: { "width": "120px" }
			}]
		});
    }
	ManageStepButtons(oForm);
}

Znając już kod funkcji, możemy przystąpić do jej analizy. Na samym początku (2-3) pobieramy odpowiednie elementy. Następnie sprawdzamy za pomocą wartości data przypisanego do węzła zawierającego dialog, czy dialog został utworzony. Jest to nasze własne ustawienie, które definiujemy w momencie utworzenia dialogu (o tym później).

Jeśli dialog nie został zainicjalizowany, to możemy przejść do najdłuższej i najciekawszej części kodu.

Najpierw w liniach 5-14 zajmujemy się formularzem. Podpinamy plugin (5-7) wyłączając przy okazji style jQuery UI dla formularza. Mnie osobiście nie przypadły one w tym miejscu do gustu, ale Wy możecie usunąć to ustawienie, bądź też dodać inne (te znajdziecie w dokumentacji na stronie projektu).

Następnie obsługujemy zdarzenie step_shown, które jest wywoływane przy załadowania każdego kroku z formularza. Tutaj najpierw wywołujemy funkcję ManageStepButtons i przekazujemy do niej uchwyt do formularza. Użycie tej funkcji wpływa na zachowanie się przycisków, a według mojego widzimisię mają one zachowywać się następująco:

  • Na pierwszym ekranie formularza, przycisk Wstecz jest nieaktywny
  • Na ostatnim ekranie formularza, przycisk Dalej zamienia się w Zatwierdź i zmienia swoją funkcję

W kolejnym kroku, obsługujemy sytuację trzeciego kroku formularza, który jest odpowiedzialny za wyświetlenie podsumowania. Podsumowanie ma zawierać informacje zebrane z kroku pierwszego i drugiego, dlatego też do pustych elementów span przekazujemy imię i nazwisko wpisane przez użytkownika (efekt widoczny na screenie 1).

Następnie przechodzimy do inicjalizacji dialogu. W liniach 16-19 ustawiamy podstawowe właściwości. Następnie definiujemy obsługę zdarzenia create, o którym wspominałem wcześniej. Zdarzenie to jest wywoływane jednorazowo, w momencie tworzenia dialogu.

W kolejnym kroku (23-25) obsługujemy zdarzenie beforeclose, które jest wywoływane przy każdym zamknięciu dialogu. Naszym zadaniem jest w tym przypadku wyczyszczenie pól typu input na formularzu.

Ostatnim elementem inicjalizacji są przyciski, a na naszym dialogu będziemy mieć ich 3:

  • Wstecz
  • Dalej/Zatwierdź
  • Zamknij

Wszystkie przyciski tworzymy w ten sam sposób, podając dla nich identyfikator, tekst, akcję po po kliknięciu oraz szerokość wyrażoną za pomocą CSS.

Najciekawiej prezentuje się przycisk Dalej, który w zależności od sytuacji wywołuje różne akcje. W tym przypadku korzystamy z właściwości isLastStep, którą możemy pobrać z obiektu zawartego w formularzu.

Na samym końcu, w każdej sytuacji wywołujemy funkcję ManageStepButtons.

Skoro już jesteśmy przy tej funkcji, to możemy w końcu przedstawić jej kod, który jest raczej bardzo prosty:

function ManageStepButtons(oForm){
	if (oForm.formwizard("state").isFirstStep) {
		$("#dialog-example-backbtn").button("disable");
	} else {
		$("#dialog-example-backbtn").button("enable");
	}
	if (oForm.formwizard("state").isLastStep) {
		$("#dialog-example-nextbtn").button("option", "label", "Zatwierdź");
	} else {
		$("#dialog-example-nextbtn").button("option", "label", "Dalej");
	}   
}

Na zasadzie prostych warunków, sprwadzamy czy aktualnie wyświetlono pierwszy, czy też ostatni krok, odpowiednio ustawiamy aktywność przycisku Wstecz oraz etykietę dla przycisku Dalej.

Zwieńczeniem kodu jQuery, jest sekcja document...ready:

$(document).ready(function() {
	$("#btn-run")
		.button()
		.click(function(){
			InitDialogAndWizard();
			$("#dialog-example").dialog("open");
		});
		
}); 

W tym miejscu, aktywujemy nasz przycisk oraz dodajemy do niego obsługę kliknięcia. Przy kliknięciu, najpierw zawsze wywołujemy wcześniej zdefiniowaną funkcję InitDialogAndWizard, a następnie otwieramy sam dialog.

Zakończenie

Całościowe rozwiązanie powinno prezentować się mniej więcej tak, jak na screenie 1. Tak jak wspomniałem, gotowy projekt można pobrać z działu download i/lub obejrzeć tutaj. Przedstawione rozwiązanie to oczywiście tylko fragment możliwości wynikających z połączenia jQuery UI i wtyczki Formwizard - w tym miejscu, zachęcam Was do własnych eksperymentów:)

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus