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