KUIML_WIDGET
Widget that can dynamically load KUIML code ("sub-skin") via a file or string. It can be used to load different content depending on the context, or load parts of a skin dynamically, only when required.
Attributes brief detailed show all inherited
Notes on using "sub-skins"
- Every subskin (KUIML_WIDGET contents) has its own scripting space. So if you have a function or an object/variable in the script of the main SKIN, it won't be available in the subskin. It also means that scripts in skin and subskin cannot communicate directly through script variables, only through the main skin's params and strings (exposed to both skin and sub-skin scripts).
- Subskin can import DEFINES, TEMPLATES, and VARIABLES that were defined in the parent skin before the KUIML_WIDGET element (by default it imports all of them, but you can disable importing of any type to speed up loading). VARIABLES set inside the main SKIN are accessible inside the subskin, though only those that were defined before that KUIML_WIDGET. Also if you change these VARIABLES inside "sub-skin" they won't update in the main SKIN (because the main skin is loaded and parsed before subskins).
- Subskins can communicate with the parent skin via params and strings defined in the main skin. Usually, these params should be explicitly mentioned in EXPOSED_OBJECTS (to be used in scripts) and REQUIRED_OBJECTS (to be not stripped and available inside the subskin).
Examples
A simplest example can look like this:
- <TEXT value="I'm in a parent skin!" />
- <!-- load "sub-skin" contents from file -->
- <KUIML_WIDGET src="$SCRIPT_DATA_PATH$/demo.kuiml" />
Contents of the demo.kuiml:
Result:

Lazy loading
We could delay loading sub-skin contents if we set load_enabled to false. This way we can speed up loading of the main skin. We also disable importing variables, defines and templates from the main skin (because we don't use them), that will also speed up loading process.
- <!-- lazy load "sub-skin" contents from file -->
- <KUIML_WIDGET id="demo_kuiml_widget" src="$SCRIPT_DATA_PATH$/demo.kuiml" load_enabled="false" import_templates="false" import_defines="false" import_variables="false" />
- <!-- using action button to load content -->
- <SYSTEM_ACTION_BUTTON action_id="load_contents" width="150" />
- <!-- action to change load_enabled and so load contents -->
- <ACTION id="load_contents" type="Script" script="demo_kuiml_widget.load_enabled = 1;" requires="demo_kuiml_widget.load_enabled" name="Load contents" />
Another way to toggle loading contents can be something like this:
- <!-- toggle loading KUIML_WIDGET contents -->
- <TEXT value="Load contents">
- <INVISIBLE_PARAM_TOGGLE_SWITCH param_id="demo_kuiml_widget.load_enabled" width="100%" height="100%" />
- </TEXT>
Using root_path we can make loading different src files easier using only the file name.
- <!-- load "sub-skin" contents from file -->
- <KUIML_WIDGET id="demo_kuiml_widget" root_path="$SCRIPT_DATA_PATH$" src="demo.kuiml" load_enabled="false" import_templates="false" import_defines="false" import_variables="false" />
- <!-- using action buttons to load contents -->
- <ROW>
- <SYSTEM_ACTION_BUTTON action_id="load_contents" width="150" />
- <SYSTEM_ACTION_BUTTON action_id="load_contents2" width="150" />
- </ROW>
- <!-- action to load contents -->
- <ACTION id="load_contents" type="Script" script="demo_kuiml_widget.src = "demo.kuiml"; demo_kuiml_widget.load_enabled = 1;" requires="demo_kuiml_widget.src;demo_kuiml_widget.load_enabled" name="Load contents" />
- <!-- action to load another content file -->
- <ACTION id="load_contents2" type="Script" script="demo_kuiml_widget.src = "demo2.kuiml"; demo_kuiml_widget.load_enabled = 1;" name="Load another" />

Using innerKUIML
We could also use innerKUIML instead of src.
Inside quotes we have to to escape special characters like < and other quotes.

Changing innerKUIML we can generate totally new KUIML contents on the fly.
- <!-- load "sub-skin" contents from string -->
- <!-- using action button to update contents -->
- <SYSTEM_ACTION_BUTTON action_id="update_contents" width="150" />
- <!-- action to update contents -->

Creating popup menu on the fly
Using KUIML_WIDGET we can create a new POPUP_MENU on the fly and immediately open it. (This is experimental)
- <!-- load empty "sub-skin" with disabled error popups -->
- <KUIML_WIDGET id="demo_kuiml_widget" import_templates="false" import_defines="false" import_variables="false" innerKUIML="<SKIN show_messages='false' />"/>
- <!-- using action button to run an action -->
- <SYSTEM_ACTION_BUTTON action_id="update_contents" width="150" />
- <!-- action to update contents -->
- <ACTION id="update_contents" name="Open menu" type="Script"
- script="datetime d;
- /* create new POPUP_MENU inside KUIML_WIDGET and open it */
- demo_kuiml_widget.innerKUIML = "<SKIN rand='"+rand()+"' show_messages='false'><POPUP_MENU id='my_menu'><REPEAT count='"+rand(1, 10)+"'><MENU_ITEM name='Random item "+formatFloat(d.get_second(),"0", 2, 0)+"$index$' /></REPEAT></POPUP_MENU><ACTION_TRIGGER event_id='window.loaded.value_changed' condition_formula='window.loaded==1' action_id='my_menu.Popup' /></SKIN>";" requires="demo_kuiml_widget.innerKUIML" />

Comments
Please, authorize to view and post comments.
