[gnome-devel-docs] Tutorials: Editing JS entry and helloWorld pages



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]