Simulation Development

Expressions

Expressions provide a way to execute JavaScript. With expressions you can call slide functions, update properties, call global methods, etc. They can be used in actions and widgets. You declare an expression using <% %> tags. If you would like to output the results of your expression, use <%= %>.

Expressions require something that can parse the expression, which is why it needs to be located in a widget such as h:label or an action such as h:eval.

There are so many ways to use expressions. Lets take a look at few.

Math Operations

All math operations supported by JavaScript can be performed.

<h:label>1 + 2 + 3 = <%= 1 + 2 + 3 %></h:label>
=> 1 + 2 + 3 = 6

Calling Global Methods

Global functions and Custom functions and properties defined on the global namespace are accessible through expressions. If you have loaded a library such as Underscore.js, you can invoke these methods.

Accessing browser's location property
<h:label class="label">Host: <%= location.host %></h:label>
=> certiportdev.com:5500
Accessing browser's Date object
<h:label class="label"><%= new Date().getFullYear() %></h:label>
=> 2016
Accessing Underscore.js library
<h:label class="label"><%= _.last([5, 4, 3, 2, 1]); %></h:label>
=> 1

Accessing Slide Properties and Functions

Slide properties can be accessed via expressions. The this pointer references the slide directly. Properties and functions available on slide are accessible.

This example uses following set of properties and functions.

<h:virtual>
    <h:properties>
        <name>John</name>
    </h:properties>

    <h:function name="updateName" args="name">
        <h:set property="name">{{name}}</h:set>
    </h:function>

    <h:function name="speak" args="person">
        <h:alert><%= "{{person}} says: 'Hello, " +  this.val('name') + "'" %></h:alert>
    </h:function>
</h:virtual>
Accessing Slide Property
<h:label class="label">My name is lt;%= this.val('name') %></h:label>
=> My name is John
Accessing Slide Function
<h:button label="Click Me">
    <h:event click="speak('Bobby')" />
</h:button>
[Alert Box] Bobby says: 'Hello, Jane'