Web Expressions (Interaction)

Web Expressions (Interaction)

The Web Expression Language (WEL) supports two major activities associated with building web-based user interfaces:

  • Interaction Design
  • Visual Design

This section covers how to use the interaction design capabilities of the WEL.

Interaction design in web applications involves four things:

  • Handling events and messages
  • Producing events (or messages in our case)
  • DOM manipulation
  • Interacting with remote services

The WEL for interaction design seamlessly integrates all four into one simple expression language.

Usage

There are two ways to add the WEL for interaction design to your application:

  • Add an “on” attribute to any standard HTML element
  • Use Javascript to unobtrusively add expressions to HTML elements

The syntax for the first method is simple:

on="[condition] then [action]"

Conditions allow you to define the event or message you want to handle. When a condition is met, one or more actions will be executed. In Appcelerator, conditions are either the receipt of an Appcelerator message (with optional tests for data in the message payload) or a pre-defined Appcelerator condition (e.g., click).

Actions define what happens when a condition is met. Actions allow you to produce events and messages, manipulate the DOM and interact with remote services. Actions can either be Appcelerator messages or a pre-defined Appcelerator action.

The syntax for the Javascript approach is simple as well:

<script>
	$(id_of_element).on('[condition] then [action]');
</script>

Examples

Type a value in the field and it will be echoed. The first example uses “on” attributes. The second uses Javascript.

you typed:
you typed:

Code

Here’s the code for the examples above:

<!-- using "on" expression -->
<input type="text" on="change then l:value.changed[val=$my_input]" id="my_input"/>
<span style="font-size:11px;padding-left:10px">you typed: 
	<span class="codeword" on="l:value.changed then value[val]"></span>
</span>

<!-- using Javascript -->
<input type="text" id="my_input_2"/>
<span style="font-size:11px;padding-left:10px">you typed: 
	<span class="codeword" id="echo_field"></span>
</span>

$('my_input_2').on('change then l:value.changed_2[val=$my_input_2]');
$('replay_field').on('l:value.changed_2 then value[val]');