[docs] better words
This commit is contained in:
parent
2f479ba30a
commit
0a723777ed
2 changed files with 49 additions and 25 deletions
|
@ -5,7 +5,7 @@ Before actually getting started, it is important to understand the motivation
|
||||||
and mechanics behind SUIT:
|
and mechanics behind SUIT:
|
||||||
|
|
||||||
- **Immediate mode is better than retained mode**
|
- **Immediate mode is better than retained mode**
|
||||||
- **Layout does not care about widgets**
|
- **Layout should not care about content**
|
||||||
- **Less is more**
|
- **Less is more**
|
||||||
|
|
||||||
Immediate mode?
|
Immediate mode?
|
||||||
|
@ -68,11 +68,11 @@ to design a user interface.
|
||||||
SUIT is not a complete GUI library: It does not take control of the runtime.
|
SUIT is not a complete GUI library: It does not take control of the runtime.
|
||||||
You have to do everything yourself [1]_.
|
You have to do everything yourself [1]_.
|
||||||
|
|
||||||
**SUIT is not good at word processors!**
|
**SUIT is not good at processing words!**
|
||||||
|
|
||||||
|
|
||||||
Hello, World
|
Hello, World!
|
||||||
------------
|
-------------
|
||||||
|
|
||||||
SUITing up is is straightforward: Define your GUI in ``love.update()``, and
|
SUITing up is is straightforward: Define your GUI in ``love.update()``, and
|
||||||
draw it in ``love.draw()``::
|
draw it in ``love.draw()``::
|
||||||
|
@ -96,15 +96,19 @@ draw it in ``love.draw()``::
|
||||||
suit.draw()
|
suit.draw()
|
||||||
end
|
end
|
||||||
|
|
||||||
This will produce this UI (after clicking the button):
|
This will produce this UI:
|
||||||
|
|
||||||
.. image:: _static/hello-world.gif
|
.. image:: _static/hello-world.gif
|
||||||
|
|
||||||
As written above, the two widgets are each created by a function call
|
The two widgets (the button and the label) are each created by a function call
|
||||||
(:func:`suit.Button <Button>` and :func:`suit.Label <Label>`). The first
|
(:func:`suit.Button <Button>` and :func:`suit.Label <Label>`). The first
|
||||||
argument to a widget function is always the "payload" of the widget, and the
|
argument to a widget function always defines the *payload* of the widget.
|
||||||
last four arguments define the position and dimension of the widget. The
|
Different widgets expect different payloads.
|
||||||
function returns a table that indicates the UI state of the widget.
|
Here, both :func:`suit.Button <Button>` and :func:`suit.Label <Label>` expect a
|
||||||
|
string.
|
||||||
|
The last four arguments of a widget function define the position and dimension
|
||||||
|
of the widget.
|
||||||
|
The function returns a table that indicates the UI state of the widget.
|
||||||
Here, the state ``hit`` is used to figure out if the mouse was clicked and
|
Here, the state ``hit`` is used to figure out if the mouse was clicked and
|
||||||
released on the button. See :doc:`Widgets <widgets>` for more info on widget
|
released on the button. See :doc:`Widgets <widgets>` for more info on widget
|
||||||
states.
|
states.
|
||||||
|
@ -112,8 +116,8 @@ states.
|
||||||
Mutable state
|
Mutable state
|
||||||
-------------
|
-------------
|
||||||
|
|
||||||
Widgets that mutate some state - input boxes, checkboxes and sliders - receive
|
Widgets that mutate some state - input boxes, checkboxes and sliders - expect
|
||||||
a table argument as payload, e.g.::
|
a table as their payload, e.g.::
|
||||||
|
|
||||||
local slider = {value = 1, min = 0, max = 2}
|
local slider = {value = 1, min = 0, max = 2}
|
||||||
function love.update(dt)
|
function love.update(dt)
|
||||||
|
@ -131,8 +135,7 @@ Options
|
||||||
-------
|
-------
|
||||||
|
|
||||||
You can define optional, well, options after the payload. Most options affect
|
You can define optional, well, options after the payload. Most options affect
|
||||||
how the widget is drawn. For example, to align the label text to the left in
|
how the widget is drawn. For example, to align the label text to the left::
|
||||||
the above example, you would write::
|
|
||||||
|
|
||||||
local slider = {value = 1, max = 2}
|
local slider = {value = 1, max = 2}
|
||||||
function love.update(dt)
|
function love.update(dt)
|
||||||
|
@ -148,8 +151,8 @@ the theme. See :doc:`Widgets <widgets>` for more info on widget options.
|
||||||
Keyboard input
|
Keyboard input
|
||||||
--------------
|
--------------
|
||||||
|
|
||||||
The :func:`input widget <Input>` requires that you forward the ``keypressed``
|
The :func:`Input` widget requires that you forward the ``keypressed`` and
|
||||||
and ``textinput`` events to SUIT::
|
``textinput`` events to SUIT::
|
||||||
|
|
||||||
local input = {text = ""}
|
local input = {text = ""}
|
||||||
function love.update(dt)
|
function love.update(dt)
|
||||||
|
@ -168,7 +171,7 @@ and ``textinput`` events to SUIT::
|
||||||
|
|
||||||
.. image:: _static/keyboard.gif
|
.. image:: _static/keyboard.gif
|
||||||
|
|
||||||
The slider widget can also react to keyboard input. The mouse state is
|
The :func:`Slider` widget can also react to keyboard input. The mouse state is
|
||||||
automatically updated, but you can provide your own version of reality if you
|
automatically updated, but you can provide your own version of reality if you
|
||||||
need to. See the :doc:`Core functions <core>` for more details.
|
need to. See the :doc:`Core functions <core>` for more details.
|
||||||
|
|
||||||
|
@ -185,7 +188,7 @@ you can directly pass as the final four arguments to the widget functions.
|
||||||
If you have ever dabbled with `Qt's <http://qt.io>`_ ``QBoxLayout``, you
|
If you have ever dabbled with `Qt's <http://qt.io>`_ ``QBoxLayout``, you
|
||||||
already know 89% [2]_ of what you need to know.
|
already know 89% [2]_ of what you need to know.
|
||||||
|
|
||||||
The first example can be written as follows::
|
Hello, World! can be rewritten as follows::
|
||||||
|
|
||||||
suit = require 'suit'
|
suit = require 'suit'
|
||||||
|
|
||||||
|
@ -234,10 +237,10 @@ Refer to the :doc:`Layout <layout>` documentation for more information.
|
||||||
Widget ids
|
Widget ids
|
||||||
----------
|
----------
|
||||||
|
|
||||||
Each widget is identified by an ``id`` [4]_. Internally, this ``id`` is used t
|
Each widget is identified by an ``id`` [4]_. Internally, this ``id`` is used to
|
||||||
figure out which widget should handle user input like mouse clicks and keyboard
|
figure out which widget should handle user input like mouse clicks and keyboard
|
||||||
presses.
|
presses.
|
||||||
Unless specified otherwise, the ``id`` is the same as the first argument, i.e.,
|
Unless specified otherwise, the ``id`` is the same as the payload, i.e.,
|
||||||
the ``id`` of ``Button("Hello, World!", ...)`` will be the string
|
the ``id`` of ``Button("Hello, World!", ...)`` will be the string
|
||||||
``"Hello, World!"``.
|
``"Hello, World!"``.
|
||||||
In almost all of the cases, this will work fine and you don't have to worry about
|
In almost all of the cases, this will work fine and you don't have to worry about
|
||||||
|
@ -332,10 +335,10 @@ You can also do minimally invasive surgery::
|
||||||
GUI Instances
|
GUI Instances
|
||||||
-------------
|
-------------
|
||||||
|
|
||||||
Sometimes you might feel the need to separate parts of the GUI. Maybe the
|
Sometimes you might feel the need to separate parts of the GUI. Maybe certain
|
||||||
widgets should have a different theme, maybe certain should always be drawn
|
should always be drawn before or after other UI elements, or maybe you don't
|
||||||
before or after other UI elements, or maybe you don't want the UI state to
|
want the UI state to "leak" (e.g., from a stacked pause gamestate to the main
|
||||||
"leak" (e.g., from a stacked pause gamestate to the main gamestate).
|
gamestate).
|
||||||
|
|
||||||
For this reason, SUIT allows you to create GUI instances::
|
For this reason, SUIT allows you to create GUI instances::
|
||||||
|
|
||||||
|
|
|
@ -12,14 +12,35 @@ You may also download the sourcecode as a `zip
|
||||||
<http://github.com/vrld/SUIT/zipball/master>`_ or `tar
|
<http://github.com/vrld/SUIT/zipball/master>`_ or `tar
|
||||||
<http://github.com/vrld/SUIT/tarball/master>`_ file.
|
<http://github.com/vrld/SUIT/tarball/master>`_ file.
|
||||||
|
|
||||||
Using `Git <http://git-scm.com>`_, you can clone the project by running::
|
Otherwise, use `Git <http://git-scm.com>`_::
|
||||||
|
|
||||||
git clone git://github.com/vrld/SUIT
|
git clone git://github.com/vrld/SUIT
|
||||||
|
|
||||||
Once done, you can check for updates by running::
|
Update::
|
||||||
|
|
||||||
git pull
|
git pull
|
||||||
|
|
||||||
|
Hello, Suit::
|
||||||
|
|
||||||
|
suit = require 'suit'
|
||||||
|
|
||||||
|
local show_message = false
|
||||||
|
function love.update(dt)
|
||||||
|
-- Put a button on the screen. If hit, show a message.
|
||||||
|
if suit.Button("Hello, World!", 100,100, 300,30).hit then
|
||||||
|
show_message = true
|
||||||
|
end
|
||||||
|
|
||||||
|
-- if the button was pressed at least one time, but a label below
|
||||||
|
if show_message then
|
||||||
|
suit.Label("How are you today?", 100,150, 300,30)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
function love.draw()
|
||||||
|
suit.draw()
|
||||||
|
end
|
||||||
|
|
||||||
|
|
||||||
Read on
|
Read on
|
||||||
-------
|
-------
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue