<< Click to Display Table of Contents >>

Navigation:  Events >


Previous pageReturn to chapter overviewNext page

Performs a function when the component is destroyed. The example uses a button but the concept is the same for all components.


Create a new project


1. Add a button to the canvas

Set html name to Destroy Button

Set alias to destroyButton




2. Add another button to the canvas

Set html name to Button

Set alias to button




3. Add a function to the Destroy Button

Select the Destroy Button

Select the onClick ... box




This will create a new function with the following code.


       _destroybutton_onclick:function (profile, e, value){

           var ns = this, uictrl = profile.boxing();




4. Save the changes and run the program


You should see the 2 buttons. Open your debug window of choice. I use Firebug with Firefox.


Click the Destroy Button




Clicking the Destroy Button kills off the Button - note there are no errors




Clicking the Destroy Button again creates an error as the component has been destroyed already and does not exist.




The error message is correct - button is undefined.


5. Select Button

 Expand the Events tab

Select the Event - onDestroy ... box




A new function and default code is generated.


       _button_ondestroy:function (profile){

           var ns = this, uictrl = profile.boxing();



Add a debug line of code          console.log("in button_onDestroy function");


       _button_ondestroy:function (profile){

           var ns = this, uictrl = profile.boxing();

           console.log("in button_onDestroy function");          



Save the changes

Refresh the browser to run the program

Click the Destroy Button




The console log message is displayed proving the function has been run prior to the Button being destroyed