cookbook: Added ClutterScript example

Added a simple script and program to load it, to support
recipe on ClutterScript for UI definitions.

Also amended the Makefile (following the pattern of
the tests/interactive Makefile) to enable signal
connection from ClutterScript by passing -export-dynamic
to linker.

doc/cookbook/examples/Makefile.am

@@ -18,6 +18,7 @@ noinst_PROGRAMS = \
 	textures-crossfade	\
 	textures-crossfade-cogl	\
 	textures-crossfade-slideshow	\
+	script-ui	\
 	$(NULL)
 
 INCLUDES = \
@@ -37,7 +38,7 @@ AM_CFLAGS = \
         -DG_DISABLE_SINGLE_INCLUDES \
         -DTESTS_DATA_DIR=\""$(top_srcdir)/tests/data/"\"
 
-AM_LDFLAGS = $(CLUTTER_LIBS)
+AM_LDFLAGS = $(CLUTTER_LIBS) -export-dynamic
 
 animations_rotating_SOURCES                = animations-rotating.c
 text_shadow_SOURCES                        = text-shadow.c
@@ -54,5 +55,6 @@ events_pointer_motion_scribbler_SOURCES    = events-pointer-motion-scribbler.c
 textures_crossfade_SOURCES                 = textures-crossfade.c
 textures_crossfade_cogl_SOURCES            = textures-crossfade-cogl.c
 textures_crossfade_slideshow_SOURCES       = textures-crossfade-slideshow.c
+script_ui_SOURCES                          = script-ui.c
 
 -include $(top_srcdir)/build/autotools/Makefile.am.gitignore

doc/cookbook/examples/script-ui.c

@@ -0,0 +1,69 @@
+#include <stdlib.h>
+#include <clutter/clutter.h>
+
+gboolean
+_pointer_motion_cb (ClutterActor *actor,
+                    ClutterEvent *event,
+                    gpointer      user_data)
+{
+  g_debug ("Pointer movement");
+  return TRUE;
+}
+
+void
+_button_clicked_cb (ClutterClickAction *action,
+                    ClutterActor       *actor,
+                    gpointer            user_data)
+{
+  /* get the UI definition passed to the handler */
+  ClutterScript *ui = CLUTTER_SCRIPT (user_data);
+
+  ClutterState *transitions;
+
+  clutter_script_get_objects (ui,
+                              "transitions", &transitions,
+                              NULL);
+
+  clutter_state_set_state (transitions, "faded-in");
+}
+
+int
+main (int argc, char *argv[])
+{
+  g_thread_init (NULL);
+
+  clutter_init (&argc, &argv);
+
+  /* path to the directory containing assets (e.g. images) for the script to load */
+  const gchar *paths[] = { TESTS_DATA_DIR };
+
+  ClutterScript *ui = clutter_script_new ();
+  clutter_script_add_search_paths (ui, paths, 1);
+
+  gchar *filename = "script-ui.json";
+  GError *error = NULL;
+
+  clutter_script_load_from_file (ui, filename, &error);
+
+  if (error != NULL)
+    {
+      g_critical ("Error loading ClutterScript file %s\n%s", filename, error->message);
+      g_error_free (error);
+      exit (EXIT_FAILURE);
+    }
+
+  ClutterActor *stage;
+
+  clutter_script_get_objects (ui,
+                              "stage", &stage,
+                              NULL);
+
+  /* make the objects in the script available to all signals */
+  clutter_script_connect_signals (ui, ui);
+
+  clutter_actor_show (stage);
+
+  clutter_main ();
+
+  return EXIT_SUCCESS;
+}

doc/cookbook/examples/script-ui.json

@@ -0,0 +1,104 @@
+[
+  {
+    "id" : "stage",
+    "type" : "ClutterStage",
+    "is-default" : true,
+    "width" : 400,
+    "height" : 400,
+    "color" : "#333355ff",
+    "children" : [ "box" ]
+  },
+
+  {
+    "id" : "box",
+    "type" : "ClutterBox",
+
+    "layout-manager" : {
+      "type" : "ClutterBinLayout",
+      "x-align" : "CLUTTER_BIN_ALIGNMENT_CENTER",
+      "y-align" : "CLUTTER_BIN_ALIGNMENT_CENTER"
+    },
+
+    "constraints" : [
+      {
+        "type" : "ClutterAlignConstraint",
+        "align-axis" : "CLUTTER_ALIGN_X_AXIS",
+        "factor" : 0.5,
+        "source" : "stage"
+      },
+      {
+        "type" : "ClutterAlignConstraint",
+        "align-axis" : "CLUTTER_ALIGN_Y_AXIS",
+        "factor" : 0.5,
+        "source" : "stage"
+      }
+    ],
+
+    "children" : [ "texture1", "texture2" ]
+  },
+
+  {
+    "id" : "texture1",
+    "type" : "ClutterTexture",
+    "width" : 200,
+    "keep-aspect-ratio" : true,
+    "filename" : "redhand.png",
+    "load-async" : true,
+    "reactive" : true,
+
+    "signals" : [
+      { "name" : "motion-event", "handler" : "_pointer_motion_cb" }
+    ],
+
+    "actions" : [
+      {
+        "type" : "ClutterClickAction",
+        "signals" : [
+          { "name" : "clicked", "handler" : "_button_clicked_cb" }
+        ]
+      }
+    ]
+  },
+
+  {
+    "id" : "texture2",
+    "type" : "ClutterTexture",
+    "filename" : "redhand.png",
+    "load-async" : true,
+    "rotation-center-z-gravity" : "CLUTTER_GRAVITY_CENTER",
+    "layout::x-align" : "CLUTTER_BIN_ALIGNMENT_FILL",
+    "layout::y-align" : "CLUTTER_BIN_ALIGNMENT_FILL",
+
+    "effects" : [
+      { "type" : "ClutterColorizeEffect", "tint" : "blue" }
+    ]
+  },
+
+  {
+    "id" : "transitions",
+    "type" : "ClutterState",
+    "duration" : 2000,
+    "state" : "faded-out",
+
+    "transitions" : [
+      {
+        "source" : null,
+        "target" : "faded-out",
+        "keys" : [
+          [ "texture2", "opacity", "linear", 0 ]
+        ]
+      },
+
+      {
+        "source" : null,
+        "target" : "faded-in",
+        "keys" : [
+          [ "texture1", "opacity", "linear", 0 ],
+          [ "texture2", "opacity", "linear", 255 ],
+          [ "texture2", "rotation-angle-z", "linear", 90.0 ]
+        ]
+      }
+    ]
+  }
+
+]