5. Tworzenie prostego kalkulatora

Transkrypt

1 5. Tworzenie prostego kalkulatora 5.1. Cel przedsięwzięcia i zasada działania Nadeszła już pora, żeby stworzyć konkretną aplikację w ASP.NET. Będzie to kalkulator, pozwalający wykonywać cztery podstawowe działania arytmetyczne na dwóch liczbach. Rysunek 4. Planowany wygląd aplikacji Jego zasada działania będzie następująca: Użytkownik ma wpisać dwie liczby w pola tekstowe, wybrać operację oraz nacisnąć przycisk Wynik, w celu wykonania działania i obliczenia wyniku. Po kliknięciu w jeden z operatorów, w lewej dolnej etykiecie ma się pojawić tekst opisujący wybraną operację (np. dla + napis [suma] itp.). Po naciśnięciu przycisku Wynik mają zostać odczytane napisy z obu pól tekstowych i zamienione na liczby typu double (zmiennoprzecinkowe). Ma na nich zostać wykonana żądana operacja, zaś wynik należy sformatować do postaci = 8. Wpisanie błędnych wartości ma spowodować wyświetlenie ostrzeżenia dla użytkownika Budowa interfejsu użytkownika W celu stworzenia żądanej strony, wykonaj poniższe czynności: 1. Załóż na dysku twardym własny katalog na pliki do tego zadania. 2. Otwórz program WebMatrix. 1

2 3. Stwórz nową stronę ASP.NET Page, upewnij się czy w polu Language jest wybrana opcja C#, a następnie zapisz stronę w swoim katalogu, w pliku o nazwie Kalkulator.aspx. 4. Wstaw do tej strony nagłówek: Kalkulator. 5. Wstaw do tej strony tabelę, poleceniem HTML Insert Table. 6. Podaj następujące dane: Rows: 3 (liczba wierszy), Width: 400 (szerokość), Columns: 4 (liczba kolumn), Height: 200 (wysokość). 7. Kliknij we wstawioną tabelę (w jedną z jej ramek), aby zaznaczył się znacznik <TABLE>. Ustaw jej właściwość border na 1. W celu wskazania znacznika <TABLE> możesz również kliknąć we wnętrze dowolnej komórki tabeli i skorzystać z listy znaczników w oknie właściwości, zatytułowanej Click to see parent HTML elements. 8. Następnie, korzystając z menu kontekstowego, połącz komórki w drugim oraz trzecim wierszu (polecenia Merge cell left oraz Merge cell right). Możesz również przełączyć się na zakładkę HTML i samodzielnie usunąć zbędne znaczniki <td></td>, w zamian wpisując w odpowiednich znacznikach <td> parametr colspan (o ile pamiętasz jeszcze te elementy języka HTML). 9. W komórki tabeli wstaw kontrolki Web Controls, nazywając każdą z nich (zmieniając im właściwość (ID)) następująco: Label LabLiczba1, TextBox TxtLiczba1, RadioButtonList RblOperacja, Label LabLiczba2, TextBox TxtLiczba2, Button BtnWynik, Label LabOperacja, Label LabWynik. 10. Ustaw właściwość align wybranych komórek na Center, aby zmienić wygląd tabeli. 11. Dla kontrolki RblOperacja zmodyfikuj listę elementów (właściwość Items), dodając przyciskiem Add elementy i ustaw ich właściwości Text oraz na: + [suma] [różnica] * [iloczyn] / [iloraz] 12. Ustaw pozostałe właściwości kontrolek, zgodnie z poniższą tabelą: Kontrolka Nazwa kontrolki (ID) Nazwa właściwości Wartość właściwości 2

3 Label LabLiczba1 Text Liczba 1: TextBox TxtLiczba1 MaxLength 20 RadioButtonLis RblOperacja AutoPostBack True t ListItem[0] Text + [suma] ListItem[1] Text - [różnica] ListItem[2] Text * [iloczyn] ListItem[3] Text / [iloraz] Label LabLiczba2 Text Liczba 2: TextBox TxtLiczba2 MaxLength 20 Button BtnWynik Text Wynik Label LabOperacja Text [...] Font.Bold True Label LabWynik Text (...) Font.Bold True 15. Zapisz dokonane zmiany i sprawdź, czy strona poprawnie wygląda w przeglądarce. W tym celu naciśnij mały przycisk Play na pasku narzędzi środowiska WebMatrix i zatwierdź uruchomienie serwera ASP.NET Reakcja na zmianę wybranej operacji Jak być może dało się zauważyć, włączenie właściwości AutoPostBack kontrolki RblOperacja dało ciekawy efekt: po każdej zmianie operacji strona jest automatycznie wysyłana na serwer, który odsyła nową wersję tej strony. Jest to zachowanie pożądane, na które jeszcze trzeba zareagować. Zgodnie z założeniem, powinien się wtedy zmieniać napis w lewej dolnej etykiecie. W tym celu wykonaj następujące czynności: Dla wstawionej kontrolki RblOperacja odszukaj na zakładce ze zdarzeniami zdarzenie o nazwie SelectedIndexChanged (zmieniono numer wybranej opcji). Kliknij w to zdarzenie dwa razy, aby dodać procedurę jego obsługi. Napisz obsługę zdarzenia zgodnie z punktem pomysłu działania. Zapisz dokonane zmiany i sprawdź, czy strona poprawnie działa. Zastanów się nad punktem 15. Jak napisać obsługę zdarzenia? Najpierw należy skorzystać z przeglądarki klas. Jest ona dostępna po przełączeniu listy właściwości na listę dokumentacji (zakładka Classes). W polu Enter Name to Search wpisz RadioButtonList i naciśnij Enter. Szukany symbol pojawi się jako jedyny na liście. Dwukrotne kliknięcie w niego wyświetli okno z opisem. Należy teraz otworzyć podlistę Properties i zaznaczyć opcję Show Non-Public Members. 3

4 Kontrolka RadioButtonList ma to do siebie, że gdy użytkownik zmieni wybraną opcję, pojawia się zdarzenie SelectedIndexChanged. Jeśli dodana jest procedura obsługi tego zdarzenia, można wykonać w odpowiedzi jakąś akcję. Przeglądając listę właściwości kontrolki RadioButtonList można trafić na następujące właściwości o nazwach rozpoczynających się od Selected: SelectedIndex (numer wybranej opcji liczony od zera), SelectedItem (wybrany element z listy Items kontrolki) oraz Selected (właściwość wybranego elementu). Rysunek 5. Opis właściwości SelectedItem kontrolki RadioButtonList Skoncentrujmy się na właściwości SelectedItem. Kontrolka RadioButtonList zapamiętuje w tej właściwości aktualnie zaznaczony element. Jak można zauważyć w opisie właściwości, element ten jest typu ListItem. Kliknięcie w nazwę tego typu także wyświetla jego opis. Otwierając jego podlistę Properties można znaleźć m.in. właściwości Selected, Text i takie same jak w oknie, w którym były dodawane do listy elementów Items kontrolki RadioButtonList (w punkcie 11). Text jest napisem wyświetlanym w oknie przeglądarki (jeden z operatorów), zaś jest opisem wybranej operacji. 4

5 Wniosek jest następujący: wyrażenie RblOperacja.SelectedItem. będzie opisem, który został ustawiony w liście elementów (np. [dodawanie] lub [mnożenie]). Żeby zmienić tekst wyświetlany w lewej dolnej etykiecie, wystarczy przypisać nową wartość właściwości Text kontrolki LabOperacja. Tak więc cała obsługa zdarzenia sprowadzi się do jednej linijki: Przykład 5. Obsługa zdarzenia SelectedIndexChanged dla listy operacji void RblOperacja_SelectedIndexChanged(object sender, EventArgs e) { LabOperacja.Text = RblOperacja.SelectedItem.; } Warto jeszcze zauważyć, że wyrażenie RblOperacja.SelectedItem. jest równoważne z RblOperacja.Selected. Właściwość taka jest dostępna od wersji 1.1 platformy.net Obliczanie wyniku Aby tworzony kalkulator w końcu coś policzył, trzeba teraz dodać obsługę przycisku Wynik. W tym celu wykonaj następujące czynności: 16. Dla przycisku BtnWynik odszukaj na zakładce ze zdarzeniami zdarzenie o nazwie Click (przycisk wciśnięty). Kliknij w to zdarzenie dwa razy, aby dodać procedurę jego obsługi. 17. Napisz obsługę zdarzenia zgodnie z punktem pomysłu działania. 18. Zapisz dokonane zmiany i sprawdź, czy strona poprawnie działa. Zastanów się nad punktem 18. Oto fakty: Skoro kontrolka RblOperacja posiada właściwość SelectedIndex, to można sprawdzić jej wartość gdy nie jest zaznaczona żadna opcja wynosi ona 1. Tylko wtedy, gdy wartość SelectedIndex jest większa lub równa zero warto prowadzić obliczenia, ponieważ wiadomo, jaki operator jest wybrany. Oba pola tekstowe kontrolki TxtLiczba1 i TxtLiczba2 mają właściwość Text. Jest to napis aktualnie wpisany w takie pole. W obsłudze zdarzenia możesz zadeklarować lokalne zmienne typu double do przechowywania wartości liczbowych odczytanych z kontrolek tekstowych oraz wyniku. Do konwersji napisów na liczby możesz skorzystać z klasy Convert, która zawiera m.in. metodę ToDouble(). 5

6 Do rozpoznania wybranego operatora możesz użyć instrukcji switch, jako parametr podając napis z wybranego elementu kontrolki RblOperacja właściwość SelectedItem.Text. Dla każdego typu operatora (przypadku case) można już obliczyć wartość wyniku. Można następnie (po skończeniu instrukcji switch) sformatować odpowiednio uzyskany wynik tak, aby wyświetlone zostały obie wartości połączone operatorem, znak równości oraz sam wynik (np = 8). Każdy składnik powinien być oddzielony od swoich sąsiadów przynajmniej jedną spacją. Uzyskany napis można wstawić do etykiety LabWynik, ustawiając jej właściwość Text Kontrolki sprawdzające poprawność danych Mimo sporej funkcjonalności kalkulatora jest on nadal narażony na błędy, spowodowane wprowadzeniem niepoprawnych danych wejściowych. Wystarczy nie wpisać jednej z liczb lub podać w jej miejsce napis (np. jakieś imię), aby pojawiły się problemy. Aby zabezpieczyć stronę przed takimi oczywistymi błędami można skorzystać z gotowego rozwiązania ASP.NET, a mianowicie kontrolek sprawdzających automatycznie poprawność danych (ang. validators). W tym celu wykonaj następujące czynności: Kliknij w kontrolkę TxtLiczba1, a następnie naciśnij na klawiaturze strzałkę w prawo. Kursor zostanie postawiony za polem tekstowym. Wstaw złamanie linii, wciskając kombinację klawiszy Shift + Enter (efektem będzie znacznik <br>). Dodaj w tym miejscu kontrolkę RequiredFieldValidator i zmień jej nazwę (właściwość (ID)) na ReqLiczba1. Wybierz kontrolkę, która ma być sprawdzana, wskazując we właściwości ControlToValidate kontrolkę TxtLiczba1. Wstaw również kontrolkę RequiredFieldValidator za drugim polem tekstowym, nazywając ją ReqLiczba2 i wskazując do sprawdzania kontrolkę TxtLiczba2. Domyślnie kontrolki RequiredFieldValidator zawsze zajmują miejsce na stronie, nawet gdy ich nie widać. Jeśli chcesz, żeby kontrolki pojawiały się tylko w przypadku błędnych danych, ustaw ich właściwość na. Podsumowanie właściwości wstawionych kontrolek: Kontrolka Nazwa kontrolki (ID) Nazwa właściwości Wartość właściwości RequiredFieldValidator ReqLiczba1 ControlToValidate TxtLiczba1 wpisz liczbę! RequiredFieldValidator ReqLiczba2 ControlToValidate TxtLiczba2 6

7 wpisz liczbę! Sprawdź działanie strony uruchom ją i wciśnij przycisk Wynik, np. wpisując tylko jedną liczbę albo bez podania żadnej liczby. Strona jednak jeszcze nie jest zabezpieczona przed wpisaniem nieprawidłowych liczb. Dodaj więc za poprzednimi kontrolkami dodatkowe kontrolki RangeValidator. Pozwalają one na sprawdzenie, czy wpisana wartość odpowiada żądanemu typowi danych oraz czy mieści się ona we wskazanym zakresie. Podstawowe nowe właściwości wstawionych kontrolek to Type, Minimum oraz Maxium. Proponowane wartości właściwości znajdują się w poniższej tabeli: Kontrolka Nazwa kontrolki (ID) Nazwa właściwości Wartość właściwości RangeValidator RngLiczba1 ControlToValidate TxtLiczba1 błędna liczba! Type Double Minimum Maximum RangeValidator RngLiczba2 ControlToValidate TxtLiczba2 błędna liczba! Type Double Minimum Maximum Zapisz stronę i sprawdź, czy poprawnie działa. Ostatnim ulepszeniem jest to, że po otrzymaniu wyniku i zmianie operatora (w liście RblOperacja) w prawej etykiecie LabWynik wyświetlany jest wynik ostatniej operacji. Jest to niekonsekwencja. Dodaj więc na końcu obsługi zdarzenia SelectedIndexChanged jedną instrukcję, która będzie przywracać w prawej etykiecie domyślny napis (...). 7