tworzenie aplikacji internetowych
Download
Skip this Video
Download Presentation
Tworzenie Aplikacji Internetowych

Loading in 2 Seconds...

play fullscreen
1 / 30

Tworzenie Aplikacji Internetowych - PowerPoint PPT Presentation


  • 121 Views
  • Uploaded on

Tworzenie Aplikacji Internetowych. 8. dr Wojciech M. Gańcza. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Tworzenie Aplikacji Internetowych' - avel


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
tworzenie aplikacji internetowych

Tworzenie Aplikacji Internetowych

8

dr Wojciech M. Gańcza

serwer i klient
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 klient1
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

<script>

...

</script>

programy sterowane zdarzeniami
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
slide5
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

<div id=”nazwa”>

javascript
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
Tabliczka mnożenia

<script>

document.write(”<table>”);

for (var i=0; i<10; ++i)

{

document.write(”<tr>”);

for (var j=0; j<10; ++j)

{

document.write(”<td>” + (i*j)

+ ”</td>”);

}

document.write(”</tr>”);

}

document.write(”</table>”);

</script>

zdarzenia
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
Kalkulator…

<html>

<body>

<form name="f1">

<input type="text"id="a">

&nbsp;x&nbsp;

<input type="text"id="b">

<input type="button"value="="onclick="calc();">

<input type="text"id="s"disabled>

...

</form>

</body>

</html>

kalkulator1
Kalkulator…

<script>

function calc()

{

var a = document.getElementById("a").value;

var b = document.getElementById("b").value;

document.getElementById("s").value = a * b;

}

</script>

  • Można też inaczej – zamiast czekać na naciśnięcie przycisku – można reagować na zmianę zawartości komórki:
kalkulator2
Kalkulator …

<input type="text"id="a" onchange="calc();">

&nbsp;x&nbsp;

<input type="text"id="b" onchange ="calc();">

&nbsp;=&nbsp;

<input type="text"id="s"disabled>

  • 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?
kalkulator3
Kalkulator…
  • Zdarzenie ‘onkeydown’ wołany jest zanim wartośc kontrolki się zmieni
  • Podobnie ‘onkeypress’
  • Natomiast ‘onkeyup’ jest idealne do naszych zastosowań

<input type="text"id="a" onkeyup="calc();">

&nbsp;x&nbsp;

<input type="text"id="b" onkeyup="calc();">

&nbsp;=&nbsp;

<input type="text"id="s"disabled>

inny przyk ad
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
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 kwot1
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
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
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 znaku1
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
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
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
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
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
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)\">&nbsp;";

}

}

formater kwot1
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
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
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…
zaznaczenia1
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);

}

zaznaczenia2
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) . "\">");

}

}

zaznaczenia3
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
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
ad