Application Logic Example - Demo

To manage application logic, we can use small, declarative expressions written in JavaScript that describe the behavior of elements on a web page. These expressions are called web equations. In the following examples, we want to focus on how to use web equations to respond to user input. The idea is to give the user immediate feedback on how he is using the web page, for example to help the user or to show errors.

Updating the Screen: Showing User Input

Consider a small input element. When the user inputs text, another element of the webpage immediately reflect this text too. To express this behavior, we can use the following expression:

input.text().equals(caption.text());

Try it

Updating the Screen: Showing Computed Text Properties

The user is inserting a text into a textfield. We need to check that the text does not exceed a certain length: for example, 160 characters when writing a SMS. We want to give the user immediate feedback how much characters he still has left for his message. This is achieved with the following expressions:

//display the length of an SMS whenever the SMS changes
smslength.text().assign(len(sms.text()))

Try it

Navigation

The final example is more complex than the previous ones. We want to help the user in navigating through a list of questions. For each of the questions that appears, we automatically create a hint link that opens a google query to this question.

First, we create the questions with these expressions:

questions.add("Capital of Belgium");
questions.add("Governments in Belgium");

We show each question in the textfield once the Next button has been pressed.

caption.text().assign(questions.current())

Finally we render the Hint link to Google with this expression:

hint.href().assign(makelink(questions.current()));

Try it