Simple Chat
This tutorial will show you how to program a simple chat App with Fire★. We will create an edit box where you can create your message and a button to send it.
If you have not created an App before, please see the Hello World tutorial.
Setup
Create a new conversation and start the App Editor via the App menu. The first thing that needs to be defined is the minimum size of our App. Type the following into the App Editor.
app:height(200)
app:width(300)
Making the Widgets
The size is specified in pixels. There needs to be a place where the messages will be.
There are many approaches we can try but for now lets use the list
object.
msgs = app:list()
app:place_across(msgs, 0, 0, 1, 2)
Widgets are placed in an invisible grid. I used app:place_across
here because I want
the messages
widget to span across 1 row and 2 columns. Lets define an edit box where
the user can type in their messages and a button that they can click to send the message.
ed = app:edit("")
app:place(ed, 1, 0)
snd = app:button("send")
app:place(snd, 1, 1)
Handling The Events
Now that we have an edit box and button, we need them to do something. What we want is when the user clicks the button or presses enter on the edit box, the message that is typed in is sent.
snd:when_clicked("clicked_send_message()")
ed:when_finished("send_message")
In this case, we will have both actions do the same thing, which is send a message. Lets define that function now.
function clicked_send_message()
send_message(ed:text())
end
function send_message(text)
if #text== 0 then
return
end
msg = app:message()
msg:set("text", text)
app:send(msg)
add_message("me", text)
ed:set_text("")
end
The important part is that within the send_message
function, we create a message
object
and use the app:send
function to send it. A message
object can Lua table objects which
can be sent along with the message. You can set as many key/value pairs as you want within
a message.
The app:send
function will send the message to everyone in the conversation. Along with
sending the message, we want to add the same message into our message list.
function add_message(name, text)
local t = "<b>"..name..":</b> "..text
local nl = app:label(t)
msgs:add(nl)
app:alert()
end
Here a label is created with the name of the person who sent the message and the text
of the message. You can use primitive HTML inside a label. The label is added to the
list
object we defined earlier. There is also a call to app:alert
, which will highlight
the tab to alert the user when a new message is there when they don't have the app focused.
Handling Messages
The last bit is handling what we do when we get the message.
app:when_message_received("got")
function got(msg)
local from = msg:from()
local name = from:name()
add_message(name, msg:get("text"))
end
The app:when_message_received
call registers the function that is called when a message
is received. Messages can have types, but in this case since we only have one type of message
app:when_message_received
is a catch all for all messages.
Code Listing
The full App code is listed below.
app:height(200)
app:width(300)
msgs = app:list()
app:place_across(msgs, 0, 0, 1, 2)
ed = app:edit("")
app:place(ed, 1, 0)
snd = app:button("send")
app:place(snd, 1, 1)
snd:when_clicked("clicked_send_message()")
ed:when_finished("send_message")
app:when_message_received("got")
function clicked_send_message()
send_message(ed:text())
end
function send_message(text)
if #text== 0 then
return
end
msg = app:message()
msg:set("text", text)
app:send(msg)
add_message("me", text)
ed:set_text("")
end
function got(msg)
local from = msg:from()
local name = from:name()
add_message(name, msg:get("text"))
end
function add_message(name, text)
local t = "<b>"..name..":</b> "..text
local nl = app:label(t)
msgs:add(nl)
app:alert()
end