Modaldialog erstellen

Sie können mithilfe der in diesem Abschnitt erläuterten Komponenten ein Modal für die Anwendung erstellen.

Jeder Modaldialog muss die folgenden Dateien enthalten:

Tabelle 1 Bestandteile eines Modals
Komponente	Beschreibung
`<modal_name>.tpl.html`	HTML-Hauptdatei, die für die Wiedergabe des Modals erforderlich ist.
`<modal_partial>.tpl.html`	HTML-Teildateien für den Modaldialog, falls erforderlich
`<modal_name>.controller.js`	Datei, die die Verhaltenslogik für das modale Dialogfeld enthält
`<modal_name>.config.js`	Datei, die die Weiterleitungskonfiguration für das modale Dialogfeld enthält
`<modal_name>.scss`	Enthält Stile für das modale Dialogfeld im SCSS-Format.
`<modal_name>_mashups.xml`	Enthält Mashup-Definitionen für die im Modal verwendeten Mashups.

Modale HTML-Dateien

Der UI-Teil eines Modals wird mithilfe einer einzelnen HTML-Datei (<modal_name>.tpl.html) oder mehrerer HTML-Dateien implementiert. Sie können die modale Benutzerschnittstelle in mehrere Abschnitte unterteilen und partielle HTMLs (<modal_partial>.tpl.html) für jeden Abschnitt verwenden. Dies vereinfacht die Verwaltung des gesamten HTML-Codes, der für die Benutzerschnittstelle erforderlich ist.

Modalkonfiguration

Alle Modalkonfigurationen werden in der Datei <modal_name>.config.js registriert. Beispiel:

var aboutConf = {
  			  animation: true,// indicates whether to animate when opening and closing modals
  			  templateUrl: './store/views/about/about.tpl.html', // path to template html file
  			  controller:'iss.views.about.about', // controller name
  			  size: 'lg', // indicates the size of the modal
  		};
  	  iscModalProvider.registerModal("iss.views.about.about",aboutConf);

Weitere Informationen zu Modalkonfigurationsdaten finden Sie in der ui-bootstrap $uibModal -Dokumentation und iscModal.registerModal -Dokumentation. Abgesehen von der Modalkonfiguration kann jede andere Konfiguration, die für Modale erforderlich ist, in der Datei <modal_name>.config.js hinzugefügt werden.

Modalcontroller

Die Logik für modales Verhalten wird mithilfe eines Controllers implementiert. Anstatt die Verhaltenslogik als normale JavaScript-Funktion zu implementieren, wird sie als Prototypobjekt implementiert, was die Codeorganisation verbessert. Die Logik wird in mehrere JavaScript-Codeabschnitte aufgeteilt, wie in der folgenden Tabelle beschrieben:

Tabelle 2. Bestandteile eines Modals
Komponente	Beschreibung
`model`	Ein JSON-Objekt, das aus Modellen besteht, die zum Speichern von Back-End-Daten wie API-Ausgabe verwendet werden können. Beispielsweise könnte `"orderList":{}` verwendet werden, um die Ausgabe der `getOrderList` -API zu speichern.
`mashupRefs`	Ein Array von Mashupref-Objekten.
`ui`	JSON-Objekt, das Benutzerschnittstelleneigenschaften enthält Sie wird `$scope` hinzugefügt und als `$scope.ui` referenziert.
`ui<method>`	Methoden, die aus HTML-Ereignissen aufgerufen werden können `ui<methods>` sind Ereignishandler. Jede Methode mit dem Präfix `ui` wird zu `$scope` hinzugefügt und kann als `$scope.ui<method_name>` referenziert werden
`Helper methods`	Methoden ohne `ui` als Präfix werden als Helper-Methoden behandelt und werden nicht über das Objekt `$scope` aufgerufen.
`Private methods`	Methoden mit dem Präfix `_` werden als private Methoden behandelt und es erfolgt kein Zugriff über das Objekt `$scope` .
`initialize`	Diese Methode ist der Eingangspunkt für die Ausführungslogik. Jeder Mashup-oder API-Aufruf, der die `init` -Logik benötigt, sollte in dieser Methode codiert werden.

Da die Verhaltenslogik als Prototypobjekt implementiert wird, wird dieses Objekt als Steuerungsobjekt bezeichnet. Daher können Sie mit 'this' auf die Steuerungsobjektattribute zugreifen.

Stellen Sie beim Schreiben der Controllerlogik sicher, dass Sie die folgenden Schritte ausführen:

Mashups zum Abrufen und Speichern von Daten aufrufen.
Definieren Sie Modelle für die von Mashups abgerufenen Daten.
Binden Sie Steuerelemente der Benutzerschnittstelle an die Modelle.

Verwenden Sie

iscScreen.initializeModalScreen($scope,{<implementation
logic>});

, um die Logik des Modalverhaltens für das Objekt $scope zu initialisieren.

angular.module('store').controller(<name of the controller>,
  [<dependency injection>,
    control function(<list of services in dependency injection above, 
    passed as parameters to this function>) {
        
        iscScreen.initializeModalScreen($scope,{
  
      /**
       *ModelList
       *Models that hold data
       * 
       */
        model:{
        }, 
 
        /**
       *MashupRefs
       *array containing the list of mashups referred in this controller
       */
        mashupRefs : [
                {
                    mashupRefId: mashupref1,
                    mashupId: mashupid1,
                    modelName : associated model                                             }
            ],
  
        ui:{
            
                /*list of UIAttributes, attributes used in the business 
logic and UI painting*/
            },

       /* Intiliazes the modal dialog, by calling required mashups 
  and massaging modal input data */
        initialize : function(){
            },
 
          //OnClick handler of "Cancel" button, closes the modal popup.           
            uiClose : function () {
            },
 
            //OnClick handler of "OK" button, propagates the data back 
//to invoking screen.              
            uiSubmit : function (priceOverrideForm) {
            },
            
          //UI methods that can be accessed from html with ui as prefix           
            uimethod : function () {
            },
            
            //Helper methods
                helpMethod1:function(){
            },
 
            //Private methods start with _
            _privateMethod1:function(){
            }           
                    
    });
    }
]);

Mashups für das modale Dialogfeld

Alle im Modaldialog referenzierten Mashups sollten in der Datei <modal_name>_mashups.xml definiert werden.
Auf Anwendungsebene definierte allgemeine Mashups können modalübergreifend verwendet werden.
Mashups, die für ein Modal für ein bestimmtes Szenario definiert sind, sollten nicht in den Modalen anderer Anzeigen verwendet werden.

Weitere Informationen finden Sie unter dem Thema „Mashups “.

Nachrichtenmodale

Informationen zu den standardmäßig verfügbaren Nachrichtenmodalen und zur Verwendung finden Sie im iscModal -Service.

iscModal.showErrorMessage
iscModal.showWarningMessage
iscModal.showConfirmationMessage
iscModal.showSuccessMessage
iscModal.showInfoMessage
iscModal.showCustomMessage

Modalstil

Anzeigen werden mithilfe von SCSS dargestellt. Jeder Anzeige muss eine eigene SCSS-Datei zugeordnet sein.

Beispielimplementierung

Zum besseren Verständnis können Sie die Beispieldateien im Ordner <wscdev.war>/ngstore/store/views/samples/modal verwenden.