feat(xml): add the basics of declarative XML support

examples/others/lv_example_others.h

@@ -23,6 +23,7 @@ extern "C" {
 #include "observer/lv_example_observer.h"
 #include "snapshot/lv_example_snapshot.h"
 #include "gestures/lv_example_gestures.h"
+#include "xml/lv_example_xml.h"
 
 /*********************
  *      DEFINES

examples/others/xml/index.rst

@@ -0,0 +1,5 @@
+Load components at runtime
+--------------------------
+
+.. lv_example:: others/xml/lv_example_snapshot_1
+  :language: c

examples/others/xml/lv_example_xml.h

@@ -0,0 +1,38 @@
+/**
+ * @file lv_example_xml.h
+ *
+ */
+
+#ifndef LV_EXAMPLE_XML_H
+#define LV_EXAMPLE_XML_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+/*********************
+ *      INCLUDES
+ *********************/
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/**********************
+ * GLOBAL PROTOTYPES
+ **********************/
+void lv_example_xml_1(void);
+
+/**********************
+ *      MACROS
+ **********************/
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif /*LV_EXAMPLE_XML_H*/

examples/others/xml/lv_example_xml_1.c

@@ -0,0 +1,37 @@
+#include "../../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_XML
+
+void lv_example_xml_1(void)
+{
+    lv_xml_component_register_from_file("A:lvgl/examples/others/xml/my_h3.xml");
+    lv_xml_component_register_from_file("A:lvgl/examples/others/xml/my_card.xml");
+    lv_xml_component_register_from_file("A:lvgl/examples/others/xml/my_button.xml");
+    lv_xml_component_register_from_file("A:lvgl/examples/others/xml/view.xml");
+
+    lv_obj_t * obj = lv_xml_create(lv_screen_active(), "view", NULL);
+    lv_obj_set_pos(obj, 10, 10);
+
+    const char * my_button_attrs[] = {
+        "x", "10",
+        "y", "-10",
+        "align", "bottom_left",
+        "btn_text", "New button",
+        NULL, NULL,
+    };
+
+    lv_xml_component_unregister("my_button");
+
+    lv_xml_create(lv_screen_active(), "my_button", my_button_attrs);
+
+    const char * slider_attrs[] = {
+        "x", "200",
+        "y", "-15",
+        "align", "bottom_left",
+        "value", "30",
+        NULL, NULL,
+    };
+
+    lv_obj_t * slider = lv_xml_create(lv_screen_active(), "lv_slider", slider_attrs);
+    lv_obj_set_width(slider, 100);
+}
+#endif

examples/others/xml/my_button.xml

@@ -0,0 +1,15 @@
+<component>
+	<consts>
+		<px name="size" value="100"/>
+		<color name="orange" value="0xffa020"/>
+	</consts>
+
+	<api>
+		<prop name="btn_text" type="string"/>
+	</api>
+
+	<view extends="lv_button" width="#size">
+		<my_h3 text="$btn_text" align="center" color="#orange"/>
+	</view>
+</component>
+

examples/others/xml/my_card.xml

@@ -0,0 +1,23 @@
+<component>
+	<consts>
+		<px name="size" value="100%"/>
+	</consts>
+
+	<api>
+		<prop name="title" type="string" default="No title"/>
+		<prop name="action" type="string" default="No action"/>
+		<prop name="bg_color" type="color" default="0xcccccc"/>
+		<prop name="btn_rel_style" type="style" />
+		<prop name="btn_pr_style" type="style" />
+	</api>
+
+	<styles>
+		<style name="gray" bg_color="0x888888"/>
+		<style name="blue" bg_color="0x0000ff"/>
+	</styles>
+
+	<view extends="lv_obj" style_radius="3" width="#size" height="content" style_bg_color="$bg_color" >
+		<lv_label text="$title" align="left_mid"/>
+		<my_button styles="$btn_rel_style $btn_pr_style:pressed" btn_text="$action" align="right_mid"/>
+	</view>
+</component>

examples/others/xml/my_h3.xml

@@ -0,0 +1,12 @@
+<component>
+	<api>
+		<prop name="color" type="color" default="0x000000"/>
+		<prop name="style"  type="style"/>
+	</api>
+
+	<view extends="lv_label"
+		  style_text_color="$color"
+		  styles="$style"
+		  style_text_font="lv_montserrat_18">
+	</view>
+</component>

examples/others/xml/view.xml

@@ -0,0 +1,25 @@
+<component>
+	<consts>
+		<color name="light_blue" value="0xbbbbff"/>
+		<color name="dark_blue" value="0x000080"/>
+	</consts>
+
+	<styles>
+		<style name="btn_style" bg_color="#dark_blue" bg_opa="150"/>
+		<style name="btn_pr_style" bg_opa="255"/>
+	</styles>
+
+	<view extends="lv_obj" width="280" height="content" style_bg_color="#light_blue">
+		<lv_label text="Hello"/>
+		<my_card title="Card 1"
+				 y="0"
+				 btn_rel_style="btn_style"
+				 btn_pr_style="btn_pr_style"/>
+
+		<my_card y="85"
+				 bg_color="0xffaaaa"
+				 action="Apply"
+				 btn_rel_style="btn_style"
+				 btn_pr_style="btn_pr_style"/>
+	</view>
+</component>