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.

Aufruf von Fragementen als Dialog

        onOpenDialog() {
            // create dialog lazily
            this.pDialog ??= this.loadFragment({
             name: "ui5.walkthrough.view.HelloDialog"
            });
        
            this.pDialog.then((oDialog) => oDialog.open());
        }

Verwendung von Fragements in Views

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

<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>