Let’s start creating softwares using Python GTK (PyGTK). Python is the easiest programming language ever and If you are coming from other Programming Languages such as PHP, Here is something that you should understand :
- Python doesn’t have semi-colons for closing a code.
- function in PHP is def in Python.
- Spaces from the starting of a line decides the wrapper of the code.
- { in PHP is : in Python.
- There is no closing } in Python.
- Since there is no closing attribute (";"), 2 or more code can’t be placed in a single line.
- Python doesn’t need variables starting with $.
The Browser we are going to create is built using GTK 2. The latest version of GTK is GTK 3.
We are going to use GLADE for designing the interface. If you don’t have GLADE installed, install it using the following command :
<blockquote class="tr_bq">
<p>
sudo apt-get install glade
</p>
</blockquote>
<p>
Let’s begin. First of all create a folder named <b>browser</b> on your <b>home</b> folder.<br />Create a new project in <b>GLADE</b> with the <b>Project File Format</b> as <b>GtkBuilder </b>:
</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="//1.bp.blogspot.com/-j7Z4wUCuAk0/Ukuq_mGcKLI/AAAAAAAADEA/ckE8w8y6yJ4/s1600/0051.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="//1.bp.blogspot.com/-j7Z4wUCuAk0/Ukuq_mGcKLI/AAAAAAAADEA/ckE8w8y6yJ4/s1600/0051.png" /></a>
</div>
<p>
Save the project as <b>window.glade</b> in <b>browser</b> folder we created in <b>home </b>folder.<br />Create a Window by clicking on <b>Window</b> button in <b>Toplevels</b> section on the toolbox. Choose <b>Signals</b> and add <b>remove</b> signal of <b>GtkContainer</b> to <b>on_MainWindow_close_event</b> :
</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="//3.bp.blogspot.com/-QmJa9RgpBS8/Uku5E1QiqoI/AAAAAAAADEo/ZHgCP6TWBSk/s1600/0053.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="//3.bp.blogspot.com/-QmJa9RgpBS8/Uku5E1QiqoI/AAAAAAAADEo/ZHgCP6TWBSk/s1600/0053.png" /></a>
</div>
<p>
Choose <b>Vertical Box</b> from the <b>Containers</b> and click on the blank space of the <b>window1</b>. The <b>Number Of Items</b> should be <b>2</b>. The <b>window1</b> would be divided into <b>2 </b>now.
</p>
<p>
Choose <b>Tool Bar</b> from the <b>Containers</b> and click on the <b>1</b>st division of <b>window1</b>.<br />Right click on <b>toolbar1</b> and choose <b>Edit</b> option. Toggle to <b>Hierarchy</b> tab and add the following Buttons :
</p>
<blockquote class="tr_bq">
<table class="table">
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<b>new</b>
</td>
</tr>
<tr>
<td>
Label
</td>
<td>
:
</td>
<td>
<b>New</b>
</td>
</tr>
<tr>
<td>
Icon Name
</td>
<td>
:
</td>
<td>
<b>list-add</b>
</td>
</tr>
</table>
</blockquote>
<blockquote class="tr_bq">
<table class="table">
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<b>stop</b>
</td>
</tr>
<tr>
<td>
Label
</td>
<td>
:
</td>
<td>
<b>Stop</b>
</td>
</tr>
<tr>
<td>
Icon Name
</td>
<td>
:
</td>
<td>
<b>view-refresh</b>
</td>
</tr>
</table>
</blockquote>
<blockquote class="tr_bq">
<table class="table">
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<b>reload</b>
</td>
</tr>
<tr>
<td>
Label
</td>
<td>
:
</td>
<td>
<b>Reload</b>
</td>
</tr>
<tr>
<td>
Icon Name
</td>
<td>
:
</td>
<td>
<b>edit-delete</b>
</td>
</tr>
</table>
</blockquote>
<blockquote class="tr_bq">
<table class="table">
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<b>urlcont</b>
</td>
</tr>
<tr>
<td>
Type
</td>
<td>
:
</td>
<td>
<b>Custom</b>
</td>
</tr>
<tr>
<td>
Expand
</td>
<td>
:
</td>
<td>
<b>Yes</b>
</td>
</tr>
</table>
</blockquote>
<div class="separator" style="clear: both; text-align: left;">
Choose <b>Text Entry</b> from <b>Control and Display</b> and click on empty space of <b>urlcont</b> of <b>toolbar1</b>.
</div>
<div class="separator" style="clear: both; text-align: center;">
The Current Window Will Look Like This:
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-vfrjGagDsKQ/Uku2QgFWXCI/AAAAAAAADEc/h8--HTDsvGo/s1600/0052.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-vfrjGagDsKQ/Uku2QgFWXCI/AAAAAAAADEc/h8--HTDsvGo/s1600/0052.png" /></a>
</div>
<p>
The Interfacing is over, Now we should create the <b>Python</b> file. Create a file named <b>browser.py</b> in the directory containing <b>window.glade</b>. Add The Following contents on <b>browser.py</b> :
</p>
<blockquote class="tr_bq">
<p>
#!/usr/bin/python<br />import pygtk<br />pygtk.require("2.0")<br />import gtk<br />import gtk.glade<br />import gtkmozembed<br />class SubinsWindow:<br /> def __init__(self):<br /> self.gladefile = "window.glade"<br /> self.glade = gtk.Builder()<br /> self.glade.add_from_file(self.gladefile)<br /> self.glade.connect_signals(self)<br /> self.win=self.glade.get_object("window1")<br /> self.win.show_all()<br /> self.win.maximize()<br /> self.win.set_title("Subin’s Blog Browser – http://www.subinsb.com")<br /> self.mw = gtkmozembed.MozEmbed()<br /> self.glade.get_object("vbox1").add(self.mw)<br /> self.mw.set_size_request(800,600)<br /> self.mw.load_url("http://www.subinsb.com")<br /> self.mw.show()<br /> self.glade.get_object("entry1").set_text("http://www.subinsb.com")<br /> self.glade.get_object("entry1").connect("activate",self.on_entry1_activate)<br /> self.glade.get_object("reload").connect("clicked",self.on_entry1_activate)<br /> self.glade.get_object("stop").connect("clicked",self.on_stop_click)<br /> self.glade.get_object("new").connect("clicked",self.on_new_click)
</p>
<p>
def on_entry1_activate(self,widget):<br /> v=self.glade.get_object("entry1").get_text()<br /> self.mw.load_url(v)<br /> self.win.set_title("Subin’s Blog Browser – "+v)
</p>
<p>
def on_reload_click(self,widget):<br /> self.mw.reload()
</p>
<p>
def on_new_click(self,widget):<br /> self.glade.get_object("entry1").set_text("http://www.subinsb.com")<br /> self.mw.load_url("http://www.subinsb.com")
</p>
<p>
def on_stop_click(self,widget):<br /> v=self.mw.get_location()<br /> self.mw.stop_load()<br /> self.win.set_title("Subin’s Blog Browser – "+v+" – Stopped")
</p>
<p>
def on_MainWindow_close_event(self, widget, event=1):<br /> gtk.main_quit()
</p>
<p>
if __name__ == "__main__":<br /> a = SubinsWindow()<br /> gtk.main()
</p>
</blockquote>
<p>
That’s It ! Run <b>browser.py </b>using <b>python browser.py</b> and see your own <b>Browser</b> in action :
</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="//3.bp.blogspot.com/-6vF3PBfr2yY/UkvAypPzcaI/AAAAAAAADE4/JJuFGWvCqXc/s1600/0054.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="//3.bp.blogspot.com/-6vF3PBfr2yY/UkvAypPzcaI/AAAAAAAADE4/JJuFGWvCqXc/s1600/0054.png" /></a>
</div>
<p>
If you have any problems/doubts/suggestions/feedback print it out in the comments. Thank You. Hope You Like it.
</p>