I was reading up on execution contexts on Appcelerator’s site, and I learned about a good way to use custom events.

Below is a depiction of a really common iPhone app scenario. You’re on a page with a table, you tap the + button to open a modal, you add an item, hit “Save”, then your item gets appended to the table on the original screen.

There are various ways to get the new item in the modal on to the list on the parent screen. You could update a database in the modal, then refresh the database and rebuild the table on the parent screen. You could do the same with thing Ti.App.Properties to transfer the data over. While you should definitely save your data to somewhere persistent when you “Save” in the modal, rebuilding the table on the parent screen is inefficient and is visible to the user (it flickers and jumbles).

I recommend saving the data, then firing a custom event to append that new row to the table from inside the modal. Then the table is ready by the time the user gets back there (about 1 second later).

Here’s how you do it.


// Inside the Modal ----------
//Send the data to the custom event fount in the parent window

Ti.App.fireEvent('addAirplaneToTable', {
     airplaneValues:[planeRegistration.value, planeEquipment.value,
     planeColor.value]
});

Then in the parent, do this:

// Parent Window (that originally fired the modal) ----------
Ti.App.addEventListener('addAirplaneToTable', function(e) {
     //Build a New Row with Custom Labels
     var row = Ti.UI.createTableViewRow({ className: 'planesTableRow',
          backgroundImage:'../images/row-bg.png', rowHeight:44 });
     //Create custom row labels
     var labelRegistration = Titanium.UI.createLabel({
          text:e.airplaneValues[0], etc.
     });
     var labelEquipment = Titanium.UI.createLabel({
          text:e.airplaneValues[1], etc.
     });
     var labelColor = Titanium.UI.createLabel({
          text:e.airplaneValues[2], etc.
     });
     row.add(labelTailNumber);
     row.add(labelTypeEquipment);
     row.add(labelColor);
     //Append the Row
     planesTable.appendRow(row, { animationStyle:
          Titanium.UI.iPhone.RowAnimationStyle.Top });
});

This is a simple and fancy way to execute code in other places while inside a different execution context.

For. The. Win.