seed r576 - trunk/doc/tutorial-standalone



Author: hortont
Date: Tue Dec 30 05:26:02 2008
New Revision: 576
URL: http://svn.gnome.org/viewvc/seed?rev=576&view=rev

Log:
Work work work on tutorial.


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 05:26:02 2008
@@ -245,36 +245,37 @@
 <div style="text-align: center;"><img src="2.png" alt="GTK Window with buttons and text entry field" /></div>
 <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 WebKit web view below our toolbar, first. Create the browser at the top of the <code>create_ui()</code> function (we'll also need to pass the browser as the <code>this</code> object for our button callbacks, so it needs to already be created), and pack it into the <code>main_ui</code> VBox <em>after</em> you pack the toolbar. Here's an updated version of our <code>create_ui()</code> function:</p>
+<p>It's finally time to start displaying some web pages with our little browser! Let's create and pack a WebKit web view 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. Here's an early version of our new <code>BrowserView</code> subclass:</p>
 <pre class="sh_javascript">
-function create_ui()
-{
-    var main_ui = new Gtk.VBox();
-    var toolbar = new Gtk.HBox();
-
-    <span class="changed">var browser = new WebKit.WebView();</span>
-
-    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 url_entry = new GTK.Entry();
-
-    back_button.signal.clicked.connect(back<span class="changed">, browser</span>);
-    forward_button.signal.clicked.connect(forward<span class="changed">, browser</span>);
-    refresh_button.signal.clicked.connect(refresh<span class="changed">, browser</span>);
-
-    url_entry.signal.activate.connect(browse<span class="changed">, browser</span>);
-
-    toolbar.pack_start(back_button);
-    toolbar.pack_start(forward_button);
-    toolbar.pack_start(refresh_button);
-    toolbar.pack_start(url_entry, true, true);
-
-    main_ui.pack_start(toolbar);
-    <span class="changed">main_ui.pack_start(browser, true, true);</span>
-    return main_ui;
-}
+BrowserView = new GType({
+    parent: WebKit.WebView.type,
+    name: "BrowserView",
+    instance_init: function (klass)
+    {
+        // Private
+        var update_url = function (web_view, web_frame)
+        {
+            var toolbar = browser.get_toolbar();
+
+            toolbar.set_url(web_frame.get_uri());
+            toolbar.set_can_go_back(web_view.can_go_back());
+            toolbar.set_can_go_forward(web_view.can_go_forward());
+        };
+
+        // Public
+        this.browse = function (url)
+        {
+            if(url.search("://") < 0)
+                url = "http://"; + url;
+
+            this.open(url);
+        };
+
+        // Implementation
+        this.set_scroll_adjustments(null, null);
+        this.signal.load_committed.connect(update_url);
+    }
+});
 </pre>
 <p>Also, remember that we need to import a namespace before its functions are available to us! So, go back to the top of the file and import "WebKit", just after you import "GTK". One final thing, before you again try to run your browser: we haven't yet specified a 'recommended' size for our window - let's go ahead and do that (if we didn't do so, the WebKit view would have no space to fill!). Just after you create the GTK.Window(), add:</p>
 <pre class="sh_javascript">



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]