WebBuilder Tutorial

Welcome to this introductory tutorial to design your own webpages using WebBuilder.

WebBuilder adds a programmatic layer on top of HTML/CSS/Javascript to generate them through a single programming language in purescala. With WebBuilder, you can create parametric HTML documents like you would do it in PHP, but it's type-safe ! Let's go through an example on the command line. Alternatively, you can also use the web interface.

Setup and Hello world

Make sure to download leon and compile it using sbt compile

Create a file name "HelloWorld.scala" at the root of leon. Paste the following content:

import leon.lang._
import leon.collection._
import leon.webDSL.webBuilding._
import leon.webDSL.webDescription._
import implicits._

object Main {
  def main() = WebPage(<.div("Hello world"))
}

To convert this to an html webpage, use the following command:

sbt "run --webbuilder --o=HelloWorld.html HelloWorld.scala"

General remarks

Before we move on with some more examples, here are some useful general remarks about how WebBuilder works.

• An object must be named Main, and its method main will be called without argument
• It must return a WebPage element.
• A WebPage element takes a WebElement as first argument, and optionally a CSS stylesheet.
• There are DSL building blocks to create WebElement and StyleSheet. To learn them quickly, see the examples below.
• If the method or variable javascript exists in Main, it will be added as a script (or evaluated if in the online interface)

Helloworld: Add CSS

Things more beautiful some touch of CSS. Replace the content of the previous file with this:

import leon.lang._
import leon.collection._
import leon.webDSL.webBuilding._
import leon.webDSL.webDescription._
import implicits._

object Main {
  val css = Style(
    "div" := (
      ^.color := "red",
      ^.fontWeight := "bold"
    )
  )

  def main() = WebPage(<.div("Hello world"), css)
}

You can run the sbt command again to generate a new webpage.

Helloworld: Add multi-language support

Multilanguage support is not a built-in feature. We have to encode it ourselves.

import leon.lang._
import leon.collection._
import leon.webDSL.webBuilding._
import leon.webDSL.webDescription._
import implicits._

object Main {
  val css = Style(
    "div" := (
      ^.color := "red",
      ^.fontWeight := "bold"
    )
  )

  val language = "en"
  val name = "Viktor"

  val translations = Map(
    "en" -> Map(
      "hello" -> "Hello "
    ),
    "fr" -> Map(
      "hello" -> "Salut ô "
    )
  )

  def main() = WebPage(<.div(translations(language)("hello") + name), css)
}

Note that you can override top-level variables using the --a with a semicolon-separated of key:value pairs. You may override primitive types such as strings, integers and booleans.

For example, to render the page above in French for someone named Mikael, you would write

sbt "run --webbuilder --a=language:en;name:Mikael --o=HelloWorld-FR.html HelloWorld.scala"

With the web interface.

The web interface has more options, especially you may modify the strings in the html webpage and it will try to modify strings in the program to match the output.
You can access the web interface here, after which you need to click on "WebBuilder" on the top bar.
After that, you can paste the code above and render the page.

Export from the web interface.

Click on "Params" on the top bar. Here you can find a box where you can add the "--a=" argument, and then click on "Download web page.