MyBrowser (PyGObject + GtkBuilder) : Parte I, Creando el proyecto.

Bien,  luego de revisar varios ejemplo sobre como iniciar el desarrollo de aplicaciones usando python + gtk (aka pygobject) me he propuesto crear un browser simple que luego iremos mejorando posteriores Posts, para esto utilizaremos lo siguiente:

  • Python 3.x
  • Gtk 3.24.x
  • Webkit 3.x
  • gnome-builder 3.24.x

Ojo, no necesariamente debemos tener las ultimas versiones de estos lenguajes y frameworks, solo que son las versiones que estaré utilizando para los posts paso a paso:

En este primer post vamos a revisar lo siguiente:

  1. Crear un proyecto desde cero con gnome-builder.
  2. Crear una interfaz UI para nuestro browser con Glade.
  3. Implementar los eventos basicos de nuestro browser.

Sin mas que decir, empecemos…

Creando un proyecto desde cero con gnome-builder:

Este nuevo IDE de Gnome hace mas sencillo el proceso, tan solo debemos abrir el aplicativo y seleccionar Nuevo, luego ingresamos el nombre de nuestro proyecto, seleccionamos el lenguaje Python y la Plantilla de aplicaciones Gnome y Creamos el proyecto.

new_project

Luego de creado el proyecto lo podremos ver en modo editor, en donde el archivo __main__.py ya tiene desarrollada una ventana simple por defecto.

new_editor

Este codigo lo quitaremos luego y escribiremos las rutinas para conectar nuestra interfaz desarrollada con Glade y los eventos del GTK, ahora vayamos a crear la interfaz.

Creando una interfaz UI para nuestro browser con Glade:

Primero lanzamos el aplicativo glade, luego vamos a crear el contenedor principal que en nuestro caso sera un “Window”, debemos asegurarnos que entre sus propiedades se encuentre marcado “Client side window decoration” (Ojo mis aplicaciones estan en ingles), esto nos permite utilizar el headerbar el cual permite crear widgets en el header en las aplicaciones de Gnome para aprovechar espacio.

glade_1

Luego de ello vamos a poner sobre este “Window” todos los componentes necesarios para nuestro Browser en su primera versión.

Vamos a incluir 2 Widgets principales dentro del “Window” que son el HeaderBar y el Scroller donde mostraremos las paginas Web.

Dentro del HeaderBar vamos a ubicar los botones basicos de navegción y un TextEntry donde debemos escribir la URL, Ojo no olvidar de habilitar el check del HeaderBar “Show Windows Controls”, esto permite que se pueda ver los botones de cerrar, minimizar y maximizar segun se encuentren habilitados por nuestro gestor de ventanas.

glade2.png

Luego de crear todos los widgets debemos asegurarnos de ponerle un ID  a todos para poder manipularlos luego desde Python, deberiamos tener algo asi.

widgets_id

Es esta ocacion vamos a usar valores predefinidos de los labels e iconos de los botones, para ello apelaremos a lo que nos ofrece manejar los iconos  y label que nos brindan los Stocks.

btn1

Para finalizar nuestro creación de la interface vamos a indicar los metodos que serán llamados segun los eventos que puedan generar cada uno de los widgets que hemos agregado a nuestra interfaz, por ahora solo le pondremos los eventos a los botones y al GtkEntry.

Para ello vamos indicar la información para cada widget>evento>metodo

  • btnBack>clicked>on_btnBack_clicked
  • btnForward>clicked>on_btnForward_clicked
  • txtURI>activate>on_txtURI_activate
  • btnGo>clicked>on_btnGo_clicked

signal_back.png

Finalmente este será el resultado:

browser_glade

Implementar los eventos basicos de nuestro browser:

Para esto volvemos al proyecto en gnome-builder, en ella vamos a escribir elcodigo python donde manipularemos los widgets creados en nuestro archivo my_browser.ui.

Para este primer post no vamos a crear un codigo muy complejos ni muchas clases, solo crearemos una clase Handler que manejara los eventos de nuestros botones y el resto del codigo es estructurado.

El codigo deberia quedar de esta manera.


# __main__.py
#
# Copyright (C) 2017 juazisco
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.

import sys
import gi
import os
from os.path import join, dirname
gi.require_version('Gtk', '3.0')
gi.require_version('WebKit', '3.0')
from gi.repository import Gtk, WebKit

class Handler:
    def on_btnBack_clicked(self, button):
        browserholder.go_back()
    def on_btnForward_clicked(self, button):
        browserholder.go_forward()
    def on_btnGo_clicked(self, button):
       browserholder.reload()
    def on_txtURI_activate(self, button):
       browserholder.load_uri(urlentry.get_text())
builder = Gtk.Builder()
builder.add_from_file(dirname(sys.argv[0])+"/../data/"+"my_browser.ui")
builder.connect_signals(Handler())
window = builder.get_object("mainBrowser")
browserholder = WebKit.WebView()
browserholder.set_editable(False)
urlentry = builder.get_object("txtURI")
urlentry.set_text("")
scrolled_window = builder.get_object("scrContent")
scrolled_window.add(browserholder)
browserholder.show()
window.connect("delete-event", Gtk.main_quit)
window.show_all()
Gtk.main()

 

Finalmente ejecutamos el proyecto y escribimos una URL (http://planet.gnome.org/)en nuestro Browser.

run

 

Finalmente hemos terminado, en el proximo post intentaremos ponerle un popup menu y su About.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s