📘 Interactivity Introduction

🏘️ NoesisGUI ▸ 🏠 Noesis Studio ▸ 📘 Working With Interactivity ▸ 📘 Interactivity Introduction

Overview

Noesis Studio comes equipped with a complete Interactivity toolset designed to empower creators to build rich, dynamic, and fully-interactive user interfaces, all directly within the application.

These built-in features allow the creation of powerful systems in which an interface is able to dynamically adjust based on user input, Data, Property values, or a range of other Events that can be easily harnessed to adjust the appearance, or functions, of a user interface.

Interactivity Mechanisms

Noesis Studio offers multiple methods to inject a dynamic, interactive layer into an interface, each offering advantages and considerations within the scope in which they can be employed:

📘 Visual States Used within Pages or Element Templates.	• Allows for a Page, or an Element Template to have distinct visual states designed for it. • The appearance of Visual Sates are configured by adjusting the Properties of applicable Elements. • Many Element Templates come pre-packaged with the most common Visual States for each particular Element type, and the functionality for them to automatically activate. • Each Visual State includes its own 📘 Animation Timeline, in which motion can be played once (or infinitely), for as long as the State is active. • Visual States support automatic or custom transitions between eachother, provided each is in the same Visual State Group.
📘 Triggers Applied directly to an individual Element.	• Allows for one or many changes to take effect, when a set of conditions are met. • The conditions for a Trigger to fire include user input, listened-to Data or Property Values, or specific Event types.
📘 Behaviors Applied directly to an individual Element.	• Allows for the extension of base Element functionality with powerful extra features, providing new forms of interactivity and presentation to an interface.
📘 Setters Used within Element Templates or Element Styles.	• Allows for actions to be fired when one or multiple conditions are met. • The visual result produced by each Setter is configured by adjusting the Properties of applicable Elements. • Certain Element Styles and Templates include pre-made Setters, that out-of-the-box, adjust the appearance of an Element during various relevant interaction states. • When one Style is `BasedOn` another Style containing Setters, these Setters and their Property values can be either directly inherited, or non-destructively modified.
📘 Directional Navigation Used to configure, and preview directional navigation relationships between various Elements within an interface.	• Allows for cardinal navigation between designated UI Elements. • Directional Navigation Preview Mode can be used to visually expose, for any applicable Element, where within the UI focus will move to, if the direction is moved in the North, East, South, or West direction.
📘 Drag-and-Drop Used to configure drag-and-drop mechanics of designated Data Template Elements.	• Allows for end-users, to move the Content of a Data Template item from one location within a designated screen space to another. • Specific rules can be configured on a per-item basis to dictate where each is allowed to be moved within an interface. • Includes the ability to set the result of a drag-and-drop operation. This includes whether any given item should move, or copy to its destination. Additionally, if the destination is another item, the items can be set to automatically swap positions.

Visual States and Setters Compared

Feature Comparison

When configuring Element Template interactivity, there exist signficant areas of overlap between the interaction features offered by 📘 Visual States and 📘 Setters. They do however present a number of differences that may influence choosing one over another:

	📘 Visual States	📘 Setters
Boilerplate Interactions	• Includes functional, pre-built Visual States. These can be ignored, but cannot be removed.	• Includes pre-built Setters that can be completely customized, replaced, or removed.
Animation	• Full 📘 Animation Timeline provided for the currently-active Visual State, allowing an animation to play once when the Visual State is engaged, or to infinitely loop for as long as the Visual State is engaged. • Transitions between each and every Visual State within a Visual State Group can either be completely customized, or automatically interpolated.	• Setters alone don't include built-in animation features. Any Setter-driven changes to Property values are instant.
Activation	• The display of any custom Visual States requires 📘 Triggers to display them via an accompanying `GoToStateAction` Action, which can be set to fire one a chosen Event has taken place.	• The mechanisms through which a custom Setter fires, is configured as a core part of the Setter itself. • Setters can be made up of multiple Conditions, which when met, can produce changes to applicable Element Properties.

Selection Guide

Picking between whether to use 📘 Visual States or 📘 Setters will often be a matter of preference on a case-by-case basis, however, the following applies as general recommendations based on desired outcomes:

• For Page-based interactivity states...	👉 📘 Visual States
• For Style-based interactivity states...	👉 📘 Setters
• For non-destructive, cascading inheritance of Interaction Properties between Styles...	👉 📘 Setters
• For custom animations between Visual States... • For automatic cross-interpolation between Visual States... • For infinitely-repeating animations within Visual States...	👉 📘 Visual States
• For activation as a result of multiple concurrent conditions (eg: a 📘 CheckBox being both 'Checked' and having a 'MouseOver')...	👉 📘 Setters

Working With Interactivity

📍 On this page

Overview
Interactivity Mechanisms
Visual States and Setters Compared
- Feature Comparison
- Selection Guide
Working With Interactivity