Python GTK Webkit

Python GTK Webkit

README

This is how to create a web browser engine application using one of the powerfull and understandable libraries WebKit used by Safari web browser and in a few range by Google Chrome (I personally prefer the Mozilla project, but XUL engine it’s very difficult to understand for newbies, so that I decided to use PyWebkitGTK (by now).

Python is an interactive high-level object-oriented language that includes an extensive class library with lots of goodies for network programming, system administration, sounds and graphics. The GTK+ graphical user interface library is a multi-platform toolkit for creating graphical user interfaces. Offering a complete set of widgets, the GTK+ is suitable for projects ranging from small one-off tools to complete application suites. The PyWebKitGtk project share the same goals with WebKit. The purpose of this binding is to bring an alternative web engine to Python/GTK+ application developers who might need a web browser engine for their next application or developers wishing to have a better browser engine that they can access to using the Python programming language.

Extracted from the APT cache information of Debian

PyGTK provides a convenient wrapper for the GTK+ library for use in Python programs, taking care of many of the boring details such as managing memory and type casting. When combined with PyORBit and gnome-python, it can be used to write full featured Gnome applications. Check that you have the right utils in your system to test the code that I will provide here.

$ python --version
$ apt-cache search python-gtk2
$ apt-cache search python-webkit

Explanation

Start creating a simple text file with extension .py, I will use PythonGTKWebkit.py, and inside it write this sentence: #!/usr/bin/env python this line let us execute the file without type in the terminal the command python to interpret the code, and if you wish to execute the file using the graphic interface clicking the icon file; but you should first grant execution privileges to the file executing this command: $ chmod 755 PythonGTKWebkit.py or using the file properties utility of your desktop environment, in the case of using Nautilus you can click the right mouse button over the icon file, choose the properties option, switching to the permissions tab and check the box “Allow executing file as program”.

Import the required libraries, we need the GTK+ 2.0 and the Webkit binding, because we will import all the utilities in each library, we can write this single line: import gtk, webkit

Now we’re gonna write the instances of each element which will be displayed in the GTK window:

  • Create a window instance: window = gtk.Window()
  • Create an horizontal box, this wrapper will give us the ability to append elements inside it horizontally and aligned to the left side: hbox = gtk.HBox()
  • Create a vertical box, this wrapper will give us the ability to append elements inside it vertically: vbox = gtk.VBox()
  • Create a text field where we will type the URL of the webpage to load in the browser: entry = gtk.Entry()
  • Create a button instance, it will execute the load of the page in the browser on-click: button = gtk.Button('Load URL');
  • Now, create the browser instance: browser = webkit.WebView()

With the last steps, we could create some instances of the window and the browser, but when we execute the program and load us and webpage, the window will resize automatically to fix the proportions of the webpage with the computer window; I want to control this process, and I will create an scroller to contain the browser: scroller = gtk.ScrolledWindow()

In this step, we will configure some settings for the elements create previously, like the title of the window, or the default size for it:

window.set_title('Hello world Browser 1.0')
window.set_size_request(800, 400)

In this step, we will organize the elements in the window using the HBox and the VBox containers, this is one of the most important things that you need to know very well, so if you are f*cked with my explanations I recommend you to search in internet a better documentation to continue writing this program; I think that the next picture will help you with the understanding of the layouting in GTK+.

Python GTK Webkit

The Window wrapper will contain the VBox container filling the width and height of the window, this vertical box will contain the HBox container filling vertically the box and appending more elements vertically in the bottom of the box, and finally the HBox will contain elements horizontally appeding them aligned to the left side.

window.add(vbox)
scroller.add(browser)
hbox.pack_start(entry)
hbox.pack_start(button, False)
vbox.pack_start(hbox, False)
vbox.pack_start(scroller)

Pay attention to the boolean value in the hbox and the entry element, this value will de-activate the homogeneous flow of the packing, you can understand this property much better removing the False parameter of each pack_start() function.

With the following codes we will connect some events to the GTK+ binding and handle the window close event and the Load URL webkit event with a python function called clicked_button (the name of the function it does not matter).

def clicked_button(button):
    url_toopen = entry.get_text()
    print "Opening: " + url_toopen
    browser.open( url_toopen )
window.connect('destroy', lambda w: gtk.main_quit())
button.connect('clicked', clicked_button)

Finally, to make the GTK+ elements visible to the desktop environment, we need to execute the window.show_all() method, and an extra code gtk.main() to execute the GTK binding through the file create previouly.

Tips and Tricks

The previous process have explained how to create a GTK window with some functionality, but obviously write code like this shouldn’t be a tedious process because as a good programmer we need to find the best way to make easily and fastly as possible a program, so thats why I will recommend you to check Glade a RAD tool to enable quick and easy development of user interfaces for the GTK+ 2 toolkit. The user interfaces designed in Glade are stored in the well-known XML format, enabling easy integration with external tools. You will probably want to use it with tools such as libglade, which can load the XML files and create the interfaces at runtime; install it with apt-get install glade or just visit the official website: glade.gnome.org.

Code

#!/usr/bin/env python
import gtk, webkit
#
window = gtk.Window()
hbox = gtk.HBox()
vbox = gtk.VBox()
scroller = gtk.ScrolledWindow()
browser = webkit.WebView()
entry = gtk.Entry()
button = gtk.Button('Load url')
#
window.set_title('Hello world Browser 1.0')
window.set_size_request(800, 400)
#
window.add(vbox)
scroller.add(browser)
hbox.pack_start(entry)
hbox.pack_start(button, False)
vbox.pack_start(hbox, False)
vbox.pack_start(scroller)
#
def clicked_button(button):
    url_toopen = entry.get_text()
    print "Opening: " + url_toopen
    browser.open( url_toopen )
window.connect('destroy', lambda w: gtk.main_quit())
button.connect('clicked', clicked_button)
#
window.show_all()
gtk.main() # This isn't necessary if we're executing this code through an interactive terminal.
Do you have a project idea? Let's make it together!