Scroll Bar

SmartUI Scroll-Bar Behavior operation and ACEs.

Scrollbars are a convenient component for managing user input of values within a fixed range. These values can be either negative or positive; the component is flexible enough to handle the value range where it operates. Scrollbars can also function as sliders, depending on the components you add when composing it.

This is a composite and complex object, as it combines several SmartUI components to provide its functionality. It directly inherits its main features from a Container.

A scroll-bar is composed of four parts:

1. The scroll-bar itself, which acts as a container for the other objects and provides the ACEs to operate it.

2. A slider, an object using the Button Behavior that must be a child of the scrollbar.

3. Two scroll buttons, also using the Button Behavior, which increase or decrease the value of the bar by the assigned step size.

Structure of a scroll-bar component

The scrollbar's origin must always be on the left side. The slider's position is adjusted from the origin, considering the scrollbar's angle, so you can rotate the bar at any angle to fit your design.

In the image above, we have a bar at the center that uses the Scrollbar behavior, a slider button (red square) that uses the Button behavior, and two scroll buttons to increase or decrease the value within the range, also using the Button behavior. All of these must be children of the scrollbar container.

The scroll buttons can be placed anywhere in the layout to fit your needs, as long as they are children of the scrollbar component.

To compose the scrollbar in the properties, use the component's name property. Under the scrollbar object hierarchy, there must be only one component that matches the name assigned to its functions.

The names of the child components must exactly match the ones assigned to compose the scrollbar.

Scroll buttons will always change the value by the number set in the Step Size field, regardless of whether the bar operates with floating values or integer values.

Please be aware that all the children of the component must have change propagation enabled for all attributes: visible, opacity, x, y, width, height, etc. Otherwise, you will need to manually control the children's attributes.

Properties transformation should be enabled to render children correctly.

Basic Setup - Tutorial Video

Properties

Property	Description
Enabled	Enables or Disables the Scroll Bar. Value can still be set and it will change the Scroll Bar, but animations won't be triggered. You can use the IsEnabled condition to affect the look and feel when needed.
Focusable	Marks if the component can have the focus.
Index	Index of the element within a container. Used for focusing the elements in the sequence order.
Invisible Component	Turns the component opacity to 0 while rendering it to allow invisible interactions.
Automatic-Color	Enables the component to darken a bit when its state is Disabled or when it's focused. Auto-Color is meant to provide a quick identification of the component state. For more specialized customizations, use the component events and disable this check.
Name	Unique name string for identifying the Scroll Bar
Step Size	Fixed value increment for stepping-mode sliders.
Value	Numeric value representing the current progress.
Min.Value	Minimum value.
Max.Value	Maximum value
Result Mode	Discrete mode handles floating values with discrete selection. Step mode handles integer values with precise location for the slider button.
Inc.Button	Increment button name
Dec.Button	Decrement button name
Slider Button	Slider button name

Smart UI Scroll Bar

Smart UI Scroll Bar behavior handles Scroll Bar UI components. Handles value ranges within a limit.

Actions

---

Set Enabled

Disable/Enable the scroll bar

Parameter	Description
Enabled	Enabled/Disabled

Set Name

Sets the name of the component.

Parameter	Description
Name	Name of the component

Set Focusable

Sets the component to be able to receive the focus

Parameter	Description
Focusable	Flag to allow the component to be focused.

Set Focus

Sets the focus on the component, removing the focus from all the components within the same container.

Set Value

Sets the current value of the Scroll Bar. If the value is below 0 or above the maximum, it will be clamped.

Parameter	Description
Value	Numeric value representing the current progress

Set Max

Sets the maximum value of the Scroll Bar.

Parameter	Description
Value	Maximum value.

Set Min

Sets the minimum value of the Scroll Bar.

Parameter	Description
Value	Minimum value.

Conditions

---

Is Enabled

Returns true if the Scroll Bar is enabled

Compare Value

Compares the value of the Scroll Bar.

Parameter	Description
Comparison	How to compare the variable
Value	Value to compare the variable

Compare Name

Returns true if the Scroll Bar components name equals the parameter

Parameter	Description
Name	Name to compare with the component picked.

undefined

undefined

Is Focused

Returns true if the scroll bar has the focus

On Value Change

Triggered when the Scroll Bar value changes. When dragging the slider, value will be set only when it's released.

Is Dragging

True when the slider scroll bar is being dragged to set a value. Use DragValue expression to retrieve the value.

On Focus

Triggered when the scroll bar gets the focus

On Focus Lost

Triggered when the scroll bar loses focus

Expressions

---

Value

Scroll Bar current value.

DragValue

Scroll Bar value while being dragged. Value becomes final after the user releases the slider. Always use Value expression to retrieve the correct value.

Progress

Scroll Bar progress value in percentage.

Min

Scroll Bar Minimum value.

Max

Scroll Bar Maximum value.

AnimatedValue

Current animated value. This value is set only when the animation is running. E.G. If you are changing the value from 0 to 10, it will contain all the step values to reach the 10, as if it was counting.

AnimatedProgress

Percentage representing the AnimatedValue from the Max value allowed to be set for the Scroll Bar. This value is set only when the animation is running

Name

Component name

(c) Pixel Perfect Studio 2024