Unternavigation erstellen mit einer TabBar

Die Hauptnavigation der Web-App ist in den Projektvorlagen für den Web-Client bereits implementiert. Um eine Unternavigation zu erstellen, können Sie auf einer Page eine TabBar, eine Region und Views verwenden.

Die Hauptnavigation der Web-App ist in den Projektvorlagen für den Web-Client bereits implementiert. Um eine Unternavigation zu erstellen, können Sie auf einer Page eine TabBar, eine Region und Views verwenden.

Die Tabs „VIEW 1“ und „VIEW 2“ zeigen unterschiedliche Views im Bereich unter der Tableiste an.

  • Um dieses Ergebnis zu erreichen, führen Sie folgende Schritte aus:

  1. Legen Sie ein neues Projekt im App-Layout Responsive an.

  2. Entfernen Sie die zwei Labels auf der MachinePage.

  3. Fügen Sie eine neue View (FlexLayout) im Projektexplorerknoten views mit dem Namen View1 hinzu.

  4. Gestalten Sie die View.

    1. Setzen Sie die Eigenschaften DesignWidth und DesignHeight zurück, damit der Designer die berechnete Größe zur Laufzeit darstellt.

    2. Platzieren Sie beliebige Steuerelemente auf der View im Designer, z. B. ein Label , eine CheckBox Group und ein DonutGauge.

  5. Fügen Sie eine zweite View (FlexLayout) mit dem Namen View2 hinzu und gestalten Sie diese wie im vorherigen Schritt beschrieben. Platzieren Sie z. B. ein Label, einen Button und eine RadioButtonGroup auf der View.

  6. Platzieren Sie auf der MachinePage im Designer ein Steuerelement vom Typ TabBar.

  7. Platzieren Sie auf derselben Page eine Region.
    Standardmäßig wird für eine Region ein Name vergeben. Die erste Region auf der Page wird als Region1 benannt, die zweite Region2 etc. Auf jeder Page beginnt die Zählung bei 1. Den Namen sehen Sie in der Dokumentgliederung hinter dem jeweiligen Steuerelement fett gedruckt und im Eigenschaftenfenster oben im Feld Name.

  8. Verknüpfen Sie die TabBar mit der Region.

    1. Markieren Sie die TabBar im Designer oder in der Dokumentgliederung.

    2. Wählen Sie im Eigenschaftenfenster in der Eigenschaft RegionId den Namen der Region (Region1) aus.

  9. Verknüpfen Sie den ersten TabButton über die Eigenschaft ViewName mit View1. Geben Sie in der Eigenschaft Text View 1 ein.

  10. Verknüpfen Sie den zweiten TabButton über die Eigenschaft ViewName mit View2. Geben Sie in der Eigenschaft Text View2 ein.

  11. Wählen Sie in der Eigenschaft StartViewName der TabBar den Eintrag View1 aus.

  12. Entfernen Sie den dritten TabButton.

Starten Sie die Web-App, um sie zu testen.

Auf der ersten Page wird eine TabBar angezeigt. Der erste TabButton VIEW 1 ist aktiv und die View1 wird in der Region unter der TabBar angezeigt. Wenn Sie auf den zweiten TabButton VIEW 2 klicken, wird in der Region die View2 angezeigt.

Verwandte Themen: