Creazione di una procedura guidata

È possibile creare una nuova procedura guidata per l'applicazione utilizzando i componenti descritti in questo argomento.

La procedura guidata è una schermata che contiene una serie di pagine e la navigazione tra le pagine è predefinita. Una schermata della procedura guidata è un contenitore di stack per le pagine della procedura guidata.

Tabella 1. Componenti di una procedura guidata
Componente	Descrizione
`<wizard_name>-wizard.tpl.html`	Il file HTML principale per la procedura guidata.
`<wizard_name>-wizard.config.js`	File di configurazione per l'instradamento e altre configurazioni richieste dalla procedura guidata.
`<wizard_name_init>.tpl.html`	Il file HTML principale per l'inizializzazione della procedura guidata
`<wizard_name_init>.controller.js`	Il file JS del controller per la logica di inizializzazione della procedura guidata
`<wizard_name_finish>.tpl.html`	Il file HTML principale per la schermata di completamento della procedura guidata.
`<wizard_name_finish>.controller.js`	Il controller JS per la logica di completamento della procedura guidata.
`<wizard_page_name>.scss`	Stile per la pagina della procedura guidata utilizzando il formato SCSS.
`<wizard_page_name>_mashups.xml`	Definizioni di mashup per i mashup utilizzati nelle pagine della procedura guidata.
`<wizard_page_name>.tpl.html`	Il file HTML principale per una pagina della procedura guidata.
`<wizard_page_partial>.tpl.html`	I file HTML parziali per una pagina della procedura guidata, se necessario
`<wizard_page_name>.controller.js`	Il file JS del controllore che ha la logica di funzionamento per una pagina della procedura guidata.

Wizard HTML

<wizard_name>-wizard.tpl.html è il file HTML principale che fa riferimento alle pagine init , finish e wizard della procedura guidata, come mostrato nel seguente frammento di codice:

<isc-wizard custom-transition="true" wizard-init-controller="myWizardInitController"
      wizard-init-template-url="myWizardInitTpl.html" 
      wizard-finish-controller="myWizardFinishController"
      wizard-finish-template-url="myWizardFinishTpl.html">

      <isc-wizard-page page-id="myPage1" page-enter-action="myPage1ActionBundleKey" 
        template-url="mypage1.html" controller="mypage1controller"></isc-wizard-page>
      <isc-wizard-page page-id="myPage2" page-enter-action="myPage2ActionBundleKey" 
        template-url="mypage2.html" controller="mypage2controller"></isc-wizard-page>
    </isc-wizard>

Pagina di inizializzazione della procedura guidata

Qualsiasi convalida o logica che deve essere eseguita come parte dell'inizializzazione della procedura guidata deve essere eseguita nella pagina init della procedura guidata.
L'implementazione per la pagina init della procedura guidata è la stessa delle pagine della procedura guidata.

Pagina di fine procedura guidata

Qualsiasi convalida o logica che deve essere eseguita come parte del completamento della procedura guidata deve essere eseguita nella pagina finish della procedura guidata.
L'implementazione per la pagina finish della procedura guidata è la stessa delle pagine della procedura guidata.

HTML pagina Procedura guidata

La parte UI di una pagina della procedura guidata viene implementata utilizzando un singolo file HTML (<wizard_page_name>.tpl.html) o più file HTML. È possibile dividere la UI dello schermo in più sezioni e avere HTML parziali (<wizard_page_partial>.tpl.html) per ogni sezione. Ciò semplifica la gestione di tutto il codice HTML necessario per l'interfaccia utente.

Configurazione della procedura guidata

La configurazione della procedura guidata è uguale alla configurazione della schermata. La configurazione di instradamento è registrata nel file <wizard_name>-wizard.config.js come mostrato nel seguente frammento di codice:

angular.module('store').config(['iscStateProvider',
				function(iscStateProvider) {
				iscStateProvider.state('<state_name/wizard_name>',{
				templateUrl : '<path to <wizard_name>-wizard.tpl.html>',						
		  	     addToHistory :false|true, // when true adds to state history. Default is true
				resourceId : '<resource_permission_id>'//If user has permission to the resource, then only the wizard can be accessed by the user.  be accessed by the user.					
					})
				}
			]);

Controller pagina della procedura guidata (controller `init` e `finish` )

La logica per il funzionamento della procedura guidata viene implementata utilizzando un controller. Invece di implementare la logica di comportamento come una normale funzione javascript, viene implementata come un oggetto prototipo, che aiuta in una migliore organizzazione del codice. La logica è suddivisa in più parti di codice javascript, come descritto nella tabella seguente:

Tabella 2. Componenti di un controllore
Componente	Descrizione
`model`	Un oggetto JSON che è costituito da modelli che possono essere utilizzati per memorizzare i dati di backend come l'output API. Ad esempio, `"orderList":{}` potrebbe essere utilizzato per memorizzare l'output dell'API `getOrderList` .
`mashupRefs`	Un array di oggetti mashupref.
`ui`	Oggetto JSON che contiene le proprietà dell'interfaccia utente. Viene aggiunto a `$scope` e viene indicato come `$scope.ui`
`ui<method>`	Metodi che possono essere richiamati da eventi HTML. `ui<methods>` sono gestori eventi. Qualsiasi metodo con prefisso come `ui` viene aggiunto a `$scope` e può essere indicato come `$scope.ui<method_name>`
`Helper methods`	I metodi senza `ui` come prefisso vengono considerati come metodi helper e non è possibile accedervi utilizzando l'oggetto `$scope` .
`Private methods`	I metodi con `_` come prefisso vengono trattati come metodi privati e non è possibile accedervi utilizzando l'oggetto `$scope` .
`initialize`	Questo metodo è il punto di ingresso per la logica di esecuzione. Qualsiasi mashup o chiamata API che necessita della logica `init` deve essere codificata in questo metodo.

Poiché la logica di comportamento viene implementata come oggetto prototipo, questo oggetto viene definito come oggetto di controllo. Pertanto, è possibile utilizzare 'this' per accedere agli attributi dell'oggetto di controllo.

Durante la scrittura della logica del controller, assicurarsi di seguire questi passi:

Richiamare i mashup per recuperare e conservare i dati.
Definire i modelli per conservare i dati richiamati dai mashup.
Collegare i controlli UI ai modelli.

Utilizzare

iscWizard.initializeWizardPage($scope,{<implementation
logic>});

per inizializzare la logica di funzionamento della pagina della procedura guidata sull'oggetto $scope . Fare riferimento agli esempi di codice del controller della procedura guidata in <wscdev.war>/ngstore/store/views/samples.

Mashup per la procedura guidata

Tutti i mashup a cui si fa riferimento in una schermata devono essere definiti <wizard_name>_mashups.xml.
I mashup comuni definiti a livello di applicazione possono essere utilizzati tra le schermate.
I mashup definiti per uno schermo, per un particolare scenario, non devono essere utilizzati in altri schermi.

Per ulteriori informazioni, fare riferimento all'argomento Mashups.

Navigazione tra le pagine della procedura guidata

Per avviare la procedura guidata dalla pagina init , utilizzare iscWizard.startWizard() when custom-transition="false" e iscWizard.startCustomWizard(pageId,pageInput,pageOptions) when custom-transition="true".
Quando custom-transition="true" è impostato per la procedura guidata nel file <wizard_name>-wizard.tpl.html , la procedura guidata funziona in modalità di transizione personalizzata, dove nella pagina corrente deve aprire la pagina successiva. Ad esempio, iscWizard.gotoCustomPage(pageId,pageInput,pageOptions);
Quando custom-transition="false" è impostato per la procedura guidata nel file tpl.html , la procedura guidata funziona in modalità standard, dove nella pagina corrente deve richiamare iscWizard.gotoNextPage();
Per tornare indietro, utilizzare iscWizardPage.gotoPreviousPage();
Per terminare la procedura guidata dalle pagine della procedura guidata, utilizzare iscWizard.finishWizard(); .
Per chiudere la procedura guidata tra il flusso, utilizzare iscWizard.closeWizard();
Per memorizzare i dati a livello di procedura guidata, utilizzare iscWizard.setWizardContext(key,value); e per richiamare i dati a livello di procedura guidata, utilizzare iscWizard.getWizardContext(key);.
Per ottenere gli input della pagina della procedura guidata, utilizzare iscWizard.getWizardPageInput();

Stile della procedura guidata

Lo stile della procedura guidata è implementato in un file SCSS. Ogni pagina deve avere il proprio file SCSS.

Implementazione di esempio

È possibile fare riferimento ai file di esempio nella cartella <wscdev.war>/ngstore/store/views/samples/wizard per una migliore comprensione.