Création d'une fenêtre modale

Vous pouvez créer un modal pour l'application à l'aide des composants décrits dans cette rubrique.

Chaque modal doit comporter les fichiers suivants:

Tableau 1. Composants d'un modal
Composant	Descriptif
`<modal_name>.tpl.html`	Fichier HTML principal requis pour le rendu de la fenêtre modale.
`<modal_partial>.tpl.html`	Fichiers HTML partiels pour la fenêtre modale, si nécessaire.
`<modal_name>.controller.js`	Fichier contenant la logique de comportement de la fenêtre modale.
`<modal_name>.config.js`	Fichier contenant la configuration de routage pour le modal.
`<modal_name>.scss`	Contient le style de la fenêtre modale au format SCSS.
`<modal_name>_mashups.xml`	Contient des définitions d'application composite pour les applications composites utilisées dans la fenêtre modale.

HTMLs modaux

La partie interface utilisateur d'une fenêtre modale est implémentée à l'aide d'un seul fichier HTML (<modal_name>.tpl.html) ou de plusieurs fichiers HTML. Vous pouvez diviser l'interface utilisateur modale en plusieurs sections et disposer de HTMLs partiels (<modal_partial>.tpl.html) pour chaque section. Il est ainsi plus facile de gérer tout le code HTML nécessaire à l'interface utilisateur.

Configuration modale

Toutes les configurations modales sont enregistrées dans le fichier <modal_name>.config.js . Exemple :

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

Pour plus d'informations sur les données de configuration modales, voir la documentation ui-bootstrap $uibModal et la documentation iscModal.registerModal . En dehors de la configuration modale, toute autre configuration requise pour les fenêtres modales peut être ajoutée dans le fichier <modal_name>.config.js .

Contrôleur modal

La logique du comportement modal est implémentée à l'aide d'un contrôleur. Au lieu d'implémenter la logique de comportement en tant que fonction javascript normale, elle est implémentée en tant qu'objet prototype, ce qui permet une meilleure organisation du code. La logique est divisée en plusieurs parties de code javascript, comme décrit dans le tableau suivant:

Tableau 2. Composants d'un modal
Composant	Descriptif
`model`	Objet JSON qui se compose de modèles pouvant être utilisés pour stocker des données de back end, telles que la sortie d'API. Par exemple, `"orderList":{}` peut être utilisé pour stocker la sortie de l'API `getOrderList` .
`mashupRefs`	Tableau d'objets mashupref.
`ui`	Objet JSON qui contient des propriétés d'interface utilisateur. Il est ajouté à `$scope` et référencé en tant que `$scope.ui`
`ui<method>`	Méthodes pouvant être appelées à partir d'événements HTML. `ui<methods>` sont des gestionnaires d'événements. Toute méthode avec le préfixe `ui` est ajoutée à `$scope` et peut être référencée en tant que `$scope.ui<method_name>`
`Helper methods`	Les méthodes sans préfixe `ui` sont traitées comme des méthodes auxiliaires et ne sont pas accessibles à l'aide de l'objet `$scope` .
`Private methods`	Les méthodes dont le préfixe est `_` sont traitées comme des méthodes privées et ne sont pas accessibles à l'aide de l'objet `$scope` .
`initialize`	Cette méthode est le point d'entrée de la logique d'exécution. Tout appel d'application composite ou d'API nécessitant la logique `init` doit être codé dans cette méthode.

La logique de comportement étant implémentée en tant qu'objet prototype, cet objet est appelé objet de contrôle. Par conséquent, vous pouvez utiliser'this'pour accéder aux attributs d'objet de contrôle.

Lors de l'écriture de la logique du contrôleur, veillez à suivre les étapes suivantes:

Appelez les applications composites pour extraire et conserver les données.
Définissez des modèles pour stocker les données extraites par les applications composites.
Liez les contrôles d'interface utilisateur aux modèles.

Utilisez

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

pour initialiser la logique de comportement modal à l'objet $scope .

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(){
            }           
                    
    });
    }
]);

Applications composites pour la fenêtre modale

Toutes les applications composites référencées dans la fenêtre modale doivent être définies dans le fichier <modal_name>_mashups.xml .
Les applications composites communes définies au niveau de l'application peuvent être utilisées dans les fenêtres modales.
Les applications composites définies pour une fenêtre modale, pour un scénario particulier, ne doivent pas être utilisées dans les fenêtres modales d'autres écrans.

Pour plus d'informations, consultez la rubrique Mashups.

Fenêtres modales de message

Reportez-vous au service iscModal pour connaître les modes de message disponibles par défaut et l'utilisation

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

Style modal

Les écrans sont stylisés à l'aide de SCSS. Chaque écran doit être associé à son propre fichier SCSS.

Exemple d'implémentation

Vous pouvez consulter les exemples de fichier dans le dossier <wscdev.war>/ngstore/store/views/samples/modal pour une meilleure compréhension.