pozwala nam to na uzyskanie bardziej urozmaiconej struktury strony

Transkrypt

pozwala nam to na uzyskanie bardziej urozmaiconej struktury strony
Zadanie
Użycie kilku PlaceHolderów
(pozwala nam to na uzyskanie bardziej urozmaiconej struktury strony)
Można to przedwiczyd to na nowej stronie wzorcowej, żeby nie „namieszad” w plikach, które Paostwo robicie.
Ale też można spróbowad na którymś z wcześniejszych plików.
1) Tworzymy nową stronę wzorcową.
2) dodajemy do niej drugą kontrolkę ContentPlaceHolder (ważne, żeby nie umieszczad drugiego PlaceHoldera
w pierwszym, bo nie zadziała).
3) efektem będzie możliwośd używania na stronach kilku miejsc na treśd stron ze stałym tekstem (tym co na
stronie wzorcowej) pomiędzy nimi. Oczywiście strona musi bazowad na MasterPage, żeby zadziałało :-)
Przyciski i ich oprogramowywanie - przykład
Zadanie
Obsługa zdarzenia „Button_Click”
1) napisad na stronie „Podaj swoje imię:”
2) wstawid kontrolkę TextBox
3) wstawid kontrolkę Button i zmienid tekst na kontrolce na „Wyślij”
4) napisad na stronie „Masz na imię:”
5) wstawid kontrolkę Label
6) dodad kontrolę zdarzenia Button1_Click (podobnie jak na poprzednich zajęciach - należy to zrobid w pliku z
kodem strony)
Label1.Text = TextBox1.Text;
7) sprawdzid czy działa
Zadanie
Użycie przycisków do uaktywniania poszczególnych paneli kontrolki MultiView. Kontrolka Multiview.
1) dodajemy nową stronę - np. NowaStrona.aspx,
2) wstawiamy na stronę:
a) kontrolkę MultiView,
Kontrolka MultiView jest to kontrolka pozwalająca na pokazywanie kolejnych „podstron” zrobionych w
ramach jednej strony.
Działa to w taki sposób, że do kontrolki MultiView dodajemy kontrolki View, uzupełniamy je o
treśd/zawartośd i po oprogramowaniu dodanych przycisków możemy kazad pokazywad kolejne strony
(widoki).
b) trzy (albo inną liczbę) kontrolki View, z tym, że jeśli będzie mniej lub więcej kontrolek View, to będzie trzeba
zmodyfikowad podany niżej kod
c) dwa przyciski (proszę zmienid tekst wyświetlany na przyciskach - jak na przykładzie)
*oczywiście w miejscu „pierwszy”, drugi”, „trzeci” może byd dowolna zawartośd stron a nie tylko tekst.
3) w pliku NowaStrona.aspx.sc, czyli w pliku, w którym przechowywany jest kod wykonywalny,
oprogramowujemy przyciski (miejsce wstawiania pokazuję na zrzucie na następnej stronie, a kod do
wstawienia jest na czerwono)
WAŻNE – aby wygenerowad pierwszą linię kodu, proszę kliknąd 2x w dany przycisk.
Można wprawdzie skopiowad stąd i wkleid do pliku całośd kodu, ale będzie
wtedy potrzebna ingerencja w kod kontrolki i dopisanie
onclick="Button1_Click" w kontrolce.
Najlepiej proszę pytać 
protected void Button1_Click(object sender, EventArgs e)
{
if (MultiView1.ActiveViewIndex == 0)
{
MultiView1.ActiveViewIndex = 2;
}
else
{
MultiView1.ActiveViewIndex -= 1;
}
}
protected void Button2_Click(object sender, EventArgs e)
{
if (MultiView1.ActiveViewIndex == 2)
{
MultiView1.ActiveViewIndex = 0;
}
else
{
MultiView1.ActiveViewIndex += 1;
}
}
w momencie kliknięcia elementu
„Button1” (nasz przycisk „wstecz”)
jeśli aktywny jest widok (View) o
indeksie „0”
aktywuj widok o indeksie „2”
w innym przypadku aktywuj widok o
indeksie mniejszym o 1 od
aktywnego
w momencie kliknięcia elementu
„Button2” (nasz przycisk „dalej”)
jeśli aktywny jest widok (View) o
indeksie „2”
aktywuj widok o indeksie „0”
w innym przypadku aktywuj widok o
indeksie większym o 1 od aktywnego
Chodzi o to, żeby przy „kraocowych” indeksach kontrolek View nie była wczytywana kontrolka kolejna
(poprzednia), ponieważ w naszym przykładzie kontrolki „-1” i „3” nie istnieją. W przypadku, gdybyśmy zostawili
tylko „plus” lub „minus” 1, to wyświetlał by się błąd - że nie ma kontrolki o takim indeksie.
Pierwsza kontrolka View ma indeks „0”, druga - „1”, trzecia - „2” itd.
cały kod w pliku NowaStrona.aspx.sc, wygląda tak (widad, gdzie należy wstawid kod do przycisków)
aby automatycznie pojawił się kod "protected void ......." należy 2x kliknąd przycisk na stronie w trybie Podgląd
(Design):
Kontrolka ImageMap, pozwala na stworzenie mapy odnośników (hiperłączy) na obrazku, czyli jeśli
klikniemy w jakieś konkretne miejsce obrazka, to np. przejdziemy na inną stronę.
- wstawiamy kontrolkę,
- we właściwościach wybieramy adres obrazka (zielona strzałka)
- możemy ustawid szerokośd obrazka (żółta strzałka) lub jego wysokośd (niebieska strzałka)
- teraz ustawimy tzw. HotSpots (aktywne/gorące punkty), czyli właśnie te miejsca, które będą
odnośnikami
przykładowe ustawienia
 AlternateText – pojawi nam się w momencie najechania
kursorem nad punkt
 Radius – promieo aktywnego punktu
 X i Y – pozycja względem osi
 HotSpotMode – jak ma działad punkt – tu użyjemy Navigate,
czyli nawigacji :)
 NavigateURL – adres, do którego przejdziemy po kliknięciu
 Target – jak ma nam się otwierad strona, np.:
o
_top – zamiast istniejącej strony (w
tym samym oknie/zakładce
o
_blank – w nowym oknie/zakładce
Inne parametry są z reguły potrzebne przy dodatkowym
oprogramowywaniu kontrolki.
Użycie kontrolki Table - kiedyś mieliśmy tabelę w HTML, tym razem kontrolka ASP
Struktura jest bardzo podobna do struktury tabeli w HTML.
Jest możliwe użycie okien właściwości do tworzenia tabeli, ale nie jest to jakiś bardzo wygodny sposób niektóre rzeczy łatwiej zrobid po prostu w kodzie.
Niemniej jednak oto ten sposób:
 W oknie właściwości tabeli jest pozycja "Rows", czyli "Wiersze", wywołujemy tą opcję otworzy się okno dodawania i formatowania wierszy,

z kolei w tym oknie, jak już dodamy jakiś wiersz, to będziemy mogli dodawad Komórki tabeli
(Cells):
Przykład tabeli (kod a poniżej efekt)
Proszę wypróbowad opcje tworząc jakąś "fajną" tabelę, proszę pytad w razie wątpliwości albo zerknąd na
podane poniżej strony.
Więcej na temat tworzenia tabel w ASP (angielskie)
http://www.w3schools.com/aspnet/control_table.asp
http://weblogs.asp.net/nannettethacker/archive/2008/01/24/html-tables-to-asp-net-tablecontrols.aspx
Jeśli ktoś chce dokładniej zapoznad się z możliwościami ustawieo kontrolki Menu, to można skorzystad ze strony (po
angielsku):
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu_properties.aspx
Darmowy hosting ASP
Strony, na których można założyd konto z darmowym serwerem ASP:
http://new.pipni.cz/
http://www.aspspider.com/
http://members.1asphost.com/otmain.aspx
http://studentlive.pl/
(tu jest hosting dla studentów - ale trzeba byłoby założyd konto na http://codeguru.pl i
założyd grupę związaną z Uczelnią)
http://home.pl/
(tu nie jestem pewny, które technologie są dostępne jako darmowe)
Jeśli zostanie czas to można zrobid zadanie dodatkowe – aplikację w C#.
Zadanie jest po to, żeby pokazad inne możliwości Visual Studio, np. tworzenie aplikacji.
To wprawdzie nie jest związane z tematyką tworzenia stron WWW, ale może przyda się informacja, że Visual Studio to
również aplikacja do typowego programowania, zresztą to dobre dwiczenie na proste oprogramowanie przycisków.
1. Tworzymy nowy projekt (New – Project).
2. Wybieramy język C# i Windows Application (Windows Form Application)
3. Utworzy się okno formularza
4. W formularzu (Form1) wstawmy przyciski (kontrolka Buttons)
5. Wstawiamy też panel (kontrolka Panel)
6. Zmieniamy nazwy przycisków
* w miejscu przycisku „wyłącz panel” są dwa przyciski – pod tym
widocznym jest jeszcze drugi – „włącz panel”
7. Po dwukrotnym kliknięciu na przycisk przejdziemy do edycji pliku „form1.cs”, gdzie będziemy mogli
oprogramowad nasze przycisk, np.:
 panel1.BackColor = Color.Red;


oznacza zmianę koloru elementu „panel1” na czerwony, czyli naszego panelu
button1.BackColor = Color.Red;
oznacza zmianę koloru przycisku „button1” na czerwony
panel1.Visible = false;
oznacza zmianę parametru widoczności/widzialności elementu „panel1” na
niewidoczny
8. Polecenia
1. przyciśnięcie przycisków „czerwony”, „niebieski” i „biały” ma powodowad zmiany koloru panelu na
odpowiedni a dodatkowo zmianę koloru przycisku na odpowiedni i wyłączenie kolorów pozostałych
dwóch przycisków (czyli de facto włączenie koloru szarego tych pozostałych przycisków)
2. przyciśnięcie przycisku „wyłącz panel” ma powodowad zniknięcie panelu, zniknięcie przycisku „wyłącz
panel” a pojawienie się przycisku „włącz panel” (w tym samym miejscu co włączenie panelu)
3. przyciśnięcie przycisku „włącz panel” ma działad odwrotnie do przycisku „wyłącz panel”
4. przyciśnięcie przycisku „przywród stan początkowy” ma powodowad, że wszystko wyglądad będzie tak
jak na początku
* aplikację uruchamiamy (kompilujemy i uruchamiamy) tak samo, jak w przypadku strony, czyli CTRL + F5
** proszę zobaczyd, że w katalogu, gdzie mamy nasz projekt, w podkatalogu o takiej samej nazwie są katalogi
„bin/Debug” a w środku skompilowana aplikacja w postaci pliku *.exe – można ją uruchamiad niezależnie - po prostu w
Windowsie uruchomid plik *.exe