While we can use the events built into the Titanium API to suit 90 percent of our general purposes, what happens when we want to launch an event that's not covered by one of the standard Titanium components? Luckily for us, Titanium already has this covered with the fireEvent method in our Titanium.App namespace!
FireEvent allows you to execute an arbitrary event with an event listener name that you determine, and then listen for that event in your code. In this recipe, we are going to get a little bit tricky and write some code that copies an input field's data and displays it on a label back in our app. We will do this by firing off a custom event from within a Webview, which we'll then listen for and respond to back in our Titanium window.
Open up the app.js file in your editor, and below your declaration of the win2 object, type in the following code to create the Webview:
//create a webview and then add that to our
//second window (win2) at the bottom
var webview = Titanium.UI.createWebView({
url: 'webevent.html',
width: 320,
height: 100,
bottom: 0
});Now, create a new HTML file and call it webevent.html, with the following code. When you have finished, save the HTML file to your project Resources folder.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>EventHandler Test</title>
</head>
<body>
<input name="myInputField" id="myInputField" value="" size="40" />
</body>
<script>
//capture the keypress event in javascript and fire
//an event passing through our textBox's value as a
//property called 'text'
var textBox = document.getElementById("myInputField");
textBox.onkeypress = function () {
// passing object back with event
Ti.App.fireEvent('webviewEvent',
{ text: this.value });
};
</script>
</html>All that is left to do now is create the event handler back in our app.js file which will copy the input field data from our HTML file as you type in it, and then add our webview to the Window. Write the following code below your initial webview object declaration in the app.js file:
//create a label and add to the window
var labelCopiedText = Titanium.UI.createLabel({
width: 'auto',
height: 'auto',
value: '',
bottom: 120
});
win2.add(labelCopiedText);
//create our custom event listener
Ti.App.addEventListener('webviewEvent', function(e)
{
labelCopiedText.text = e.text;
});
win2.add(webview);Run your app in the emulator now and you should be able type in the input field that is within our Webview to see the results mirrored on the label that we positioned above it! You should be able to see a screen just like the one pictured here:
Basically, our event fired from the Titanium.App.fireEvent method creates a cross-context application event that any JavaScript file can listen to. However, there are two caveats to this. First, the event can only be handled if the same event name is used in both your fireEvent call and your listener. As with app properties, this event name is case-sensitive so make sure it is spelled exactly the same way throughout all parts of your application code.
Second, you must pass an object back even if it is empty, and that object must be in a JSON serialized format. This standardization ensures that your data payload is always transportable between contexts.
It's also possible to remove an event listener from your code should you no longer need it. You can do this by calling Titanium.App.removeEventListener and passing it the name of your event. Note that it is still case-sensitive, so your event name must match exactly! An example for our application of removing the webviewEvent would be:
Titanium.App.removeEventListener('webviewEvent'),