Por exemplo: criando um controle de botão jQuery

Este exemplo mostra como usar uma biblioteca de terceiros externa, como jQuery, durante a criação de uma visualização de coach.

1. Inclua um código HTML customizado em uma visualização coach:
   1. Na página Layout, arraste o item HTML Customizado Avançado na tela.
   2. No HTML de propriedades, selecione a opção Texto e, em seguida, forneça o código HTML customizado. Para este exemplo, é possível usar o código a seguir para definir um botão jQuery:

      <input type="button" class="Jquerybutton" name="jbtnName" value="default"></input>

2. Fazer upload de um arquivo compactado (.zip) que contém os ativos da biblioteca jQuery e folhas de estilo e, em seguida, selecione os arquivos individuais a serem incluídos:
   1. Na lista de recursos da biblioteca, clique no sinal de mais ao lado de Arquivos e selecione Arquivo do Servidor da lista de componentes.
   2. Selecione o compactados jQuery da biblioteca ativos no arquivo (jQuery.zip para este exemplo) e, em seguida, clique em Concluir.
   3. Após o upload ser concluído, acesse a guia Comportamento da visualização de coach e clique no sinal de mais próximo de Scripts Incluídos.
   4. Na lista de arquivos do servidor, clique na seta ao lado de jQuery.zip para visualizar o conteúdo do arquivo transferido por upload.
   5. Selecione um arquivo para incluir. Cada arquivo para incluir é selecionada individualmente. Os arquivos .css são incluídos em uma ordem específica. Para este exemplo, os seguintes arquivos são incluídos na ordem em que são listados:
      • jquery-1.4.js
      • jquery-ui-1.8.custom.min.js
      • core.css
      • jquery-ui-1.8.custom.css
3. Em Manipuladores de Evento, selecione de carga e, em seguida, fornecer o script customizado. Para este exemplo, você pode utilizar o seguinte script:

   var _this = esse;
   $('.Jquerybutton', this.context.element).button(
   {etiqueta: this.context.options._metadata.label.get("value")}).bind('clique', function() {
   _this.context.trigger(function() { console.log("jQuery button boundary event handled");})
   }); 

   Tabela 1. Notas sobre o script

   Item	Descrição
   this.context.options._metadata.label.get("value")	Recupera o valor do rótulo a partir das opções de configuração.
   this.context.trigger(...)	Aciona um evento de limite quando o botão é clicado. Se o evento de limite estiver ligado à próxima etapa em um diagrama de serviço manual, um clique no botão acionará uma transição (para a próxima etapa).

4. Clique em Salvar ou Concluir edição.