(For more resources related to this topic, see here.)

The following is a screenshot of our chat application:

Creating a project

To begin developing our chat application, we need to create an Opa project using the following Opa command:

opa create chat

This command will create an empty Opa project. Also, it will generate the required directories and files automatically with the structure as shown in the following screenshot:

Let's have a brief look at what these source code files do:

• controller.opa: This file serves as the entry point of the chat application; we start the web server in controller.opa
• view.opa: This file serves as an user interface
• model.opa: This is the model of the chat application; it defines the message, network, and the chat room
• style.css: This is an external stylesheet file
• Makefile: This file is used to build an application

As we do not need database support in the chat application, we can remove --import-package stdlib.database.mongo from the FLAG option in Makefile. Type make and make run to run the empty application.

Launching the web server

Let's begin with controller.opa, the entry point of our chat application where we launch the web server. We have already discussed the function Server.start in the Server module section. In our chat application, we will use a handlers group to handle users requests.

Server.start(Server.http, [
{resources: @static_resource_directory("resources")},
{register: [{css:["/resources/css/style.css"]}]},
{title:"Opa Chat", page: View.page }
])

So, what exactly are the arguments that we are passing to the Server.start function?

The line {resources: @static_resource_direcotry("resources")} registers a resource handler and will serve resource files in the resources directory.

Next, the line {register: [{css:["/resources/css/style.css"]}]} registers an external CSS file—style.css. This permits us to use styles in the style.css application scope.

Finally, the line {title:"Opa Chat", page: View.page} registers a single page handler that will dispatch all other requests to the function View.page.

The server uses the default configuration Server.http and will run on port 8080.

Designing user interface

When the application starts, all the requests (except requests for resources) will be distributed to the function View.page, which displays the chat page on the browser. Let's take a look at the view part; we define a module named View in view.opa.

import stdlib.themes.bootstrap.css
module View {
function page(){
user = Random.string(8)
<div id=#title class="navbar navbar-inverse navbar-fixed-top">
<div class=navbar-inner>
<div id=#logo />
</div>
</div>
<div id=#conversation class=container-fluid
onready={function(_){Model.join(updatemsg)}} />
<div id=#footer class="navbar navbar-fixed-bottom">
<div class=input-append>
<input type=text id=#entry class=input-xxlarge
onnewline={broadcast(user)}/>
<button class="btn btn-primary"
onclick={broadcast(user)}>Post</button>
</div>
</div>
}
...
}

The module View contains functions to display the page on the browser. In the first line, import stdlib.themes.bootstrap.css, we import Bootstrap styles.

This permits us to use Bootstrap markup in our code, such as navbar, navbar-fixtop, and btn-primary. We also registered an external style.css file so we can use styles in style.css such as conversation and footer.

As we can see, this code in the function page follows almost the same syntax as HTML. As discussed in earlier, we can use HTML freely in the Opa code, the HTML values having a predefined type xhtml in Opa.

Summary

In this article, we started by creating and a project and launching the web server.

Resources for Article :

Further resources on this subject:

• MySQL 5.1 Plugin: HTML Storage Engine—Reads and Writes [Article]
• Using jQuery and jQueryUI Widget Factory plugins with RequireJS [Article]
• Oracle Web RowSet - Part1 [Article]