mirror of
https://github.com/Insality/druid
synced 2025-06-27 10:27:48 +02:00
252 lines
11 KiB
HTML
252 lines
11 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>
|
|
<li><a href="#Power_of_using_templates">Power of using templates </a></li>
|
|
</ul>
|
|
|
|
|
|
<h2>Topics</h2>
|
|
<ul class="">
|
|
<li><a href="../topics/01-components.md.html">01-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/changelog.md.html">changelog</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.swipe.html">druid.swipe</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>Every component is the children of Basic Druid component. Read the [basic component API here].(https://insality.github.io/druid/modules/component.html), Methods of basic components you can call via self:{method_name}</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">"my_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_LANGUAGE_CHANGE interest
|
|
</span><span class="keyword">function</span> M.on_language_change(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="comment">-- Call, if input was capturing before this component
|
|
</span><span class="comment">-- Example: scroll is start scrolling, so you need unhover button
|
|
</span><span class="keyword">function</span> M.on_input_interrupt(self)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="comment">-- Call, if game lost focus. Need ON_FOCUS_LOST intereset
|
|
</span><span class="keyword">function</span> M.on_focus_lost(self)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="comment">-- Call, if game gained focus. Need ON_FOCUS_GAINED intereset
|
|
</span><span class="keyword">function</span> M.on_focus_gained(self)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="comment">-- Call on component remove or on druid:final
|
|
</span><span class="keyword">function</span> M.on_remove(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">function</span> init(self)
|
|
druid.register(<span class="string">"my_component"</span>, my_component)
|
|
<span class="keyword">end</span>
|
|
</pre>
|
|
|
|
|
|
<p>Registering make new function with "new<em>{component</em>name}". In our example it will be: <code>druid:new_my_component()</code>.</p>
|
|
|
|
<p>Or you can create component without registering with <code>druid:create(my_component_module)</code></p>
|
|
|
|
<p>As component registered, you can create your component with next code:</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">function</span> init(self)
|
|
self.druid = druid.new(self)
|
|
|
|
<span class="keyword">local</span> my_component = self.druid:new_my_component(...)
|
|
<span class="comment">-- or --
|
|
</span> <span class="keyword">local</span> my_component = self.druid:create(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>LANGUAGE</em>CHANGE</strong> - will call <em>on</em>language<em>change</em> function on language change trigger</p></li>
|
|
<li><p><strong>ON<em>LAYOUT</em>CHANGE</strong> will call <em>on</em>layout<em>change</em> function on layout change trigger</p></li>
|
|
<li><p><strong>ON<em>FOCUS</em>LOST</strong> will call <em>on</em>focust<em>lost</em> function in on focus lost event. You need to pass window_callback to global <a href="../modules/druid.html#on_window_callback">druid:on_window_callback</a></p></li>
|
|
<li><p><strong>ON<em>FOCUS</em>GAINED</strong> will call <em>on</em>focust<em>gained</em> function in on focus gained event. You need to pass window_callback to global <a href="../modules/druid.html#on_window_callback">druid:on_window_callback</a></p></li>
|
|
</ul>
|
|
|
|
<p><a name="Best_practice_on_custom_components"></a></p>
|
|
<h2>Best practice on custom components</h2>
|
|
<p>On each component recommended 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>
|
|
|
|
|
|
|
|
<p><a name="Power_of_using_templates"></a></p>
|
|
<h2>Power of using templates</h2>
|
|
|
|
<p>You can use one component, but creating and customizing templates for them. Templates only requires to match the component scheme.</p>
|
|
|
|
|
|
</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-04-18 14:39:17 </i>
|
|
</div> <!-- id="about" -->
|
|
</div> <!-- id="container" -->
|
|
</body>
|
|
</html>
|