GNOME.org
 

seed r574 - trunk/doc/tutorial-standalone

Author: hortont
Date: Mon Dec 29 11:26:31 2008
New Revision: 574
URL: http://svn.gnome.org/viewvc/seed?rev=574&view=rev

Log:
The whole first part of the tutorial is done.


Modified:
   trunk/doc/tutorial-standalone/packing.png
   trunk/doc/tutorial-standalone/packing.svg
   trunk/doc/tutorial-standalone/tutorial.html

Modified: trunk/doc/tutorial-standalone/packing.png
==============================================================================
Binary files. No diff available.

Modified: trunk/doc/tutorial-standalone/packing.svg
==============================================================================
--- trunk/doc/tutorial-standalone/packing.svg	(original)
+++ trunk/doc/tutorial-standalone/packing.svg	Mon Dec 29 11:26:31 2008
@@ -15,7 +15,7 @@
    inkscape:version="0.46"
    sodipodi:docname="packing.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
-   inkscape:export-filename="/home/hortont/seed/doc/tutorial-standalone/packing.png"
+   inkscape:export-filename="/Users/hortont/Desktop/packing.png"
    inkscape:export-xdpi="51.161964"
    inkscape:export-ydpi="51.161964">
   <defs
@@ -64,16 +64,16 @@
      objecttolerance="10"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="0.558743"
-     inkscape:cx="49.895553"
-     inkscape:cy="526.18109"
+     inkscape:zoom="0.83111488"
+     inkscape:cx="375.84363"
+     inkscape:cy="583.29262"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
-     inkscape:window-width="1440"
-     inkscape:window-height="817"
+     inkscape:window-width="1385"
+     inkscape:window-height="856"
      inkscape:window-x="0"
-     inkscape:window-y="33" />
+     inkscape:window-y="22" />
   <metadata
      id="metadata7">
     <rdf:RDF>
@@ -108,7 +108,7 @@
        rx="20"
        ry="19.999996" />
     <rect
-       style="opacity:1;fill:#000000;fill-opacity:0.68627453;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="opacity:1;fill:#000000;fill-opacity:0.39215687;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect3157"
        width="95"
        height="94.999992"
@@ -117,7 +117,7 @@
        rx="20"
        ry="19.999998" />
     <rect
-       style="opacity:1;fill:#000000;fill-opacity:0.68627453;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="opacity:1;fill:#000000;fill-opacity:0.39215687;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect3159"
        width="95"
        height="94.999992"
@@ -126,7 +126,7 @@
        rx="20"
        ry="19.999998" />
     <rect
-       style="opacity:1;fill:#000000;fill-opacity:0.68627453;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="opacity:1;fill:#000000;fill-opacity:0.39215687;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect3161"
        width="198.80443"
        height="94.999992"
@@ -135,7 +135,7 @@
        rx="20"
        ry="19.999998" />
     <rect
-       style="opacity:1;fill:#000000;fill-opacity:0.68627453;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="opacity:1;fill:#000000;fill-opacity:0.39215687;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect3187"
        width="469.05389"
        height="461.89499"
@@ -147,12 +147,12 @@
        xml:space="preserve"
        style="font-size:40px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
        x="229.08563"
-       y="105.3839"
+       y="113.3839"
        id="text3189"><tspan
          sodipodi:role="line"
          id="tspan3191"
          x="229.08563"
-         y="105.3839">VBox</tspan></text>
+         y="113.3839">VBox</tspan></text>
     <text
        xml:space="preserve"
        style="font-size:40px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
@@ -165,11 +165,34 @@
          y="107.3839">HBox</tspan></text>
     <path
        style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-end:url(#TriangleOutM);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="M 282.77759,110.54282 L 264.88028,173.18343"
-       id="path3197" />
+       d="M 287.52634,120.16844 L 287.67708,173.18343"
+       id="path3197"
+       sodipodi:nodetypes="cc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;marker-start:url(#TriangleInM);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="M 465.33022,201.60887 L 479.64807,113.91202"
-       id="path3199" />
+       d="M 465.33022,201.60887 L 466.00643,113.91202"
+       id="path3199"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:40px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
+       x="282.19754"
+       y="610.64508"
+       id="text3177"><tspan
+         sodipodi:role="line"
+         id="tspan3179"
+         x="282.19754"
+         y="610.64508">WebView</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:40px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
+       x="442.8045"
+       y="302.85992"
+       id="text3181"><tspan
+         sodipodi:role="line"
+         id="tspan3183"
+         x="442.8045"
+         y="302.85992"
+         style="font-weight:normal;-inkscape-font-specification:Bitstream Vera Sans">Entry</tspan></text>
   </g>
 </svg>

Modified: trunk/doc/tutorial-standalone/tutorial.html
==============================================================================
--- trunk/doc/tutorial-standalone/tutorial.html	(original)
+++ trunk/doc/tutorial-standalone/tutorial.html	Mon Dec 29 11:26:31 2008
@@ -179,34 +179,61 @@
     }
 });
 </pre>
-<p>There are a few things in the snippet above which you probably haven't seen before (unless you've used GTK in another language). Firstly, the Gtk.Entry widget is a simple text entry field, like you would expect in a browser's URL bar. Secondly, you'll notice the use of the GTK.HBox widget, and its <code>pack_start()</code> function. These serve as the foundation of GUI layout in GTK: a window is subdivided into boxes, which 'pack' widgets in a particular direction (HBoxes pack horizontally, VBoxes pack vertically, as expected). We use a HBox, since we want our toolbar arranged horizontally. <code>pack_start()</code> adds a widget to a Box; widgets are packed in the order they're added. There are optional arguments, which are addressed in more depth in the <a href="http://library.gnome.org/devel/gtk/2.14/GtkBox.html";>GtkBox documentation</a>, which allow you to force widgets to expand into the usable space (the second and third arguments used when packing <code>url_entry</
 code> above serve this purpose).</p>
-<p>We also need a bunch of callbacks (for all three buttons, and for when you're done entering text in the URL bar). We'll make them just print the function they're supposed to perform, for now, since we don't have a WebKit view to operate on yet.</p>
+<p>There are a few things in the snippet above which you probably haven't seen before (unless you've used GTK in another language). Firstly, the Gtk.Entry widget is a simple text entry field, like you would expect in a browser's URL bar. Secondly, you'll notice the use of the Gtk.HBox widget's <code>pack_start()</code> function. This serves as the foundation of GUI layout in GTK: a window is subdivided into boxes, which 'pack' widgets in a particular direction (HBoxes pack horizontally, VBoxes pack vertically, as expected). We use a HBox, since we want our toolbar arranged horizontally. <code>pack_start()</code> adds a widget to a Box; widgets are packed in the order they're added. There are optional arguments, which are addressed in more depth in the <a href="http://library.gnome.org/devel/gtk/2.14/GtkBox.html";>GtkBox documentation</a>, which allow you to force widgets to expand into the usable space (the second and third arguments used when packing <code>url_bar</code> abo
 ve serve this purpose).</p>
+<p>To try and get a more visual feel of packing, let's take a look at the Box layout for our browser:</p>
+<div style="text-align: center;"><img src="packing.png" alt="Packing Layout"/></div>
+<div class="section">Callbacks Galore</div>
+<p>We also need a bunch of callbacks (for all three buttons, and for when you're done entering text in the URL bar). We'll make them just print the function they're supposed to perform, for now, since we don't have a WebKit view to operate on yet. Let's make them private members of the BrowserToolbar class, and connect them to the appropriate signals:</p>
 <pre class="sh_javascript">
-function forward(button)
-{
-    Seed.print("forward");
-}
-
-function back(button)
-{
-    Seed.print("back");
-}
-
-function refresh(button)
-{
-    Seed.print("refresh");
-}
+BrowserToolbar = new GType({
+    parent: Gtk.HBox.type,
+    name: "BrowserToolbar",
+    instance_init: function (klass)
+    {
+        // Private
+        var url_bar = new Gtk.Entry();
 
-function browse(button)
-{
-    Seed.print("browser");
-}
+        var back_button = new Gtk.ToolButton({stock_id:"gtk-go-back"});
+        var forward_button = new Gtk.ToolButton({stock_id:"gtk-go-forward"});
+        var refresh_button = new Gtk.ToolButton({stock_id:"gtk-refresh"});
+
+        var back = function ()
+        {
+            Seed.print("Go Back");
+        };
+
+        var forward = function ()
+        {
+            Seed.print("Go Forward");
+        };
+
+        var refresh = function ()
+        {
+            Seed.print("Refresh");
+        };
+
+        var browse = function (url)
+        {
+            Seed.print("Navigate to: " + url.text);
+        };
+
+        // Implementation
+        back_button.signal.clicked.connect(back);
+        forward_button.signal.clicked.connect(forward);
+        refresh_button.signal.clicked.connect(refresh);
+        url_bar.signal.activate.connect(browse);
+
+        this.pack_start(back_button);
+        this.pack_start(forward_button);
+        this.pack_start(refresh_button);
+        this.pack_start(url_bar, true, true);
+    }
+});
 </pre>
-<p>You'll notice that <code>create_ui()</code> returns an VBox with all of the widgets in it - thinking ahead, we're packing the toolbar HBox into a VBox (eventually, we'll add the WebKit view, too!). In fact, to try and get a more visual feel of packing, let's take a look at the Box layout for our browser:</p>
-<div style="text-align: center;"><img src="packing.png" alt="Packing Layout"/></div>
-<p>Right now, nothing's calling <code>create_ui()</code>, so you won't see the toolbar drawn. To remedy this, before <code>window.show_all()</code>, add a line to pack the toolbar:</p>
+<p>You'll notice that right now, nothing's creating a BrowserToolbar, so if you execute your application, you won't see the toolbar drawn. To remedy this, before <code>window.show_all()</code>, add lines to create and pack the toolbar:</p>
 <pre class="sh_javascript">
-window.add(create_ui());
+toolbar = new BrowserToolbar();
+window.add(toolbar);
 </pre>
 <p>Your code should be in a runnable state now; take a minute to try it out, stand back, and admire what you've learned:</p>
 <div style="text-align: center;"><img src="2.png" alt="GTK Window with buttons and text entry field" /></div>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]