Conditions

In Entourage Expressions, a condition is the prerequisite event for executing an action of some kind. A condition can be a normal DOM event like a mouse click, or a message from the message queue. This reference contains all of the conditions available for use in Entourage Expressions.

DOM conditions include standard user interaction like mouse clicks, hovers, field focus, and the like. A list of the available conditions and live examples are found below, with a simple example using DOM conditions following afterward:

DOM Conditions: Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:10px;
  }
  .eventbox {
    padding:10px;
    border:1px dashed;
  }
</style>
<div class="live">
  <h4>Use the following input elements to trigger DOM events:</h4>
  <div class="eventbox" on="l:dom then effect[highlight]">
    Received Event: <span on="l:dom then value[event]">[None so far...]</span>
  </div>
  <input type="button" value="click" on="click then l:dom[event=click]"/>
  <input type="button" value="dblclick" on="dblclick then l:dom[event=dblclick]"/>
  <input type="button" value="mousedown" on="mousedown then l:dom[event=mousedown]"/>
  <input type="button" value="mouseup" on="mouseup then l:dom[event=mouseup]"/>
  <input type="button" value="mouseover" on="mouseover then l:dom[event=mouseover]"/>
  <input type="button" value="mouseout" on="mouseout then l:dom[event=mouseout]"/>
  <input type="text" value="focus..." on="focus then l:dom[event=focus]"/>
  <input type="text" value="blur..." on="blur then l:dom[event=blur]"/>
  <input type="text" value="change..." on="change then l:dom[event=change]"/>
  <input type="text" value="contextmenu..." on="contextmenu then l:dom[event=contextmenu]"/>
  <input type="text" value="mousemove..." on="mousemove then l:dom[event=mousemove]"/>
  <input type="text" value="mousewheel..." on="mousewheel then l:dom[event=mousewheel]"/>
</div>

Key conditions are triggered when a specific key (or combination of keys) are pressed by the user. The syntax for using key conditions and a live example is shown below:

Many references on key codes are available on the web, including this one from the Mozilla Developer Center.

Key Conditions: Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:10px;
  }
</style>
<div class="live">
  <h4>Use the following input elements to trigger key events:</h4>
  <input type="text" value="I don't like 'enter'" 
    on="keypress[enter] then script[alert('Hey, stop that!')]"/>
  <br/>
  <input type="text" value="I don't like ';' (semicolon)" 
    on="keypress[59] then script[alert('Hey, stop that!')]"/>
  <br/>
</div>

Message conditions allow your client side code to respond to custom events and messages, optionally using data from message payloads to qualify whether or not your condition is met. Messages used in Entourage Expressions must be prefixed with either a l: (which indicates a client-side only or 'local' message), or r: (which will be dispatched to the service broker listener). You can also use regular-expression style syntax to listen for messages that match a certain pattern.

The simplest means of using message conditions in an expression is simply subscribing to a given message and taking an action when that message is received, as in the following example

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin-bottom:10px;
  }
</style>
<div class="live">
  <input type="button" value="Send Message" on="click then l:local.message"/>
  <div on="l:local.message then value[Message Received!]">Waiting...</div>
</div>

You can use the payload of a message to qualify a message condition. There are several ways of doing this, all of which are specified in square brackets after the message name:

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .box {
    padding:5px;
    margin:5px;
    border:1px dashed;
  }
</style>
<div class="live">
  <input type="button" value="Send Message" on="click then l:payload.conditions[foo=bar,snoop=dogg]"/>
  <div class="box" on="l:payload.conditions[foo=bar] then value[Message Received!]">
    Waiting...
  </div>
  <div class="box" on="l:payload.conditions[foo=foobar] then value[Message Received!]">
    I should not change, since I want foo to equal "foobar".
  </div>
</div>

You can also use a ~ character after the colon in a message name to use a regular expression to subscribe to messages with names that match the given pattern. An example of using regular expressions in message conditions is used below:

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .box {
    padding:5px;
    margin:5px;
    border:1px dashed;
  }
</style>
<div class="live">
  <input type="button" value="Send Matching Message" on="click then l:wildcard.foo"/>
  <input type="button" value="Send Matching Message" on="click then l:wildcard.bar"/>
  <input type="button" value="Send Non-Matching Message" on="click then l:MILDcard.foo"/>
  <div class="box" on="l:~wildcard.* then effect[highlight]">
    I'll highlight when I get the right kind of message!
  </div>
</div>

The history condition happens when there is a browser history event, triggered by an anchor (#) in the URL. This can be used to help support bookmarking capabilities within an RIA.

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .box {
    padding:5px;
    margin:5px;
    border:1px dashed;
  }
</style>
<div class="live">
  <a href="#foo">Click Me</a>
  <div class="box" style="display:none" on="history:foo then show">
    It worked!  I'm here because the current anchor is #foo.
  </div>
</div>

There are other conditions built in to Entourage Expressions based on various types of user interaction supported by Entourage UI or by the platform on which the client application is running (like an iPhone). Those conditions are listed below: