Einführung in den App Builder - Lektion 4: Die UI-Schicht

Dies ist die vierte Lektion der Einführung in den App Builder Tutorialreihe.

Die UI-Schicht

Wie der Name schon sagt, ist die UI-Schicht der Bereich, in dem App Builder-Entwickler definieren, was den Endbenutzern der Anwendungen angezeigt wird, einschließlich der Seiten, die zur Navigation verwendet werden.

In den vorherigen Lektionen haben wir mit der Datenschicht begonnen, in der unsere Daten leben, und sie in Tabellen organisiert. Dann haben wir in der Geschäftsschicht die Geschäftsobjekte oder Regeln erstellt, die es uns ermöglichen, die Daten abzurufen, um sie zu lesen, anzuzeigen und zu ändern. Jetzt, da diese zugrunde liegende Struktur bereit ist, können wir an der UI unserer Anwendung arbeiten.

Die UI einer App Builder-Anwendung besteht aus drei Teilen: Seiten, Panels und Steuerelementen. Lassen Sie uns diese drei Begriffe definieren:

Seite: Eine Seite ist nur die Hülle. Sie enthält keine Daten und besteht nur aus einem oder mehreren Panels.
Panel: Ein Panel ist ein Abschnitt oder Bereich, der oben auf der Seite sitzt. Panels enthalten Daten, die aus den Regeln abgeleitet sind, mit denen Sie sie verbinden. Es gibt mehrere Arten von Panels im App Builder, aber in diesen Lektionen verwenden wir nur zwei:
- Formular: Sie zeigen nur Informationen für einen Datensatz gleichzeitig an.
- Tabelle: Sie zeigen Informationen für mehrere Datensätze an.
Steuerelement: Ein Steuerelement identifiziert, welche spezifische Komponente von Daten aus einer Datenquelle Sie anzeigen oder betrachten möchten.

Lassen Sie uns sehen, wie diese Konzepte in der Praxis funktionieren, indem wir eine Seite erstellen.

Erstellen Sie Ihre erste Seite: Kategorien

Lassen Sie uns eine Seite erstellen und zu unserer Anwendung hinzufügen, die alle Datensätze in der Kategorie-Tabelle anzeigt. Befolgen Sie diese Schritte:

Greifen Sie auf das App Workbench zu. Sie können dies tun, indem Sie auf das Hamburger-Symbol oben rechts auf einer Seite klicken, das das Aktionsfeld öffnet, und dann App Workbench auswählen.
Es gibt mehrere Möglichkeiten, Seiten im App Builder zu erstellen. Gehen Sie zum Tab Seiten und klicken Sie dort auf die Schaltfläche + Seite. Der Assistent Eine neue Seite erstellen öffnet sich:
Geben Sie Kategorien als Seitennamen ein. Wir verwenden einen Pluralnamen für diese Seite, da sie mehrere Datensätze von Kategorien anzeigen wird. Klicken Sie auf Weiter.
Wählen Sie in Menü auswählen das Menü aus, auf dem Ihre neue Seite erscheinen soll. Wählen Sie Konfiguration.
Wählen Sie in Layout auswählen ein Layout für die neue Seite aus. Obwohl es später geändert werden kann, müssen Sie eines auswählen, um die Seite zu erstellen. Wählen Sie Vollseite und klicken Sie auf Weiter.
Klicken Sie auf Fertigstellen, und der App Builder erstellt die Seite. Nach wenigen Momenten sehen Sie die Seitenbearbeitungs-Seite, auf der Sie die Seiteninhalte weiter einrichten können.

Sie haben gerade Ihre erste Seite im App Builder erstellt. Sie hat noch nichts, aber Sie können sehen, wie sie aussieht, indem Sie auf die Schaltfläche Seite anzeigen auf der Seitenbearbeitungs-Seite klicken. Der App Builder öffnet einen neuen Tab in Ihrem Browser, um Ihnen den aktuellen Zustand der Seite zu zeigen. Sie können diesen Tab geöffnet lassen und ihn regelmäßig aktualisieren, während Sie weiterarbeiten.

Fügen Sie Ihrer Seite Inhalte hinzu

Lassen Sie uns die Kategorien-Seite weiter einrichten. Wir haben ein Layout dafür gewählt und entschieden, wo es zu finden ist, aber wir müssen Inhalte hinzufügen.

Gehen Sie zu App Workbench > Seiten und suchen Sie die Kategorien-Seite, die Sie gerade erstellt haben. Klicken Sie auf das Stiftsymbol am Ende ihrer Zeile, um in den Bearbeitungsmodus zu gelangen.

Sobald Sie im Bearbeitungsmodus sind, folgen Sie diesen Schritten:

Klicken Sie im Seitenpanel-Layout-Panel auf Paneltyp auswählen. Der Assistent Panel erstellen öffnet sich:
Wir versuchen, alle Datensätze aus einer bestimmten Tabelle anzuzeigen, wählen Sie also Raster als Paneltyp und klicken Sie auf Weiter.
Wählen Sie Kategorie (Quelle) als Panelquelle, da dies die Regel ist, die mit der Tabelle verbunden ist, die die Daten enthält, die wir möchten. Klicken Sie auf Weiter.
Der App Builder fragt, ob Sie möchten, dass er automatisch Steuerelemente zu Ihrem Panel hinzufügt. Es kann nützlich sein, dies manuell zu tun, wenn es viele Spalten in einer Tabelle gibt und Sie nicht alle benötigen. In diesem Fall, den wir jetzt erstellen, wählen Sie Auto Build und klicken Sie auf Weiter.
Klicken Sie auf Fertigstellen.

Nach wenigen Momenten wird das Seitenpanel-Layout aktualisiert und zeigt die Steuerelemente, die der App Builder für die Seite erstellt hat. Wenn Sie auf Seite anzeigen klicken, sollte die Vorschau so aussehen:

Kategorien-Seite 1

Erstellen Sie eine zweite Seite: Kunden

Lassen Sie uns eine weitere Seite erstellen, aber diesmal wählen wir die Steuerelemente manuell aus:

Wiederholen Sie die Schritte 1 und 2, die Sie beim Erstellen der Kategorien-Seite durchgeführt haben.
Geben Sie dieser neuen Seite den Namen Kunden. Klicken Sie auf Weiter.
Wählen Sie in Menü auswählen Startseite.
Wählen Sie in Layout auswählen Vollseite.
Klicken Sie auf Fertigstellen und warten Sie, bis der App Builder die Seite erstellt hat. Wenn er fertig ist, befinden Sie sich im Bearbeitungsbildschirm der neuen Seite.
Klicken Sie auf Paneltyp wählen und wählen Sie Raster als Paneltyp der neuen Seite. Klicken Sie auf Weiter.
Diesmal, anstatt den App Builder Steuerelemente automatisch zu Ihrem Panel hinzuzufügen, wählen Sie Manuell wählen und klicken Sie auf Weiter. Ein zusätzlicher Schritt im Assistenten erscheint und fragt Sie, welche Spalten des Kunden (Quelle)-Objekts Sie verwenden möchten:

Wir müssen nicht alle davon in unserer Benutzeroberfläche anzeigen. Wählen Sie die Spalten Kunde, Adresse, Stadt, Bundesland, Postleitzahl und Land aus. Klicken Sie auf Weiter und dann auf Fertigstellen.

Wenn der App Builder mit dem Hinzufügen der Steuerelemente fertig ist, klicken Sie erneut auf Seite anzeigen, um das Ergebnis zu sehen. Die Kunden-Seite sollte so aussehen:

Kunden-Seite 1

Übungszeit: Erstellen Sie weitere Seiten

Unsere Northwinds-Anwendung benötigt mehr als nur zwei Seiten, um korrekt zu funktionieren, also lassen Sie uns ein paar weitere erstellen. Bevor Sie beginnen, beachten Sie Folgendes:

Wenn Sie die Panel-Quellen auswählen, stellen Sie sicher, dass Sie die Quellobjekte und nicht die Listenobjekte auswählen.
Wenn Sie aufgefordert werden, ein Menü für jede Seite auszuwählen, wählen Sie das Konfigurations-Menü.
Jede Seite sollte zwischen fünf und sechs Steuerelementen haben, um noch bequem gelesen werden zu können. Wählen Sie also weise aus, welche Spalten Sie für am wichtigsten halten, um in der Benutzeroberfläche angezeigt zu werden!

Fügen Sie Seiten hinzu, die denjenigen ähneln, die wir gerade für die Produkte und Regionen-Geschäftsobjekte erstellt haben.

Hinweis

Sie finden einen weiteren + Seite-Button auf der Startseite des App Workbench. Er funktioniert genauso wie der im Seiten-Tab.

Popup-Seiten werden über einer Basis-Seite angezeigt und können zusätzliche Daten über ihre eigenen Steuerelemente anzeigen. Sie sind nützlich, da sie es Ihnen ermöglichen, viel mehr als nur fünf oder sechs Steuerelemente auf einer bestimmten Seite anzuzeigen. Sie können so viele Daten enthalten, wie Sie möchten, und sie können unendlich scrollen.

Wir zeigen Ihnen, wie Sie eine Popup-Seite zu einer bestehenden Basis-Seite hinzufügen, indem wir die Kunden-Seite verwenden.

Gehen Sie zu App Workbench > Seiten und klicken Sie auf + Seite.
Geben Sie den Namen Kunde ein. Diesmal verwenden wir einen Singularnamen, da diese Seite nur einen Datensatz anzeigen wird.
Klicken Sie auf Weiter.
Wählen Sie im Schritt Menü auswählen Keine.
Wählen Sie im Schritt Layout auswählen jedoch Popup-Formular. Klicken Sie auf Weiter und dann auf Fertigstellen.
Wenn der App Builder die Seite erstellt hat, klicken Sie auf + Paneltyp wählen und wählen Sie Formular, da das Popup nur Daten aus einer einzelnen Zeile anzeigen wird. Klicken Sie auf Weiter.
Wählen Sie Kunde (Quelle) als Panelquelle.
Sie können den App Builder die Spalten automatisch auswählen lassen, da dieses Popup über der Kunden-Seite verwendet wird, um alle Details eines bestimmten Kunden anzuzeigen. Wählen Sie Automatisch erstellen und klicken Sie auf Weiter.
Klicken Sie auf Fertigstellen.
Jetzt, da wir unsere Popup-Seite erstellt haben, müssen wir sie mit der Basis-Seite verknüpfen, auf der wir sie zugänglich machen möchten. Kehren Sie zum Bearbeitungsbildschirm der Kunden-Seite im Seiten-Tab des App Workbench zurück.
Gehe zum Panel Update-Methoden.
Wähle im Feld Link zur Seite Kunde aus, die Popup-Seite, die wir gerade erstellt haben.
Klicke auf Speichern.

Nach ein paar Sekunden wird der App Builder aktualisiert. Wenn du jetzt auf Seite anzeigen klickst, um die Kunden-Seite zu sehen, wirst du feststellen, dass jede Zeile in der Liste am Ende einen Button hat. Klicke auf den Button und die Kunden-Seite wird im Vordergrund angezeigt, die detaillierte Informationen über den in dieser Zeile aufgeführten Kunden enthält.

Um die Erstellung von Popup-Seiten zu üben, lass uns zwei weitere erstellen:

Erstelle ein Popup für das Geschäftobjekt Produkte, das Details zu einem einzelnen Eintrag auf der Basis-Seite anzeigt.
Erstelle eine Popup-Seite mit dem Namen Parameter, die auf der Regel Parameter (Quelle) basiert. Denke daran, dass Parameter eine einzigartige Tabelle ist, die immer nur einen Datensatz speichert, bestehend aus einem Primärschlüssel und allen anderen Werten, die du mit diesem Parameter speichern musst. Dieses Popup sollte im Menü Konfiguration platziert werden, anstatt von einer Basis-Seite aus zugänglich zu sein.

Seitencreation-Beschleuniger

Der App Builder bietet eine schnellere Möglichkeit, einfache Seiten basierend auf Quellobjekten zu erstellen, ähnlich dem Beschleuniger, der bei der Erstellung der Objekte selbst hilft. Lass uns sehen, wie du ihn nutzen kannst, um deinen Erstellungsprozess zu beschleunigen:

Navigiere zum Tab App-Arbeitsbereich > Tabellen und öffne die Tabelle Mitarbeiter.
Im Panel Tabelle gibt es einen Abschnitt mit dem Titel Beschleuniger. Klicke auf die Schaltfläche In UI-Schicht veröffentlichen. Der App Builder öffnet einen Assistenten, der dem sehr ähnlich ist, der erscheint, wenn du eine Seite von der Seite Seiten erstellst, mit den folgenden Schritten:
1. Zuerst fragt der App Builder, aus welchem Menü die neue Seite zugänglich sein soll. Wähle Konfiguration und klicke auf Weiter.
2. Als Nächstes fragt der App Builder nach dem Layout. Wähle Raster und Formular, da zwei Seiten erstellt werden, die dem Muster folgen, das wir oben manuell gemacht haben: Mitarbeiter und Mitarbeiter, wobei erstere alle Datensätze auflistet und letztere ein Popup ist, das Details zu einem einzelnen anzeigt. Klicke auf Weiter.
3. Klicken Sie auf Seiten erstellen. Der App Builder benötigt einen Moment, um die Seiten zu erstellen. Sobald dies abgeschlossen ist, finden Sie die neu erstellten Seiten, indem Sie zu App Workbench > Seiten gehen und deren Vorschauen besuchen.

Jetzt, da Sie wissen, wie der Beschleuniger funktioniert, verwenden Sie ihn, um Seiten für die verbleibenden Tabellen in unserer Datenebene zu erstellen: Versender und Lieferanten.

Überprüfung und Abschluss

Lassen Sie uns überprüfen, was wir in dieser Lektion gelernt haben. Wir haben uns mit der UI-Schicht des App Builders vertraut gemacht und begonnen, unsere ersten Seiten zu erstellen. Diese Seiten beziehen ihre Daten aus den Geschäftsobjekten und den Tabellen, die wir in den vorherigen Lektionen erstellt haben.

In den kommenden Lektionen werden wir unser Verständnis der Schichten vertiefen und lernen, wie man mehrere andere grundlegende Aufgaben in jeder von ihnen ausführt. Beginnen Sie, indem Sie zu Lektion 5: Steuerelemente fortschreiten.