Using widgets

There are some components that are commonly used in web application, such as alert information, drop-down buttons, button groups, and modal dialogs. Bootstrap has a great support for that, and you can create those widgets in Opa. Let's first take a look at how we create a drop-down button in Opa:

import stdlib.themes.bootstrap.css
function page(){
  <div class="btn-group" style="margin:10px">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
      Action <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">action1</a></li>
      <li><a href="#">action2</a></li>
      <li><a href="#">action3</a></li>
    </ul>
  </div>
}
Server.start(Server.http,[
  {resources: @static_resource_directory("resources")},
  {register: [{js: ["resources/bootstrap.min.js"]}] },
  {title:"Opa Packt", ~page}
])

Note that we use...