Creación de un asistente

Puede crear un asistente nuevo para la aplicación utilizando los componentes que se explican en este tema.

El asistente es una pantalla que tiene un conjunto de páginas y la navegación entre las páginas está predefinida. Una pantalla de asistente es un contenedor de pila para páginas de asistente.

Tabla 1. Componentes de un asistente
Componente	Descripción
`<wizard_name>-wizard.tpl.html`	El archivo HTML principal para el asistente.
`<wizard_name>-wizard.config.js`	Archivo de configuración para el direccionamiento y otra configuración necesaria para el asistente.
`<wizard_name_init>.tpl.html`	El archivo HTML principal para la inicialización del asistente
`<wizard_name_init>.controller.js`	El archivo JS del controlador para la lógica de inicialización del asistente
`<wizard_name_finish>.tpl.html`	El archivo HTML principal para la pantalla de finalización del asistente.
`<wizard_name_finish>.controller.js`	El JS de controlador para la lógica de finalización del asistente.
`<wizard_page_name>.scss`	Estilo para la página del asistente utilizando el formato SCSS.
`<wizard_page_name>_mashups.xml`	Definiciones de mashup para los mashups utilizados en las páginas del asistente.
`<wizard_page_name>.tpl.html`	El archivo HTML principal para una página del asistente.
`<wizard_page_partial>.tpl.html`	Los archivos HTML parciales para una página del asistente, si es necesario
`<wizard_page_name>.controller.js`	El archivo JS del controlador que tiene la lógica de comportamiento para una página del asistente.

HTMLs de asistente

<wizard_name>-wizard.tpl.html es el archivo HTML principal que hace referencia a las páginas init , finish y wizard del asistente tal como se muestra en el siguiente fragmento de código:

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

Página de inicialización del asistente

Cualquier validación o lógica que deba ejecutarse como parte de la inicialización del asistente debe realizarse en la página init del asistente.
La implementación para la página init del asistente es la misma que para las páginas del asistente.

Página de finalización del asistente

Cualquier validación o lógica que deba ejecutarse como parte de la finalización del asistente debe realizarse en la página finish del asistente.
La implementación para la página finish del asistente es la misma que para las páginas del asistente.

HTML de página de asistente

La parte de la interfaz de usuario de una página del asistente se implementa utilizando un único archivo HTML (<wizard_page_name>.tpl.html) o varios archivos HTML. Puede dividir la interfaz de usuario de pantalla en varias secciones y tener HTMLs parciales (<wizard_page_partial>.tpl.html) para cada sección. Esto facilita la gestión de todo el código HTML necesario para la interfaz de usuario.

Configuración del asistente

La configuración del asistente es la misma que la configuración de pantalla. La configuración de direccionamiento se registra en el archivo <wizard_name>-wizard.config.js tal como se muestra en el siguiente fragmento de código:

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

Controlador de página de asistente ( `init` y controlador de `finish` )

La lógica del comportamiento del asistente se implementa utilizando un controlador. En lugar de implementar la lógica de comportamiento como una función javascript normal, se implementa como un objeto de prototipo, lo que ayuda a una mejor organización del código. La lógica se divide en varias partes de código javascript tal como se describe en la tabla siguiente:

Tabla 2. Componentes de un controlador
Componente	Descripción
`model`	Un objeto JSON que consta de modelos que se pueden utilizar para almacenar datos de fondo como, por ejemplo, la salida de API. Por ejemplo, `"orderList":{}` podría utilizarse para almacenar la salida de la API de `getOrderList` .
`mashupRefs`	Una matriz de objetos mashupref.
`ui`	Objeto JSON que contiene las propiedades de la interfaz de usuario. Se añade a `$scope` y se hace referencia a él como `$scope.ui`
`ui<method>`	Métodos que se pueden invocar desde sucesos HTML. `ui<methods>` son manejadores de sucesos. Cualquier método con el prefijo `ui` se añade a `$scope` y se puede hacer referencia a él como `$scope.ui<method_name>`
`Helper methods`	Los métodos sin `ui` como prefijo se tratan como métodos ayudantes y no se accede a ellos utilizando el objeto `$scope` .
`Private methods`	Los métodos con `_` como prefijo se tratan como métodos privados y no se accede a ellos utilizando el objeto `$scope` .
`initialize`	Este método es el punto de entrada para la lógica de ejecución. Cualquier llamada de mashup o API que necesite la lógica `init` debe codificarse en este método.

Puesto que la lógica de comportamiento se implementa como un objeto prototipo, este objeto se denomina objeto de control. Por lo tanto, puede utilizar 'this' para acceder a los atributos de objeto de control.

Mientras escribe la lógica del controlador, asegúrese de seguir estos pasos:

Invoque mashups para captar y persistir datos.
Defina modelos para contener los datos captados por mashups.
Enlazar controles de interfaz de usuario a los modelos.

Utilice

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

para inicializar la lógica de comportamiento de página del asistente en el objeto $scope . Consulte los ejemplos de código del controlador del asistente en <wscdev.war>/ngstore/store/views/samples.

Mashups para el asistente

Todos los mashups a los que se hace referencia en una pantalla deben definirse como <wizard_name>_mashups.xml.
Los mashups comunes definidos a nivel de aplicación se pueden utilizar entre pantallas.
Los Mashups definidos para una pantalla, para un escenario determinado, no se deben utilizar en otras pantallas.

Consulte el tema Mashups para obtener más información.

Navegación entre páginas del asistente

Para iniciar el asistente desde la página init del asistente, utilice iscWizard.startWizard() when custom-transition="false" y iscWizard.startCustomWizard(pageId,pageInput,pageOptions) when custom-transition="true".
Cuando se establece custom-transition="true" para el asistente en el archivo <wizard_name>-wizard.tpl.html , el asistente funciona en modalidad de transición personalizada, donde en la página actual es necesario abrir la página siguiente. Por ejemplo: iscWizard.gotoCustomPage(pageId,pageInput,pageOptions);
Cuando se establece custom-transition="false" para el asistente en el archivo tpl.html , el asistente funciona en modalidad estándar, donde en la página actual es necesario llamar a iscWizard.gotoNextPage();
Para retroceder, utilice iscWizardPage.gotoPreviousPage();
Para finalizar el asistente desde las páginas del asistente, utilice iscWizard.finishWizard();
Para cerrar el asistente entre el flujo, utilice iscWizard.closeWizard();
Para almacenar los datos a nivel de asistente, utilice iscWizard.setWizardContext(key,value); y para recuperar los datos a nivel de asistente, utilice iscWizard.getWizardContext(key);.
Para obtener las entradas de la página del asistente, utilice iscWizard.getWizardPageInput();

Estilo de asistente

El estilo del asistente se implementa en un archivo SCSS. Cada página debe tener su propio archivo SCSS.

Implementación de ejemplo

Puede consultar los archivos de ejemplo en la carpeta <wscdev.war>/ngstore/store/views/samples/wizard para obtener una mejor comprensión.