Merge lp:~brunogirin/python-snippets/webkit-easter-html into lp:~jonobacon/python-snippets/trunk

[Bruno Girin]

Added a new Webkit snippet that:
- loads data from a CSV file
- displays the data in a HTML table using Webkit
- uses an external CSS file to style the table
- provides the user with a combo box to change the CSS style sheet

=== added file 'webkit/webkit_table-business.css'
--- webkit/webkit_table-business.css	1970-01-01 00:00:00 +0000
+++ webkit/webkit_table-business.css	2010-04-05 19:08:17 +0000
@@ -0,0 +1,30 @@
+body {
+    color: black;
+    background-color: white;
+    font-size: 80%;
+}
+table {
+    border-collapse: collapse;
+    border-bottom: 2px solid black;
+}
+thead {
+    color: white;
+    background-color: black;
+    font-weight: bold;
+}
+thead th {
+    padding: 0 1em;
+}
+tbody {
+    font-size: 80%;
+}
+tbody tr:nth-child(even) {
+    background: #eee;
+}
+td.left {
+    text-align: left;
+}
+td.right {
+    text-align: right;
+}
+

=== added file 'webkit/webkit_table-colourful.css'
--- webkit/webkit_table-colourful.css	1970-01-01 00:00:00 +0000
+++ webkit/webkit_table-colourful.css	2010-04-05 19:08:17 +0000
@@ -0,0 +1,35 @@
+body {
+    color: black;
+    background-color: white;
+    font-size: 80%;
+}
+h1 {
+    color: #B90091;
+}
+table {
+    border-collapse: collapse;
+}
+thead {
+    color: white;
+    background-color: #B90091;
+    font-weight: bold;
+}
+thead th {
+    padding: 0 1em;
+}
+tbody {
+    font-size: 80%;
+}
+tbody tr:nth-child(odd) {
+    background: #48DD00;
+}
+tbody tr:nth-child(even) {
+    background: #FFF100;
+}
+td.left {
+    text-align: left;
+}
+td.right {
+    text-align: right;
+}
+

=== added file 'webkit/webkit_table-plain.css'
--- webkit/webkit_table-plain.css	1970-01-01 00:00:00 +0000
+++ webkit/webkit_table-plain.css	2010-04-05 19:08:17 +0000
@@ -0,0 +1,10 @@
+body {
+    font-size: 80%;
+}
+td.left {
+    text-align: left;
+}
+td.right {
+    text-align: right;
+}
+

=== added file 'webkit/webkit_table-rounded.css'
--- webkit/webkit_table-rounded.css	1970-01-01 00:00:00 +0000
+++ webkit/webkit_table-rounded.css	2010-04-05 19:08:17 +0000
@@ -0,0 +1,34 @@
+body {
+    font-size: 80%;
+    color: white;
+}
+h1 {
+    background-color: #090;
+    padding: 0.25em;
+    border-radius: 0.5em;
+}
+div#content {
+    background-color: #090;
+    padding: 0.5em;
+    border-radius: 1em;
+}
+table {
+    border-collapse: collapse;
+}
+thead th {
+    padding: 0 1em;
+    font-weight: bold;
+}
+tbody {
+    font-size: 80%;
+}
+tbody tr:nth-child(even) {
+    background: #6c6;
+}
+td.left {
+    text-align: left;
+}
+td.right {
+    text-align: right;
+}
+

=== added file 'webkit/webkit_table.csv'
--- webkit/webkit_table.csv	1970-01-01 00:00:00 +0000
+++ webkit/webkit_table.csv	2010-04-05 19:08:17 +0000
@@ -0,0 +1,17 @@
+"100 grams","Pure chocolate","Milk chocolate","White chocolate"
+"Protein (g)",4.7,8.4,8
+"Fat (g)",29.2,30.3,30.9
+"Calories (kcal)",525,529,529
+"Carbohydrate (g)",64.8,59.4,58.3
+"Calcium (mg)",38,220,270
+"Magnesium (mg)",100,55,26
+"Iron (mg)",2.4,1.6,0.2
+"Zink (mg)",0.2,0.2,0.9
+"Vitamin A (µg)",40,40,75
+"Vitamin E (mg)",0.85,0.74,1.14
+"Vitamin B1 (mg)",0.07,0.1,0.08
+"Vitamin B2 (mg)",0.08,0.23,0.49
+"Vitamin B3 (mg)",0.4,0.2,0.2
+"Vitamin B6 (mg)",0.07,0.07,0.07
+"Vitamin B12 (µg)","-","trace","trace"
+"Folate (µg)",10,10,10

=== added file 'webkit/webkit_table.py'
--- webkit/webkit_table.py	1970-01-01 00:00:00 +0000
+++ webkit/webkit_table.py	2010-04-05 19:08:17 +0000
@@ -0,0 +1,226 @@
+#!/usr/bin/env python
+#
+# [SNIPPET_NAME: Webkit Table]
+# [SNIPPET_CATEGORIES: Webkit, PyGTK, CSV]
+# [SNIPPET_DESCRIPTION: Shows how to load tabular data into a Webkit view]
+# [SNIPPET_AUTHOR: Bruno Girin <[e-mail]>]
+# [SNIPPET_LICENSE: GPL]
+#
+# This snippet was derived from Andy Breiner's "Webkit Button" snippet and
+# Ryan Paul's article at Ars Technica:
+# http://arstechnica.com/open-source/guides/2009/07/how-to-build-a-desktop-wysiwyg-editor-with-webkit-and-html-5.ars/
+# It demonstrates how to create a HTML table from the content of a CSV file,
+# display it in a Webkit view and handle change events from a GTK combo box to
+# change the document's style sheet.
+#
+# The garish colours for the "Colourful" style were generated using:
+# http://colorschemedesigner.com/
+#
+# It's Easter, so this snippet shows details about the nutritional information
+# of chocolate, found here: http://www.chokladkultur.se/facts.htm
+
+import csv
+import sys
+
+import gtk
+import webkit
+
+class TableData:
+    """
+    Data model class that encapsulates the content of the CSV file.
+    
+    This class reads the content of the CSV file, stores the first row as a
+    header and the other rows as a list of list representing the content.
+    """
+    def __init__(self, csv_file):
+        reader=csv.reader(open(csv_file))
+        self.headers = []
+        self.content = []
+        for row in reader:
+            if reader.line_num == 1:
+                self.headers = row
+            else:
+                self.content.append(row)
+
+class TableView:
+    """
+    View class that displays the content of the data model class.
+    
+    This class creates a HTML table from the data held in the model class
+    and uses Webkit to display it. It also provides the user with a combo box
+    to change the style used to display the table.
+    """
+    def delete_event(self, widget, event, data=None):
+        """Handles delete events and ignores them."""
+        return False
+
+    def destroy(self, widget, data=None):
+        """Handles the destroy event and quits the application."""
+        gtk.main_quit()
+
+    def __init__(self, file_stem, title, data):
+        """
+        Initialises the view class, creates a HTML document and wires events.
+        
+        This is the main method in the view class. It initialises all elements
+        of the view, creates a HTML document based on the data model and wires
+        GTK and Webkit events to handling methods.
+        """
+        # Store the file stem
+        self.file_stem = file_stem
+        
+        # Setup the window properties
+        self.window = gtk.Window(gtk.WINDOW_TOPLEVEL)
+        self.window.set_resizable(True)
+        self.window.connect("delete_event", self.delete_event)
+        self.window.connect("destroy", self.destroy)
+
+        # Initialize webkit
+        self.web = webkit.WebView()
+        
+        # listen for clicks of links
+        self.web.connect("navigation-requested", self.on_navigation_requested)
+
+        # the %s will be replaced later on
+        self.template = """
+            <html>
+            <head>
+                <style>
+                {style}
+                </style>
+            </head>
+            {body}
+            </html>
+        """
+        self.body = """
+            <body>
+                <h1>{title}</h1>
+                <div id="content">
+                    <table>
+                        <thead>
+                        {thead}
+                        </thead>
+                        <tbody>
+                        {tbody}
+                        </tbody>
+                    </table>
+                </div>
+            </body>
+        """
+        self.tr = """<tr>{content}</tr>"""
+        self.th = """<th scope="{scope}">{content}</th>"""
+        self.td = """<td class="{hclass}">{content}</td>"""
+
+        self.document_body = self.create_document_body(title, data)
+        document = self.create_document('plain')
+        # tell webkit to load local html and this is where the %s will get
+        # replaced
+        self.web.load_html_string(document, "file:///")
+ 
+        # Create the style combo box
+        combobox = gtk.combo_box_new_text()
+        combobox.append_text('Plain')
+        combobox.append_text('Business')
+        combobox.append_text('Rounded')
+        combobox.append_text('Colourful')
+        combobox.set_active(0)
+        combobox.connect('changed', self.changed_style_combo)
+        
+        # Create a scroll area and add the webkit item
+        scroll = gtk.ScrolledWindow()
+        scroll.add(self.web)
+        
+        # Create a vbox and add the combo box and scroll area to it
+        vbox = gtk.VBox()
+        vbox.pack_start(combobox, False)    # don't expand
+        vbox.pack_start(scroll, True, True) # expand and fill
+ 
+        # add the vbox to the window and show all items on the window
+        self.window.add(vbox)
+        self.window.show_all()
+        self.window.move(0, 10)
+        self.window.resize(580, 350)
+
+    def create_document_body(self, title, data):
+        """
+        Create the document's body from the content of the data model.
+        
+        This method creates the body of the document by inserting headers and
+        body row elements in the core template.
+        """
+        # Create th nodes and wrap them in tr
+        thead = self.tr.format(
+            content = ''.join(
+                [self.th.format(scope = 'col', content = h) for h in data.headers])
+        )
+        # Create td nodes, wrap the tr nodes and join them
+        # The expression used to set the value of hclass is derived from:
+        # http://code.activestate.com/recipes/52282-simulating-the-ternary-operator-in-python/
+        # For more details on nested list comprehensions, as used below, see:
+        # http://docs.python.org/tutorial/datastructures.html#nested-list-comprehensions
+        tbody = '\n'.join(
+            [self.tr.format(
+                content = ''.join([self.td.format(
+                    hclass = (i>0 and 'right' or 'left'), content = d
+                    ) for i, d in enumerate(l)]))
+            for l in data.content]
+        )
+        # Create the document body and return
+        return self.body.format(
+            title = title, thead = thead, tbody = tbody)
+    
+    def create_document(self, style):
+        """
+        Create the complete document from the body and the style sheet.
+        
+        This method creates the final document by reading the CSS style sheet
+        file and inserting it along with the document body into the template.
+        """
+        # Load the style sheet
+        f = open(
+            '{stem}-{style}.css'.format(stem = self.file_stem, style = style), 'r')
+        # Apply to the document and return
+        return self.template.format(
+            style = f.read(), body = self.document_body)
+
+    def changed_style_combo(self, combobox):
+        """
+        Change the style by re-creating the document from the combo's selection.
+        
+        This method gets the current value out of the combo box, transforms it
+        to lower case and uses the resulting value to re-create the complete
+        document with the relevant CSS style sheet. It then re-displays the
+        document using the Webkit view.
+        """
+        model = combobox.get_model()
+        index = combobox.get_active()
+        style = model[index][0].lower()
+        print 'Changing style to {style}'.format(style = model[index][0])
+        document = self.create_document(style)
+        self.web.load_html_string(document, "file:///")
+    
+    def on_navigation_requested(self, view, frame, req, data=None):
+        """
+        Describes what to do when a href link is clicked.
+        
+        In this case, we ignore all navigation requests, as there are no
+        clickable area in the document.
+        """
+        # As Ryan Paul stated he likes to use the prefix program:/
+        uri = req.get_uri()
+        if uri.startswith("program:/"):
+            print uri.split("/")[1]
+        else: 
+            return False
+        return True
+  
+    def main(self):
+        """Start the main GTK thread."""
+        gtk.main()
+
+if __name__ == "__main__":
+    data = TableData(sys.argv[0].replace('.py', '.csv'))
+    view = TableView(
+        sys.argv[0].replace('.py', ''),
+        "Chocolate's nutritional information", data)
+    view.main()