Add an event type prop

[dl-davi]

I think it would be useful to implement an event type prop. When creating components (usually buttons), there are situations where different events should be triggered depending on how the component is used. Currently, this is not possible.

The workaround I am using is defining a prop with the image type. Since image props are generated as void*, I can later pass an event callback instead of an image pointer.

It would be cleaner and safer if the framework supported a dedicated event prop type that could be used to attach event handlers directly to components.

[richardgazdik]

Thanks for the feedback. cc @kisvegabor for visibility as it's tightly related to the LVGL XML schema and typing.

[kisvegabor]

Hi guys,

I see no issue with adding type="event_cb" to props. @richardgazdik @mrhubbs can you add it to validation and code export? It's the same type that we use in <event_cb callback="my_cb"/>

Another useful type would type="screen" . We also use it already in <screen_load_event> and <screen_create_event>

[julian-0]

Hi, has there been any progress on this?

It would be really helpful to be able to pass callbacks as props in components.

In my case, I have a component consisting of a label and an lv_switch. I'd like to reuse this component across multiple screens and sections, allowing each one to execute different actions. I'm not sure if my approach is correct or if there's another way to achieve this. Also saw this similar issue #251

I tried the workaround mentioned here but I'm getting an error

labeled_switch.xml

<component>
	<previews>
		<preview width="220" height="30" style_bg_color="0x111111" />
	</previews>

	<api>
		<prop name="label_text"       type="string" default="Enabled" help="Setting label" />
		<prop name="checked"          type="bool"   default="false"   help="Switch initial state" />
		<prop name="on_value_changed" type="image"  default=""        help="value_changed callback" />
	</api>

	<styles>
		
	</styles>

	<view
		scrollable="false"
		extends="container"
		width="100%"
		height="content"
		flex_flow="row"
		style_flex_main_place="space_between"
		style_flex_cross_place="center"
	>
		<lv_label name="switchSettingLabel" text="$label_text" />

		<lv_switch name="switchSelector" width="35" height="15" checked="$checked">
			<event_cb trigger="value_changed" callback="$on_value_changed" />
		</lv_switch>
	</view>
</component>

test_screen.xml

<screen>
	<view extends="lv_obj">
		<switchSetting name="switch_test" align="bottom_mid" on_value_changed="test_switch_value_changed" />
	</view>
</screen>

I get this error when building

/lved/project/screens/test_screen/test_screen_gen.c:53:79: error: use of undeclared identifier 'test_switch_value_changed'
   53 |     lv_obj_t * switch_test = labeled_switch_create(lv_obj_0, "Enabled", false, test_switch_value_changed);
      |                                                                               ^
1 error generated.

[github-actions]

This issue has been inactive for 30 days.