Tutorial – Basic User Interaction

Contents

---

What is User Interaction

User action is, simply put, a way for your user to make your program do what they want. The most common example of this is running code when a Button is clicked.

Note

This tutorial will explain in greater detail how to code the most basic user interaction and will not go in to great detail about how it works or more advanced uses. Most of this topic is covered in the InterfaceOutlets section on the Interfaces page.

Prerequisites

Before you begin you should have read and completed the Getting Started page.

Creating a Clickable Button

Buttons are the most common way for your user to interact with your Application.

1. Create an Application and Button

---

Create a blank new Application with a single Button in it. Run the Application and ensure that it opens without any errors.

If I were you, I would not copy/use the Application you made in Getting Started, try and do it from memory; that's how you learn and remember things. If you forget something or something isn't working though read over the guide to see what you did wrong.

2. Set the Button's Identifier

---

For a far greater explanation of what identifiers are, how to use them and how they work read the InterfaceOutlets section on the Interfaces page.

To use this method of running code when the user interacts with your interface you need to set identifier property for the Button (or other View subclass) in your interface.

<Button identifier="okayButton" x=10 y=10 text="Okay"/>

What is an Identifier?

An identifier is a string that allows you to easily find your view. It's essentially like giving a name to your Button.

Detecting Button clicks is only one of the things that identifiers can be used for, for information about the other uses see the InterfaceOutlets section on the Interfaces page.

3. Link the Button

---

If you haven't already, create an ApplicationContainer subclass as in Tutorial – Interfaces.

You can link your Button to your ApplicationContainer subclass as so.

class MyApplicationContainer extends ApplicationContainer {

	okayButton = Button.link;

}

Whenever your access the ApplicationContainer subclass' okayButton property it will now return the your Button. This can be used for any View in your interface, replacing Button with the class name in the link obviously.

4. Creating the Click Function

---

With your Button linked you can now create a function which will be called whenever it is clicked.

function FilesApplicationContainer.okayButton:action( ActionInterfaceEvent event )
	event.view.text = "Clicked!"
end

Note

The declaration syntax for an action function is identical to getters and setters, except action is used rather than get or set.

All actions function will receive an ActionInterfaceEvent as their only argument. This Event subclass allows you to access the View that was clicked/sent the action as well as the original event the provoked the action (if applicable).

Other View subclasses can also be used with action functions, however, they call the action at different times (such as when the text changes). Each subclass' documentation page will describe its action if it has one.

Next Steps

Tutorial – InterfaceOutlet explains this topic in greater detail and is recommended reading; it isn't essential, however.