Pages

Pages in WebDSL can be defined using the

define page { <page element*> }

construct:

define page home() {
  title { "Page title" }

  section {
    header("Hello world.")  

    text { "Greetings to you." }
  }
}

Basic page elements

Custom pages can be built using basic page elements. These determine the basic structure and layout of a page. These include:

• title { <page element*> }

  : Declares the title of the current page.

• section { <page element*> }

  : Indicate sections in a document; may be nested. May include a

  header( <text> )

  element that indicates the section title.

• text (<value>)

  : displays text. For example,

  text (user.name)

  prints the name property of a user.

• block [(<class>]) { <page element*> }

  : groups text; optionally defines a class for referencing in CSS.

• navigate ( <page> ) { <title> }

  : Link to a page. For example:

  page(news()) { "News" }

• spacer

  : a spacer.

• horizontalspacer

  : a horizontal line.

• image ( <file> )

  : an image.

Menus

• menubar

• menuheader

• menu

• menuitem

Tables and lists

• table , row : create tables. For example:

    table  {
      row { "Username" output(user.name) }
      row { "Password" "it's a secret" }
    }
  

• list , listitem : create lists. For example:

    list {
      listitem { "Milk" }
      listitem { "Potatoes" }
      listitem { "Cheese (lots)" }
    }
  

Forms

Forms enable user input, and may include action elements (see below).

• form { ... }

  : defines a new form. Example:

    form {
      var name : String;
      var password : Secret;
  
  
  table {
    row { "Username:" input { username } }
    row { "Password:" input { password } }
  }
  
  
    }
  

• captcha

  : creates a fully automatic CAPTCHA form element.

• select(<field> [from <collection>]) a drop-down select box.

Generative page elements

Generative elements of a page define page elements based on the type of their parameters.

• input(<value>)

  : creates an input form element. Can be applied directly to the proparties of an entity (e.g., input(user.name)) or to local variables.

• output

  : displays a value.

Generated pages

From entity definitions, view and pages are automatically generated. As desired, these can be overridden with custom definitions.

For an entity type EntityX, the following pages are generated:

• entityX: views an entity.

• createEntityX: creates a new entity.

• editEntityX: edits an entity.

• allUser: lists all entities of type EntityX.

To block access to these pages, make use of the access control facilities of the language.

Page parameters

Pages can have parameters. For example, to override the default 'view' page of an entity user, define:

    define page user(u : User) {
      "The name of this user is " u.name
    }

Templates

Templates enable reuse of page elements. For example, a template for a footer could be:

    define footer() { All pages are belong to us. }

This template can be included in a page by invocation of its name: footer() or footer

Template definitions can be defined locally in a page, to restrict their use to that page. They can also be defined in the global scope to allow reuse in other pages.

Like pages, templates can be parametrized.

Actions

Actions define the interactive behavior of pages. See actions.

Example

We conclude this page with an example user page, that overrides the standard view page for entity type User. It displays a table with the current entity, and provides a form to edit it.

    define page user(u : User) {
      main()
      define body() {
        table { 
          row { "Name:  " output(u.name)}
          row { "Group: " output(u.group)}
          row { "Email: " output(u.email)}
        }

        navigate ( editUser(u)) { "Go to generic edit page"  }

        form { 
          // forms may contain input elements and actions
          "Edit this user"
          table { 
            row { "Name:  " input(u.name) }
            row { "Group: " input(u.group) }
            row { "Email: " output(u.email) }
            action ( "save", saveUser() )
           }
        }

        action saveUser() {
          u.persist();
        }
      }
    }