mirror of
https://github.com/Insality/druid.git
synced 2025-09-27 18:12:19 +02:00
Update README and add topics
This commit is contained in:
40
docs_md/components.md
Normal file
40
docs_md/components.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# Druid components
|
||||
|
||||
## Button
|
||||
Basic game button
|
||||
|
||||
## Text
|
||||
Wrap on text node with text size adjusting
|
||||
|
||||
## Blocker
|
||||
Block input in node zone
|
||||
|
||||
## Back Handler
|
||||
Handle back button (Android, backspace)
|
||||
|
||||
## Locale
|
||||
Text component with handle localization system
|
||||
|
||||
## Timer
|
||||
Run timer on text node
|
||||
|
||||
## Progress
|
||||
Basic progress bar
|
||||
|
||||
## Scroll
|
||||
Basic scroll component
|
||||
|
||||
## Grid
|
||||
Component for manage node positions
|
||||
|
||||
## Slider
|
||||
Basic slider component
|
||||
|
||||
## Checkbox
|
||||
Basic checkbox component
|
||||
|
||||
## Checkbox group
|
||||
Several checkboxes in one group
|
||||
|
||||
## Radio group
|
||||
Several checkboxes in one group with single choice
|
105
docs_md/creating_custom_components.md
Normal file
105
docs_md/creating_custom_components.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# Creating custom components
|
||||
|
||||
## Overview
|
||||
Druid allows you to create your custom components from druid basic components or other custom components
|
||||
|
||||
|
||||
## Custom components
|
||||
Basic custom component template looks like this:
|
||||
```lua
|
||||
local const = require("druid.const")
|
||||
local component = require("druid.component")
|
||||
|
||||
local M = component.create("your_component")
|
||||
|
||||
-- Component constructor
|
||||
function M.init(self, ...)
|
||||
end
|
||||
|
||||
-- Call only if exist interest: const.ON_UPDATE
|
||||
function M.update(self, dt)
|
||||
end
|
||||
|
||||
-- Call only if exist interest: const.ON_INPUT or const.ON_INPUT_HIGH
|
||||
function M.on_input(self, action_id, action)
|
||||
end
|
||||
|
||||
-- Call only if exist interest: const.ON_MESSAGE
|
||||
function M.on_message(self, message_id, message, sender)
|
||||
end
|
||||
|
||||
-- Call only if component with ON_CHANGE_LANGUAGE interest
|
||||
function M.on_change_language(self)
|
||||
end
|
||||
|
||||
-- Call only if component with ON_LAYOUT_CHANGE interest
|
||||
function M.on_layout_change(self)
|
||||
end
|
||||
|
||||
return M
|
||||
```
|
||||
|
||||
|
||||
Add your custom component to druid via `druid.register`
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
local my_component = require("my.amazing.component")
|
||||
|
||||
local function init(self)
|
||||
druid.register("my_component", my_component)
|
||||
end
|
||||
```
|
||||
|
||||
### Interest
|
||||
Interest - is a way to indicate what events your component will respond to.
|
||||
There is next interests in druid:
|
||||
- **ON_MESSAGE** - component will receive messages from on_message
|
||||
|
||||
- **ON_UPDATE** - component will be updated from update
|
||||
|
||||
- **ON_INPUT_HIGH** - component will receive input from on_input, before other components with ON_INPUT
|
||||
|
||||
- **ON_INPUT** - component will receive input from on_input, after other components with ON_INPUT_HIGH
|
||||
|
||||
- **ON_CHANGE_LANGUAGE** - will call _on_change_language_ function on language change trigger
|
||||
|
||||
- **ON_LAYOUT_CHANGED** will call _on_layout_change_ function on layout change trigger
|
||||
|
||||
|
||||
## Best practice on custom components
|
||||
On each component recomended describe component scheme in next way:
|
||||
|
||||
```lua
|
||||
-- Component module
|
||||
local component = require("druid.component")
|
||||
|
||||
local M = component.create("your_component")
|
||||
|
||||
local SCHEME = {
|
||||
ROOT = "/root",
|
||||
ITEM = "/item",
|
||||
TITLE = "/title"
|
||||
}
|
||||
|
||||
function M.init(self, template_name, node_table)
|
||||
-- If component use template, setup it:
|
||||
self:set_template(template_name)
|
||||
|
||||
-- If component was cloned with gui.clone_tree, pass his nodes
|
||||
self:set_nodes(node_table)
|
||||
|
||||
-- helper can get node from gui/template/table
|
||||
local root = self:get_node(SCHEME.ROOT)
|
||||
|
||||
-- This component can spawn another druid components:
|
||||
local druid = self:get_druid()
|
||||
|
||||
-- Button self on callback is self of _this_ component
|
||||
local button = druid:new_button(...)
|
||||
|
||||
-- helper can return you the component style for current component
|
||||
-- It return by component name from
|
||||
local my_style = self:get_style()
|
||||
end
|
||||
|
||||
```
|
8
docs_md/druid_assets.md
Normal file
8
docs_md/druid_assets.md
Normal file
@@ -0,0 +1,8 @@
|
||||
# Druid assets
|
||||
|
||||
## Overview
|
||||
I've created [druid-assets repository](https://github.com/Insality/druid-assets) to make a _marketplace_ with custom styles and components.
|
||||
|
||||
Any of druid users can push their own components and styles to share it with the other users
|
||||
|
||||
Also, this marketplace is great example to how you can create your custom components
|
6
docs_md/examples.md
Normal file
6
docs_md/examples.md
Normal file
@@ -0,0 +1,6 @@
|
||||
# Examples
|
||||
|
||||
## Overview
|
||||
See the [example folder](https://github.com/Insality/druid/tree/develop/example/kenney) for examples of how to use Druid
|
||||
|
||||
Try the HTML5 version of the example app
|
47
docs_md/styles.md
Normal file
47
docs_md/styles.md
Normal file
@@ -0,0 +1,47 @@
|
||||
# Styles
|
||||
|
||||
## Overview
|
||||
Styles - set of functions and parameters for components to customize their behavior.
|
||||
|
||||
Styles is a table, where key is name of component, and value is style table for this component.
|
||||
|
||||
In component API documentation, you can find the style API for this component. Or just lookup for existing styles and modify them.
|
||||
|
||||
## Usage
|
||||
Setup default druid style for all druid instances via `druid.set_default_style`
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
local my_style = require("my.amazing.style")
|
||||
|
||||
local function init(self)
|
||||
druid.set_default_style(my_style)
|
||||
end
|
||||
```
|
||||
|
||||
Setup custom style to specific druid instance:
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
local my_style = require("my.amazing.style")
|
||||
|
||||
local function init(self)
|
||||
-- This druid instance will be use my_style as default
|
||||
self.druid = druid.new(self, my_style)
|
||||
end
|
||||
```
|
||||
|
||||
Change component style with _set_style_ function
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
local my_style = require("my.amazing.style")
|
||||
|
||||
local function init(self)
|
||||
self.druid = druid.new(self)
|
||||
self.button = self.druid:new_button(self, "node")
|
||||
-- Setup custom style for specific component
|
||||
self.button:set_style(my_style)
|
||||
end
|
||||
```
|
||||
|
||||
## Create custom components
|
||||
Styles is just lua table, so it can be described in just one single file
|
||||
__TODO__
|
Reference in New Issue
Block a user