Code snippets for custom components

Use this article to understand the code snippets for custom components

You can add code snippets to your custom components to ease your interaction with the component. Lets evaluate two examples present in Animate. The new code snippets are added under HTML5 Canvas -> Components section.

Code snippet to attach a click handler to a button

// Disable multiple handlers, as these may be used in frame scripts
if(!this.instance_name_here_click_cbk) {
 function instance_name_here_click(evt) {
  // Start your custom code
  console.log("Button clicked");
  // End your custom code
 }

 // Attach an event handler on the parent with the filter as the 
 // Component instance’s id
$("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this));
 this.instance_name_here_click_cbk = true;
}

Please note that the handler is attached to the parent (dom_overlay_container) with the filter set for the component instance. This is important as the component instance may not be present when you are trying to attach the handler. This ensures that the event handlers are fired properly.

You can similarly provide the event handlers for your custom components.

Code snippet to get value from any input control
```
console.log($("#instance_name_here").val());
```

Code snippet to be used when the component instance is attached to DOM

// Listen to the attached event, fired by component runtime

$("#dom_overlay_container").on("attached", function(evt, param) {           
// Check the id of the instance 
if(param && param.id == 'movieClip_1') {                           

$("#movieClip_1").text("My Button");                          
}
});

More like this

Adobe

Get help faster and easier

New user?

Code Snippets for custom Components

More like this

Get help faster and easier

Ask the Community

Contact Us