Web Expression Language

Building user interfaces consists of two major activities:

• Visual Design
• Interaction Design

The Web Expression Language was developed in order to make these two key activities as simple as possible.

Visual Design

Visual design is how a page or an application looks. Visual design is accomplished using a combination of HTML, CSS and images. The Web Expression Language makes visual design easy for both graphic designers and application developers.

For graphic designers, it provides a simple framework for creating and managing visual themes. Visual themes are nothing more than CSS files that are specific to a particular visual component or layout.

For developers, it enables the creation of professional looking applications without having to be an expert designer.

Using the visual design capabilities of the Web Expression language is easy - you just use the set attribute.

Here’s an example of the syntax:

<div set="control[panel,theme=lightblue]"> 
	I am a panel
</div>

The example above, turns a standard DIV into a panel control using the “lightblue” theme. Here’s what it looks like:

The set attribute currently supports four major types:

The first argument of the type is the subtype, so in the example of above, the type is control and the subtype is panel. Each type/subtype may have one or more options which are declared via a comma-delimited list.

To view the detailed reference, see the Web Expressions (Visual) reference.

Interaction Design

Interaction design is how a page or application behaves when a user interacts with it. Interaction design is typically accomplished with Javascript. The Web Expression Language makes interaction design easy by removing the need for using Javascript - instead you can program simple English-like expressions that define how an HTML element or component behaves.

Using the interaction design capabilities of the Web Expression language is easy - you just use the on attribute.

Here’s the full syntax:

<div on="[condition] then [action]">
	I am a DIV
</div>

Conditions can be Appcelerator messages or a set of pre-defined conditions like:

• click
• focus
• blur
• change
• keyup

These are just a few of the pre-defined conditions - see our Conditions reference for a full list of conditions. Actions can also be Appcelerator messages or a set of pre-defined actions like:

• effect[effectName]
• value
• hide
• show
• toggle[display]

Once again, these are just a few of the pre-defined actions - see our Actions reference for a full list of actions.

Below is a live example. When you click the DIV that says “Click Me”, it will publish a message. The other three DIVs are listening for that message.

Here’s the code:

<span class="box" on="click then l:message" style="cursor:pointer">
	Click Me
</span>
<span class="box" on="l:message then set[color=red]">
	I will turn red
</span>
<span class="box" on="l:message then effect[Morph,style=padding:5px;border:1px solid #ff0000;background-color:#ffffcc]">
	My border and background will change
</span>
<span class="box" on="l:message then effect[Bounce,y=200]">
  	Going left by 200px
</span>