Introducing Mocha, a new web programming language

What is Mocha?

Mocha is an interpreted language designed to display pages in web browsers. Mocha provides a rich environment for constructing user interfaces within a browser. It also provides easy integration with backend server-code written in Java.

What does Mocha code look like?

Mocha combines the declarative power of HTML with the logical constructs available in languages such as C++ and Java.


At first glance, Mocha looks a lot like Java – it is a block-structured language with variables and logical constructs like if, for, and while.


Upon closer examination, Mocha starts to look more like HTML: it has tags that declare and stylize user interface constructs. These tags have named attributes and content.  Unlike HTML, these tags can be conditionalized to make web page content dynamic.

Where does Mocha run?

Mocha runs on both the web browser and the web server. Unlike other web languages, the interpreter runs the Mocha script cooperatively on both the browser and server. The programmer does not have to worry about where the Mocha script executes; it is the Mocha interpreter’s responsibility to determine where each portion of the script should be run.


For example, the Mocha interpreter may decide that data input validation will run on the browser, and data retrieval will run on the server. These decisions are based on performance considerations only; the language syntax does not specify where the code is run.

Who uses Mocha?

Mocha is used by software engineers who design and develop web pages that contain dynamic content. Dynamic content is information that is retrieved from a backend data store and is often customized based on the identity of the user.


Mocha is not intended for the casual user who builds web pages that display static content. For this purpose, editors that generate HTML are still the best solution.

Why a new programming language?

Mocha is intended as a replacement for HTML, JavaScript, CSS, and JSP. Mocha was invented to eliminate the need to mix multiple languages in a single source file. It was also invented to eliminate the need for “configuration” programming – programming where conditional logical is imbedded in XML configuration files.

What are the goals for Mocha?

The goals of Mocha are:

·        Provide a rich user interface for browsers

·        Provide a single language with consistent syntax for web page development

·        Improve the performance of web page generation at the server


Success meeting these goals will:

·        Make web pages more responsive and easier to use

·        Shorten the learning curve for web page programmers and make it faster for experienced programmers to develop web pages

·        Make web page source code more readable and maintainable

·        Make it easier for Integrated Development Environments (IDEs) to provide context-sensitive editors and debuggers

·        Require less powerful hardware for web servers.

Overview of the Mocha language

In this section we’ll present a brief overview of the Mocha language syntax.


Getting started examples

Here are a few examples to get you acquainted with Mocha.

Direct Objects

A direct object is defined like this:


link (url="http://myserver/myapp/index.mocha",



“link” is a keyword that defines a hyperlink object (the “tag” name). “url” is a user-provided attribute that defines the target of the hyperlink. “linkText” is a user-provided attribute that defines the clickable text displayed in the browser.


Note: In this and the remainder of the examples, Mocha keywords and predefined attribute names are shown in light blue and the remainder of the code is shown in dark blue.


Another way to specify object attributes is to define them within the body of the object. As we’ll see later, this is useful when we conditionalize the value of these attributes using control statements like “if”.


declare link homePage () {





This link object is used in a “direct” manner, that is, it is used in the location where it appears in the Mocha script and cannot be reused anywhere else in the script.


“link” is a control object, that is, its use results in the creation of a control that is visible in the web page. Later on, we’ll introduce other types of Mocha objects.

Reusable Objects

To make this link reusable, we add a “declare” keyword and an object name. For this example, we name the link “homePage”.


declare link homePage (url="http://myserver/myapp/index.mocha",

linkText="Home") {}


To use this link in a page, we reference it as follows:


include homePage ();


To use this link in multiple web pages, we add it to a library and then include this library in any script needing the link. For our example we name the library “common” and place it in a file named “common.mocha”.


library common() {

declare link homePage (url="http://myserver/myapp/index.mocha",

linkText="Home") {}



The script that uses this link looks like this:


import “common.mocha”;

include common.homePage();


Notice that we don’t have to define the type of object where we include it, just where we define it.


If we want to control the formatting style of the link, we use the link’s “styleref” attribute:


declare link homePage (url="http://myserver/myapp/index.mocha",

linkText="Home" styleref=common.standardLink) {}


“standardLink” is the name of the style we have defined. Since styles are frequently reused, we’ve placed the style inside our common library file:


style link standardLink(linkColor=”IndianRed”, activeColor=”Red”, visitedColor=”Purple”) {}


All Mocha objects use the “styleref” attribute and have a Mocha style object specific to the object type. In this example, the “style” keyword is followed by the object type keyword “link”.

User-defined Attributes

If we want to vary the link depending on where it is used, we add one or more user-defined attributes and one or more control statements to body of the link. In this example, we add a user-defined attribute named “usage”. We also add a second link style named “bottomLink” to our common.mocha file.


declare link homePage (url="http://myserver/myapp/index.mocha", linkText="Home") {

attribute string usage;


if (usage = “topOfPage”)






This link is included like this:


include common.homePage(usage=”topOfPage”);


or like this:


include common.homePage(usage=”bottomOfPage”);

Other Mocha Control Objects

Mocha provides other control objects that roughly correspond to standard HTML objects. These objects are called “controls”. Controls include “text”, “textentry”, “button”, “image”, and “optionlist”,


Note: Mocha does not provide “form” objects, this feature is provided by Mocha event handler code, which covers the functionality of JavaScript code executing on an attribute like “onClick” or a Java servlet that handles a “POST” request.



A block in Mocha is a tag keyword followed by an optional set of attribute/value pairs, followed by an optional set of conditional statements. The attribute/value pairs are surrounded by parentheses. The statements are surrounded with braces. Variables can be declared and used in any Mocha block.


As shown in the examples above, blocks can be used to create either a direct object or a reusable object.


When a reusable block is included in a script, a block reference is used. A block reference is always preceded by the “include” keyword. It contains a set of attribute/name pairs, but does not contain a body.


You’ve already been introduced to one type of Mocha block, the control object. The complete list of Mocha block types follows:

·        Control – an object that is visible on a web page

·        Container – an object that contains other blocks or containers

·        Event Handler – an object that handles user events

·        Data – an object that stores application data



A Mocha container is a block that can enclose or contain other Mocha blocks. The supported container types are:

·        page – defines a web page

·        tile – defines a rectangle within a page

·        library – holds reusable blocks that will be shared by multiple Mocha scripts


A tile is a container that holds other blocks, normally controls or other tiles. A tile defines a rectangle on the web page. It can have a vertical or horizontal orientation, or can allow controls to wrap based on the page width. The following examples declares a tile named “userMenu”. We’ve declared it instead of using it directly so we can include it in other tiles.


declare tile userMenu (orientation=”vertical”,

backgroundImage=”bgBlue.gif”) {

    button(image=”images/home.gif”, action=gotoHome);

    button(image=”images/logout.gif”, action=gotoLogout);



In this example we’ve introduced a new type of control object, a button. For buttons, the “image” attribute determines the image that is used to display the button. A button can also be displayed with user-provided text using the “buttonText” attribute. The “action” attribute declares the name of the event handler that is called when the button is clicked by the user.


A page is a super set of a tile. It is the base “tile” for the web page, and can do everything that a tile does. A page includes a few extra attributes like “title”, and “resizable”.


page home(resizable=true, title=”Home page”, orientation=”vertical”)


    session boolean loggedIn = false;


    // The header







    // Reference the reusable title “body”

    include body(showRightMenu=loggedIn);


    // The footer






    declare tile body()

        attribute boolean showRightMenu;




        if (showRightMenu)




    declare tile leftMenu()





    declare tile content()





    declare tile rightMenu()






A library is a set of reusable objects, which will be discussed shortly.

Event handlers

An event handler is a block of executable code that can modify other Mocha objects or call server-side Java classes. It is called based on a user action. It can also be called the first time a page is referenced within the application, the first time it is referenced within a session, when page generation starts, or when page generation ends.


Data blocks contain “format-free” data that are parsed by event handlers. They can be initialized with static data, XML data, or SQL data. Event handlers can modify the data in a data block. Controls can reference the data, which includes the ability to sort the data for display, parse the data, and execute conditional code based on the values of the data.

Reusable objects

Reusable objects are created by including them in a library or by declaring them with the keyword “declare” within any other container type. Reusable objects must be named. In order to appear on a web page, they must be referenced within a tile or page. Reusable objects set attributes that correspond to their object type (for example, a tile or text control). They also include a code block that can define custom attributes.


All blocks can define variables. Variables can have one of four domains: block, page, session, and application. “block” domain variables are valid only for one call to the block (a “stack” variable). “page” domain variables are valid during the generation of the current page. “session” domain variables are valid for the duration of the current user’s session. “application” domain variables are valid for multiple calls to the block (a “static” variable).  “application” domain variables may be declared “constant”.


By default, a variable has “private” scope, it can only be referenced within block in which it is defined (including any sub-blocks). “session”, “page”, and “application” variables can be made “public” using the “attribute” keyword, which allows them to be referenced by code outside the defining block. Attributes are set when a block is referenced, and can be mandatory, or optional with a default. For example, a variable defined within a reusable object is defined as follows:


reusable text myheader(font=”arial”, size=”14px”, type=”bold”)


    attribute optional boolean brackets default false;


    if (brackets)

        msg = “<< “ + msg + “>>”;



An example reference of this object is:


myheader(brackets=true, color=”red”, msg=”Mocha variable types”);


“brackets” is a user-defined attribute. Because the object is a text object (a control), the reference can set any of its text attributes, for example “color” and “msg”. “color” is an optional attribute defaulting to “black”. “msg” is a required attribute with no default.


Note that the code within the block can set attributes of the parent object by simply assigning a value (msg = “<< “ + msg + “>>”).


Under construction…