Entourage Expressions

Entourage Expressions provide web developers with a domain specific language (DSL) for browser-based rich web applications. Expressions provide a natural language syntax for common RIA programming tasks, such as:

• DOM Manipulation
• Event handling
• Server-side data access (powered by Entourage MQ)

Entourage Expressions are composed of two parts, a condition and an action:

  on="[condition] then [action]"

An action is any sort of action that can be taken on or by a given element, such as adding a CSS class, executing a visual effect, or changing the contents of an element. A condition is a trigger for that action, and can be anything from a mouse click to the results of a remote service call. Expressions can contain multiple conditions, and multiple actions can be taken when a condition is met.

The following is a simple example of a web expression in action. In this example, the expression is declared inline with markup:

Live Example

Click To Highlight Me

Source Code

<p style="border:1px dashed;padding:5px;" 
  on="click then effect[highlight]">
  Click To Highlight Me
</p>

There are a number of different conditions and actions available in Expressions. Read through our condition and action references for more details and usage instructions.

There are three ways to declare web expressions - inline in HTML, using the App.on function, and the jQuery plugin function $().on. Examples of using each can be found below:

Live Example

Source Code

<style>
.box {
  border:1px dashed;
  margin:5px;
  padding:5px;
}
</style>
 
<input type="button" on="click then l:click" value="Click Me To Trigger Highlights"></input>
<div class="box" id="box1" on="l:click then effect[highlight]">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
 
<script>
swiss.onload(function() {
  App.on("box2","l:click then effect[highlight]");
  $("#box3").on("l:click then effect[highlight]");
});
</script>

In the preceding example, a message action was executed when the button is clicked. The three boxes subscribe to the message l:click, and when it is received, they execute a highlight effect on themselves. This example is just a tiny fraction of the syntactical elements available to you in Entourage Expressions - make sure to check out the reference pages for conditions, actions, and the JavaScript API to sample the full power of Entourage Expressions.

In web expressions, there are certain keywords that can be used to modify conditions and actions, like or, and, and else - refer to the action and condition documentation for examples and further explanation. Also, some conditions and actions take parameters, and parameters are usually passed in the format <condition>[<parameter>=<value>] then <action>[<parameter>=<value>]

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:5px;
  }
  .box {
    border:1px dashed;
    margin:5px;
  }
</style>
 
<div class="live">
  <input type="button" value="Toggle" on="click then effect[toggle,id=toggle_div,speed=1500]">
  <div id="toggle_div" class="box" on="click then effect[explode,speed=5000]">
    I get toggled by the button!  You can also click me to make me EXPLODE!!!!
  </div>
</div>