1
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>4. Connecting ClutterState states in ClutterScript</title><link rel="stylesheet" type="text/css" href="style.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.1"><link rel="home" href="index.html" title="The Clutter Cookbook"><link rel="up" href="script.html" title="Chapter 8. Script"><link rel="prev" href="script-signals.html" title="3. Connecting to signals in ClutterScript"><link rel="next" href="effects.html" title="Chapter 9. Effects"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">4. Connecting <span class="type">ClutterState</span> states in <span class="type">ClutterScript</span></th></tr><tr><td width="20%" align="left"><a accesskey="p" href="script-signals.html">Prev</a> </td><th width="60%" align="center">Chapter 8. Script</th><td width="20%" align="right"> <a accesskey="n" href="effects.html">Next</a></td></tr></table><hr></div><div class="section" title="4. Connecting ClutterState states in ClutterScript"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="script-state"></a>4. Connecting <span class="type">ClutterState</span> states in <span class="type">ClutterScript</span></h2></div></div></div><div class="section" title="4.1. Problem"><div class="titlepage"><div><div><h3 class="title"><a name="idp12033488"></a>4.1. Problem</h3></div></div></div><p>You have declared an actor using JSON, and want to connect
2
signals to <span class="type">ClutterState</span> transitions.</p></div><div class="section" title="4.2. Solution"><div class="titlepage"><div><div><h3 class="title"><a name="idp12035120"></a>4.2. Solution</h3></div></div></div><p>Connect the <span class="type">ClutterState</span> states to the signals
3
using the <code class="varname">states</code> and <code class="varname">target-state</code>
4
keys of the <code class="varname">signals</code> definition, and call
5
<code class="function">clutter_script_connect_signals()</code>; for instance,
6
the following JSON declares that the <span class="emphasis"><em>enter-event</em></span>
7
signal should transition to the <span class="emphasis"><em>hover</em></span> state
8
and the <span class="emphasis"><em>leave-event</em></span> should transition to the
9
<span class="emphasis"><em>base</em></span> state:</p><div class="informalexample"><pre class="programlisting">{
11
"type" : "ClutterRectangle",
16
<span class="emphasis"><em>"signals" : [
17
{ "name" : "enter-event", "states" : "rectangle-states", "target-state" : "hover" },
18
{ "name" : "leave-event", "states" : "rectangle-states", "target-state" : "base" }
20
}</pre></div><p>The <span class="emphasis"><em>rectangle-states</em></span> state machine holds
21
the various states.</p></div><div class="section" title="4.3. Discussion"><div class="titlepage"><div><div><h3 class="title"><a name="idp12042544"></a>4.3. Discussion</h3></div></div></div><p>Connecting a <span class="type">ClutterState</span> state transition to
22
a signal defined inside a <span class="type">ClutterScript</span> JSON without
23
requiring a real function to wrap <code class="function">clutter_state_set_state()</code>
24
allows to minimize the amount of code that has to be written, and
25
ties the state to the UI element being defined.</p><p>The connection between a signal and a <span class="type">ClutterState</span>
26
state is similar to the connection between a signal and a handler
27
function. Each definition must contain the name of the signal; the
28
script id of the <span class="type">ClutterState</span> object that is used to
29
store the target state definition; and the target state of the
30
transition.</p><p>The <span class="emphasis"><em>states</em></span> key can also contain a full
31
definition of the <span class="type">ClutterState</span>.</p><p>The <span class="emphasis"><em>target-state</em></span> key works exactly like
32
the argument of <code class="function">clutter_state_set_state()</code>: it
33
will transition the <span class="type">ClutterState</span> from the current state
34
to the desired state.</p><p>The <span class="type">ClutterState</span> instance that will be used to
35
resolve the target state can be defined in JSON like any other
36
object, but it is also possible to create a <span class="type">ClutterState</span>
37
in code, and associate it to a <span class="type">ClutterScript</span> instance
38
prior to parsing the signal connection JSON, through the
39
<code class="function">clutter_script_add_states()</code> function of
40
<span class="type">ClutterScript</span>.</p><p>The <span class="emphasis"><em>warp</em></span> boolean key can be used to
41
perform a transition to the target state without an animation,
42
similarly to what <code class="function">clutter_state_warp_to_state()</code>
43
does, for instance:</p><div class="informalexample"><pre class="programlisting">{
44
<span class="emphasis"><em>"signals" : [
46
"name" : "enter-event",
47
"states" : "rectangle-states",
48
"target-state" : "hover",
52
}</pre></div><p>will not animate the transition between the current state
53
and the target <span class="emphasis"><em>hover</em></span> state when the signal
54
is emitted.</p></div><div class="section" title="4.4. Full examples"><div class="titlepage"><div><div><h3 class="title"><a name="idp12056384"></a>4.4. Full examples</h3></div></div></div><div class="example"><a name="script-states-example-1"></a><p class="title"><b>Example 8.5. <span class="type">ClutterScript</span> JSON with state definitions</b></p><div class="example-contents"><pre class="programlisting">[
57
"type" : "ClutterStage",
63
{ "name" : "destroy", "handler" : "clutter_main_quit" }
66
"children" : [ "rectangle" ]
70
"id" : "rectangle-states",
71
"type" : "ClutterState",
80
[ "rectangle", "scale-x", "ease-in-cubic", 0.7 ],
81
[ "rectangle", "scale-y", "ease-in-cubic", 0.7 ],
82
[ "rectangle", "rotation-angle-z", "ease-out-cubic", 0.0 ]
90
[ "rectangle", "scale-x", "ease-in-cubic", 1.2 ],
91
[ "rectangle", "scale-y", "ease-in-cubic", 1.2 ]
99
[ "rectangle", "rotation-angle-z", "ease-out-bounce", 90.0 ]
107
"type" : "ClutterRectangle",
113
"rotation-center-z-gravity" : "center",
114
"scale-gravity" : "center",
121
"name" : "enter-event",
122
"states" : "rectangle-states",
123
"target-state" : "hover"
126
"name" : "leave-event",
127
"states" : "rectangle-states",
128
"target-state" : "base"
134
"type" : "ClutterClickAction",
138
"states" : "rectangle-states",
139
"target-state" : "clicked"
146
</pre></div></div><br class="example-break"><div class="example"><a name="script-states-examples-2"></a><p class="title"><b>Example 8.6. Loading a JSON file into a <span class="type">ClutterScript</span> and connecting states</b></p><div class="example-contents"><pre class="programlisting">#include <stdlib.h>
147
#include <clutter/clutter.h>
150
main (int argc, char *argv[])
155
gchar *filename = "script-states.json";
156
GError *error = NULL;
158
if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
161
ui = clutter_script_new ();
163
clutter_script_load_from_file (ui, filename, &error);
167
g_critical ("Error loading ClutterScript file %s\n%s", filename, error->message);
168
g_error_free (error);
172
clutter_script_get_objects (ui,
176
/* make the objects in the script available to all signals
177
* by passing the script as the second argument
178
* to clutter_script_connect_signals()
180
clutter_script_connect_signals (ui, ui);
182
clutter_actor_show (stage);
190
</pre></div></div><br class="example-break"></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="script-signals.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="script.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="effects.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3. Connecting to signals in <span class="type">ClutterScript</span> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> Chapter 9. Effects</td></tr></table></div></body></html>