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

Now that we’re done with the basics, let’s get to the juicy part.

Our chat window will contain 2 main things, the table where we display the bubbles of the actual chat, and the chat bar where users can type their messages and send them.

The default behavior every user expects form a chatting app, is having the chat bar at the bottom, and whenever the keyboard appears, it pushes the chat bar and the chat bubbles to top, so with this in mind, let’s proceed and create the necessary views and see how we can create this behavior.

Open views/chat.xml and paste the following:

Let me explain the structure 🙂

We need the chat bar to stick to the bottom of the screen no matter what, and the TableView should scroll without affecting the chat bar.
To achieve that, the chat bar should be outside the tableview, which is also easy to achieve, but what happens when the keyboard appears? that’s where the “container” view comes in, this view will hold the tableview and the chat bar and will resize whenever the keyboard appears or disappears.

I saw some developers using scrollviews instead of just view, which is bad, very bad, TableView and ListView extends from ScrollView, having two ScrollViews into each other will result in unexpected behavior and occasional crashes.

Now if you run the app, you will see the layout is not what we expect it to be, the reason is that we don’t have any styling applied, so let’s create the file styles/chat.tss and paste the following code:

Now give it a shot, you’ll see that the layout is pretty decent, but if you click on the textarea we created, they keyboard will display on top of the chat bar and we can’t see or do anything after that, let’s fix this.

Open controllers/chat.js and add the following code:

Here we’re listener to keyboard frame change event, when it occurs, we change the container view’s bottom based on the keyboard’s y position.
Once this is done, we scroll the TableView to the last row, this is important in this approach cause the TableView won’t keep its position when resized.

Give it a try now, it should work as expected, but we’re not even close to being done, even though for some people this is working fine, but if you pay attention to details, this is not a perfect solution, the keyboard appears and pushes the chat bar, and then, the table scrolls, these should work simultaneously.

We’ll take care of this in part 3!

Stay tuned!

Leave a reply