Tworzenie Aplikacji Internetowych dr Wojciech M. Gańcza 8

Serwer i Klient Serwer przetwarza zlecenia od wielu klientów. Klient pracuje na potrzeby pojedynczego użytkownika Moc obliczeniowa komputerów klientów jest porównywalna z mocą obliczeniową serwerów Większość mocy używana jest do obsługi do obsługi interfejsu graficznego

Serwer i Klient… Szkoda by moc obliczeniowa klienta się marnowała Można z niej skorzystać! Na stronie można umieścić program który będzie wykonywany w czasie tworzenia strony...

Programy sterowane zdarzeniami Programy na serwerze przygotowują stronę w czasie pojedynczego uruchomienia programu Programy po stronie klienta też mogą tak działać Ale nie muszą… Mogą też reagować na zdarzenia modyfikując dane w kontrolkach lub zawartość strony Język: JavaScript

DOM DOM – Document Object Model – to zbiór obiektów które pozwalają na dostęp do zawartości okna przeglądarki. Niemal każdy element może być dostępny z poziomu kodu W wielu wypadkach taki element musi mieć określony identyfikator

JavaScript Język JavaScript ma składnie bardzo podobna do C++; Nie ma tu jednak ścisłej typizacji zmiennych – jak w PHP Kod umieszczony na stronie może być wykonany w czasie ładowania dokumentu Jeśli zadeklarujemy funkcje – to będą wykonane w momencie wywołania

Tabliczka mnożenia document.write( ); for (var i=0; i<10; ++i) { document.write( ); for (var j=0; j<10; ++j) { document.write( + (i*j) + ); } document.write( ); } document.write( );

Zdarzenia Z każdym elementem związane są określone zdarzenia. Zdarzenia związane są z akcjami użytkownika albo ze zmiana stanu wyświetlanej strony Funkcje obsługi zdarzeń można zdefiniować jako właściwości odpowiednich znaczników HTML albo właściwości obiektów DOM

Kalkulator… x...

Kalkulator… function calc() { var a = document.getElementById("a").value; var b = document.getElementById("b").value; document.getElementById("s").value = a * b; } Można też inaczej – zamiast czekać na naciśnięcie przycisku – można reagować na zmianę zawartości komórki:

Kalkulator … x = Teraz iloczyn jest liczony po każdej zmianie zawartości kontrolki … Czyli po zakończeniu jej edycji – gdy już ją opuścimy Jak zrobić by obliczenia były wykonywane od razu?

Kalkulator… Zdarzenie onkeydown wołany jest zanim wartośc kontrolki się zmieni Podobnie onkeypress Natomiast onkeyup jest idealne do naszych zastosowań x =

Inny przykład Kontrolka pozwalająca na wprowadzanie liczb (na przykład do kwot) wymaga sprawdzenia Czy wprowadzane są tylko liczby Czy jest tylko jeden separator dziesiętny (dopuszczamy zarówno kropkę jak i przecinek) Po zakończeniu edycji – formatujemy liczbę zaokrąglając do dwu miejsc po przecinku

Kontrolka do kwot Nie dopuszczenie do wprowadzenia innych znaków niż liczby i separator wymaga filtrowania zdarzeń Jest to możliwe dzięki modyfikacji zdarzenia Warto sprawdzić czy zdarzenie może być odwołane (-> w3c) I w jaki sposób Poprzez zwrócenie wartości false Czy poprzez nadpisanie danych zdarzenia

Kontrolka do kwot… <input style="width: 64px; height: 22px; text-align: right" type="input" name="id" id="id" value="0,00" onchange="reformat(this);" onkeypress="checkCharacter(event, this);" onkeydown="checkCharacter(event, this)">

Połykanie znaków Zauważmy, że musimy zareagować zarówno na zdarzenie onkydown jak i onkeypres Definiując wywołanie zdarzenia – możemy przekazać parametry. Zauważmy, że możemy przekazać this – zdarzenia zachowują się tu jak metody (choć w funkcji obsługi zdarzenia do this dostępu nie ma jeśli nie było przekazane Można przekazać obiekt zdarzenia.

Sprawdzenie znaku function checkCharacter(event, obj) { x = obj.value; p = x.indexOf('.'); if (p == -1) p = x.indexOf(','); v = event.charCode; if (v == undefined) v = event.keyCode; if (v < 32) return true;

Sprawdzenie znaku … v = String.fromCharCode(v); if ((v > '9' || v < '0') && !(((v == ',') || (v == '.')) && (p<0))) { event.charCode = 0; event.keyCode = 0; return false; } return true; }

Przeformatowanie function reformat(x) { v = x.value; v = v.replace(',', '.'); a = Number(v); i = Math.floor(a); f = Math.round(100*(a - i)); if (f == 0) f = "00"; else if (f < 10) f = "0" + String(f); else f = String(f); v = String(i) + "," + f; x.value = v; }

Inne kontrolki W podobny sposób możemy przygotować elementy edycyjne do wprowadzania identyfikatorów, kodów czy statusu kodowanego na pojedynczym znaku Możemy także pokładać element edycyjny z kilku – na przykład dołączyć do pola tekstowego kilka przycisków służących do zmiany wartości

Kontrolki a źródło danych Źródło danych dostarcza dane do wyświetlenia lub do dalszego przetwarzania Jeśli potrzebujemy tabelki zawierającej elementy edycyjne – nic prostszego Jest tylko niewielki problem – nazwy Można je tworzyć z jakiegoś stałego tekstu oraz identyfikatora rekordu

Formater elementów edycyjnych class FormatEdit extends RecordsetFormater { var $name; var $idField; function FormatEdit(&$recordset, $fieldsList, $name, $idField) { $this->RecordsetFormater(&$recordset, $fieldsList); $this->name = $name; $this->idField = $idField; } function getId() { return $this->name. $this->currentRecord[$this->idField]; }

Formater kwot class FormatMoneyEdit extends FormatEdit { function FormatMoneyEdit(&$recordset, $fieldsList, $name, $idField) {... } function format($field) { $id = $this->getId();... return "<input style=\"width: 64px; height: 22px; text-align: right\" type=\"input\" name=\"". $id. "\" id=\"". $id. "\" value=\"". $field. "\"". "onchange=\"reformat(this);\ " onkeypress=\"checkCharacter(event, this)\ " onkeydown=\"checkCharacter(event, this)\"> "; }

Formater kwot… Warto jeszcze sformatować przychodzącą wartość pola: if ($field != "") { $integral = (int)($field); $fraction = round(100*($field – $integral)); $frac = ","; $field = (string)($integral); if ($fraction < 10) $field = $field. ',0'. $fraction; else $field = $field. ','. $fraction; }

Inne elementy Podobnie możemy przygotować formatery dla innych elementów edycyjnych Dość przydatne mogą okazać się elementy typu checkbox Jest z nimi jeden problem – nie zaznaczone – nie są przesyłane Zastanówmy się jednak do czego mogą służyć w tabelce

Zaznaczenia Element checkbox może służyć do zaznaczania pozycji do dalszych działań Bardziej przydatna będzie kolekcja wybranych identyfikatorów niż pole binarne w źródle danych Inne zastosowanie: włączanie lub przełączanie edytowalności innych elementów – ale po kolei…

Zaznaczenia Warto przygotować sobie klasę na zaznaczone elementy class SelectedItems { var $items; var $name; function SelectedItems($name) { $this->name = $name; $cntrl = new Control($name, null); if ($cntrl->value == null) $this->items = array(); else if (is_array($cntrl->value)) $this->items = $cntrl->value; else $this->items = explode("|", $cntrl->value); }

Zaznaczenia… function is($id) { if (in_array($id, $this->items) == false) return false; else return true; } function render(&$output) { $output->out( "<input type=\"hidden\ name=\"". $this->name. "\" value=\"". implode("|", $this->items). "\">"); }

Zaznaczenia… class FormatCheckbox extends RecordsetFormater { var $name; var $selected; function FormatCheckbox (&$recordset, $fieldsList, $name, $selected) { $this->RecordsetFormater(&$recordset, $fieldsList); $this->name = $name; $this->selected = $selected; } function format($field) { return "<input type=\"checkbox\" name=\"". $this->name. "[]\" id=\"". $this->name. $field. "\" value=\"". $field. >"; }

W następnym odcinku Wracamy do aplikacji – budujemy listę książek Pozwalamy na zaznaczanie Edycja książek – różne sposoby edycji w zależności od potrzeb Zbliżamy się do podstawowej funkcjonalności programu