mirror of
https://github.com/Insality/druid.git
synced 2025-06-27 10:27:47 +02:00
201 lines
7.8 KiB
HTML
201 lines
7.8 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<head>
|
|
<title>Defold Druid UI Library</title>
|
|
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container">
|
|
|
|
<div id="product">
|
|
<div id="product_logo"></div>
|
|
<div id="product_name"><big><b></b></big></div>
|
|
<div id="product_description"></div>
|
|
</div> <!-- id="product" -->
|
|
|
|
|
|
<div id="main">
|
|
|
|
|
|
<!-- Menu -->
|
|
|
|
<div id="navigation">
|
|
<br/>
|
|
<h1>Druid</h1>
|
|
|
|
<ul>
|
|
<li><a href="../index.html">Index</a></li>
|
|
</ul>
|
|
|
|
<h2>Contents</h2>
|
|
<ul>
|
|
<li><a href="#Overview">Overview </a></li>
|
|
<li><a href="#Custom_components">Custom components </a></li>
|
|
<li><a href="#Best_practice_on_custom_components">Best practice on custom components </a></li>
|
|
</ul>
|
|
|
|
|
|
<h2>Topics</h2>
|
|
<ul class="">
|
|
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
|
<li><strong>Creating custom components</strong></li>
|
|
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
|
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
|
<li><a href="../topics/05-examples.md.html">Examples</a></li>
|
|
<li><a href="../topics/README.md.html">README</a></li>
|
|
</ul>
|
|
<h2>Modules</h2>
|
|
<ul class="nowrap">
|
|
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
|
|
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
|
|
<li><a href="../modules/druid.button.html">druid.button</a></li>
|
|
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
|
|
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
|
|
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
|
|
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
|
|
<li><a href="../modules/druid.input.html">druid.input</a></li>
|
|
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
|
|
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
|
|
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
|
|
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
|
|
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
|
|
<li><a href="../modules/druid.text.html">druid.text</a></li>
|
|
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
|
|
<li><a href="../modules/component.html">component</a></li>
|
|
<li><a href="../modules/druid.html">druid</a></li>
|
|
<li><a href="../modules/druid_event.html">druid_event</a></li>
|
|
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
|
|
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div id="content">
|
|
|
|
|
|
<h1>Creating custom components</h1>
|
|
|
|
<p><a name="Overview"></a></p>
|
|
<h2>Overview</h2>
|
|
<p>Druid allows you to create your custom components from druid basic components or other custom components</p>
|
|
|
|
|
|
<p><a name="Custom_components"></a></p>
|
|
<h2>Custom components</h2>
|
|
<p>Basic custom component template looks like this:</p>
|
|
|
|
<pre>
|
|
<span class="keyword">local</span> const = <span class="global">require</span>(<span class="string">"druid.const"</span>)
|
|
<span class="keyword">local</span> component = <span class="global">require</span>(<span class="string">"druid.component"</span>)
|
|
|
|
<span class="keyword">local</span> M = component.create(<span class="string">"your_component"</span>)
|
|
|
|
<span class="comment">-- Component constructor
|
|
</span><span class="keyword">function</span> M.init(self, ...)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="comment">-- Call only if exist interest: const.ON_UPDATE
|
|
</span><span class="keyword">function</span> M.update(self, dt)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="comment">-- Call only if exist interest: const.ON_INPUT or const.ON_INPUT_HIGH
|
|
</span><span class="keyword">function</span> M.on_input(self, action_id, action)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="comment">-- Call only if exist interest: const.ON_MESSAGE
|
|
</span><span class="keyword">function</span> M.on_message(self, message_id, message, sender)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="comment">-- Call only if component with ON_CHANGE_LANGUAGE interest
|
|
</span><span class="keyword">function</span> M.on_change_language(self)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="comment">-- Call only if component with ON_LAYOUT_CHANGE interest
|
|
</span><span class="keyword">function</span> M.on_layout_change(self)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="keyword">return</span> M
|
|
</pre>
|
|
|
|
|
|
|
|
<p>Add your custom component to druid via <a href="../modules/druid.html#register">druid.register</a></p>
|
|
|
|
<pre>
|
|
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
|
|
<span class="keyword">local</span> my_component = <span class="global">require</span>(<span class="string">"my.amazing.component"</span>)
|
|
|
|
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
|
|
druid.register(<span class="string">"my_component"</span>, my_component)
|
|
<span class="keyword">end</span>
|
|
</pre>
|
|
|
|
|
|
<h3>Interest</h3>
|
|
<p>Interest - is a way to indicate what events your component will respond to.
|
|
There is next interests in druid:
|
|
- <strong>ON_MESSAGE</strong> - component will receive messages from on_message</p>
|
|
|
|
<ul>
|
|
<li><p><strong>ON_UPDATE</strong> - component will be updated from update</p></li>
|
|
<li><p><strong>ON<em>INPUT</em>HIGH</strong> - component will receive input from on<em>input, before other components with ON</em>INPUT</p></li>
|
|
<li><p><strong>ON_INPUT</strong> - component will receive input from on<em>input, after other components with ON</em>INPUT_HIGH</p></li>
|
|
<li><p><strong>ON<em>CHANGE</em>LANGUAGE</strong> - will call <em>on</em>change<em>language</em> function on language change trigger</p></li>
|
|
<li><p><strong>ON<em>LAYOUT</em>CHANGED</strong> will call <em>on</em>layout<em>change</em> function on layout change trigger</p></li>
|
|
</ul>
|
|
|
|
|
|
<p><a name="Best_practice_on_custom_components"></a></p>
|
|
<h2>Best practice on custom components</h2>
|
|
<p>On each component recomended describe component scheme in next way:</p>
|
|
|
|
|
|
<pre>
|
|
<span class="comment">-- Component module
|
|
</span><span class="keyword">local</span> component = <span class="global">require</span>(<span class="string">"druid.component"</span>)
|
|
|
|
<span class="keyword">local</span> M = component.create(<span class="string">"your_component"</span>)
|
|
|
|
<span class="keyword">local</span> SCHEME = {
|
|
ROOT = <span class="string">"/root"</span>,
|
|
ITEM = <span class="string">"/item"</span>,
|
|
TITLE = <span class="string">"/title"</span>
|
|
}
|
|
|
|
<span class="keyword">function</span> M.init(self, template_name, node_table)
|
|
<span class="comment">-- If component use template, setup it:
|
|
</span> self:set_template(template_name)
|
|
|
|
<span class="comment">-- If component was cloned with gui.clone_tree, pass his nodes
|
|
</span> self:set_nodes(node_table)
|
|
|
|
<span class="comment">-- helper can get node from gui/template/table
|
|
</span> <span class="keyword">local</span> root = self:get_node(SCHEME.ROOT)
|
|
|
|
<span class="comment">-- This component can spawn another druid components:
|
|
</span> <span class="keyword">local</span> druid = self:get_druid()
|
|
|
|
<span class="comment">-- Button self on callback is self of _this_ component
|
|
</span> <span class="keyword">local</span> button = druid:new_button(...)
|
|
|
|
<span class="comment">-- helper can return you the component style for current component
|
|
</span> <span class="comment">-- It return by component name from
|
|
</span> <span class="keyword">local</span> my_style = self:get_style()
|
|
<span class="keyword">end</span>
|
|
</pre>
|
|
|
|
|
|
|
|
</div> <!-- id="content" -->
|
|
</div> <!-- id="main" -->
|
|
<div id="about">
|
|
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
|
<i style="float:right;">Last updated 2020-03-22 02:23:51 </i>
|
|
</div> <!-- id="about" -->
|
|
</div> <!-- id="container" -->
|
|
</body>
|
|
</html>
|