Krok 9. Przejrzenie, komentowanie i testowanie kodu

Musisz dodać poniższy komentarz do Twojego kodu.Komentarz to taka uwaga, która nie zmienia sposobu, w jaki program zachowuje się program.To ułatwia komuś, kto czyta swój kod, zrozumienie, co kod robi.Dodawanie komentarzy do kodu to dobry sposób.W języku Visual C# dwie kreski ułamkowe (//) oznaczają wiersz jako komentarz.W języku Visual Basic pojedynczy cudzysłów (') służy do oznaczania wiersza jako komentarz.Po dodaniu komentarza przetestuj swój program.Jest dobrą praktyką, aby uruchomić i przetestować kod często podczas pracy nad swoimi projektami, tak aby można było wyłapać i rozwiązać wszelkie problemy wcześnie, zanim kod stanie się bardziej skomplikowany.Określamy to nazwą testy iteracyjne.

Stworzyłeś właśnie coś, co działa, i mimo że nie jest jeszcze całkowicie gotowe, już można załadować obraz.Przed dodaniem komentarz do kodu i przetestowaniem go poświęć czas, aby zapoznać się z pojęciami kodu, ponieważ są to często używane pojęcia:

• Po dwukrotnym kliknięciu przycisku Pokaż obraz w programie Windows Forms Designer, IDE automatycznie dodaje metoda do kodu programu.

• Metody to sposób organizowania kodu: określają, jak kod jest zgrupowany razem.

• W większości przypadków metoda wykonuje kilka rzeczy w określonej kolejności, jak Twoja metoda showButton_Click() pokazująca okno dialogowe, a następnie ładująca obraz.

• Metoda składa się z kodu instrukcji lub linii kodu.Myśl o metodzie jak o sposobie na powiązanie ze sobą instrukcji kodu.

• Gdy metoda jest wykonywana, lub wywoływana, instrukcje w metodzie są wykonywane w kolejności, jedna po drugiej, począwszy od pierwszej.

  Oto przykład instrukcji.

  pictureBox1.Load(openFileDialog1.FileName);
  

  pictureBox1.Load(openFileDialog1.FileName)
  

  Instrukcje to coś, co sprawia, że programy robią pewne rzeczy.W języku Visual C# instrukcja zawsze kończy się średnikiem.W języku Visual Basic koniec wiersza jest końcem instrukcji. (Średnik nie jest potrzebny w języku Visual Basic). Poprzednia instrukcja nakazuje Twojemu formantowi PictureBox załadowanie pliku, którą użytkownik wybrał ze składnikiem OpenFileDialog.

Wersja wideo tego tematu – zobacz Samouczek 1: Tworzenie przeglądarki obrazów w Visual Basic – wideo 5 lub Samouczek 1: Tworzenie przeglądarki obrazów w języku C# – wideo 5.W tych filmach wideo jest używana starsza wersja programu Visual Studio, więc istnieją drobne różnice w niektórych poleceniach menu i innych elementach interfejsu użytkownika.Jednakże pojęcia i procedury działają podobnie w bieżącej wersji programu Visual Studio.

Aby dodać komentarze

1. Dodaj poniższy komentarz do Twojego kodu.

   Private Sub showButton_Click() Handles showButton.Click
   
       ' Show the Open File dialog. If the user clicks OK, load the 
       ' picture that the user chose. 
       If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.Load(OpenFileDialog1.FileName)
       End If 
   
   End Sub
   

   private void showButton_Click(object sender, EventArgs e)
   {
       // Show the Open File dialog. If the user clicks OK, load the 
       // picture that the user chose. 
       if (openFileDialog1.ShowDialog() == DialogResult.OK)
       {
           pictureBox1.Load(openFileDialog1.FileName);
       }
   }
   

   [!UWAGA]

   Program obsługi zdarzeń Twojego przycisku showButton jest zakończony i działa.Rozpocząłeś pisanie kodu, począwszy od instrukcji if.Instrukcja if wskazuje, jak sprawdzić program, „Sprawdź to jedno i jeśli to prawda, wykonaj te akcje”. W tym przypadku powiesz programowi, aby otworzył okno dialogowe Otwórz plik, a jeśli użytkownik wybierze plik i wybierze przycisk OK, załadował ten pliku w elemencie PictureBox.

   Porada

   IDE zostało zbudowane tak, aby ułatwiać pisanie kodu, i pomagają mu w tym fragmenty kodu.Wstawka to skrót, który rozwija się w małych blokach kodu. Możesz zobaczyć wszystkie dostępne wstawki.Na pasku menu wybierz kolejno polecenia Narzędzia > Menedżer fragmentów kodu.Dla języka Visual C# wstawka if znajduje się w folderze Visual C#.Dla języka Visual Basic wstawki if są w ścieżce Instrukcje warunkowe i pętle > Wzorce kodu.Możesz użyć tego menedżera do przeglądania istniejących wstawek lub dodać własne wstawki. Aby uaktywnić wstawkę podczas wpisywania kod, wpisz go i wybierz klawisz TAB.Wiele wstawek kodu programu pojawia się w oknie IntelliSense, dlatego wybierz klawisz TAB dwa razy: najpierw do wybrania wstawki z okna IntelliSense, a następnie poinformowania środowiska IDE, że ma używać tej wstawki. (Technologia IntelliSense obsługuje wstawkęif, ale nie ifelse).

2. Przed uruchomieniem programu należy zapisać program, wybierając przycisk paska narzędzi Zapisz wszystko.

   Przycisk Zapisz wszystko

   

   Alternatywnie można zapisać swój program, klikając na pasku menu Plik, Zapisz wszystko.Najlepiej jest zapisywać wcześnie i często.

   W trakcie pracy Twój program powinien wyglądać tak, jak na poniższej ilustracji.

   Przeglądarka obrazów

   

Aby przetestować swój program

1. Wybierz klawisz F5 lub przycisk na pasku narzędziRozpocznij debugowanie.

2. Wybierz przycisk Pokaż obraz, aby uruchomić napisany właśnie kod.Najpierw program otworzy okno dialogowe Otwórz plik.Sprawdź, czy filtry są widoczne na liście rozwijanej Pliki typu w dolnej części okna dialogowego.Następnie przejdź do obrazu i otwórz go.Zazwyczaj można znaleźć przykładowe obrazy, które są dostarczane z systemem operacyjnym Windows w folderze Moje dokumenty, wewnątrz folderu My Pictures\Sample Pictures.

   [!UWAGA]

   Jeśli nie widzisz żadnych obrazów w oknie dialogowym Wybierz plik obrazu, upewnij się, że filtr „Wszystkie pliki (*.*)” jest zaznaczony na liście rozwijanej po prawej stronie u dołu okna dialogowego.

3. Załaduj obraz, a pojawi się w obiekcie PictureBox.Następnie spróbuj zmienić rozmiar formularza przeciągając jego obramowania.Ponieważ Twoje PictureBox zadokowano wewnątrz elementu TableLayoutPanel, który sam jest zadokowany wewnątrz formularza, Twój obszar obrazu będzie zmieniany tak jak szerokość całego formularza i wypełni 90% formularza od góry.Dlatego użyłeś pojemników TableLayoutPanel i FlowLayoutPanel: Utrzymują one prawidłowy rozmiar formularza, gdy użytkownik zmienia jego rozmiar.

   Większe zdjęcia wykraczają teraz poza granice przeglądarki obrazów.W następnym kroku należy dodać kod, aby obrazy mieściły się w oknie.

Aby kontynuować lub przeglądnąć

• Aby przejść do kolejnego kroku samouczka, zobacz Krok 10. Zapisywanie kodu dla dodatkowych przycisków i pola wyboru.

• Aby powrócić do poprzedniego kroku samouczka, zobacz Krok 8. Wpisywanie kodu dla obsługi zdarzeń pokazywania przycisków obrazowych.