Criando um assistente

É possível criar um novo assistente para o aplicativo usando os componentes explicados neste tópico..

O assistente é uma tela que possui um conjunto de páginas e a navegação entre as páginas é predefinida Uma tela do assistente é um contêiner de pilha para páginas do assistente

Tabela 1.. Componentes de um assistente
Componente	Descrição
`<wizard_name>-wizard.tpl.html`	O arquivo HTML principal do assistente.
`<wizard_name>-wizard.config.js`	Arquivo de configuração para roteamento e outra configuração requerida pelo assistente..
`<wizard_name_init>.tpl.html`	O arquivo HTML principal para a inicialização do assistente
`<wizard_name_init>.controller.js`	O arquivo JS do controlador para a lógica de inicialização do assistente.
`<wizard_name_finish>.tpl.html`	O arquivo HTML principal da tela de conclusão do assistente.
`<wizard_name_finish>.controller.js`	O JS do controlador para a lógica de conclusão do assistente
`<wizard_page_name>.scss`	Estilo para a página do assistente usando o formato SCSS.
`<wizard_page_name>_mashups.xml`	Definições de mashup para os mashups usados nas páginas do assistente..
`<wizard_page_name>.tpl.html`	O arquivo HTML principal para uma página do assistente
`<wizard_page_partial>.tpl.html`	Os arquivos HTML parciais para uma página do assistente, se necessário
`<wizard_page_name>.controller.js`	O arquivo JS do controlador que possui a lógica de comportamento de uma página do assistente

HTMLs do assistente

O <wizard_name>-wizard.tpl.html é o arquivo HTML principal que faz referência às páginas init , finish e wizard do assistente, conforme mostrado no fragmento de códigos a seguir:

<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 inicialização do assistente.

Qualquer validação ou lógica que precisa ser executada como parte da inicialização do assistente deve ser feita na página init do assistente
A implementação para a página init do assistente é igual às páginas do assistente.

Página de conclusão do assistente

Qualquer validação ou lógica que precisa ser executada como parte de conclusão do assistente deve ser feita na página finish do assistente
A implementação para a página finish do assistente é igual às páginas do assistente.

HTML da página do assistente..

A parte da IU de uma página do assistente é implementada usando um único arquivo HTML (<wizard_page_name>.tpl.html) ou diversos arquivos HTML. É possível dividir a UI da tela em diversas seções e ter HTMLs parciais (<wizard_page_partial>.tpl.html) para cada seção. Isso facilita o gerenciamento de todo o código HTML necessário para a UI.

Configuração do assistente:

A configuração do assistente é igual à configuração de tela. A configuração de roteamento é registrada no arquivo <wizard_name>-wizard.config.js conforme mostrado no fragmento de código a seguir:

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 do assistente (controlador `init` e `finish` )

A lógica para o comportamento do assistente é implementada usando um controlador Em vez de implementar a lógica de comportamento como uma função javascript normal, ela é implementada como um objeto protótipo, o que ajuda na melhor organização do código. A lógica é dividida em várias partes de código javascript conforme descrito na tabela a seguir:

Tabela 2.. Componentes de um controlador
Componente	Descrição
`model`	Um objeto JSON que consiste em modelos que podem ser usados para armazenar dados de backend, como saída de API. Por exemplo, `"orderList":{}` poderia ser usado para armazenar a saída da API `getOrderList` .
`mashupRefs`	Uma matriz de objetos mashupref.
`ui`	Objeto JSON que contém propriedades da IU Ele é incluído no `$scope` e é referenciado como `$scope.ui`
`ui<method>`	Métodos que podem ser chamados a partir de eventos HTML. `ui<methods>` são manipuladores de eventos.. Qualquer método com prefixo como `ui` é incluído em `$scope` e pode ser referenciado como `$scope.ui<method_name>`
`Helper methods`	Os métodos sem `ui` como prefixo são tratados como métodos auxiliares e não são acessados usando o objeto `$scope`
`Private methods`	Os métodos com `_` como prefixo são tratados como métodos privados e não são acessados usando o objeto `$scope`
`initialize`	Este método é o ponto de entrada para a lógica de execução Qualquer mashup ou chamada API que precisa da lógica `init` deve ser codificada neste método

Como a lógica de comportamento é implementada como um objeto protótipo, esse objeto é chamado de objeto de controle. Portanto, é possível usar 'this' para acessar os atributos do objeto de controle..

Ao gravar a lógica do controlador, assegure-se de seguir estas etapas:

Chame mashups para buscar e manter dados.
Defina modelos para reter os dados buscados por mashups
Ligar controles da UI aos modelos.

Use

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

para inicializar a lógica de comportamento da página do assistente para o objeto $scope Consulte as amostras de código do controlador do assistente em <wscdev.war>/ngstore/store/views/samples

Mashups para o assistente

Todos os mashups referidos em uma tela devem ser definidos como <wizard_name>_mashups.xml
Mashups comuns definidos no nível do aplicativo podem ser usados em telas.
Mashups definidos para uma tela, para um cenário específico, não devem ser usados em outras telas.

Consulte o tópico Mashups para mais informações.

Navegando entre páginas do assistente

Para iniciar o assistente na página init do assistente, use iscWizard.startWizard() quando custom-transition="false" e iscWizard.startCustomWizard(pageId,pageInput,pageOptions) quando custom-transition="true".
Quando custom-transition="true" for configurado para o assistente no arquivo <wizard_name>-wizard.tpl.html , o assistente funcionará no modo de transição customizado, em que na página atual será necessário abrir a próxima página. Por exemplo, iscWizard.gotoCustomPage(pageId,pageInput,pageOptions);

Quando custom-transition="false" é configurado para o assistente no arquivo tpl.html , o assistente funciona no modo padrão, em que na página atual é necessário chamar iscWizard.gotoNextPage();
Para navegar de volta, use iscWizardPage.gotoPreviousPage(); ..
Para concluir o assistente a partir das páginas do assistente, use iscWizard.finishWizard();
Para fechar o assistente entre o fluxo, use iscWizard.closeWizard();
Para armazenar dados no nível do assistente, use iscWizard.setWizardContext(key,value); e para recuperar dados no nível do assistente, use iscWizard.getWizardContext(key);.
Para obter as entradas de páginas do assistente, use iscWizard.getWizardPageInput();

Estilo do assistente

O estilo do assistente é implementado em um arquivo SCSS.. Cada página deve ter o seu próprio arquivo SCSS.

Implementação de Amostra

É possível consultar os arquivos de amostra na pasta <wscdev.war>/ngstore/store/views/samples/wizard para melhor entendimento.