Ti.UI Basics: How to use AlertDialog in Alloy

AlertDialogs are things that are used often in apps. Whether it is for trivial notifications or confirmation of deleting things. And yet, most people still use the classic method of creating AlertDialogs in Alloy.

So here’s a couple tricks how to use AlertDialogs better in Alloy. Alloy is always very flexible in offering you to choose between putting elements in XML or TSS, I prefer TSS with most elements to keep my XML as clean as possible.

1: Add to View

First you want to add your alertDialog to your View. You can add this to the root of your View, within the <Alloy> tag of course.

<Alloy>
  <Window></Window>
  <AlertDialog id="myAlert" />
</Alloy>

2: Add Styling Properties

With the AlertDialog in your View, you can now easily style using all the properties you can find in the docs. A very basic setup includes a title and message of course.

"#myAlert": {
  title: "Hello",
  message: "Hello, World!"
}

This will give you a very basic AlertDialog with just the title and a message as you would expect.

3: Add ButtonNames

There are 2 way to add ButtonNames to the AlertDialog. One is directly through the View like this:

<AlertDialog>
  <ButtonNames>
    <ButtonName>Confirm</ButtonName>
    <ButtonName>Cancel</ButtonName>
    <ButtonName>Help</ButtonName>
  </ButtonNames>
</AlertDialog>

Another way to do this, which is my favorite, is put the ButtonNames in the styling. Of course this all depends on your personal preference, but with every text attribute including button titles & label texts, I always put it in tss. This gives me more overview of all the texts, and I never have to guess where they are. Anyways, to add it to the styling file, just add this:

buttonNames: [
  "Confirm",
  "Cancel",
  "Help"
 ]

And with that, you’ve achieved the same as with the view above.

4. Listen for click event

Because of the power of Alloy, you don’t have to bind a click event in the controller. Some people prefer adding all event listeners inside the controller file, but I will always recommend adding event listeners in the view itself. To do this with the AlertDialog, adjust your AlertDialog in the View like this:

<AlertDialog id="myAlert" onClick="clickMyAlert" />

Then, in the controller add the listener function

function clickMyAlert(e) { }

Of course, you can change the name of that function to whatever you want, I just included the id property in the function name in the format [event][id]. This always tells me exactly what the function does when looking in the controller, without actually having to look in the view.

5. Show the dialog

Now whenever you want to display the dialog, you can just call the method show on the dialog

$.myAlert.show();

6. Do what you need to do

So now you’ve got the entire flow set up, you can customize your AlertDialog in the tss, you can show the AlertDialog, and you can listen for the event. To customize it more, or to know what kind of event details you’re getting in the event callback, just take a look at the documentation.