GNOME.org
 

[gnome-devel-docs] Update 10 minute tutorial/getting started

commit 14d6e12dac22d9a93f190c26958c96e8b4b72ebe
Author: Gordon Hill <caseyweederman gmail com>
Date:   Mon Jun 17 17:16:54 2013 -0400

    Update 10 minute tutorial/getting started

 new-platform-overview/media/glade-new-window.png   |  Bin 0 -> 38536 bytes
 new-platform-overview/media/glade-result.png       |  Bin 0 -> 4536 bytes
 new-platform-overview/media/glade-set-values.png   |  Bin 0 -> 56161 bytes
 new-platform-overview/overview-gettingstarted.page |   54 -----------------
 new-platform-overview/tour-application.page        |   50 ++++++++++++++++
 new-platform-overview/tour-events.page             |   62 ++++++++++++++++++++
 new-platform-overview/tour-get_object.page         |   51 ++++++++++++++++
 new-platform-overview/tour-gjs.page                |   54 +++++++++++++++++
 new-platform-overview/tour-glade.page              |   49 +++++++++++++++
 new-platform-overview/tour-summary.js              |   29 +++++++++
 new-platform-overview/tour-summary.page            |   38 ++++++++++++
 new-platform-overview/tour.page                    |   40 +++++++++++++
 new-platform-overview/tour.xsl                     |   24 ++++++++
 13 files changed, 397 insertions(+), 54 deletions(-)
---
diff --git a/new-platform-overview/media/glade-new-window.png 
b/new-platform-overview/media/glade-new-window.png
new file mode 100644
index 0000000..828d165
Binary files /dev/null and b/new-platform-overview/media/glade-new-window.png differ
diff --git a/new-platform-overview/media/glade-result.png b/new-platform-overview/media/glade-result.png
new file mode 100644
index 0000000..f932c73
Binary files /dev/null and b/new-platform-overview/media/glade-result.png differ
diff --git a/new-platform-overview/media/glade-set-values.png 
b/new-platform-overview/media/glade-set-values.png
new file mode 100644
index 0000000..9ef3b2f
Binary files /dev/null and b/new-platform-overview/media/glade-set-values.png differ
diff --git a/new-platform-overview/tour-application.page b/new-platform-overview/tour-application.page
new file mode 100644
index 0000000..d761dbb
--- /dev/null
+++ b/new-platform-overview/tour-application.page
@@ -0,0 +1,50 @@
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:its="http://www.w3.org/2005/11/its";
+      type="topic" style="task"
+      id="tour-application">
+
+  <info>
+    <link type="next" xref="tour-summary"/>
+    <revision version="0.1" date="2013-06-17" status="stub"/>
+
+    <credit type="author copyright">
+      <name>Ekaterina Gerasimova</name>
+      <email its:translate="no">kittykat3756 gmail com</email>
+      <years>2013</years>
+    </credit>
+    <credit type="author copyright">
+      <name>Gordon Hill</name>
+      <email its:translate="no">caseyweederman gmail com</email>
+      <years>2013</years>
+    </credit>
+
+    <include href="cc-by-sa-3-0.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+
+    <desc>Finish the application and run the script.</desc>
+  </info>
+
+  <title>Run your application</title>
+  <links type="series" style="floatend">
+    <title>Get started with GNOME</title>
+  </links>
+
+  <example>
+    <p>Make the new object <code>app</code> and call the method <code>run</code>
+    to run the application:</p>
+    <code><![CDATA[
+let app = new HelloWorld();
+app.application.run(ARGV);
+]]></code>
+
+    <p>Save the script as <file>helloworld.js</file>, run
+    <cmd>chmod +x helloworld.js</cmd> to mark it executable, and run it with
+    <cmd>./helloworld.js</cmd>.</p>
+  </example>
+
+  <media type="image" src="media/glade-result.png">
+    <p>Screenshot of a basic window.</p>
+  </media>
+  <p>This window is generated from the <app>Glade</app> file and linked to
+  <app>Gtk</app> events. You now have a fully functional Gtk application!</p>
+
+</page>
diff --git a/new-platform-overview/tour-events.page b/new-platform-overview/tour-events.page
new file mode 100644
index 0000000..282adab
--- /dev/null
+++ b/new-platform-overview/tour-events.page
@@ -0,0 +1,62 @@
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:its="http://www.w3.org/2005/11/its";
+      type="topic" style="task"
+      id="tour-events">
+
+  <info>
+    <link type="next" xref="tour-get_object"/>
+    <revision version="0.1" date="2013-06-17" status="stub"/>
+
+    <credit type="author copyright">
+      <name>Ekaterina Gerasimova</name>
+      <email its:translate="no">kittykat3756 gmail com</email>
+      <years>2013</years>
+    </credit>
+    <credit type="author copyright">
+      <name>Gordon Hill</name>
+      <email its:translate="no">caseyweederman gmail com</email>
+      <years>2013</years>
+    </credit>
+
+    <include href="cc-by-sa-3-0.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+
+    <desc>Bind functions to events using Lang.</desc>
+  </info>
+
+  <title>Actions and signals</title>
+
+  <links type="series" style="floatend">
+    <title>Get started with GNOME</title>
+  </links>
+
+  <p>Gtk has a set of predefined events that you can use in your application.</p>
+  <example>
+    <p>Declare <code>HelloWorld</code> as a new <code>Lang</code> class.
+    <app>Gjs</app> requires classes to have the Name property defined.</p>
+
+    <code><![CDATA[
+const HelloWorld = new Lang.Class({
+    Name: 'HelloWorld',
+]]></code>
+
+    <p><code>_init</code> is called when a new instance is created. Create a
+    <code>GtkApplication</code>, then connect <code>activate</code> to the
+    existing Gtk event <code>_onActivate</code> and <code>startup</code> to
+    <code>_onStartup</code>:</p>
+
+    <code><![CDATA[
+    _init: function() {
+        this.application = new Gtk.Application();
+        this.application.connect('activate', Lang.bind(this, this._onActivate));
+        this.application.connect('startup', Lang.bind(this, this._onStartup));
+    },
+]]></code>
+
+    <p>Show the window upon application activation:</p>
+    <code><![CDATA[
+    _onActivate: function(){
+        this._window.show_all();
+    },
+]]></code>
+  </example>
+</page>
diff --git a/new-platform-overview/tour-get_object.page b/new-platform-overview/tour-get_object.page
new file mode 100644
index 0000000..755ec05
--- /dev/null
+++ b/new-platform-overview/tour-get_object.page
@@ -0,0 +1,51 @@
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:its="http://www.w3.org/2005/11/its";
+      type="topic" style="task"
+      id="tour-get_object">
+
+  <info>
+    <link type="next" xref="tour-application"/>
+    <revision version="0.1" date="2013-06-17" status="stub"/>
+
+    <credit type="author copyright">
+      <name>Ekaterina Gerasimova</name>
+      <email its:translate="no">kittykat3756 gmail com</email>
+      <years>2013</years>
+    </credit>
+    <credit type="author copyright">
+      <name>Gordon Hill</name>
+      <email its:translate="no">caseyweederman gmail com</email>
+      <years>2013</years>
+    </credit>
+
+    <include href="cc-by-sa-3-0.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+
+    <desc>Add the window specified in the UI file to the application using
+    GtkBuilder.</desc>
+  </info>
+
+  <title>GtkBuilder</title>
+  <links type="series" style="floatend">
+    <title>Get started with GNOME</title>
+  </links>
+
+  <p>GtkBuilder accepts UI descriptions and turns them into Gtk applications.
+  In this case, the UI description is in the file <file>helloworld.glade</file>
+  and can be read by the <code>get_object()</code> method.</p>
+
+  <example>
+    <p>Load the UI file using <code>GtkBuilder</code> and get the window object
+    using the <gui>Name</gui> (or <gui>ID</gui>) chosen in <app>Glade</app>,
+    and add the window object to the application:</p>
+
+    <code><![CDATA[
+    _onStartup: function() {
+        let builder = new Gtk.Builder();
+        builder.add_from_file('helloworld.glade');
+        this._window = builder.get_object('window1');
+        this.application.add_window(this._window);
+    }
+});
+]]></code>
+  </example>
+</page>
diff --git a/new-platform-overview/tour-gjs.page b/new-platform-overview/tour-gjs.page
new file mode 100644
index 0000000..8fc08a4
--- /dev/null
+++ b/new-platform-overview/tour-gjs.page
@@ -0,0 +1,54 @@
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:its="http://www.w3.org/2005/11/its";
+      type="topic" style="task"
+      id="tour-gjs">
+
+  <info>
+    <link type="next" xref="tour-events"/>
+    <revision version="0.1" date="2013-06-17" status="stub"/>
+
+    <credit type="author copyright">
+      <name>Ekaterina Gerasimova</name>
+      <email its:translate="no">kittykat3756 gmail com</email>
+      <years>2013</years>
+    </credit>
+    <credit type="author copyright">
+      <name>Gordon Hill</name>
+      <email its:translate="no">caseyweederman gmail com</email>
+      <years>2013</years>
+    </credit>
+
+    <include href="cc-by-sa-3-0.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+
+    <desc>Include bindings necessary to run your script.</desc>
+  </info>
+
+  <title>Gjs and Gtk</title>
+  <links type="series" style="floatend">
+    <title>Get started with GNOME</title>
+  </links>
+
+  <p>Gjs is a JavaScript binding for GNOME and can be
+  used to interact with Gtk. Gtk is a toolkit for creating graphical
+  user interfaces.</p>
+  <p>Open a text editor and paste in the lines of code. The complete script is
+  available in the <link xref="tour-summary">Summary</link>.</p>
+  <p>Create an <code>object</code> using your <code>class</code> and call
+  the <code>run()</code> method:</p>
+<example>
+  <p>Call the Gjs JavaScript binding. This instructs the
+  shell to run this script with Gjs.</p>
+
+  <code><![CDATA[
+#!/usr/bin/gjs
+]]></code>
+
+  <p>Import <code>lang</code> for the <code>bind</code> function and
+  <code>gi.Gtk</code> for <code>Gtk</code> functions.</p>
+
+  <code><![CDATA[
+const Lang = imports.lang;
+const Gtk = imports.gi.Gtk;
+]]></code>
+</example>
+</page>
diff --git a/new-platform-overview/tour-glade.page b/new-platform-overview/tour-glade.page
new file mode 100644
index 0000000..45433f7
--- /dev/null
+++ b/new-platform-overview/tour-glade.page
@@ -0,0 +1,49 @@
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:its="http://www.w3.org/2005/11/its";
+      type="topic" style="task"
+      id="tour-glade">
+
+  <info>
+    <link type="next" xref="tour-gjs"/>
+    <revision version="0.1" date="2013-06-17" status="stub"/>
+
+    <credit type="author copyright">
+      <name>Ekaterina Gerasimova</name>
+      <email its:translate="no">kittykat3756 gmail com</email>
+      <years>2013</years>
+    </credit>
+    <credit type="author copyright">
+      <name>Gordon Hill</name>
+      <email its:translate="no">caseyweederman gmail com</email>
+      <years>2013</years>
+    </credit>
+
+    <include href="cc-by-sa-3-0.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+
+    <desc>Use Glade to generate a UI file.</desc>
+  </info>
+
+  <title>Create a user interface</title>
+  <links type="series" style="floatend">
+    <title>Get started with GNOME</title>
+  </links>
+
+  <p>Use <app>Glade</app>, the UI editor for GNOME to create a user interface.
+  <app>Glade</app> produces XML files that describe attributes of an
+  application.</p>
+
+  <p>When creating a UI file using <app>Glade</app>, the <gui>Name</gui> that you
+  specify in <app>Glade</app> is the ID that you will need to use to get the
+  object from the UI file.</p>
+
+  <example>
+    <p>Create a new window, then set <gui>Name</gui> to
+    <code>window</code> and <gui>Window</gui>
+    to <code>Hello World</code>:</p>
+    <media type="image" src="media/glade-set-values.png">
+      <p>Screenshot of value attribution in Glade.</p>
+    </media>
+    <p>Save the file with <guiseq><gui>File</gui><gui>Save As</gui></guiseq>
+    and name it <file>helloworld.glade</file>.</p>
+  </example>
+</page>
diff --git a/new-platform-overview/tour-summary.js b/new-platform-overview/tour-summary.js
new file mode 100644
index 0000000..3423ba3
--- /dev/null
+++ b/new-platform-overview/tour-summary.js
@@ -0,0 +1,29 @@
+
+#!/usr/bin/gjs
+
+const Lang = imports.lang;
+const Gtk = imports.gi.Gtk;
+
+const HelloWorld = new Lang.Class({
+    Name: 'HelloWorld',
+
+    _init: function() {
+        this.application = new Gtk.Application();
+        this.application.connect('activate', Lang.bind(this, this._onActivate));
+        this.application.connect('startup', Lang.bind(this, this._onStartup));
+    },
+
+    _onActivate: function(){
+        this._window.show_all();
+    },
+
+    _onStartup: function() {
+        let builder = new Gtk.Builder();
+        builder.add_from_file('helloworld.glade');
+        this._window = builder.get_object('window1');
+        this.application.add_window(this._window);
+    }
+});
+
+let app = new HelloWorld();
+app.application.run(ARGV);
diff --git a/new-platform-overview/tour-summary.page b/new-platform-overview/tour-summary.page
new file mode 100644
index 0000000..ef5e512
--- /dev/null
+++ b/new-platform-overview/tour-summary.page
@@ -0,0 +1,38 @@
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:its="http://www.w3.org/2005/11/its";
+      type="topic" style="task"
+      id="tour-summary">
+
+  <info>
+    <link type="guide" xref="index"/>
+    <revision version="0.1" date="2013-06-17" status="stub"/>
+
+    <credit type="author copyright">
+      <name>Ekaterina Gerasimova</name>
+      <email its:translate="no">kittykat3756 gmail com</email>
+      <years>2013</years>
+    </credit>
+    <credit type="author copyright">
+      <name>Gordon Hill</name>
+      <email its:translate="no">caseyweederman gmail com</email>
+      <years>2013</years>
+    </credit>
+
+    <include href="cc-by-sa-3-0.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+
+    <desc>An overview of the code and relevant links.</desc>
+
+  </info>
+
+  <title>Summary</title>
+  <links type="series" style="floatend">
+    <title>Get started with GNOME</title>
+  </links>
+
+  <p>Here is how the examples fit together:</p>
+  <code><include xmlns="http://www.w3.org/2001/XInclude"; href="tour-summary.js" parse="text"/></code>
+  <p>For more information and tutorials about these technologies, visit their websites:</p>
+  <p><link href="http://glade.gnome.org/";>Glade</link></p>
+  <p><link href="http://www.gtk.org/";>Gtk</link></p>
+  <p><link href="https://live.gnome.org/Gjs";>Gjs</link></p>
+</page>
diff --git a/new-platform-overview/tour.page b/new-platform-overview/tour.page
new file mode 100644
index 0000000..a57c97f
--- /dev/null
+++ b/new-platform-overview/tour.page
@@ -0,0 +1,40 @@
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:its="http://www.w3.org/2005/11/its";
+      type="topic" style="task"
+      id="tour">
+
+  <info>
+    <link type="guide" xref="index" group="#first" />
+    <link type="next" xref="tour-glade"/>
+    <revision version="0.1" date="2013-06-17" status="stub"/>
+
+    <credit type="author copyright">
+      <name>Ekaterina Gerasimova</name>
+      <email its:translate="no">kittykat3756 gmail com</email>
+      <years>2013</years>
+    </credit>
+    <credit type="author copyright">
+      <name>Gordon Hill</name>
+      <email its:translate="no">caseyweederman gmail com</email>
+      <years>2013</years>
+    </credit>
+
+    <include href="cc-by-sa-3-0.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+
+    <desc>Get your GtkApplication started and create a UI using Glade.</desc>
+  </info>
+
+  <title>Get started</title>
+
+  <links type="series" style="floatend">
+    <title>Get started with GNOME</title>
+  </links>
+
+  <p>User interface (UI) can be constructed with code or created in
+  <app>Glade</app>, the UI editor for GNOME. <app>Glade</app> produces XML
+  files that describe attributes of an application.</p><p>You will generate a
+  GtkBuilder file in <app>Glade</app> and access and display a window based on
+  the contents of that file with a Gjs script. The script is examined in
+  multiple parts and included in full in the summary.</p>
+
+</page>
diff --git a/new-platform-overview/tour.xsl b/new-platform-overview/tour.xsl
new file mode 100644
index 0000000..4093f4d
--- /dev/null
+++ b/new-platform-overview/tour.xsl
@@ -0,0 +1,24 @@
+<!--
+This will collect all of the code snippets from the tour and output them to tour-summary.js which is 
included in tour-summary.page.
+Run with this line:
+xsltproc -o tour-summary.js tour.xsl tour-intro.page
+-->
+<xsl:stylesheet
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
+  xmlns:mal="http://projectmallard.org/1.0/";
+  version="1.0">
+
+<xsl:output method="text"/>
+
+<xsl:template match="/mal:page">
+  <xsl:variable name="next" select="mal:info/mal:link[ type='next']"/>
+  <xsl:if test="$next">
+    <xsl:for-each select="mal:code | .//mal:section/mal:code | .//mal:listing/mal:code">
+      <xsl:value-of select="."/>
+    </xsl:for-each>
+    <xsl:apply-templates select="document(concat($next/@xref, '.page'))/mal:page"/>
+  </xsl:if>
+</xsl:template>
+
+</xsl:stylesheet>
+
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]