Guia do Usuário Cancelar

Criação de componentes personalizados: exemplos

Pesquisar

Última atualização em 11/02/2022

Use esse artigo para entender um componente personalizado HTML5 de amostra.

Este artigo descreve como criar componentes personalizados. O primeiro exemplo descreve o componente de imagem (que também é fornecido com o Animate ) e o processo para compreender a estrutura e as etapas envolvidas no desenvolvimento. O segundo exemplo mostra como empacotar qualquer componente existente de interface de usuário (como jQueryUI) e importá-lo no Animate.

Criar um componente de imagem DOM

Crie uma categoria chamada Meus componentes.

a. Crie uma pasta chamada meuscomponentes na pasta <ComponentesHTML5> na primeira execução.

b. Baixe o arquivo myimage.zip em anexo e extraia o conteúdo na pasta

mycomponents.

Download

Obter arquivo
Clique aqui para baixar o arquivo myimage.zip.

c. Reinicie o Animate.

Estrutura do diretório dentro da pasta meuscomponentes

Você deverá ver uma nova categoria chamada “Meus componentes” na pasta de componentes e um novo componente chamado Minha imagem dentro dele. Você pode arrastar e soltar no palco, definir a propriedade de origem da imagem e publicar o filme para exibir o componente personalizado em ação.

Metadados do componente - components.js

Observe que a categoria está definida como CATEGORY_MY_COMPONENTS. Os nomes de cada uma das propriedades também usam chaves similares. Esta é a chave da sequência de caracteres localizada para o nome da categoria. Se você abrir strings.json na pasta local, verá as entradas a seguir.

O erro mais comum na edição destes arquivos é uma vírgula desnecessária após o último elemento do arranjo.

O valor do campo de ícone é definido como Sp_Image_Sm. Se você acessar a pasta de recursos, notará os dois pngs a seguir com o prefixo Sp_Image_Sm.

Estes são os ícones para as UIs escura e clara.

O valor do campo de origem em components.json é definido como “src/myimage.js”.

(function($) {    

// Registre um componente com o className: my.Image,
 // e protótipo com as seguintes substituições 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// Retorne uma ID exclusiva com a imagem do prefixo
  // _widgetID é uma global declarada em anwidget
  // Esta id é usada somente se o usuário não tiver definido nenhuma ID de estância para o componente no Animate
  // Caso contrário, o nome configurado do usuário é usado
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Retornar a String para criar o elemento DOM
  // Para a imagem, precisamos criar a <img> tag
  getcreatestring: function() {
   return &quot; <img> &quot;;
  },
  
// Conjunto de propriedades configuráveis
  GetProperties: function() {
   retornar isto._props;
  },
  
// Conjunto de atributos configuráveis
  getAttributes: function() {
   retornar isto._attrs;
  }    
 });   
})(jQuery);

Siga os comentários no código para entendê-lo facilmente.

Fique à vontade para ver a origem dos outros componentes que são fornecidos com o Animate. Na maioria dos casos, é possível usar um desses como ponto de partida e o configurar de acordo com os seus próprios requisitos.

Empacotar um componente jQuery-UI

Essa seção descreve como empacotar um widget jQuery-UI e usá-lo no Animate. Os mesmos conceitos podem ser usados para empacotar qualquer outro componente existente de qualquer outra estrutura de UI.

Vamos entender o componente empacotado DatePicker com o Animate , que é um widget jQuery-UI. Baixe e extraia os conteúdos do arquivo a seguir e use-os como referência.

Download

Obter arquivo

Clique aqui para baixar o arquivo datepicker.zip.

A pasta chamada jquery-ui-1.12.0 é a origem do framework de interface do jQuery, que contém o widget DatePicker original e seus recursos como imagens e css para empacotar e usar no Animate como qualquer outro componente HTML5. Isso é necessário apenas para visualização local; quando você usa “bibliotecas hospedadas” nas configurações de Publicação, tem a opção de usar o cdn para fazer download das origens dependentes.

Há duas dependências padrão, jQuery e anwidget.js. Como anwidget.js não está no CDN, não temos nenhuma entrada de CDN para ele.

O próximo conjunto de entradas é para os outros recursos necessários para carregar o widget de seletor de data do jQueryUI. Se você estiver empacotando um widget de qualquer outra biblioteca, poderá especificar de modo semelhante o conjunto de dependências para ele. Essas dependências são baixadas antes de o componente ser inicializado.

Na seção de propriedades, nós expusemos apenas uma propriedade chamada de rótulo, que está vinculada à propriedade de rótulo do componente seletor de data. Da mesma forma, também podemos expor outras propriedades, qualquer propriedade que desejamos permitir ao usuário configurar no ambiente de criação do Animate. No tempo de execução, cada uma delas estará disponível como um par de chave e valor no arranjo options da instância. Podemos extrair o valor configurado e o aplicar no tempo de execução.

Arquivo de origem principal: src/datepicker.js.

Seções diferentes do exemplo

getCreateString:

O widget de seletor de data do jQuery-UI pega um elemento de texto de entrada e o converte em um elemento de seletor de data no tempo de execução. Assim, nós inicializamos o DOM.
attach:

É preciso substituir esta função para este widget. Essa API é chamada sempre que o elemento é anexado ao DOM. No entanto, devido à maneira como o tempo de execução subjacente (nesse caso, createjs) funciona, essa API pode ser chamada várias vezes durante uma extensão do quadro.

Nós lembramos o estado anexado do elemento subjacente e chamamos a classe de base para anexar a API (usando this._superApply(arguments)). Se esta for a primeira vez que o elemento é anexado ao DOM principal, usamos a chamada do widget subjacente jQuery-UI para converter o DOM do nosso componente em um seletor de data. Consulte - https://jqueryui.com/datepicker/

A maioria dos widgets Javascript funcionam de modo semelhante. Você pode usar a mesma técnica para empacotar qualquer componente de sua escolha e os adicionar ao Animate da mesma forma.
Atualização: substituímos a atualização e aplicamos as propriedades css ao contêiner div e os atributos ao elemento DOM real.

Quando você substitui APIs, como attach, detach ou update, avalie a implementação padrão da classe de base e chame a implementação de base no momento apropriado, caso contrário, a inicialização do componente poderá falhar.

Mais itens similares

Receba ajuda com mais rapidez e facilidade

Novo usuário?