Actions

Appcelerator’s Web Expression Language (WEL) features many client-side actions that make it easier to build Rich Internet Applications (RIA). You can send messages, set the value of elements, bind a set of element values to the data returned by an Appcelerator service, affect layout, trigger effects like Fade and Appear, run javascript, and much more.

Message Action

An action can be an Appcelerator message. For Example:

on="click then r:message.request"

In the example above the message r:message.request will be sent when the element’s WEL expression condition, a click in this case, is triggered.

You can also set specific values in the data payload of the message.

on="[condition] then r:message.request[city=Atlanta]"

Then the message will be sent with city in its data payload. The value of city will be Atlanta.

Other examples of parameters include

on="[condition] then r:message.request[city=Atlanta,state=Georgia]"
on="[condition] then r:message.request[city=expr($('city_input').value)]"

Value Action

The value action sets the content of an element based on its type.

<div on="r:post.response then value[msg]"/>

Here, the content (or the innerHTML) of the div will be set to the value of msg from the payload of response.

The city action behaves differently depending on an element’s type.

Bind Action

The bind action sets the value of all elements with the same fieldset (read more about fieldsets).

You can do the following, which is a bit verbose:

<form>
<input fieldset="example" name="firstname" on="r:profile.response then value[person.firstname]"/>
<input fieldset="example" name="lastname" on="r:profile.response then value[person.lastname]"/>
<input fieldset="example" name="button" on="click then r:profile.save.request"/>
</form>

When r:profile.save.request is received, the input field values will be set from the data payload of the message.

At the end of the day, however, we like to save time by writing less code so we prefer the bind action:

<form fieldset="example" on="r:profile.response then bind[person]">
<input fieldset="example" name="firstname"/>
<input fieldset="example" name="lastname"/>
<input fieldset="example" name="button" on="click then r:profile.save.request"/>
</form>

This is useful when many elements have values that depend on the same message.

The bind action sets values just like the value action, so you can also use it for div elements, img elements, and so forth.

Set, Add, and Remove Actions

You can use the set action for setting CSS attributes, DOM attributes, or Javasript object attributes. For example

<img on="r:profile.response then set[src=image]"/>

The src attribute is set to the value of image in the payload of r:profile.response.

Other examples of the set action include:

<div on="r:items.response then set[border='1px solid #ccc']"/>
<select on="r:items.response then set[selectedIndex=0]"></select>

You can also use the add and remove actions to add or remove CSS classes or element attributes. For example:

<div on="r:items.response then add[class=selected]"/>

The class name selected is added to the div element.

<div on="r:items.response then remove[disabled]"/>

The disabled attribute is removed from the div element.

Layout Actions

Other Actions

Select Actions

<select on="l:items.response then value[property=rows,text=name,value=id]"></select>

{rows: [{name: Atlanta, id: 1},{name: New York, id: 2},{name: Los Angeles, id: 3}]}

<select on="l:select.request then selectOption[option]">
<option value="1">one</option>
<option value="2">two</option>
</select>

{option: 2}