GNOME.org
 

seed r579 - trunk/doc/tutorial-standalone

Author: hortont
Date: Tue Dec 30 08:15:07 2008
New Revision: 579
URL: http://svn.gnome.org/viewvc/seed?rev=579&view=rev

Log:
Tutorial maybe done?



Modified:
   trunk/doc/tutorial-standalone/tutorial.html

Modified: trunk/doc/tutorial-standalone/tutorial.html
==============================================================================
--- trunk/doc/tutorial-standalone/tutorial.html	(original)
+++ trunk/doc/tutorial-standalone/tutorial.html	Tue Dec 30 08:15:07 2008
@@ -190,8 +190,7 @@
 <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">
-<span class="unchanged">
-BrowserToolbar = new GType({
+<span class="unchanged">BrowserToolbar = new GType({
     parent: Gtk.HBox.type,
     name: "BrowserToolbar",
     instance_init: function (klass)
@@ -246,7 +245,8 @@
 <p>If, for some reason, something doesn't work, compare your code to <a href="1.js">the tutorial version</a>.</p>
 <div class="section">Adding WebKit</div>
 <p>It's finally time to start displaying some web pages with our little browser! Let's create and pack a <code>WebKit.WebView</code> below our toolbar, first. We should make a WebView subclass to use, to initialize some settings and provide an encapsulated interface to our browser view.</p>
-<p>A quick note about WebKit: if you omit the protocol part of a URL (e.g., http://), WebKit won't even bother to try to figure it out - so make sure you specify it! We'll add a <code>browse</code> function to our subclass, as well as a callback when the WebView's URL changes, so we can update the URL bar. To get around this shortcoming, we'll use JavaScript's string search function to see if a protocol has been specified, and, if it hasn't, we'll assume it's "<code>http://</code>":</p>
+<p>A quick note about WebKit: if you omit the protocol part of a URL (e.g., http://), WebKit won't even bother to try to figure it out - so make sure you specify it! We'll add a <code>browse</code> function to our subclass, as well as a callback when the WebView's URL changes, so we can update the URL bar. To get around this shortcoming, we'll use JavaScript's string search function to see if a protocol has been specified, and, if it hasn't, we'll assume it's "<code>http://</code>".</p>
+<p>Poking around in the <a href="http://svn.webkit.org/repository/webkit/trunk/WebKit/gtk/webkit/webkitwebview.h";>WebKit documentation</a> (the WebKit team is a bit behind on documentation, so all we have to work with is header files), we find that the <code>open()</code> function on a WebView allows you to navigate to a particular page. We'll use this in our implementation of the <code>WebView.browse()</code> function below.</p>
 <p>Here's an early version of our new <code>BrowserView</code> subclass:</p>
 <pre class="sh_javascript">
 BrowserView = new GType({
@@ -284,11 +284,10 @@
 <pre class="sh_javascript">
 window.resize(600,600);
 </pre>
-<div class="section">Pulling bits together</div>
-<p>As you can see in the last bit of code, we have a few more functions to add to our BrowserToolbar class. Functions to allow toggling the 'clickable' state of the back and forward buttons, and a function to update the URL bar when a link is clicked:</p>
+<div class="section">Pulling it all together...</div>
+<p>As you can see in the last bit of code, we have a few more functions to add to our BrowserToolbar class. Functions to allow toggling the 'clickable' state of the back and forward buttons, and a function to update the URL bar when a link is clicked. We will also update the button callbacks with what we find while again browsing webkitwebview.h: reload(), go_forward(), and go_back().</p>
 <pre class="sh_javascript">
-<span class="unchanged">
-BrowserToolbar = new GType({
+<span class="unchanged">BrowserToolbar = new GType({
     parent: Gtk.HBox.type,
     name: "BrowserToolbar",
     instance_init: function (klass)
@@ -349,56 +348,55 @@
     }
 });
 </pre>
-<p>Now, fire up your browser! Hopefully, you'll see a nice blank WebKit view, like below. If you don't, take a peek at <a href="2.js">our version</a>.</p>
-<div style="text-align: center;"><img src="3.png" alt="GTK Window with toolbar and empty browser view" /></div>
-<p>That's really not a very interesting browser, at all - nothing works yet, and there's no way to navigate! Still, we're almost done.</p>
-<div class="section">Tabbing our Browser</div>
-<p>Poking around in the <a href="http://svn.webkit.org/repository/webkit/trunk/WebKit/gtk/webkit/webkitwebview.h";>WebKit documentation</a> (the WebKit team is a bit behind on documentation, so all we have to work with is header files), we find that the <code>open()</code> function on a WebView allows you to navigate to a particular page. Just after you create the WebView, have it navigate to your favorite page:</p>
-<pre class="sh_javascript">
-browser.open("http://www.gnome.org";);
-</pre>
+<p>One last thing! We need a <code>Browser</code> class, a subclass of <code>Gtk.VBox</code>, to contain a BrowserToolbar and BrowserView, and to provide functions from which to access these widgets. We'll also set up the <code>Gtk.ScrolledWindow</code> which we discussed earlier:</p>
 <pre class="sh_javascript">
-function browse(url)
-{
-    if(url.text.search("://") < 0)
+Browser = new GType({
+    parent: Gtk.VBox.type,
+    name: "Browser",
+    instance_init: function (klass)
     {
-        url.text = "http://"; + url.text;
-    }
+        // Private
+        var toolbar = new BrowserToolbar();
+        var web_view = new BrowserView();
+        var scroll_view = new Gtk.ScrolledWindow();
 
-    this.open(url.text);
-}
-</pre>
-<p>Almost done! Next we need to implement the button callbacks. Again browsing webkitwebview.h, we find reload(), go_forward(), and go_back() - the last functions needed to finish our browser! Remembering that the browser view is passed as '<code>this</code>' to the functions, go ahead and fill them in:</p>
-<pre class="sh_javascript">
-function forward(button)
-{
-    this.go_forward();
-}
+        // Public
+        this.get_toolbar = function ()
+        {
+            return toolbar;
+        };
 
-function back(button)
-{
-    this.go_back();
-}
+        this.get_web_view = function ()
+        {
+            return web_view;
+        };
 
-function refresh(button)
-{
-    this.reload();
-}
+        // Implementation
+        scroll_view.smooth_scroll = true;
+        scroll_view.add(web_view);
+        scroll_view.set_policy(Gtk.PolicyType.Automatic,
+                               Gtk.PolicyType.Automatic);
+
+        this.pack_start(toolbar);
+        this.pack_start(scroll_view, true, true);
+        this.show_all();
+    }
+});
 </pre>
-<p>Our final modification will listen to a WebKit signal, and adjust the URL bar when you click a link. The aforementioned webkitwebview.h header file provides us with the name of the signal (load_committed). This signal is different than those we've worked with in the past, as it provides two arguments: the WebView, and a WebFrame. The distinction is important in WebKit-land, but we'll ignore it, noting only that (from the headers, again - this time, webkitwebframe.h) there is a WebFrame get_uri() function which provides the current URL of the frame. Let's first add our signal connection code. Make sure to connect to load_committed <em>after</em> you've created both the WebView and the URL entry field, as the signal is <em>on</em> the browser view, and we want to pass the URL entry field as its <code>this</code> object:</p>
+<p>One final thing: we need to create a <code>Browser</code> object, and add it to the window, now, instead of a <code>BrowserToolbar</code>. The <code>Browser</code> object will contain a <code>BrowserToolbar</code> <i>and</i> a <code>BrowserView</code>. So, change the section near the bottom of the file from:</p>
 <pre class="sh_javascript">
-    browser.signal.load_committed.connect(url_changed, url_entry);
+toolbar = new BrowserToolbar();
+window.add(toolbar);
 </pre>
-<p>Next, the callback, <code>url_changed</code>. Remember that we're given two arguments, and that <code>this</code> is the URL entry field:</p>
+<p>into:</p>
 <pre class="sh_javascript">
-function url_changed(browser, frame)
-{
-    this.text = frame.get_uri();
-}
+browser = new Browser();
+browser.get_web_view().browse(home_page);
+window.add(browser);
 </pre>
-<p>If all goes well, your browser should now be in a working state, looking much like the following:</p>
+<p>You'll notice we navigate to <code>home_page</code>. Assign <code>home_page</code> to your favorite web site at the top of the file; perhaps even make a section at the top of the file of browser settings (I'm sure you can think of other things to implement as settings!)</p>
+<p>If all goes well, your browser should now be in a working state. Start it up - it ought to look much like the following:</p>
 <div style="text-align: center;"><img src="4.png" alt="GTK Window with toolbar and browser view at GNOME.org" /></div>
-<p>You will probably notice, at some point, that opening content in a new tab or new window doesn't work in your browser. This is, in fact, due to an open WebKit bug, <a href="http://bugs.webkit.org/show_bug.cgi?id=19130";>#19130</a>. Once this bug is fixed, the straightforward design of your browser will make it <em>simple</em> to add support for multiple windows.</p>
-<p>The final version of the tutorial's source code is available if you're having trouble; if, however, you made easy work of the tutorial, you should consider making some improvements to your browser: change the window title when the web page title changes (look at the title_changed signal!); add tabs (GTKNotebook is probably what you're looking for); bookmarks are often useful!; perhaps a status menu? Or, go ahead and write your own application in Seed!</p>
+<p>The <a href="2.js">final version</a> of the tutorial's source code is available if you're having trouble; if, however, you made easy work of the tutorial, you should consider making some improvements to your browser: change the window title when the web page title changes (look at the title_changed signal!); <a href="3.js">add tabs</a> (GtkNotebook is probably what you're looking for); bookmarks are often useful!; perhaps a status menu? Or, go ahead and write your own application in Seed!</p>
 </body>
 </html>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]