Join Rafael Hernandez for an in-depth discussion in this video Adding email feedback, part of Up and Running with Titanium.
Email is porbably the simplest way to introduce user feedback into your application. Thankfully Titanium a straightforward way of sending emails directly from your app. We'll incorporate user feedback in the preferences panel for our application. Remember that we have two different implementations. One for IOS and one for Android. We'll start with the iOS implementation. We'll head to Views, and open the iosprefsview.js file. For iOS, we'll create a table that has a row with a label and a button.
The label will prompt the user to click the button to send email feedback. Let's create the table. We'll start by typing var pressTable equals TI.UI.createTableView. We'll set the table to be zero pixels from the top of the screen. Notice that we're not using DPs. That's because this is an iOS-specific implementation. Now we'll set the height of the table to 325 pixels. We'll set the table style to be a grouped table.
Style, Titanium.UI.iPhone.TableViewStyle.GROUPED. Now, we'll set the background color to transparant. Finally, we'll set the data source to an array that will create an a moment called prefsRows. Before moving on, we'll add the table to the window. Win.add prefsTable.
Now, we'll create the data source for the table. Var prefsRows equals, and then we'll open and close square brackets. Our table will consist of a single row that has a label and a button. The label will prompt the user to tap the button, and the email dialog will open. We'll create the table he row first. Var emailRow equals Ti.UI.createTableViewRow. We'll set the height of the row to 120 pixels.
Now we'll create the text label. Var emailTXTequals ti.ui.createLabel. The text for the label will be we want to hear from you. We'll set it 16 pixels from the top of the arrow and we will set some font styling. The font size will be 18. The font family will be Aller.
Remember that this is an iOS-specific implementation so we're not using conditional code for the font family. Now we'll create the button. Var email BTN equals ti.ui.createButton. For the title, we'll set the text email us now. We'll set the button to be 16 pixels from the bottom of the row. And we'll copy the font styling from the label, paste it into the button, and change the font size to 14. Now, we'll add the label in the button to the row. EmailRow.add.
EmailTXT. EmailRow.addemailBTN. With the row created we'll add it to the prefsRow array. EmailRow. Now we'll write code that will respond to the user tapping on the email button. We'll start with emailBTN.addEventListener. And we'll listen for the click event. Within the function of fire, we'll open the email dialog.
Var email equals TI.UI.createEmailDialog. For the creation properties, we'll set HTML to true. This lets use HTML formatting in our emails. For the subject, we'll set a string that reads Explore California with Me. We'll use the two recipients property to designate who the email should be sent to. Here we'll use an array of email addresses.
We'll send the email to info@exploreCalifornia.org. . Finally, we'll explicitly set the message body. The user will be able to edit this. MessageBody. And within it, since we have HTML set to true, we'll use HTML tags and create paragraph tags. Within the paragraph tags. The first paragraph will read, explore California. And we'll create another paragraph tag that says, indeed, I will. Finally, we need to open the dialog. We'll do that by typing email.open.
Lets take a look at the result, in the Simulator. We'll visit the Preference Panel, and here we see the table with the table row. The label reads that we want to hear from you, and when we tap Email us now. We get a dialog where the user can send an email. As we've seen, sending an email from within an IOS app is an easy and straightforward way of introducing user feedback into an application.
- Setting up Titanium Studio
- Creating a new project
- Adding interactivity
- Using CommonJS modules
- Including platform-specific code
- Creating a preferences panel
- Making cross-platform adjustments