Styles and Properties

Styles

In the context of LVGL Pro, Styles refer to LVGL Styles.

Styles are created by creating <style> XML elements within a <styles> list in the scope where they will be applied:

global scope:

is achieved by placing them in the globals.xml file.

local scope:

local to the Component, Screen, or Widget, is achieved by placing them in the XML definition of the respective Component, Screen or Widget.

Properties

In the context of LVGL Pro, Properties refer to a value "owned by" a Component or Widget that stores a value that is part of that Component's or Widget's state.

Properties are created in by including <prop> elements within an <api> element within the XML definition of that Component or Widget. In many cases you will want to make these properties an Observer of a Subject.

You can do so by including a bind_pppppp="property_name" attribute in the definition of the XML definition of the UI element involved, where pppppp is the name of the property. For example, since lv_slider Widget already has a property named "value", this could look like this:

Todo

confirm or adjust the above

<lv_slider bind_value="battery_value" min_value="0" max_value="100" align="left_mid" width="56" height="24">
    <!-- content here -->
</lv_slider>

Substitute custom property names accordingly.

See Binding to Data for details.