BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Visual Studio LightSwitch kurs cz.1 - wprowadzanie danych

03-10-2011 19:55 | Grzegorz Gałęzowski
Visual Studio LightSwitch to nowe narzędzie do tworzenia aplikacji Silverlight opartych na danych w środowisku Visual Studio. Daje ono możliwość automatycznego generowania interfejsu użytkownika bez konieczności pisania kodu.

Visual Studio LightSwitch kurs cz.1 – wprowadzanie danych.

 

Dziś większość firm nie może przetrwać bez infrastruktury IT wspierającej ich działania. Przez długi czas, myśląc o infrastrukturze, mieliśmy na myśli tylko sprzęt, systemy operacyjne, czy też systemy zarządzania bazami danych i inne usługi, takie jak e-mail oraz systemy w zakresie zarządzania różnego rodzaju usługami, które stały się już standardem części infrastruktury IT. Często pojawia się sytuacja, w której potrzebujemy specyficznego oprogramowania dostosowanego do ich wymagań, którego wytworzenie będzie szybkie i proste. 

Istnieją różne narzędzia, w tym Visual Studio, które posiadają szeroki zakres zastosowań. Dzięki nim, a w szczególności Visual Studio, mogą być tworzone najprzeróżniejsze narzędzia od najprostszych do wysoce skalowalnych aplikacji internetowych. Ceną tej wolności i skalowalności jest to, że deweloperzy muszą inwestować stosunkowo dużą ilość pracy do stworzenia aplikacji. Mimo, że Visual Studio oferuje szereg funkcji zwiększających wydajność przy tworzeniu bazodanowych aplikacji, korzystanie z nich wymaga zaawansowanej wiedzy programistycznej. Są także dużo prostsze metody wytwarzania aplikacji bazodanych, np. MS Access, który w przeciwieństwie do Visual Studio, wymaga jedynie podstawowych umiejętności programistycznych. Prostota występująca w nim, pozwala użytkownikom na tworzenie tabel bazy danych, formularzy i raportów i to bez specjalistycznych kwalifikacji. Jednak ceną tej prostoty jest to, że Microsoft Access jest mocno ograniczony swoją architekturą. Tworzenie nieco bardziej skomplikowanych aplikacji wymaga zaawansowanych umiejętności programistycznych.

Jako członek rodziny Visual Studio, Visual Studio LightSwitch jest następnym etapem w procesie tworzenia aplikacji. Microsoft opracował ten produkt do wspierania szybkiego tworzenia aplikacji (RAD) typu line-of-business (LOB). LightSwitch to złoty środek między prostotą i elastycznością dostępną w Visual Studio. Z LightSwitch, można łatwo tworzyć systemy ukierunkowane na dane, projektować struktury danych i związanych z nimi UI. Aby utworzyć własne reguły sprawdzania poprawności danych i logiki nie trzeba pisać zbyt dużej ilości kodu - i co najważniejsze, nie trzeba mieć zaawansowanych umiejętności programistycznych.

Visual LightSwitch można doinstalować do Visual Studio 2010 w wersji Professional, Premium lub Ultimate, dzięki temu możemy zintegrować go z własnymi systemami back-end. Oczywiście, to wymaga zaawansowanej wiedzy programistycznej. Ale można użyć istniejącej aplikacji LightSwitch jako trampoliny i przez to nie trzeba tworzyć wszystkiego od podstaw. 

Zanim zagłębimy się w tworzenie aplikacji w LightSwitch, musimy trochę zrozumieć architekturę aplikacji LightSwitch.  Aplikacje LightSwitch oparte są na Silverlight i .NET, z wykorzystaniem znanych wzorców i najlepszych praktyk, takich jak wielowarstwowość czy Model-View-View Model (MVVM), jak również technologii, takich jak Entity Framework i WCF RIA Services (patrz rysunek 1).  Zespół LightSwitch doszedł do wniosku, że nie trzeba wymyślać nowej technologii, interfejsu, czy sposobu dostępu do danych, zamiast tego stworzyli ramy aplikacji wokół istniejących technologii  Microsoft NET Framework.

 

Rys. 1

Architektura ta oznacza, że aplikacje LightSwitch mogą być wdrażane jako aplikacje desktopowe, z możliwością integracji z urządzeniami zewnętrznymi takimi jak skaner czy czytnik kodów kreskowych, jak również z innymi aplikacjami, takimi jak Microsoft Word i Excel. Istnieje także możliwość wdrażania jako aplikacji www, gdy potrzebujemy szerszego odbioru wśród użytkowników. Aplikacje LightSwitch mogą być także wdrażane w środowisku chmury Windows Azure.

Konfiguracja środowiska LightSwitch

Microsoft Visual Studio LightSwitch jest elastycznym narzędziem programistycznym do zastosowań biznesowych, który pozwala programistom na wszystkich poziomach zaawansowania na szybkie tworzenie i wdrażanie profesjonalnych aplikacji dla komputerów stacjonarnych i aplikacji Web. Na samym początku będziemy musieli zainstalować LightSwitch w środowisku Visual Studio. Aby to zrobić, wykonaj następujące czynności:

1. Zainstaluj Visual Studio 2010 (jeżeli jeszcze nie miałeś wcześniej zainstalowanego).

2. Zainstaluj Visual Studio LightSwitch i wszystkie wymagane komponenty.

Pierwszy krok pominę i zajmę się instalacją LightSwitch 2011. Najpierw musimy zaopatrzyć się w instalator LightSwitch 2011 w wersji 90 dniowej, który możemy pobrać ze strony:

http://www.microsoft.com/visualstudio/en-us/lightswitch

Instalator LightSwitch zainstaluje wszystkie wymagane do poprawnego działania komponenty takie jak: SQL Express, Silverlight 4, itp.

Po uruchomieniu instalatora, naszym oczom ukaże się ekran jak na rysunku 2:

 

Rys. 2

Możemy przystąpić do instalacji programu. W tym celu najpierw należy zaakceptować postanowienia licencyjne (przycisk Accept).

Na następnym ekranie możemy już przejść do instalacji oprogramowania. Klikamy na przycisk Install Now (rysunek 3).

 

Rys. 3

Po chwili rozpocznie się już właściwa instalacja całego środowiska (rysunek 4).

 

Rys. 4

Gdy proces instalacji pomyślnie dojdzie do końca, zobaczymy stosowny ekran, który nas o tym fakcie poinformuje (rysunek 5). Klikając na przycisk Launch możemy uruchomić środowisko LightSwitch.

Rys. 5

Tworzenie pierwszego projektu w LightSwitch  

Po uruchomieniu Visual Studio LightSwitch, utworzymy nowy projekt. W tym celu wybieramy z menu File -> New -> Project (możemy to samo zrobić za pomocą kombinacji klawiszy Ctrl + Shift + N), aby otworzyć "New Project". Z panelu po lewej stronie, wybieramy "LightSwitch". W prawym okienku będzie dostępny filtr do szablonów projektu LightSwitch. Znajdziemy tam możliwość wyboru aplikacji typu VB i C #. W naszym przypadku wybierzemy i będziemy korzystać z wersji C #.

 

Rys.6

W oknie dialogowym widocznym na rysunku 5 możemy wprowadzić nazwę projektu (Name) i lokalizację dla niego przeznaczoną (Location), możemy także poprzestać na nazwie i lokalizacji domyślnej. Kliknięcie na przycisk "OK" spowoduje utworzenie pustego projektu LightSwitch. Należy uzbroić się w nieco cierpliwości, zanim utworzy się nasz nowy projekt. Tak więc, bądź cierpliwy.

Utworzenie tabeli bazy danych.

Gdy już projekt zostanie utworzony zobaczymy okno jak na rysunku 7:

 

 Rys. 7

Widać na nim, że mamy dwie opcje w interfejsie użytkownika. Możemy utworzyć nową tabelę dla danej aplikacji lub podłączyć się do zewnętrznej bazy danych w celu pobrania z niej określonych informacji. Sprawdzając Solution Explorer, możemy zauważyć, że projekt jest całkowicie pusty. Mamy tutaj tylko dwa foldery o nazwie "Data Sources" i "Screens". "Data Sources" przechowuje dane aplikacji tj. tabele bazy danych. Natomiast folder "Screens" zawiera stworzone przez nas ekrany z interfejsami użytkownika (UI). W dalszej części kursu ten element zostanie opisany bardziej szczegółowo. Utwórzmy nową tabelę dla naszej aplikacji. Kliknięcie "Create new table” spowoduje wyświetlenie poniższego ekranu (rysunek 8):

 

Rys. 8

Możemy tutaj zaprojektować strukturę tabeli. Każda tabela będzie posiadała klucz główny ("Id") typu "Integer". Dodajmy kilka kolumn do tabeli:

 

Rys. 9

Na powyższym rysunku widać, że istnieje kilka typów kolumn (typów danych) dostępnych w aplikacji LightSwitch.

Mamy następujące typy danych w LightSwitch:   

 
Type VB C# Zakres Uwagi
Binary Byte()  byte[] od 0 do 255 Przechowuje dane binarne o stałej długości
Boolean Boolean  Bool Prawda lub Fałsz  
Date DateTime DateTime od Stycznia 1, 0001 AD doGrudnia 31, 9999 AD DateTime traktowane jak dotychczas; LightSwitch obcina część czasu
DateTime DateTime DateTime od 00:00:00 Stycznia 1, 0001AD do23:59:59 Grudnia 31, 9999 AD  
Decimal Decimal Decimal  od ±1.0e−28 do ±7.9e28 Stała wartość dziesiętna; nadaje się do wartości finansowych i monetarnych, które są przechowywane z konkretną dokładnością i w określonej skali
Double Double  double od ±5.0e−324 do ±1.7e308 Nadaje się do zastosowań naukowych
EmailAddress String  string   String traktowany jako adres e-mail
Guid Guid  Guid od {00000000-0000-0000-0000-000000000000} do{FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFFFFFF} 128-bitowa liczba całkowita, traktowana jako unikalny identyfikator
Image Byte() byte[]   Obiekt binarny traktowany jako obraz
Integer Integer int od -2,147,483,648 do 2,147,483,647 32-bitowa liczba całkowita
Long Integer Long Long od -9,223,372,036,854,775,808 do 9,223,372,036,854,775,807 64-bitowa liczba całkowita
Money Decimal decimal   Decimal traktowany jako wartość pieniężna
PhoneNumber  String string   String traktowany jako numer telefonu 
Short Integer Short short od -32,768 do 32,767 16-bitowa liczba całkowita 
String String string Sekwencja zero lub więcej znaków Unicode O zmiennej długości
 

Warto wyjaśnić, że rodzaj gromadzonych danych ogranicza typ danych, jaki możemy przechowywać w kolumnie, a w niektórych przypadkach ogranicza zakres przyjmowanych wartości. Wybór typu danych w kolumnie jest najbardziej krytyczną decyzją podejmowaną podczas projektowania bazy danych. Jeżeli wybierzemy zbyt restrykcyjny typ danych, aplikacje nie będą mogły zapisywać danych, które mają przetwarzać. Natomiast jeżeli wybierzemy zbyt ogólny typ danych, spowoduje to niepotrzebne obciążenie przestrzeni dyskowej i pamięci, co może stworzyć problemy z zasobami i wydajnością.  

Czyli wybierając typ danych dla danej kolumny, powinniśmy wybrać typ pozwalający magazynować wszystkie spodziewane wartości danych, jednocześnie zajmując jak najmniej miejsca.

W naszej przykładowej aplikacji stworzymy 4 dodatkowe kolumny "Imię (String)", "Nazwisko (String)", "Wiek (Integer)" i "Ocena (Decimal)". Zmień tytuł tabeli z "Table1Item" na "TabelaStudenci". Ta nazwa będzie używana podczas zapisywania tabeli. Dla pewności zapiszmy tabelę. Jeśli chcemy zmienić później nazwę tabeli, trzeba będzie po prostu zmieić nazwę nagłówka tabeli i zapisać ją.

 

Rys. 10

Należy ustawić jeszcze wszystkie pola "Required" (wymagane) jako zaznaczone. Będzie to pomocne podczas weryfikacji danych. Zostanie to zaprezentowane później.

Pole wprowadzania danych 

Następnym krokiem po stworzeniu tabel bazy danych będzie utworzenie interfejsu aplikacji, który umożliwi użytkownikowi wprowadzanie danych. Kliknij na przycisk "Add New Screen" znajdujący się na górnej listwie, tak jak pokazano to na rysunku 11:

  

Rys. 11

Uruchomimy w ten sposób okno dialogowe "Add New Screen" (rysunek 12). Wybierz teraz szablon "New Data Screen", który znajduje się po lewej stronie. Z prawej strony wybieramy naszą tabelę z rozwijanego menu „Screen Data”. W pozycji „Screen Name” możemy zdefiniować nazwę ekranu, który właśnie tworzymy. Domyślnie zostanie utworzona nazwa „CreateNewStudenciTabela”.

 

Rys. 12

Kliknij na "OK", aby kontynuować. Spowoduje to utworzenie nowego ekranu interfejsu użytkownika dla naszej aplikacji. Dzięki temu interfejsowi po uruchomieniu aplikacja będzie umożliwiała wprowadzanie danych do naszej tabeli. Teraz w oknie Solution Explorer można zobaczyć, że folder "Data Sources" ma jedną bazę danych o nazwie "ApplicationData" i tabelę o nazwie "TabelaStudenci". Natomiast w folderze "Screens" można odnaleźć utworzony ekran wprowadzania danych o nazwie "CreateNewStudentTable".

Wygląd interfejsu użytkownika możemy zmienić na ekranie przedstawionym na rysunku 13:

 

Rys. 13

Można tutaj dodawać lub usuwać wszelkie możliwe elementy. Jednak w  naszej pierwszej przykładowej aplikacji, będziemy bazować na domyślnym układzie kontrolek.

Testowanie aplikacji

Już w tej chwili nasza aplikacja jest gotowa. Jak widać nie było to skomplikowane. Będziemy mogli nadal ją rozbudowywać poprzez wstawianie nowych rekordów w naszej tabeli bazy danych, dodawać kolejne ekrany z interfejsami użytkownika i modyfikować to wszystko według własnych potrzeb. Nie trzeba pisać ani jednej linii kodu.

Przetestujmy teraz aplikację. Aby tego dokonać, należy nacisnąć klawisz F5. Pozwoli to na zbudowanie rozwiązania. Kompilacja całej aplikacji zajmie trochę czasu. Gdy wszystko przebiegnie pomyślnie, zostanie uruchomione następujące okno (rysunek 14):

 

 Rys. 14

Mamy już uruchomioną aplikację. Visual Studio LightSwitch dodaje do projektu automatycznie dwa przyciski:

1.      "Save" – który umożliwia zapisywanie danych w bazie, które zostaną przez nas wprowadzone.

2.      "Refresh" – do odświeżania widoku.

W prawym górnym rogu ekranu, pojawi się przycisk "Design Screen Customize". Po kliknięciu na niego pojawi się kolejne okno, pozwalające dostosować ekran aplikacji do naszych potrzeb. Należy pamiętać, że ten przycisk nie będzie widoczny po wdrożeniu aplikacji.

Z lewej strony znajdziemy jeszcze menu, pod którym mamy przycisk "CreateNewStudentTable" umożliwiający tworzenie nowego rekordu.

Po prawej stronie mamy ekran z polami pozwalającymi na wypełnienie zdefiniowanych pozycji, takich jak Imię, Nazwisko, Wiek, Ocena.

Walidacja pól 

Jak już powiedziałem wcześniej, nasza aplikacja jest gotowa. Teraz musimy zająć się walidacją danych zawartych w aplikacji. Niespodzianka, nie musimy się o to martwić! LightSwitch zrobi to wszystko za nas. Sprawdzimy to przez wstawienie nieprawidłowych danych w formularzu. Będziemy celowo wprowadzać nieprawidłowe dane w polu "Wiek". Zamiast wprowadzania liczby określającej wiek, wpiszę to słownie (rysunek 15), by sprawdzić czy aplikacja wykryje błąd. Jeśli użyjemy tabulatora, lub klikniemy w innym miejscu, to nastąpi sprawdzenie poprawności i zostaniemy powiadomieni o błędzie (rysunek 16).

 

Rys. 15

 

Rys. 16

Gdy poprawimy wpisy na prawidłowe wartości we wszystkich polach klikamy przycisk "Save". Pozwoli to zapisać wszystkie rekordy w bazie danych.

 

 Rys. 17

Dodatkowo poza zapisaniem danych w bazie zostanie dodane automatycznie w interfejsie użytkownika pole o nazwie "Id" (rysunek 18). Wartość Id będzie równa 1 ponieważ była to pierwsza pozycja i będzie ona wzrastać o 1 przy dodawaniu kolejnych rekordów.

Rys. 18

Aby dodać następne rekordy, kliknij na przycisk "CreateNewStudeciTabela" w menu z lewej strony panelu.

Jeśli posiadamy niezapisane rekordy i chcemy, zamknąć kartę lub chcemy dodać nowy rekord, otworzy się nam okno dialogowe z komunikatem ostrzegawczym o niezapisanych zmianach. Zostaniemy także zapytani, czy przed wprowadzeniem zmian dokonać zapisu (Save), porzucić nowe dane (Discard) czy anulować operację (Cancel) (rysunek19).

 

Rys. 19

Modyfikacja interfejsu użytkownika 

Jeśli chcemy nieco zmienić interfejs użytkownika w czasie wykonywania aplikacji, musimy kliknąć na przycisk "Screen Customize" dostępny w prawym górnym rogu aplikacji. Pamiętaj, że przycisk nie będzie widoczny już po wdrożeniu gotowej aplikacji. Po kliknięciu przycisku przejdziemy do trybu Customization Mode. Tutaj można zmienić układ ekranu, wstawić lub usunąć pola albo modyfikować inne elementy. Na razie nie będziemy dokonywać większych modyfikwacji i będziemy bazować na domyślnym układzie. Kontynuacja tego wątku znajdzie się już w następnej części kursu.

 

Rys. 20

Jedyne co zrobimy na początku to zmiana nazwy przycisku „Create New Studenci Tabela” na coś bardziej zrozumiałego, np. Studenci ZKU ;)

Wybierz najwyższy poziom w pozycji ekranu w panelu właściwości "Display Name" i zamień  domyślną pozycję na własną. Teraz zapisz ustawienia i uruchom ponownie aplikację, aby zmiany odniosły skutek. Po uruchomieniu aplikacji możesz teraz, zobaczyć wprowadzone zmiany. 

Jeśli chcesz zrobić to samo wewnątrz Visual Studio, przejdź do panelu właściwości, jak pokazano na rysunku poniżej. Znajdź "Display Name" i zmień wyświetlaną tam nazwę na swoją. Uruchom aplikację, aby zobaczyć rezultat zmiany.

  

Rys. 21

 

Rys. 22

Podsumowanie 

Jak widać stworzenie aplikacji Silverlight w oparciu o dane aplikacji za pomocą Visual Studio LightSwitch jest niebywale proste. Nie trzeba pisać XAML lub kodu C # by mieć profesjonalną aplikację w Silverlight. Mam nadzieję, że kurs pomoże wszystkim oswoić się z narzędziem takim jak Visual Studio LightSwitch i przyda się wszystkim którzy są na razie na bakier z pisaniem kodu a potrzebują na szybko stworzyć aplikacje dostosowaną do własnych oczekiwań.

W kolejnej części kursu przedstawię zagadnienia dotyczące tworzenia wyszukiwarki danych. Znajdą się także wiadomości na temat sortowania rekordów i exportu danych do Excela.

Komentarze 5

sulmar
sulmar
21 pkt.
Nowicjusz
11-10-2011
oceń pozytywnie 0
Nie zgodzę się opinią, że LS jest dla osób, które są na bakier z pisaniem kodu. Szkolne przykłady działają faktycznie bez potrzeby pisania kodu. Ale rzeczywiste aplikacje wymagają grzebania w kodzie. Stworzyłem kilka komercyjnych aplikacji w LS i wiem co mówię. Na przykład wyświetlenie okna dialogowego, skopiowanie danych do schowka wymagają użycia Dispatchera. Problemów jest więcej. Reasumując: LS to świetnie narzędzie ale nadal wymaga dobrej znajomości kodu. Nie dajcie się nabrać na marketingowe chwyty.
valhallaman
valhallaman
0 pkt.
Nowicjusz
02-11-2011
oceń pozytywnie 0
Dokładnie tak - całkowicie zgadzam się z przedmówcą. Sporo piszę w LS - w chwilach, gdy coś zaczyna się nam sypać, przydaje się dogłębna znajomość c# i kilku technologii ... Przypomina mi się (dawno temu to było) podobna sytuacja z Magicem i artykuły "nareszcie narzędzie ponad 4GL dla mas" ....
Grzegorz Gałęzowski Ekspert WSS
Grzegorz Gałęzowski
1134 pkt.
Senior
16-12-2011
oceń pozytywnie 0
Ja się także nie zgodzę z Waszymi opiniami. To wcale nie się marketingowe chwyty. Wszystko zależy jaką aplikację się tworzy. Skoro tworzycie bardziej skomplikowane projekty to oczywiście znajomość kodu będzie potrzeba, co w przyszłości przedstawię w tym kursie. Jednak dla prostych aplikacji nie jest wymagana znajomość kodu. Kreatorów aplikacji jest dość dużo i znam przypadek gdzie aplikacje powstają w automatyczny sposób, przez osobę która nie ma pojęcia o programowaniu.
Grzegorz Gałęzowski Ekspert WSS
Grzegorz Gałęzowski
1134 pkt.
Senior
16-12-2011
oceń pozytywnie 0
To tak jakby stwierdzić że w MS Access nie można stworzyć bazy danych, bo konieczna jest znajomość VBA lub coś w tym rodzaju. Wszystko zależy od skali i potrzeb. LS ułatwia życie programistom i wiele elementów można zrobić bez klepania kodu. Jak już wspominałem bardziej skomplikowane projekty wymagają znajomości programowania. Chciałem tutaj wskazać, jak wiele można zrobić jednak bez tej znajomości.
sulmar
sulmar
21 pkt.
Nowicjusz
17-01-2012
oceń pozytywnie 0
Proste sprawy: Zaznacz na czerwono pole jeśli wartość jest powyżej 100. Wyświetl okno z komunikatem. Czy to już jest skomplikowany projekt? Czy są to bardzo specyficzne wymagania? Odejdź od aplikacji na 30 min. a jak wrócisz będzie na ciebie czekał Exception... Powtórze raz jeszcze: to jest marketing.
pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.