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>
  }
  ....