SAPUI5 Grundlagen

Fragmente

Step 16 & 17

Was sind SAPUI5 Fragmente?

SAPUI5 Fragmente sind wiederverwendbare Teile einer Benutzeroberfläche, die in SAPUI5-Anwendungen eingefügt werden können:

  1. Kein eigener Controller: Fragmente haben keinen eigenen Controller und keinen Lebenszyklus. Stattdessen nutzen sie den Controller der View, in die sie eingefügt werden.

  2. Wiederverwendbarkeit: Fragmente sind darauf ausgelegt, in verschiedenen Views wiederverwendbar zu sein. Sie können Teile der Benutzeroberfläche enthalten, die in mehreren Stellen in der Anwendung benötigt werden, und helfen so, redundanten Code zu vermeiden.

  3. Definition: Fragmente können in XML, HTML, JSON oder JavaScript definiert werden, genau wie Views.

  4. Kein Routing: Fragmente können nicht über das Routing angesprochen werden, sie werden immer von einer View oder einem anderen Fragment geladen.

  5. Einfachheit: Fragmente sind einfacher und leichtgewichtiger als Views, was sie zu einer guten Wahl für kleinere, wiederverwendbare Teile der Benutzeroberfläche macht.

Ein typisches Anwendungsszenario für ein Fragment könnte ein Dialogfenster sein, das in verschiedenen Teilen der Anwendung verwendet wird. Anstatt den Code für das Dialogfenster in jeder einzelnen View zu duplizieren, könnte es als Fragment definiert und bei Bedarf in die verschiedenen Views eingefügt werden.

Implementierung von Fragmenten

  • Definition eines Fragements in einer XML-Datei
  • Im view-Ordner
  • Namenmuster <Name>.fragment.xml
<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core">
   <Dialog
      id="helloDialog"
      title="Hello {/recipient/name}"/>
</core:FragmentDefinition>

Aufruf von Fragementen als Dialog

        onOpenDialog() {
            // create dialog lazily
            this.pDialog ??= this.loadFragment({
             name: "ui5.walkthrough.view.HelloDialog"
            });
        
            this.pDialog.then((oDialog) => oDialog.open());
        }
Bislang ohne Aktion. D.h. das PopUp bleibt offen. ;-(

Ergänzung eines Close-Buttons auf dem Fragment

Button auf dem Fragment

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core">
   <Dialog
      id="helloDialog"
      title ="Hello {/recipient/name}">
      <beginButton>
         <Button
            text="{i18n>dialogCloseButtonText}"
            press=".onCloseDialog"/>
      </beginButton>
   </Dialog>
</core:FragmentDefinition>

Aktion im Controller des Views

onCloseDialog() {
    this.byId("helloDialog").close();
}

Hier wird der Name helloDialog des <Dialog>-Elements verwendet!

Verwendung von Fragements in Views

Definition des Fragment

Wichtig: Nicht als Dialog, sondern z.B. als Panel:

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core">
   <Panel
      id="panelFragementchen">
         <Text text="Fragementchen" />
   </Panel>
</core:FragmentDefinition>
views/Test.fragment.xml

Verwendung des Fragmentchens

Wichtig: Namespace xmlns:core="sap.ui.core" muss definiert sein!

<mvc:View
   controllerName="ui5.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:core="sap.ui.core"
   displayBlock="true">
   <Shell>
      <App class="myAppDemoWT">
         <pages>
            <Page title="{i18n>homePageTitle}">
               <content>
...
                 <core:Fragment 
                   fragmentName="ui5.walkthrough.view.Test" type="XML" />
                 </content>
             </Page>
          </pages>
      </App>
  </Shell>
</mvc:View>
views/App.view.xml