Guia do Usuário Cancelar

Snippets de código para componentes personalizados

 

Use esse artigo para entender os snippets de código para componentes personalizados

Você pode adicionar snippets de código aos seus componentes personalizados para facilitar a interação com o componente. Permite avaliar dois exemplos presentes no Animate. Os novos snippets de código são adicionados em HTML5 Canvas -> seção Componentes.

  1. Snippet de código para anexar um manipulador de clique em um botão

    // Desative alças múltiplas, porque elas podem ser usadas em scripts de quadro
    if(!this.instance_name_here_click_cbk) {
    function instance_name_here_click(evt) {
    // Comece seu código personalizado
    console.log("Button clicked");
    // Termine seu código personalizado
    }
    // Anexe um manipulador de eventos no pais com o filtro como
    // id da instância do componente
    $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this));
    this.instance_name_here_click_cbk = true;
    }
    // Desative alças múltiplas, porque elas podem ser usadas em scripts de quadro if(!this.instance_name_here_click_cbk) { function instance_name_here_click(evt) { // Comece seu código personalizado console.log("Button clicked"); // Termine seu código personalizado } // Anexe um manipulador de eventos no pais com o filtro como // id da instância do componente $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this)); this.instance_name_here_click_cbk = true; }
    // Desative alças múltiplas, porque elas podem ser usadas em scripts de quadro
    if(!this.instance_name_here_click_cbk) {
     function instance_name_here_click(evt) {
      // Comece seu código personalizado
      console.log("Button clicked");
      // Termine seu código personalizado
     }
    
     // Anexe um manipulador de eventos no pais com o filtro como
     // id da instância do componente
    $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this));
     this.instance_name_here_click_cbk = true;
    }
    

    Observe que o manipulador é anexado ao contêiner principal (dom_overlay_container) com o filtro definido para a instância do componente. Isso é importante porque a instância do componente pode não estar presente ao tentar anexar o manipulador. Isso garante que os manipuladores de eventos sejam disparados corretamente.

    De modo semelhante, você pode fornecer manipuladores de eventos para os componentes personalizados.

  2. Snippet de código para obter o valor de qualquer controle de entrada

    console.log($("#instance_name_here").val());
    console.log($("#instance_name_here").val());
    console.log($("#instance_name_here").val());
  3. Snippet de código a ser usado quando a instância do componente é anexada ao DOM

    // Ouça o evento anexo, acionado pelo runtime do componente
    $("#dom_overlay_container").on("attached", function(evt, param) {
    // Verifique a id da instância
    if(param && param.id == 'movieClip_1') {
    $("#movieClip_1").text("My Button");
    }
    });
    // Ouça o evento anexo, acionado pelo runtime do componente $("#dom_overlay_container").on("attached", function(evt, param) { // Verifique a id da instância if(param && param.id == 'movieClip_1') { $("#movieClip_1").text("My Button"); } });
    // Ouça o evento anexo, acionado pelo runtime do componente
    
    $("#dom_overlay_container").on("attached", function(evt, param) {           
    // Verifique a id da instância 
    if(param && param.id == 'movieClip_1') {                           
    
    $("#movieClip_1").text("My Button");                          
    }
    });
    

Receba ajuda com mais rapidez e facilidade

Novo usuário?