[gnome-devel-docs] Tutorials: Editing JS entry and helloWorld pages
- From: Susanna Huhtanen <susannah src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] Tutorials: Editing JS entry and helloWorld pages
- Date: Mon, 20 Feb 2012 09:50:57 +0000 (UTC)
commit 1f5bd8b07e9d430298cff2d75b513e1bbd8936f9
Author: Susanna Huhtanen <ihmis suski gmail com>
Date: Mon Feb 20 11:49:58 2012 +0200
Tutorials: Editing JS entry and helloWorld pages
platform-demos/C/beginner.js.page | 2 +-
platform-demos/C/entry.js.page | 28 ++++++++++++++++------------
platform-demos/C/helloWorld.js.page | 12 +++++-------
platform-demos/C/image-viewer.js.page | 2 +-
platform-demos/C/media/entry.png | Bin 15102 -> 12378 bytes
platform-demos/Makefile.am | 4 ++++
6 files changed, 27 insertions(+), 21 deletions(-)
---
diff --git a/platform-demos/C/beginner.js.page b/platform-demos/C/beginner.js.page
index dbb74de..50395ea 100644
--- a/platform-demos/C/beginner.js.page
+++ b/platform-demos/C/beginner.js.page
@@ -15,7 +15,7 @@
</info>
<title>0 Beginner's Tutorials</title>
- <p>Here be dragons!</p>
+ <p></p>
<section id="hello_world">
<title>Hello World</title>
diff --git a/platform-demos/C/entry.js.page b/platform-demos/C/entry.js.page
index c3479d8..269fd52 100644
--- a/platform-demos/C/entry.js.page
+++ b/platform-demos/C/entry.js.page
@@ -11,32 +11,39 @@
<years>2012</years>
</credit>
- <desc></desc>
+ <desc>How to make an entry widget and connect its contents to a label</desc>
</info>
- <title>Entry</title>
+ <title>Entry widget</title>
<media type="image" mime="image/png" src="media/entry.png"/>
- <p>This an entry widget</p>
+ <p>This an entry widget. An entry widget is a container that you can type in to. </p>
<code mime="text/javascript" style="numbered"><![CDATA[
#!/usr/bin/gjs
Gtk = imports.gi.Gtk;
Gtk.init(null, 0);
+
myW = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
-myW.title = "TestForm";
+myW.title = "Entry";
myW.connect("destroy", function(){Gtk.main_quit()});
grid = new Gtk.Grid();
myW.add(grid);
+//create the entry widget
var entry = new Gtk.Entry({text: "Write something here"});
entry.set_width_chars(50);
-var label = new Gtk.Label({label: "This is an etry widget: "});
-var connectionbutton = new Gtk.Button({label: "It's contents are connected to the label after this button"});
+//create the first label
+var label = new Gtk.Label({label: "Entry widget: "});
+//create the button for connecting
+var connectionbutton = new Gtk.Button({label: "Click to update label"});
+//create the label for updating the entrys information
this.resultlabel = new Gtk.Label({
- label: "The contents of the entry will be here after you click the button"
+ label: "Entry contents go here after the click"
});
+//create a connection between the button and the result label
connectionbutton.connect("clicked", function(widget, event) {
+ //getting the text from the entry widget and updating the label
var whatWasTyped = entry.get_text();
this.resultlabel.set_text(whatWasTyped);
});
@@ -44,10 +51,7 @@ connectionbutton.connect("clicked", function(widget, event) {
grid.attach(label, 1, 1, 1, 1);
grid.attach_next_to(entry,label,1,1,1);
grid.attach_next_to(connectionbutton,label,3,1,1);
-grid.attach_next_to(resultlabel,entry,3,1,1);
-
-myW.show_all();
-Gtk.main();
-]]></code>
+grid.attach_next_to(resultlabel,entry,3,1,1);myW.show_all();
+Gtk.main();]]></code>
</page>
diff --git a/platform-demos/C/helloWorld.js.page b/platform-demos/C/helloWorld.js.page
index c5e5046..948578f 100644
--- a/platform-demos/C/helloWorld.js.page
+++ b/platform-demos/C/helloWorld.js.page
@@ -16,28 +16,26 @@
<title>Hello World</title>
<synopsis>
- <p>In this guide we'll construct a small program, Hello World, using JavaScript and GTK+. To do and run all the code examples yourself, you need an editor to write code in, terminal and GNOME 3. or higher installed into your computer.</p>
+ <p>In this tutorial we'll construct a small program, Hello World, using JavaScript and GTK+. To do and run all the code examples yourself, you need an editor to write code in, terminal and GNOME 3. or higher installed into your computer.</p>
</synopsis>
<section id=".js">
<title>HelloWorld.js</title>
- <p>This a basic Hello World done with JavaScript. If you are unfamiliar with JavaScript, read <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> or your preferred guide to JavaScript. </p>
+ <p>This a basic Hello World done with JavaScript. If you are unfamiliar with JavaScript, read <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> or your preferred guide to JavaScript. </p>
<code mime="text/javascript" style="numbered"><![CDATA[
#!/usr/bin/gjs
//The previous line is a hash bang tells how to run the script.
// Note that the script has to be executable (run in terminal in the right folder: chmod +x scriptname)
-var Gtk, mywindow, label;
-
-Gtk = imports.gi.Gtk;
+var Gtk = imports.gi.Gtk;
// Initialize the gtk
Gtk.init(null, 0);
//create your window, name it and connect the x to quit function. Remember that window is a taken word
-mywindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
+var mywindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
mywindow.title = "Hello World!";
mywindow.connect("destroy", function(){Gtk.main_quit()});
//Set some text to your window
-label = new Gtk.Label({label: "Hello World"});
+var label = new Gtk.Label({label: "Hello World"});
mywindow.add(label);
//show everything you have done
label.show();
diff --git a/platform-demos/C/image-viewer.js.page b/platform-demos/C/image-viewer.js.page
index 2466c5f..399c771 100644
--- a/platform-demos/C/image-viewer.js.page
+++ b/platform-demos/C/image-viewer.js.page
@@ -20,7 +20,7 @@
</info>
-<title>Image Viewer</title>
+<title>1 Image Viewer</title>
<synopsis>
<p>In this tutorial, we're going to write a very simple GTK application that loads and displays an image file. You will learn how to:</p>
diff --git a/platform-demos/C/media/entry.png b/platform-demos/C/media/entry.png
index 9d93032..824a4e2 100644
Binary files a/platform-demos/C/media/entry.png and b/platform-demos/C/media/entry.png differ
diff --git a/platform-demos/Makefile.am b/platform-demos/Makefile.am
index 39a4561..ded7ea0 100644
--- a/platform-demos/Makefile.am
+++ b/platform-demos/Makefile.am
@@ -24,6 +24,7 @@ demo_sources = \
DOC_FIGURES = \
media/ubuntu.png \
+ media/entry.png \
media/fedora.png \
media/opensuse.png \
media/guitar-tuner.png \
@@ -42,12 +43,15 @@ DOC_PAGES = \
beginner.vala.page \
bug-filing.page \
documentation.page \
+ beginner.js.page \
+ entry.js.page\
getting-ready.page \
getting-started.vala.page \
guitar-tuner.c.page \
guitar-tuner.cpp.page \
guitar-tuner.py.page \
guitar-tuner.vala.page \
+ helloWorld.js.page \
image-viewer.c.page \
image-viewer.cpp.page \
image-viewer.js.page \
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]