mirror of
https://github.com/Insality/druid
synced 2025-06-27 10:27:48 +02:00
173 lines
6.2 KiB
HTML
173 lines
6.2 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>Topics</h2>
|
|
<ul class="">
|
|
<li><a href="../topics/components.md.html">Druid components</a></li>
|
|
<li><strong>Custom components</strong></li>
|
|
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
|
|
<li><a href="../topics/online_example.md.html">Online example</a></li>
|
|
<li><a href="../topics/styles.md.html">Styles</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">
|
|
|
|
|
|
<h2>Custom components</h2>
|
|
|
|
<p>Add your custom components 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>
|
|
|
|
|
|
<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> M = {}
|
|
M.interest = { const.ON_INPUT }
|
|
|
|
<span class="keyword">function</span> M.init(self, ...)
|
|
<span class="comment">-- Component constructor
|
|
</span><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_SWIPE
|
|
</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 swipe was started on another component (ex. scroll)
|
|
</span><span class="keyword">function</span> M.on_swipe(self)
|
|
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="keyword">return</span> M
|
|
</pre>
|
|
|
|
|
|
|
|
<h2>Best practice on custom components</h2>
|
|
<p>On each component recomended describe component schema in next way:</p>
|
|
|
|
|
|
<pre>
|
|
<span class="comment">-- Component module
|
|
</span><span class="keyword">local</span> helper = <span class="global">require</span>(<span class="string">"druid.helper"</span>)
|
|
|
|
<span class="keyword">local</span> M = {}
|
|
|
|
<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="comment">-- TODO: Rework self.template/self.nodes
|
|
</span><span class="comment">-- Make self._inner_data? { component_name, template, nodes }
|
|
</span><span class="keyword">function</span> M.init(self, template_name, node_table)
|
|
<span class="comment">-- If component use template, setup it:
|
|
</span> self.template = template_name
|
|
|
|
<span class="comment">-- If component was cloned with gui.clone_tree, pass his nodes
|
|
</span> self.nodes = node_table
|
|
|
|
<span class="comment">-- helper can get node from gui/template/table
|
|
</span> <span class="keyword">local</span> root = helper.node(self, SCHEME.ROOT)
|
|
|
|
<span class="comment">-- This component can spawn another druid components:
|
|
</span> <span class="keyword">local</span> druid = helper.get_druid(self)
|
|
<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
|
|
</span> <span class="keyword">local</span> my_style = helper.get_style(self, <span class="string">"component_name"</span>)
|
|
<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-21 22:00:04 </i>
|
|
</div> <!-- id="about" -->
|
|
</div> <!-- id="container" -->
|
|
</body>
|
|
</html>
|