~ubuntu-branches/ubuntu/vivid/clutter-1.0/vivid-proposed

<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

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

using the <code class="varname">states</code> and <code class="varname">target-state</code>

keys of the <code class="varname">signals</code> definition, and call

<code class="function">clutter_script_connect_signals()</code>; for instance,

the following JSON declares that the <span class="emphasis"><em>enter-event</em></span>

signal should transition to the <span class="emphasis"><em>hover</em></span> state

and the <span class="emphasis"><em>leave-event</em></span> should transition to the

<span class="emphasis"><em>base</em></span> state:</p><div class="informalexample"><pre class="programlisting">{

"id" : "rectangle",

"type" : "ClutterRectangle",

"width" : 200,

"height" : 200,

"reactive" : true,

<span class="emphasis"><em>"signals" : [

{ "name" : "enter-event", "states" : "rectangle-states", "target-state" : "hover" },

{ "name" : "leave-event", "states" : "rectangle-states", "target-state" : "base" }

]</em></span>

}</pre></div><p>The <span class="emphasis"><em>rectangle-states</em></span> state machine holds

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

a signal defined inside a <span class="type">ClutterScript</span> JSON without

requiring a real function to wrap <code class="function">clutter_state_set_state()</code>

allows to minimize the amount of code that has to be written, and

ties the state to the UI element being defined.</p><p>The connection between a signal and a <span class="type">ClutterState</span>

state is similar to the connection between a signal and a handler

function. Each definition must contain the name of the signal; the

script id of the <span class="type">ClutterState</span> object that is used to

store the target state definition; and the target state of the

transition.</p><p>The <span class="emphasis"><em>states</em></span> key can also contain a full

definition of the <span class="type">ClutterState</span>.</p><p>The <span class="emphasis"><em>target-state</em></span> key works exactly like

the argument of <code class="function">clutter_state_set_state()</code>: it

will transition the <span class="type">ClutterState</span> from the current state

to the desired state.</p><p>The <span class="type">ClutterState</span> instance that will be used to

resolve the target state can be defined in JSON like any other

object, but it is also possible to create a <span class="type">ClutterState</span>

in code, and associate it to a <span class="type">ClutterScript</span> instance

prior to parsing the signal connection JSON, through the

<code class="function">clutter_script_add_states()</code> function of

<span class="type">ClutterScript</span>.</p><p>The <span class="emphasis"><em>warp</em></span> boolean key can be used to

perform a transition to the target state without an animation,

similarly to what <code class="function">clutter_state_warp_to_state()</code>

does, for instance:</p><div class="informalexample"><pre class="programlisting">{

<span class="emphasis"><em>"signals" : [

{

"name" : "enter-event",

"states" : "rectangle-states",

"target-state" : "hover",

"warp" : true

}

]</em></span>

}</pre></div><p>will not animate the transition between the current state

and the target <span class="emphasis"><em>hover</em></span> state when the signal

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">[

{

"id" : "stage",

"type" : "ClutterStage",

"width" : 300,

"height" : 300,

"color" : "#335",

"signals" : [

{ "name" : "destroy", "handler" : "clutter_main_quit" }

"children" : [ "rectangle" ]

{

"id" : "rectangle-states",

"type" : "ClutterState",

"duration" : 1000,

"transitions" : [

{

"source" : null,

"target" : "base",

"keys" : [

[ "rectangle", "scale-x", "ease-in-cubic", 0.7 ],

[ "rectangle", "scale-y", "ease-in-cubic", 0.7 ],

[ "rectangle", "rotation-angle-z", "ease-out-cubic", 0.0 ]

]

{

"source" : null,

"target" : "hover",

"keys" : [

[ "rectangle", "scale-x", "ease-in-cubic", 1.2 ],

[ "rectangle", "scale-y", "ease-in-cubic", 1.2 ]

]

{

"source" : null,

"target" : "clicked",

"keys" : [

[ "rectangle", "rotation-angle-z", "ease-out-bounce", 90.0 ]

100

]

101

}

102

]

103

104

105

{

106

"id" : "rectangle",

107

"type" : "ClutterRectangle",

108

"width" : 200,

109

"height" : 200,

110

"x" : 50,

111

"y" : 50,

112

"color" : "#a90",

113

"rotation-center-z-gravity" : "center",

114

"scale-gravity" : "center",

115

"scale-x" : 0.7,

116

"scale-y" : 0.7,

117

"reactive" : true,

118

119

"signals" : [

120

{

121

"name" : "enter-event",

122

"states" : "rectangle-states",

123

"target-state" : "hover"

124

125

{

126

"name" : "leave-event",

127

"states" : "rectangle-states",

128

"target-state" : "base"

129

}

130

131

132

"actions" : [

133

{

134

"type" : "ClutterClickAction",

135

"signals" : [

136

{

137

"name" : "clicked",

138

"states" : "rectangle-states",

139

"target-state" : "clicked"

140

}

141

]

142

}

143

]

144

}

145

]

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>

148

149

int

150

main (int argc, char *argv[])

151

{

152

ClutterActor *stage;

153

ClutterScript *ui;

154

155

gchar *filename = "script-states.json";

156

GError *error = NULL;

157

158

if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)

159

return 1;

160

161

ui = clutter_script_new ();

162

163

clutter_script_load_from_file (ui, filename, &error);

164

165

if (error != NULL)

166

{

167

g_critical ("Error loading ClutterScript file %s\n%s", filename, error->message);

168

g_error_free (error);

169

exit (EXIT_FAILURE);

170

}

171

172

clutter_script_get_objects (ui,

173

"stage", &stage,

174

NULL);

175

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()

179

180

clutter_script_connect_signals (ui, ui);

181

182

clutter_actor_show (stage);

183

184

clutter_main ();

185

186

g_object_unref (ui);

187

188

return EXIT_SUCCESS;

189

}

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>

Older »