Tworzenie aplikacji internetowych
This presentation is the property of its rightful owner.
Sponsored Links
1 / 30

Tworzenie Aplikacji Internetowych PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Tworzenie Aplikacji Internetowych

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


Tworzenie aplikacji internetowych

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


  • Login