Khalil Sarabey - Full Stack Web and Mobile Developer
Building a Chat App with Titanium – Part 1
by khalilsarabey

This is going to be a series of posts explaining how to build a full featured chat app using Titanium. This tutorial will focus on iOS.

We’re not gonna get too much into the UI side of things, in the end we’ll have a decent UI, but it won’t be unique, I’ll leave that up to you.

This is gonna be a long road, so let’s get started!

Open your index.xml file in your views, and write the following code:

Now we have a basic window with a navigation bar and a basic table.
This is where we will be listing the conversations that already started.

It’s always a good practice to give your elements ids in order to call them from your tss files and your controller files, always stick to the MVC pattern

Now open up the index.js file in your controllers folder, and delete everything generated there and paste the following:

Since we created a NavigationWindow and specified an ID, $.index.open() doesn’t work anymore, we need to explicitly specify the ID of the Window / NavigationWindow we’re trying to open, we’ll get back to this controller later on, right now we’re only adding the required elements to create our chat app.

Moving on, to keep our code organized, let’s create a folder and name it rows, this folder needs to be created in the controllers, styles and views folders.
Now let’s create our first custom row to display the avatar and the name of the user, we’ll call it messagesRow.

If you’re new to Titanium, I suggest you read the documentation about how alloy works, I’m not gonna get into details on that.

Create the file messagesRow.xml under views/rows and paste the following code:

This is a basic row, we will have the avatar and the user name next to each other, let’s do some styling to make it look nice, create the file messagesRow.tss under styles/rows and paste the following:

I think this is clear enough to everyone.

Next we need to create a messagesRow controller to handle all the logic of the row. Create the file messagesRow.js under controllers/rows and paste the following:

What happened here? we’re saving any arguments that get passed to the row in an args variable, now we can easily access any data that we pass to this controller in this one variable.
In the messages table, when a user clicks on a conversation, we need to know which conversation he clicked on in order to open its corresponding chat, right now there’s no way for us to access that, to make it possible, we’ll add “params” to the row’s data, which we can easily access after that, and that’s what we did on line 2.
Line 3 and 4 are responsible for displaying the right name and avatar passed.

Now we need to generate some dummy data and fill the Messages table to see the results of what we’ve been doing!
To do that, open controllers/index.js and add the following code to the top of the file (before $.nav.open()):

Here we created a JSON array for our dummy list of messages, this will eventually be pulled from your API, but we’re not getting into that in this tutorial.

I always like to have an init() function that gets fired when the controller loads, and that’s what I did here, in my init function, I’m looping through the messages array and I’m adding the elements to the table, but as you can see, I created a separate function to create the row, this is my preference and it’s not required, but it’s much cleaner code so I recommend it.
createRow is a simple function that creates the controller messagesRow and passes the values of the array element.

Make sure you add the image file avatar.jpg to your assets folder or you won’t be able to see any avatar being displayed

Now that we have our messages table working, it’s time we create the chat window and link it to our messages.

Let’s start by creating a chat.xml file under views and pasting the following:

Let’s also create the corresponding controller: controllers/chat.js and let’s keep it blank for now.

Open controllers/index.js and add the following event handler after the createRow function:

Go ahead and test the app!

In part 2 of this tutorial we’ll work on the chat view, which is the most important part.

See you there!

Leave a reply