GNOME.org
 

[gnome-devel-docs] demos: Added building, installing and tar.xz info for Python

commit 8e8f4c7fadeebe282870833eb9ba7ea46990bfa0
Author: Tiffany Ann Antopolski <tiffany antopolski gmail com>
Date:   Mon Jun 17 17:07:23 2013 -0400

    demos: Added building, installing and tar.xz info for Python

 platform-demos/C/hello-world.js.page            |  182 +++++++++++++++++++++++
 platform-demos/C/hello-world.py.page            |  162 ++++++++++++++++++++
 platform-demos/C/samples/hello-in-python/README |    1 -
 platform-demos/Makefile.am                      |    7 +
 4 files changed, 351 insertions(+), 1 deletions(-)
---
diff --git a/platform-demos/C/hello-world.js.page b/platform-demos/C/hello-world.js.page
new file mode 100644
index 0000000..9b550c3
--- /dev/null
+++ b/platform-demos/C/hello-world.js.page
@@ -0,0 +1,182 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:xi="http://www.w3.org/2001/XInclude";
+      type="guide" style="task"
+      id="hello-world.js">
+
+  <info>
+  <title type="text">Hello World (JavaScript)</title>
+    <link type="guide" xref="beginner.js#tutorials" group="#first"/>
+
+    <revision version="0.1" date="2013-06-17" status="review"/>
+
+    <credit type="author copyright">
+      <name>Susanna Huhtanen</name>
+      <email>ihmis suski gmail com</email>
+      <years>2012</years>
+    </credit>
+    <credit type="editor">
+      <name>Tiffany Antopolski</name>
+      <email>tiffany antopolski gmail com</email>
+    </credit>
+
+    <desc>A basic "hello, world" application</desc>
+  </info>
+
+  <title>How to build, install and create a <file>tar.xz</file> of a Hello World program</title>
+    <media type="image" mime="image/png" style="floatend" src="media/hello-world.png"/>
+    <synopsis>
+      <p>This tutorial will demonstrate how to:</p>
+      <list style="numbered">
+        <item><p>create a small "Hello, World" application using JavaScript and GTK+</p></item>
+        <item><p>make the <file>.desktop</file> file</p></item>
+        <item><p>how to set up the build system</p></item>
+      </list>
+    </synopsis>
+
+
+
+  <links type="section" />
+
+  <section id="HelloWorld"><title>Create the program</title>
+
+    <links type="section" />
+
+    <section id="script"><title>Script for running the application</title>
+      <p>This needs to be the first line of your script:</p>
+      <code mime="application/javascript"><![CDATA[#!/usr/bin/gjs]]></code>
+      <p>It tells the script to use <link href="https://live.gnome.org/Gjs/";>Gjs</link>. Gjs is a JavaScript 
binding for GNOME.</p>
+    </section>
+
+
+    <section id="imports"><title>Libraries to import</title>
+      <code mime="application/javascript"><![CDATA[const Lang = imports.lang;
+const Gtk = imports.gi.Gtk;]]></code>
+      <p>In order for our script to work with GNOME, we need to import GNOME libraries via GObject 
Introspection. Here we import the language bindings and GTK+, the library which contains the graphical 
widgets used to make GNOME applications.  </p>
+    </section>
+
+    <section id="mainwindow"><title>Creating the main window for the application</title>
+      <code mime="application/javascript"><![CDATA[const Application = new Lang.Class({
+    //A Class requires an explicit Name parameter. This is the Class Name.
+    Name: 'Application',
+
+    //create the application
+    _init: function() {
+        this.application = new Gtk.Application();
+
+       //connect to 'activate' and 'startup' signals to handlers.
+       this.application.connect('activate', Lang.bind(this, this._onActivate));
+       this.application.connect('startup', Lang.bind(this, this._onStartup));
+    },
+
+    //create the UI
+    _buildUI: function() {
+        this._window = new Gtk.ApplicationWindow({ application: this.application,
+                                                   title: "Hello World!" });
+    },
+
+    //handler for 'activate' signal
+    _onActivate: function() {
+        //show the window and all child widgets
+        this._window.show_all();
+    },
+
+    //handler for 'startup' signal
+    _onStartup: function() {
+        this._buildUI();
+    }
+});
+]]></code>
+
+    <p>GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically 
generated along with the window to the "destroy" signal.</p>
+    <p>We can start building our first window. We do this by creating a variable called <var>_window</var> 
and assigning it a new Gtk.ApplicationWindow.</p>
+    <p>We give the window a property called <var>title</var>. The title can be any string you want it to be. 
To be on the safe side, it's best to stick to UTF-8 encoding.</p>
+    <p>Now we have a window which has a title and a working "close" button. Let's add the actual "Hello 
World" text.</p>
+    </section>
+
+    <section id="label"><title>Label for the window</title>
+      <code mime="application/javascript"><![CDATA[// Add a label widget to your window
+this.label = new Gtk.Label({ label: "Hello World" });
+this._window.add(this.label);
+this._window.set_default_size(200, 200);]]></code>
+
+      <p>A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. 
To use it, we create a new variable called label, and assign it a new Gtk.Label. Then we give it properties 
inside the curly braces {}. In this case, we're setting the text that the label will hold. Finally, we create 
and run the application:</p>
+
+      <code mime="application/javascript"><![CDATA[//run the application
+let app = new Application();
+app.application.run(ARGV);]]></code>
+
+      <p>Gtk.ApplicationWindow can only hold one widget at a time. To construct more elaborate programs you 
need to create a holder widget like Gtk.Grid inside the window, and then add all the other widgets to it.</p>
+   </section>
+
+
+    <section id="js"><title>hello-world.js</title>
+      <p>The complete file:</p>
+      <code mime="application/javascript" style="numbered"><xi:include 
href="samples/hello-in-js/hello-world" parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+    <section id="terminal"><title>Running the application from terminal</title>
+      <p>To run this application, first save it as hello-world.js. Then open Terminal, go to the folder 
where your application is stored and run:</p>
+      <screen><output style="prompt">$ </output><input>gjs hello-world.js</input></screen>
+    </section>
+  </section>
+
+
+
+  <section id="desktop.in"><title>The <file>.desktop.in</file> file</title>
+      <p>Running applications from the Terminal is useful at the beginning of the application making 
process. To have fully working <link href= 
"https://developer.gnome.org/integration-guide/stable/mime.html.en";>application integration</link> in GNOME 3 
requires a desktop launcher. For this you need to create a  <file>.desktop</file> file. The 
<file>.desktop</file> file describes the application name, the used icon and various integration bits. A 
deeper insight into the <file>.desktop</file> file can be found <link href= 
"http://developer.gnome.org/desktop-entry-spec/";>here</link>. The <file>.desktop.in</file> file will create 
the <file>.desktop</file>.</p>
+
+  <note>
+       <p>Before continuing, resave <file>hello-world.js</file> as <file>hello-world</file>.  Then run this 
in the command line:</p>
+      <screen><output style="prompt">$ </output><input>chmod +x hello-world</input></screen>
+  </note>
+
+    <p>The example shows you the minimum requirements for a <code>.desktop.in</code> file.</p>
+    <code mime="text/desktop" style="numbered"><xi:include href="samples/hello-in-js/hello-world.desktop.in" 
parse="text"><xi:fallback/></xi:include></code>
+
+    <p>Now let's go through some parts of the <code>.desktop.in</code> file.</p>
+    <terms>
+      <item><title>Name</title><p>The application name.</p></item>
+      <item><title>Comment</title><p>A short description of the application.</p></item>
+      <item><title>Exec</title><p>Specifies a command to execute when you choose the application from the 
menu. In this example exec just tells where to find the <file>hello-world</file> file and the file takes care 
of the rest.</p></item>
+      <item><title>Terminal</title><p>Specifies whether the command in the Exec key runs in a terminal 
window.</p></item>
+    </terms>
+
+    <p>To put your application into the appropriate category, you need to add the necessary categories to 
the Categories line. More information on the different categories can be found in the <link href = 
"http://standards.freedesktop.org/menu-spec/latest/apa.html";>menu specification</link>.</p>
+    <p>In this example we use an existing icon. For a custom icon you need to have a .svg file of your icon, 
stored in <file>/usr/share/icons/hicolor/scalable/apps</file>. Write the name of your icon file to the 
.desktop.in file, on line 7. More information on icons in: <link 
href="https://live.gnome.org/GnomeGoals/AppIcon";>Installing Icons for Themes</link> and <link 
href="http://freedesktop.org/wiki/Specifications/icon-theme-spec";>on freedesktop.org: 
Specifications/icon-theme-spec</link>.</p>
+  </section>
+
+  <section id="autotools"><title>The build system</title>
+    <p>To make your application truly a part of the GNOME 3 system you need to install it with the help of 
autotools. The autotools build will install all the necessary files to all the right places. </p>
+    <p>For this you need to have the following files:</p>
+    <links type="section"/>
+
+      <section id="autogen"><title>autogen.sh</title>
+        <code mime="application/x-shellscript" style="numbered"><xi:include 
href="samples/hello-in-js/autogen.sh" parse="text"><xi:fallback/></xi:include></code>
+
+      <p>After the <file>autogen.sh</file> file is ready and saved, run:</p>
+      <screen><output style="prompt">$ </output><input>chmod +x autogen.sh</input></screen>
+    </section>
+
+
+    <section id="makefile"><title>Makefile.am</title>
+      <code mime="application/x-shellscript" style="numbered"><xi:include 
href="samples/hello-in-js/Makefile.am" parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+
+    <section id="configure"><title>configure.ac</title>
+      <code mime="application/x-shellscript" style="numbered"><xi:include 
href="samples/hello-in-js/configure.ac" parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+
+    <section id="readme"><title>README</title>
+       <p>Information users should read first. This file can be blank.</p>
+
+       <p>When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, 
<file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct 
information and rights, the <file>README</file> file can include the following instructions:</p>
+      <code mime="text/readme" style="numbered"><xi:include href="samples/hello-in-js/README" 
parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+    <!-- TODO: How to make a custom icon with autotools -->
+
+  </section>
+</page>
diff --git a/platform-demos/C/hello-world.py.page b/platform-demos/C/hello-world.py.page
new file mode 100644
index 0000000..d58f564
--- /dev/null
+++ b/platform-demos/C/hello-world.py.page
@@ -0,0 +1,162 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:xi="http://www.w3.org/2001/XInclude";
+      type="guide" style="task"
+      id="hello-world.py">
+
+  <info>
+  <title type="text">Hello World (Python)</title>
+    <link type="guide" xref="py#tutorial" group="#first"/>
+
+    <revision version="0.1" date="2013-06-17" status="review"/>
+
+    <credit type="author copyright">
+      <name>Susanna Huhtanen</name>
+      <email>ihmis suski gmail com</email>
+      <years>2012</years>
+    </credit>
+    <credit type="editor">
+      <name>Tiffany Antopolski</name>
+      <email>tiffany antopolski gmail com</email>
+    </credit>
+
+    <desc>A basic "hello, world" application</desc>
+  </info>
+
+  <title>How to build, install and create a <file>tar.xz</file> of a Hello World program</title>
+    <media type="image" mime="image/png" style="floatend" src="media/hello-world.png"/>
+    <synopsis>
+      <p>This tutorial will demonstrate how to:</p>
+      <list style="numbered">
+        <item><p>create a small "Hello, World" application using Python and GTK+</p></item>
+        <item><p>make the <file>.desktop</file> file</p></item>
+        <item><p>how to set up the build system</p></item>
+      </list>
+    </synopsis>
+
+
+
+  <links type="section" />
+
+  <section id="HelloWorld"><title>Create the program</title>
+
+    <links type="section" />
+
+    <section id="imports"><title>Libraries to import</title>
+      <code mime="text/x-python"><![CDATA[from gi.repository import Gtk
+import sys]]></code>
+      <p>In order for our script to work with GNOME, we need to import GNOME libraries via GObject 
Introspection. Here we import the language bindings and GTK+, the library which contains the graphical 
widgets used to make GNOME applications.</p>
+    </section>
+
+    <section id="mainwindow"><title>Creating the main window for the application</title>
+      <code mime="text/x-python"><![CDATA[class MyWindow(Gtk.ApplicationWindow):
+
+    # constructor for a Gtk.ApplicationWindow
+    def __init__(self, app):
+        Gtk.Window.__init__(self, title="Hello World!", application=app)
+        self.set_default_size(200, 100)
+
+class MyApplication(Gtk.Application):
+    def __init__(self):
+        Gtk.Application.__init__(self)
+
+    def do_activate(self):
+        win = MyWindow(self)
+        win.show_all()
+
+    def do_startup(self):
+        Gtk.Application.do_startup(self)]]></code>
+
+    <p>Gtk.Application initializes GTK+. It also connects the <gui>x</gui> button that's automatically 
generated along with the window to the "destroy" signal.</p>
+    <p>We can start building our first window. We do this by creating a class called <var>MyWindow</var> and 
assigning it a Gtk.ApplicationWindow.</p>
+    <p>We give the window a property called <var>title</var>. The title can be any string you want it to be. 
To be on the safe side, it's best to stick to UTF-8 encoding.</p>
+    <p>Now we have a window which has a title and a working "close" button. Let's add the actual "Hello 
World" text.</p>
+    </section>
+
+    <section id="label"><title>Label for the window</title>
+      <code mime="text/x-python"><![CDATA[# Add a label widget to your window
+
+        # create a label
+        label = Gtk.Label()
+
+        # set the text of the label
+        label.set_text("Hello GNOME!")
+
+        # add the label to the window
+        self.add(label)]]></code>
+
+      <p>A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. 
To use it, we create a variable called <var>label</var> and set the text that the label will hold. Finally, 
we create and run the application:</p>
+
+      <code mime="text/x-python"><![CDATA[#run the application
+
+app = MyApplication()
+exit_status = app.run(sys.argv)
+sys.exit(exit_status)]]></code>
+
+      <p>Gtk.ApplicationWindow can only hold one widget at a time. To construct more elaborate programs you 
need to create a holder widget like Gtk.Grid inside the window, and then add all the other widgets to it.</p>
+   </section>
+
+
+    <section id="py"><title>hello-world.py</title>
+      <p>The complete file:</p>
+      <code mime="text/x-python" style="numbered"><xi:include href="samples/hello-in-python/hello-world.py" 
parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+    <section id="terminal"><title>Running the application from terminal</title>
+      <p>To run this application, first save it as hello-world.py. Then open Terminal, go to the folder 
where your application is stored and run:</p>
+      <screen><output style="prompt">$ </output><input>python hello-world.py</input></screen>
+    </section>
+  </section>
+
+  <section id="desktop.in"><title>The <file>.desktop.in</file> file</title>
+      <p>Running applications from the Terminal is useful at the beginning of the application making 
process. To have fully working <link href= 
"https://developer.gnome.org/integration-guide/stable/mime.html.en";>application integration</link> in GNOME 3 
requires a desktop launcher. For this you need to create a  <file>.desktop</file> file. The 
<file>.desktop</file> file describes the application name, the used icon and various integration bits. A 
deeper insight into the <file>.desktop</file> file can be found <link href= 
"http://developer.gnome.org/desktop-entry-spec/";>here</link>. The <file>.desktop.in</file> file will create 
the <file>.desktop</file>.</p>
+
+    <p>The example shows you the minimum requirements for a <code>.desktop.in</code> file.</p>
+    <code mime="text/desktop" style="numbered"><xi:include 
href="samples/hello-in-python/hello-world.desktop.in" parse="text"><xi:fallback/></xi:include></code>
+
+    <p>Now let's go through some parts of the <code>.desktop.in</code> file.</p>
+    <terms>
+      <item><title>Name</title><p>The application name.</p></item>
+      <item><title>Comment</title><p>A short description of the application.</p></item>
+      <item><title>Exec</title><p>Specifies a command to execute when you choose the application from the 
menu. In this example exec just tells where to find the <file>hello-world</file> file and the file takes care 
of the rest.</p></item>
+      <item><title>Terminal</title><p>Specifies whether the command in the Exec key runs in a terminal 
window.</p></item>
+    </terms>
+
+    <p>To put your application into the appropriate category, you need to add the necessary categories to 
the Categories line. More information on the different categories can be found in the <link href = 
"http://standards.freedesktop.org/menu-spec/latest/apa.html";>menu specification</link>.</p>
+    <p>In this example we use an existing icon. For a custom icon you need to have a .svg file of your icon, 
stored in <file>/usr/share/icons/hicolor/scalable/apps</file>. Write the name of your icon file to the 
.desktop.in file, on line 7. More information on icons in: <link 
href="https://live.gnome.org/GnomeGoals/AppIcon";>Installing Icons for Themes</link> and <link 
href="http://freedesktop.org/wiki/Specifications/icon-theme-spec";>on freedesktop.org: 
Specifications/icon-theme-spec</link>.</p>
+  </section>
+
+  <section id="autotools"><title>The build system</title>
+    <p>To make your application truly a part of the GNOME 3 system you need to install it with the help of 
autotools. The autotools build will install all the necessary files to all the right places. </p>
+    <p>For this you need to have the following files:</p>
+    <links type="section"/>
+
+      <section id="autogen"><title>autogen.sh</title>
+        <code mime="application/x-shellscript" style="numbered"><xi:include 
href="samples/hello-in-python/autogen.sh" parse="text"><xi:fallback/></xi:include></code>
+
+      <p>After the <file>autogen.sh</file> file is ready and saved, run:</p>
+      <screen><output style="prompt">$ </output><input>chmod +x autogen.sh</input></screen>
+    </section>
+
+
+    <section id="makefile"><title>Makefile.am</title>
+      <code mime="application/x-shellscript" style="numbered"><xi:include 
href="samples/hello-in-python/Makefile.am" parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+
+    <section id="configure"><title>configure.ac</title>
+      <code mime="application/x-shellscript" style="numbered"><xi:include 
href="samples/hello-in-python/configure.ac" parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+
+    <section id="readme"><title>README</title>
+       <p>Information users should read first. This file can be blank.</p>
+
+       <p>When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, 
<file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct 
information and rights, the <file>README</file> file can include the following instructions:</p>
+      <code mime="text/readme" style="numbered"><xi:include href="samples/hello-in-python/README" 
parse="text"><xi:fallback/></xi:include></code>
+    </section>
+
+    <!-- TODO: How to make a custom icon with autotools -->
+
+  </section>
+</page>
diff --git a/platform-demos/C/samples/hello-in-python/README b/platform-demos/C/samples/hello-in-python/README
index dba645f..d3ec4f4 100644
--- a/platform-demos/C/samples/hello-in-python/README
+++ b/platform-demos/C/samples/hello-in-python/README
@@ -33,4 +33,3 @@ To create a tarball type:
 make distcheck
 
 This will create hello-world-1.0.tar.xz
-
diff --git a/platform-demos/Makefile.am b/platform-demos/Makefile.am
index 7b25cbb..19377d8 100644
--- a/platform-demos/Makefile.am
+++ b/platform-demos/Makefile.am
@@ -82,6 +82,12 @@ demo_sources =       \
        samples/hello-in-js/hello-world.desktop.in\
        samples/hello-in-js/Makefile.am         \
        samples/hello-in-js/README              \
+       samples/hello-in-python/autogen.sh      \
+       samples/hello-in-python/configure.ac    \
+       samples/hello-in-python/hello-world.py  \
+       samples/hello-in-python/hello-world.desktop.in\
+       samples/hello-in-python/Makefile.am     \
+       samples/hello-in-python/README          \
        samples/image.c                         \
        samples/image.js                        \
        samples/image.py                        \
@@ -328,6 +334,7 @@ HELP_FILES =                                \
        guitar-tuner.vala.page          \
        hellognome.js.page              \
        hello-world.js.page             \
+       hello-world.py.page             \
        image.c.page                    \
        image.js.page                   \
        image.py.page                   \
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]