Share via

Erstellen eines Anwendungsflusses

  • Artikel

Das SketchFlow-Diagramm ist ein Grapheditor, mit dessen Hilfe Struktur, Fluss, Navigation und Aufbau einer Anwendung eingerichtet werden können.

Das SketchFlow-Diagramm dient vornehmlich zur Bearbeitung der Anwendungsstruktur, während die Zeichenfläche zur Bearbeitung des Inhalts einzelner Bildschirme vorgesehen ist.

Jeder Bildschirm des Prototyps wird im SketchFlow-Diagramm durch einen Knoten dargestellt. Zur Darstellung der Navigation von Bildschirm zu Bildschirm können Sie einzelne Bildschirme durch eine Navigationsverbindung miteinander verbinden. Bei der Wiedergabe des Prototyps im SketchFlow-Player simulieren diese Navigationsverbindungen dann die Navigation zwischen Bildschirmen im Bereich Navigieren.

Im SketchFlow-Diagramm werden zudem Komponentenbildschirme angezeigt. Weitere Informationen finden Sie unter "Komponentenbildschirme" weiter unten in diesem Thema.

Die Navigation zwischen Bildschirmen kann in SketchFlow auf verschiedenerlei Weise definiert werden. Sie können neue verbundene Bildschirme aus vorhandenen Bildschirmen im SketchFlow-Diagramm erstellen. Sie können nicht verbundene Bildschirme im SketchFlow-Diagramm miteinander verbinden. Schließlich können Sie auf einem Objekt in einem Bildschirm einen Rechtsklick ausführen und die Navigation durch Auswahl des Befehls Navigieren zu im Kontextmenü definieren.

So fügen Sie einem Anwendungsfluss einen neuen verbundenen Navigationsbildschirm hinzu

  1. Bei der Erstellung eines neuen SketchFlow-Projekts wird eine Datei unter dem Namen "Screen 1.xaml" angelegt. Sie erscheint im SketchFlow-Diagramm in Form eines Knotens und im Bereich Projekt als Steuerelement.

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Informationen zum Erstellen eines neuen SketchFlow-Projekts finden Sie unter Erstellen eines Prototypprojekts.

    Führen Sie den Mauszeiger auf den ersten Knoten (Bildschirm 1) in der oberen linken Ecke des SketchFlow-Diagramms.

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

    Der Knoten wird markiert, und die zugehörige XAML-Datei erscheint als QuickInfo. Am unteren Knotenende erscheint zudem ein Menü mit Symbolen:

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(DE-DE,Expression.30).png

  2. Führen Sie den Mauszeiger auf das linke Symbol. Ziehen Sie das Symbol mit der Maus. Es wird nun ein Knotenschatten eingeblendet, der dem Mauszeiger folgt.

  3. Ziehen Sie das Symbol an die Stelle, an die Sie den neuen Bildschirm setzen möchten. Der neue Knoten erscheint unter dem Standardnamen "Bildschirm 2".

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Sie können den Bildschirm nach Belieben umbenennen. Klicken Sie dazu mit der rechten Maustaste auf den Knoten, und wählen Sie Umbenennen aus, oder klicken Sie auf den Knoten selbst, drücken Sie UMSCHALT+F2, und geben Sie dann den gewünschten Namen ein.

  4. Wenn Sie in den neuen Bildschirm ein neues Element zeichnen möchten, doppelklicken Sie im SketchFlow-Diagramm auf den Knoten, um die zugehörige Dokumentregisterkarte auszuwählen.

Die Verbindung zwischen den Knoten simuliert die Navigation von Knoten zu Knoten. Sie können auch Navigationsknoten ohne Navigationsverbindung erstellen.

So fügen Sie einem Anwendungsfluss einen Navigationsbildschirm ohne Verbindung hinzu

  1. Führen Sie im SketchFlow-Diagramm einen Rechtsklick aus, und klicken Sie auf Navigationsbildschirm hinzufügen.

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.
    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Sie können den Bildschirm nach Belieben umbenennen. Klicken Sie dazu mit der rechten Maustaste auf den Knoten, und wählen Sie Umbenennen aus, oder klicken Sie auf den Knoten selbst, drücken Sie UMSCHALT+F2, und geben Sie dann den gewünschten Namen ein.

  2. Wenn Sie in den neuen Bildschirm ein neues Element zeichnen möchten, doppelklicken Sie im SketchFlow-Diagramm auf den Knoten, um die zugehörige Dokumentregisterkarte auszuwählen.

    Ee341405.alert_tip(DE-DE,Expression.30).gifTipp:

    Klicken Sie alternativ dazu in der SketchFlow-Schema-Symbolleiste auf Bildschirm erstellenEe341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(DE-DE,Expression.30).png.

Verbinden zweier Navigationsbildschirme

  1. Führen Sie im SketchFlow-Diagramm den Mauszeiger auf den Knoten, von dem aus Sie eine Verbindung erstellen möchten.

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

    Der Knoten wird markiert, und die zugehörige XAML-Datei erscheint als QuickInfo. Am unteren Knotenende erscheint zudem ein Menü mit Symbolen.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(DE-DE,Expression.30).png

  2. Führen Sie den Mauszeiger auf das Symbol Vorhandenen Bildschirm verbindenEe341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(DE-DE,Expression.30).png (zweites von links). Zum Erstellen der Verbindung ziehen Sie das Symbol mit der Maus. Es wird ein Pfeil eingeblendet, der dem Mauszeiger folgt.

  3. Ziehen Sie den Pfeil auf den Bildschirm, zu dem eine Verbindung hergestellt werden soll. Wenn Sie die Verbindung löschen möchten, klicken Sie mit der rechten Maustaste auf den Pfeil, und klicken Sie dann auf Entfernen.

    Ee341405.alert_tip(DE-DE,Expression.30).gifTipp:

    Alternativ zum obigen Verfahren ziehen Sie den Knoten auf den Knoten, zu dem eine Verbindung hergestellt werden soll.

Komponentenbildschirme

Komponentenknoten werden ebenso wie Navigationsknoten im SketchFlow-Diagramm angezeigt. Im Unterschied zu Navigationsknoten besitzen Komponentenknoten keine eingehenden Verbindungen. Komponentenknoten besitzen ausschließlich ausgehende Verbindungen. Verbindungen, d. h. die Pfeile, die Verbindungen zwischen Knoten im Anwendungsfluss simulieren, repräsentieren die Bildschirme, in denen ein Komponentenbildschirm erscheint.

Ein Komponentenknoten enthält Inhalt, der in mehreren Bildschirmen genutzt werden kann. Sie können beispielsweise einen Komponentenknoten mit einem Hintergrund erstellen und einen zweiten, der ein Menü enthält, und beide Komponenten dann in mehreren Bildschirmen des Prototyps einsetzen.

Es gibt viele verschiedene Möglichkeiten, Komponentenknoten zu erstellen. Sie können einen Komponentenknoten direkt im SketchFlow-Diagramm einfügen oder Inhalt auswählen und in einen Bildschirm umwandeln, der als Komponentenknoten im SketchFlow-Schema erscheint.

So fügen Sie einem Anwendungsfluss einen Komponentenbildschirm ohne Verbindung hinzu

  • Führen Sie im SketchFlow-Diagramm einen Rechtsklick aus, und klicken Sie auf Komponentenbildschirm hinzufügen.

So fügen Sie einem Anwendungsfluss einen Komponentenbildschirm mit Verbindung hinzu

  1. Führen Sie im SketchFlow-Diagramm den Mauszeiger auf den Knoten, von dem aus Sie einen neuen Komponentenbildschirm erstellen möchten.

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

    Der Knoten wird markiert, und die zugehörige XAML-Datei erscheint als QuickInfo. Am unteren Knotenende erscheint zudem ein Menü mit Symbolen.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(DE-DE,Expression.30).png

  2. Führen Sie den Mauszeiger auf das Symbol Komponentenbildschirm erstellen und einfügenEe341405.91c06759-86fc-4dbf-a8b7-061300304308(DE-DE,Expression.30).png (zweites von rechts). Zum Erstellen der Verbindung ziehen Sie das Symbol mit der Maus. Es wird ein Pfeil eingeblendet, der dem Mauszeiger folgt.

  3. Ziehen Sie den Pfeil auf den Bildschirm, zu dem eine Verbindung hergestellt werden soll, und lassen Sie die Maustaste los.

Umwandeln eines Steuerelements in einen Komponentenbildschirm

  1. Wählen Sie das Objekt oder die Objektgruppe für die Umwandlung aus.

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Wenn Sie eine Objektgruppe auswählen möchten, ziehen Sie mit der Maus um die gewünschten Objekte einen Auswahlrahmen.

  2. Klicken Sie mit der rechten Maustaste auf die Auswahl, und klicken Sie dann auf Komponentenbildschirm erstellen.

  3. Geben Sie im Dialogfeld Komponentenbildschirm erstellen im Feld Name einen Namen für den Komponentenbildschirm ein.

  4. Optional: Soll der Komponentenbildschirm dem Anwendungsfluss hinzugefügt werden, klicken Sie auf Zu SketchFlow-Schema hinzufügen.

  5. Klicken Sie auf OK.

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Damit der Komponentenbildschirm im Navigationsbildschirm erscheint, muss das Projekt möglicherweise neu erstellt werden (F5).

Visuelle Tags

Mit visuellen Tags im SketchFlow-Schema können unterschiedliche Bildschirm- und Verbindungselemente farblich unterschieden und leichter erkannt werden.

So kennzeichnen Sie einen Knoten farblich

  1. Führen Sie im SketchFlow-Diagramm den Mauszeiger auf den gewünschten Knoten.

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

  2. Der Knoten wird markiert, und die zugehörige XAML-Datei erscheint als QuickInfo. Am unteren Knotenende erscheint zudem ein Menü mit Symbolen.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(DE-DE,Expression.30).png

  3. Führen Sie den Mauszeiger auf das rechte Symbol. Klicken Sie auf das Symbol und anschließend auf die Farbe, in welcher der Knoten erscheinen soll.

So kennzeichnen Sie eine Verbindung farblich

  1. Führen Sie im SketchFlow-Diagramm den Mauszeiger auf die gewünschte Verbindung.

    Ee341405.alert_note(DE-DE,Expression.30).gifHinweis:

    Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

    Die Verbindung ist nun markiert.

  2. Klicken Sie auf das Symbol zur Auswahl einer Farbe, und wählen Sie die gewünschte Farbe aus.

Über die SketchFlow-Projekteinstellungen können Sie auch die farbliche Kennzeichnung für ein gesamtes Projekt einstellen.

Weitere Informationen finden Sie unter Ändern der SketchFlow-Projekteinstellungen.