Schnelleinstieg

Meine erste Windows-Phone-App
Kommentare

In diesem Kapitel wird es um die Voraussetzungen, die Werkzeuge sowie die wichtigsten Grundlagen bei der Entwicklung einer ersten App für die Windows-Phone-8-Plattform gehen. Dabei werden die Werkzeuge und Tech-nologien nach und nach anhand erster praktischer Beispiele und Übungen vorgestellt, die bei der Erstellung der App eine Rolle spielen. 

Schnelleinstieg

Dieser Abschnitt soll Ihnen einen Überblick über die Verwendung der Werk-zeuge bei der Erstellung Ihrer Windows-Phone-App sowie einen ersten Ein-blick in die Vorgehensweise der mobilen Programmierung geben. 

Aufbau von Visual Studio 2012

Die Entwicklungsumgebung von Visual Studio 2012 besteht aus mehreren Fenstern, die sich entweder innerhalb des Hauptfensters oder unabhängig voneinander anordnen lassen. Die Fenster sind standardmäßig so angeordnet, dass Sie links Werkzeuge und Hilfsmittel finden, in der Mitte einen großen Bereich mit dem eigentlichen Editor und rechts die Projektverwaltung und eventuell Hilfe- und Ausgabefenster. Sie arbeiten in Visual Studio, wie Sie auch einen Brief schreiben, nämlich von links nach rechts.

Nach dem Start wird zunächst die Startseite angezeigt (Abb. 2.1). Hier kön-nen Sie ggf. zuvor bearbeitete Projekte oder Dateien öffnen, neue Projekte anlegen, Informationen über mögliche erste Schritte erfahren oder die aktuel-len Nachrichten über Visual Studio in Form eines Newsfeeds ansehen.


Abbildung 1: Startbildschirm von Visual Studio 2012

Erste Schritte

Legen Sie ein neues Windows-Phone-Projekt an. Verwenden Sie dazu das Menü DATEI | NEU | PROJEKT oder die Tastenkombination STRG+UMSCHALT+N. Klicken Sie in dem folgenden Assistenten auf der linken Seite auf WINDOWS PHONE. So schränken Sie die aktuell angezeigten Projektvorlagen auf alle Windows-Phone-Vorlagen ein. Wählen Sie anschie-ßend die Vorlage WINDOWS PHONE APP. Diese Vorlage erstellt eine leere Windows-Phone-App. Nennen Sie die Projektmappe (engl.: Solution) FeedReader.


Abbildung 2: Vorlagenauswahl in Visual Studio 2012

Im nächsten Schritt werden Sie aufgefordert, eine OS-Version für das neue Windows-Phone-Projekt festzulegen. Sie haben hier die Auswahl zwischen Windows Phone OS 8.0 oder der Vorgängerversion Windows Phone OS 7.1. Wenn Sie das Windows Phone 7.8 SDK installiert haben, steht dieses eben-falls zur Auswahl.

Hinweis: Die Versionierung kann an dieser Stelle etwas verwirrend sein. Das Windows-Phone-Mango-Release wird auf den Geräten mit der Versionsnummer 7.5 verkauft. Das entsprechende SDK trägt hingegen die Versionsnummer 7.1.

Wählen Sie für dieses Projekt „Windows Phone 8.0“ aus. Der Assistent erstellt  aus der Projektvorlage ein Windows-Phone-Projekt. Visual Studio 2012 startet jetzt mit der Designansicht der Hauptseite der App MainPage.xaml.

Aufmacherbild: open old recipe book on checkered tablecloth von Shutterstock / Urheberrecht: Jiri Hera

[ header = Die Designansicht ]

Die Designansicht

Die Designansicht teilt sich in drei Bereiche: Auf der linken Seite befindet sich der so genannte UI Designer, der im Folgenden kurz Designer genannt wird. In der Mitte steht der XAML-Markup-Code (Beschreibungscode), der das Design auf der linken Seite beschreibt. Auf der rechten Seite ist der Pro-jektmappen-Explorer (engl.: Solution Explorer) zu sehen. Dieser zeigt alle Projekte sowie alle darin befindlichen Quellcode- und Projektdateien an.


Abbildung 3: Visual Studio 2012 Designer

Kompakt: Bei Windows Phone (wie auch bei anderen auf WPF oder Sil-verlight basierenden Projekten) wird die Beschreibung der Oberfläche (engl.: Design) vom Programmcode getrennt. Für die Oberflächenbeschreibung wird XAML verwendet. Dabei handelt es sich um einen XML-Dialekt. Mithilfe dieser Be-schreibungssprache können ganze Objektbäume inklusive ihrer Werte abgebildet werden.

Sollte die Datei MainPage.xaml nicht geöffnet sein, öffnen Sie diese bitte mit einem Doppelklick auf den Dateinamen im Projektmappen-Explorer. 

Betrachtet man diese Datei etwas genauer, findet sich darin als oberstes Ele-ment die Seite (PhoneApplicationPage), gefolgt von verschiedenen Namens-raumdeklarationen. Eingebettet in die Seite findet sich als nächstes Element ein Tabellenlayout (Grid), das über zwei Zeilen verfügt. Die erste Zeile hat den Wert Auto für die Höhe. Das bedeutet, dass diese Zeile so hoch sein wird wie das größte darin enthaltene Element. Die zweite Zeile hat als Höhe den Wert *. Das bedeutet, dass diese Zeile in dem Beispiel den Rest der maximal verfügbaren Höhe einnimmt.

Kompakt: Ein Grid-Steuerelement ordnet die untergeordneten UI-Elemente in Tabellenform an. Dafür stehen Zeilen und Spalten zur Verfügung, die mithilfe von Zeilen- und Spaltendefinitio-nen festgelegt werden.

In das Grid eingebettet befinden sich zwei weitere Elemente. Als Erstes wird ein Stapellayout (StackPanel) in der Reihe 0 des äußeren Grids angeordnet sowie ein weiteres inneres Grid in der Zeile 1.  

Kompakt: Ein StackPanel ordnet die untergeordneten UI-Elemente in der Form eines Stapels an. Dabei kann zwischen einem horizonta-len oder vertikalen Stapel unterscheiden werden.

In dem Beispiel bildet das StackPanel den Kopf der Seite, der wiederum aus zwei Textblöcken mit unterschiedlichen Schrifteinstellungen besteht. Diesem Element ist der Name TitelPanel zugeordnet.
Der Inhalt der Seite wird in das innere Grid mit dem Namen ContentPanel eingefügt.

<phone:PhoneApplicationPage
    x:Class="FeedReader.MainPage"
    xmlns="http://schemas. . ./presentation"
    . . .
    shell:SystemTray.IsVisible="True">
 
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel" Grid.Row="0" 
                Margin="12,17,0,28">
      <TextBlock Text="Meine Anwendung" 
                 Style="{StaticResource PhoneTextNormalStyle}" 
                 Margin="12,0"/>
      <TextBlock Text="Seitenname" Margin="9,-7,0,0" 
                 Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <Grid x:Name="ContentPanel" Grid.Row="1" 
          Margin="12,0,12,0">
      <!—Hier steht der Inhalt der Seite -->
    </Grid>
  </Grid>
</phone:PhoneApplicationPage> 

Ändern Sie als Erstes die Überschrift von „Meine Anwendung“ auf „Windows Phone 8“ und die Seitenüberschrift von „Seitenname“ auf „Feed Reader“, indem Sie die jeweilige Texteigenschaft in der XAML-Datei in den Text-blöcken innerhalb des TitelPanels anpassen. 

Während Sie diese Änderungen vornehmen, können Sie diese in der links daneben befindlichen Designansicht mitverfolgen. Alles, was Sie an dem XAML-Markup-Code ändern, wirkt sich sofort auf die Designansicht aus. Das Gleiche gilt für alle Änderungen an der Designansicht, die sich nämlich sofort auf den Markupcode auswirken. Man spricht hier von einem Round-trip-fähigem Werkzeug, weil Änderungen zu jedem Zeitpunkt in Änderungen auf der jeweils anderen Seite resultieren.

[ header = Das Datenmodell ]

Das Datenmodell

Für diese FeedReader-App wird ein Datenmodell benötigt, das später die einzelnen Feed-Elemente aufnehmen soll. Um den Richtlinien für Apps zu folgen, empfiehlt es sich, Modellklassen in dem Ordner Model abzulegen. Klicken Sie dazu mit der rechten Maustaste auf den Projektordner in dem Projektmappen-Explorer und wählen HINZUFÜGEN | NEUER ORDNER.  


Abbildung 4: Einfügen eines neuen Ordners

Klicken Sie anschließend mit der rechten Maustaste auf den neu erstellten Ordner Model und fügen Sie eine neue Klasse hinzu: HINZUFÜGEN | KLAS-SE…Nennen Sie die neue Klasse FeedItem.cs


Abbildung 5: Erstellen der Klasse „FeedItem“

Fügen Sie anschießend folgenden Code ein:

 using System;
namespace FeedReader.Model {
  /// <summary>
  /// Repraesentiert einen einzelnen Artikel eines RSS-Feeds.
  /// </summary>
  public class FeedItem  {
    /// <summary>
    /// Titel des Artikels
    /// </summary>
    public string Title { get; set;  }

    /// <summary>
    /// Beschreibung des Artikels
    /// </summary>
    public string Description { get; set; }
  
    /// <summary>
    /// Veröffentlichung des Artikels
    /// </summary>
    public string DatePublished { get; set; }

    /// <summary>
    /// URL zum Artikel
    /// </summary>
    public string ArticleURL { get; set;  }
  }
} 

Herunterladen des Feeds

Um im nächsten Schritt etwas komfortabler auf das API der Klasse WebRequest zugreifen zu können, benötigen Sie die Erweiterungsfunktion GetResponseAsync. Diese Hilfsfunktion erweitert die Klasse WebRequst um eine zusätzliche Funktion, mit deren Hilfe Sie asynchron auf das Ergebnis eines WebRequests zugreifen können. Erstellen Sie dazu einen weiteren Ordner Code und innerhalb dieses Ordners den Ordner Utilities in dem Windows-Phone-Projekt. Platzieren Sie dort die Klasse HttpExtentions.

public static class HttpExtensions {
    public static Task<HttpWebResponse> GetResponseAsync(this HttpWebRequest request) {
      var taskComplete = new TaskCompletionSource<HttpWebResponse>();
      request.BeginGetResponse(asyncResponse => {
        try {
          var responseRequest = (HttpWebRequest)asyncResponse.AsyncState;
          var someResponse = (HttpWebResponse)responseRequest.EndGetResponse(asyncResponse);
          taskComplete.TrySetResult(someResponse);
        } catch (WebException webExc) {
          var failedResponse = (HttpWebResponse)webExc.Response;
          taskComplete.TrySetResult(failedResponse);
        }
      }, request);
      return taskComplete.Task;
    }
} 

Navigieren Sie jetzt auf die Datei MainPage.xaml.cs. Erstellen Sie dort die private Hilfsfunktion UpdateFeed.

private async Task<IEnumerable<FeedItem>> UpdateFeed(string url) {

      string result = "";
      var request = WebRequest.CreateHttp(url);
      request.Accept =     
        "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8";

      var response = await request.GetResponseAsync();

      using (var stream = response.GetResponseStream()) {
        using (var reader = new StreamReader(stream)) {
          result = await reader.ReadToEndAsync();
        }
      }

      var feed = XElement.Parse(result);

      var articles = from item in feed.Descendants("item")
                     select new FeedItem() {
                       Title = item.Element("title").Value, DatePublished = item.Element("pubDate").Value),       Description = item.Element("description").Value,
                       ArticleURL = item.Element("guid").Value
                  };

      return articles;
    }

Zunächst wird mithilfe des URLs ein neuer WebRequest erstellt, der das XML-Dokument mithilfe der zuvor erstellten Erweiterungsfunktionen  asynchron herunterlädt. Anschließend werden die einzelnen Artikel unter Verwendung von Linq2XML in FeedItems konvertiert.

[ header = Gestaltung des UI ]

Gestaltung des UI

Nachdem die FeedReader-App über eine Modelklasse und eine Funktion zum Herunterladen des Feeds verfügt, geht es jetzt an die Gestaltung der Benutzeroberfläche (engl. User Interface, kurz UI). Öffnen Sie die Designansicht der Datei MainPage.xaml mit einem Doppelklick im Solution Explorer.
Teilen Sie das ContentPanel (Grid) in zwei Zeilen. Dazu gibt es zwei Möglichkeiten: Die erste Möglichkeit ist die Verwendung des XAML-Markup-Editors. Fügen Sie folgenden XAML-Quellcode in das ContentPanel ein.

<!--ContentPanel - zusätzliche Inhalte hier platzieren--> 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  <Grid.RowDefinitions>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
  </Grid.RowDefinitions>
</Grid> 

Alternativ können Sie auch das ContentPanel auf der linken Seite im Desig-ner auswählen und die Eigenschaften (Properties) öffnen. Klicken Sie dazu mit der rechten Maustaste auf das Grid und wählen Sie EIGENSCHAFTEN oder drücken Sie die F4-Taste, wenn Sie das entsprechende Element ausge-wählt haben. 

Öffnen Sie die Gruppe Layout in den Eigenschaften und klicken Sie auf das …-Symbol am Ende der Eigenschaft RowDefinitions.


Abbildung 6

Es öffnet sich ein Editor, mit dem Sie vorhandene Zeilen bearbeiten und neue Zeilen einfügen können. Fügen Sie eine neue Zeile mithilfe der Schaltfläche HINZUFÜGEN hinzu. Setzen Sie auf der rechten Seite die Eigenschaft Height auf 1 Star. Fügen Sie eine zweite Zeile hinzu mit dem Wert für die Height = Auto.


Abbildung 7: Einfügen von zwei Reihendefinitionen 

Fügen Sie anschießend eine ListBox mit dem Namen „lbFeed“ in das Contet-Panel hinzu. Um diese ListBox in der ersten Reihe des Grids zu positionieren, verwenden Sie die erweiterte Eigenschaft Grid.Row =“0“ innerhalb der ListBox. In der zweiten Reihe (Grid.Row=“1″) des Grids fügen Sie ein einen Button mit der Beschriftung Aktualisieren hinzu. Das vollständige ContentPanel sieht dann etwa wie folgt aus:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"></RowDefinition>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
    <ListBox x:Name="lbFeed" Grid.Row="0"></ListBox>
    <Button Grid.Row="1" x:Name="btnRefresh">Aktualisieren</Button>
  </Grid>

In der Designansicht können Sie bereits eine Vorschau auf Ihre App sehen.


Abbildung 8: Vorschau der FeedReader-App in der Designansicht

[ header = Verbinden des UI mit dem Programmcode ]

Verbinden des UI mit dem Programmcode

Im letzten Schritt geht es darum, die erstellten UI-Elemente der Oberfläche mit dem vorbereiteten Programmcode zu verbinden. Als Erstes wird ein Event Handler für das Klickereignis des Aktualisieren-Buttons benötigt.
Für die Erstellung eines Event Handlers gibt es wieder zwei Möglichkeiten: Die erste Möglichkeit besteht darin, in dem XAML-Markup-Editor innerhalb des Button Tags den Namen des Ereignisses, gefolgt von einem Gleichheits-zeichen zu schreiben. In diesem Beispiel geben Sie Click= ein. Mit dem Schreiben des Gleichheitszeichens öffnet sich ein Assistent, der einen Vor-schlag für einen automatisch erzeugten Event Handler anbietet. Wenn Sie jetzt zweimal die Tab-Taste betätigen, generiert Visual Studio den Funktions-rumpf für den Event Handler automatisch.


Abbildung 9: Automatisches Generieren eines Event Handlers

Alternativ können Sie auch einen Doppelklick auf den Button innerhalb der Designansicht machen. Visual Studio 2012 erzeugt dann direkt einen Handler für das Standardereignis, das bei einem Button das Klickereignis ist. Sollte das entsprechende Ereignis bereits über einen Handler verfügen, springt der Editor direkt auf den vorhandenen Handler.

Als Nächstes muss der generierte Event Handler mit dem Schlüsselwort async gekennzeichnet werden, um in diesem Handler die vorbereitete asynchrone Funktion UpdateFeed verwenden zu können.

private async void btnRefresh_Click(object sender, 
               RoutedEventArgs e) {
  var articles = 
  await UpdateFeed("http://dotnetautor.de/GetRssFeed");
  lbFeed.ItemsSource = articles;
    }

Die einzelnen Elemente des Feeds werden geladen und der Datenquelleigenschaft ItemsSource der ListBox zugewiesen. Dabei kann auf die ListBox mithilfe ihres Namens aus der C#-Quellcodedatei zugegriffen werden. 

Erstellen einer Schablone für die Elemente

Um die Elemente innerhalb einer ListBox darstellen zu können, benötigt diese eine Schablone (engl. Template), die als Vorlage dient. Diese wird der Eigenschaft ItemTemplate zugewiesen. Öffnen Sie die Markup-Datei Main-Page.xaml und fügen Sie folgende Schablone ein:

<ListBox x:Name="lbFeed" Grid.Row="0">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Margin="0,15" Width="400">
        <Rectangle Fill="{StaticResource PhoneAccentBrush}" 
                   Height="5" Margin="12,0,12,5"/>
        <TextBlock Text="{Binding Title}" 
                   Style="{StaticResource PhoneTextTitle3Style}" 
                   HorizontalAlignment="Left" 
                   TextWrapping="Wrap" />
        <TextBlock Text="{Binding Description}"
               Style="{StaticResource PhoneTextNormalStyle}"
                       HorizontalAlignment="Left" 
                       TextWrapping="Wrap" />
        <TextBlock Text="{Binding DatePublished}" 
              Foreground="{StaticResource PhoneAccentBrush}"
              Style="{StaticResource PhoneTextSubtleStyle}"/>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>
Kompakt: Ein ItemTemplate besteht immer aus einem DataTemplate, welches das Aussehen für jeweils ein darzustellendes Element der Liste in einer ListBox oder ListView darstellt.

An dieser Stelle soll die Schablone nur grob erklärt werden, Details zu den einzelnen Komponenten und Techniken finden sich in den jeweiligen Abschnitten später im Buch wieder.

In diesem Beispiel werden die darzustellenden Elemente mithilfe eines StackPanels übereinander angeordnet. Als Erstes wird eine horizontale Trennlinie zwischen den Elementen mithilfe eines Rechtecks gebildet, da es kein explizites Linienelement gibt. Anschließend werden drei Textblöcke eingefügt, mit jeweils einem anderen Style. Um nicht jeden Style wieder und wieder neu definieren zu müssen und um dem benutzerdefinierten UI-Schema folgen zu können, stehen unter Windows Phone 8 vorgefertigte Styles in Form von statischen Ressourcen zur Verfügung.
Die Inhalte werden mithilfe der Datenbindung ab den jeweiligen Feldern des FeedItem-Datenmodells gebunden. Bei der Darstellung der Elemente sorgt dann das Binding Framework dafür, die jeweiligen Elemente mit den ent-sprechenden Daten zu versorgen.

[ header = Der erste Start der FeedReader-App ]

Der erste Start der FeedReader-App

Nachdem alle Komponenten soweit zusammengefügt wurden, ist es an der Zeit, die FeedReader-App das erste Mal zu starten. Wählen Sie dazu den Emulator WVGA 512MB(DE) (sofern er nicht bereits vorausgewählt ist) und betätigen Sie die Schaltfläche START.


Abbildung 10: Auswählen des Emulators und Starten der Windows-Phone-8-App

Der Emulator startet und Visual Studio 2012 wird die App an ihn übertragen, sobald der Emulator vollständig gestartet ist. Anschließend wird die FeedReader-App automatisch ausgeführt. 

Betätigen Sie die Schaltfläche AKTUALISIEREN. Sie sollten jetzt die aktuellsten Artikel sehen.


Abbildung 11: Der FeedReader im Emulator

[ header = Fehlersuche ]

Fehlersuche

Es kann immer wieder einmal vorkommen, dass Programme nicht von An-fang an so laufen wie sie sollen. Hierfür bietet Visual Studio 2012 verschie-dene Möglichkeiten der Analyse, die im Folgenden kurz vorgestellt werden sollen. 

Haltepunkte

Ein Haltepunkt (engl. Break Point) wird bei der Fehleranalyse an den Stellen im Programm gesetzt, an denen die Abarbeitung der Befehle für weitere Analysen unterbrochen werden soll.

Haltepunkt anlegen

In Visual Studio 2012 gibt es zwei Möglichkeiten, einen Haltepunkt anzule-gen. Zum einen wird der Haltepunkt mithilfe der F9-Taste für die Anweisung bzw. Zeile aktiviert, in der sich der Cursor befindet, wenn diese Taste ge-drückt wird. Durch nochmaliges Betätigen der F9-Taste kann der Haltepunkt wieder entfernt werden.

Alternativ kann  ein Haltepunkt durch einen Mausklick in die Haltepunktleiste (linker Rand des Editors) für die erste Anweisung in der jeweiligen Zeile aktiviert bzw. deaktiviert werden.


Abbildung 12: Setzen eines Haltepunkts

Probieren Sie es aus: Setzen Sie einen Haltepunkt, z. B. in die Zeile 52 in der Datei MainPageXaml.cs. Wenn das Programm im Debug Mode (F5) mit aktiven Haltepunkten ausgeführt wird, bleibt die Verarbeitung automatisch an dem nächsten Haltepunkt stehen. In dem Fenster „Lokal“ werden alle lokalen Variablen mit ihren aktuellen Inhalten angezeigt. 

Der Inhalt einer Variablen im Quelltext kann angezeigt werden, indem die Maus auf die Variable geschoben wird. Es erscheint eine Anzeige mit dem Namen der Variablen und dem Inhalt. Je nach Typ kann die Anzeige des Inhalts variieren. Die gelb markierte Zeile zeigt auf die nächste auszuführende Anweisung. 

Die angezeigten Inhalte der Variablen können nicht nur gelesen, sondern auch verändert werden. Das ist besonders hilfreich, wenn während der Analyse einer oder mehrere Werte vor dem Fortsetzen der Verarbeitung „korri-giert“ werden sollen.


Abbildung 13: Programm innerhalb des Debuggers

Abarbeitung fortsetzen

Nach der Analyse kann die Verarbeitung in einzelnen Schritten oder mit Weiter fortgesetzt werden. 

  • Einzelschritt – F11-Taste: Die nächste Anweisung wird ausgeführt. Handelt es sich dabei um eine Funktion, springt der Debugger in diese Funk-tion.
  • Prozedurschritt – F10-Taste: Die nächste Anweisung wird ausgeführt. Handelt es sich dabei um eine Funktion, führt der Debugger diese Funktion als eine Anweisung aus.
  • Rücksprung – Shift+F11-Taste: Der Debugger führt alle Anweisungen bis zu Ende der aktuellen Funktion aus. 
  • Weiter – F5-Taste: Der Debugger führt das Programm bis zum nächsten Haltepunkt oder Ende aus.

Der Ausführungszeiger (gelbe Markierung) kann vor dem Fortsetzen inner-halb eines Funktionsblocks mit der Maus vor- oder zurückgeschoben werden. Ziehen Sie dazu den kleinen gelben Pfeil in der Haltepunktleiste hoch oder runter. So lassen sich Anweisungen überspringen oder wiederholen. 


Abbildung 14: Ausführungszeiger verschieben

[ header = Weitere Informationen ]

Weitere Informationen

Aufrufliste

In diesem Fenster wird die Hierarchie der Funktionen angezeigt, die zum Aufruf der aktuellen Funktion geführt hat. Mit einem Doppelklick auf die jeweilige Aufrufebene kann der Kontext der Ansicht gewechselt werden und die Parameter können eingesehen werden, die an die entsprechende Funktion übergeben wurden.


Abbildung 15

Direktfenster

Wenn die App während des Debuggens gerade in einem Haltepunkt steht, können in dem Direktfenster C#-Anweisungen eingegeben werden, die sich nicht im Quellcode des Programms befinden. Es ist möglich, den Inhalt von Variablen zu ändern, neue Variablen anzulegen oder Funktionen aufzurufen. Kombiniert man das Direktfenster und das Überspringen bzw. Wiederholen von Anweisungen, lassen sich kleine Korrekturen live ausprobieren.

Im Beispiel ist eine Ausnahme aufgetreten, weil die Webadresse falsch zu-sammengesetzt war. Anstelle von „http“ stand „https“ in der Adresse. Der Debugger hat automatisch angehalten, weil diese Ausnahme nicht behandelt wurde, und bietet jetzt die Schaltfläche UNTERBRECHEN an, um in den De-bug Mode zu wechseln.


Abbildung 16: Automatischer Stopp bei nicht behandelter Ausnahme

Um den Fehler berichtigen zu können, muss zunächst die Bearbeitung des Quellcodes aktiviert werden. Schieben Sie den grünen Ausführungszeiger eine Zeile nach oben und anschießend wieder eine Zeilen nach unten, sodass dieser Zeiger sich gelb färbt. Auf diese Weise markieren Sie die fehlerhafte Anweisung zur erneuten Ausführung.


Abbildung 17: Zeile zur erneuten Ausführung markieren 

Anschließend kann der Variablen der korrekte Inhalt z. B. mithilfe des Direktfensters zugewiesen werden.


Abbildung 18: Korrigieren eines Werts mithilfe des Direktfensters 

Das Programm kann jetzt normal weiter ausgeführt werden. Die fehlerhafte Stelle wird mit der geänderten Adresse nochmals durchlaufen, und das Programm zeigt das gewünschte Ergebnis an. Die Korrektur muss später noch in den entsprechenden Quellcode eingepflegt werden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -