Navegador Web

Java
Grupo 3T3 – CO 2011
Este Documento muestra los pasos a seguir por el
usuario para usar el navegador Java Web Browser

Universidad Nacional de
Ingeniería - UNI

Ingeniería en Computación

Programación Grafica

Tercer Año
Prof.: Danny Chávez
3T3 - CO
 INDICE

 Introducción
 Objetivos
a. Generales
b. Específicos
 Requisitos e Instalación
 Primer Contacto
 Barra de Menús
a. Menú Archivo
b. Menú Ver
c. Menú Historial
d. Menú Favoritos
e. Menú Herramientas
 Barra de Navegación
 Barra de Direcciones
 Área de Pestañas
 Barra de Estado
 Tips de Uso
 Pruebas de Ejecución
 Conclusión
 Paginas Consultadas
 Colaboradores
------------------------------------------------------ 1
------------------------------------------------------ 2
------------------------------------------------------ 4
------------------------------------------------------ 6
------------------------------------------------------ 7
------------------------------------------------------ 7
------------------------------------------------------ 11
------------------------------------------------------ 14
------------------------------------------------------ 16
------------------------------------------------------ 18
------------------------------------------------------ 20
------------------------------------------------------ 21
------------------------------------------------------ 21
------------------------------------------------------ 23
------------------------------------------------------ 24
------------------------------------------------------ 25
------------------------------------------------------ 26
------------------------------------------------------ 28
------------------------------------------------------ 29

1
 Introducción

El presenta documento pretende explicar detalladamente el funcionamiento del navegador

que alumnos del Grupo 3T3-Co 2011 hemos realizado usando el lenguaje de programación
Java, auxiliándonos de las librerías SWT, XulRunner SDK, y JDOM.

Usamos la librería SWT debido a que esta contiene el componente Browser del que
hacemos uso para presentar las páginas web usando el motor para renderizar páginas web
de Mozilla, IE o Safari; lo que facilita enormemente el acceso a las funciones de un
navegador web estándar.

Hacemos uso de la librería JDOM para tratar ficheros xml, que son los que guardan el
historial, son una buena solución para acceder, manipular y crear datos en formato xml.

El xulrunner-sdk es un toolkit que requiere ser instalado (no instalado en si, sino registrado
por medio de la consola del SO), para usar la opción de Mozilla en el Browser de SWT,
provee acceso a los métodos para trabajar con el navegador web Mozilla Firefox.

Esperamos que este producto sea de su agrado, es un programa meramente académico cuyo
objetivo es demostrar la aplicación de Java para crear un navegador web de manera
sencilla, pero con muchas de las funcionalidades de los grandes navegadores que dominan
actualmente el mercado.

Además requerimos de un poco de conocimiento de su parte del entorno de programación

Eclipse – Java, ya que no nos fue posible crear un ejecutable que contenga todos los
elementos que forman el programa.

2
 Objetivos

Generales

 Mostrar el funcionamiento de un navegador web creado en Java y hacerlo accesible

para todo tipo de usuarios.
 Explicar detalladamente cada una de las opciones de las que dispone nuestro
navegador.

Específicos

 Explicar la forma en que se instala y se ejecuta el navegador web Java Web

Browser.
 Mostrar capturas de pantallas y procedimientos para hacer uso de tareas comunes de
un navegador web.

3
 Contenido

Requerimientos del Sistema

 Sistema Operativo Windows XP/Vista/7 o cualquier distribución basada en Linux.

 IDE Eclipse Helios para Java
 Librerías SWT, Mozilla Glue, Mozilla Interface y JDOM *
 Código fuente del Java Web Browser listo para compilar
 Registrar xulrunner-sdk

Instalación

1. Lo primero que tenemos que hacer es registrar el xulrunner-sdk, para esto

descomprimimos el .zip en cualquier parte del disco duro, preferiblemente en C: y
accedemos a su ruta por medio de ms-dos(el proceso es análogo para Linux) con los
comando:
a. cd xulrunner-sdk
b. cd bin
c. xulrunner --register-global

Si todo va bien no recibiremos ningún mensaje.

*Los links que se proporcionan en los hipervínculos son los archivos respectivos para Windows al
igual que los que se incluyen en el Source. Para trabajar en Linux solo debe cambiar los archivos
.jar por los del sistema Linux.

4
2. Descomprimimos la carpeta Java Web Browser en cualquier parte del disco duro y
una vez hecho esto, abrimos el IDE Eclipse (recomendamos Helios).
3. En el panel Package Explorer ubicado a la izquierda dentro de Eclipse damos clic en
un espacio en blanco y seleccionamos import.
4. Seleccionamos Existing Project into Workspace y damos click en el botón next
5. En select root directory damos clic en el botón Browse y seleccionamos la carpeta
Java Web Browser del lugar de donde la descomprimimos.
6. Damos check a Java_Browser y damos clic al botón Finish, ahora ya hemos
importado el Proyecto a nuestra área de trabajo de Eclipse.
7. Damos clic derecho a la carpeta del proyecto en el Package Explorer y
seleccionamos Properties, en el panel de la izquierda damos clic en Java Build Path.
8. En la pestaña Libraries damos clic en el botón Add External JARs y buscamos en la
carpeta Java Web Browser seleccionamos los archivo jdom, swt, Mozilla Glue,
Mozilla Interfaces y damos clic en OK.
9. Hecho esto damos doble clic en la clase WinFrame de la carpeta src del proyecto
que es nuestra clase principal.
10. Para correr el programa solo damos clic derecho sobre WinFrame y seleccionamos
Run As  Java Aplication. Eso es todo.

5
 Primer Contacto

A partir de aquí se explicara cómo usar el navegador e interactuar con las opciones que
posee.

Al abrir el navegador nos aparecerá una pantalla como esta:

1
2

3
4

Esta es la página que se muestra al inicio del navegador

En nuestra aplicación podemos distinguir fácilmente los elementos de cualquier aplicación

de escritorio, tales como una barra de menús, barra de Navegación; y algunos elementos
propios de un navegador web tales como la barra de Dirección, barra de pestañas, área de
presentación y una barra de estado o progreso.

1. Barra de Menús
2. Barra de Navegación
3. Barra de Dirección
4. Área de pestañas
5. Barra de Estado

6
Barra de Menus

Menu Archivo

A continuación listaremos los elementos de la barra de menús y la forma en que trabaja

cada una de sus respectivas funciones.

Menú Archivo

1. Nueva Pestaña: Nos crea una nueva instancia del navegador en una nueva pestaña
donde podemos tener contenido independiente de las demás pestaña. El navegador
ha sido probado hasta con 20 pestañas sin presentar ningún tipo de problema

Navegador funcionando con múltiples ventanas

2. Cerrar Pestaña: Nos permite cerrar la pestaña que tenemos activa actualmente, es
decir la que está visualizándose al momento de seleccionar esta opción del menú,
otra forma de cerrar una pestaña es dando clic a la pequeña x en la parte superior
derecha de cada pestaña.

7
 El botón de cerrar de cada pestaña se activa al colocar
el cursor del mouse en la parte superior derecha de la
pestaña.

3. Abrir Archivo: Esta opción nos permite abrir una página guardada en nuestro
computador para visualizarlo dentro de una nueva pestaña de nuestro navegador.

Ventana que nos permite seleccionar la

ubicación de nuestra pagina web
almacenada

Observamos que en la barra de dirección se hace referencia a

una página web guardada localmente

8
4. Guardar Como: A través de este elemento podemos guardar el contenido de una
pagina web como pagina web completa (htm) y si lo deseamos podemos especificar
otro formato (HTML, PHP, ASP, etc.), el único inconveniente es que al abrir
nuevamente la pagina guardada no podemos recuperar los archivos multimedia que
esta contiene.

Ejemplo de como guardar el contenido de una pagina web

usando el navegador Java Web Browser

Vemos el archivo .htm guardado en la ubicación especificada

9
Si abrimos la página podemos observar nuevamente en la barra de dirección que se hace referencia a un
archivo local

5. Imprimir: Desde este elemento podemos mandar a imprimir el contenido de la

pestaña activa al momento de seleccionarlo, enviándolo a la impresora
predeterminada.

Enviamos el documento a imprimir a la

impresora predeterminada, en nuestro
ejemplo tenemos una impresora virtual
que convierte a PDF.

6. Salir: Nos permite salir de la aplicación.

10
Menú Ver

Estos son los elementos que pertenecen al menú Ver:

Menú Ver

1. Aumentar: Nos permite darle zoom a la página web contenida en la pestaña en que
estamos actualmente, aumentando el tamaño de sus elementos.

Pagina web aumentada 2.5 veces o 250%

11
2. Alejar: Nos sirve para disminuir el tamaño de los elementos de la página web que
estamos visualizando actualmente.

Pagina web reducida al 50%

3. Ver Código Fuente: Esta opción nos permite ver el código fuente actual de la pagina
que estamos visualizando. Por sencillez y seguridad hemos desactivado la opción de
editar el código fuente de la página.

Código fuente de la pagina programaciongrafica.com

12
4. Entrar/Salir de Pantalla Completa: Si no queremos que nada nos distraiga de nuestro
paseo por el ciberespacio podemos activar esta opción que nos mostrará el
navegador en modo pantalla completa. Si queremos desactivarlo solo damos clic de
nuevo en esta opción.

Una pagina mostrada en modo de pantalla completa.

13
Menú Historial

A continuación mencionamos la función de los elementos que pertenecen al menú

Historial.

Menú Historial

1. Mostrar Todo el Historial: Nos permite mostrar en una ventana emergente una tabla
que contiene el historial completo de nuestra navegación con los detalles de la
fecha, hora y nombre de la página por la que navegamos.

Vista del historial completo de nuestro navegador si damos clic en

Limpiar Historial borramos el historial

14
2. Borrar Todo el Historial: Nos permite eliminar todos los elementos que están almacenados
en el historial.

Como podemos ver debajo de Borrar Todo el Historial ya no hay elementos

3. Elementos del menú Historial: Se crean dinámicamente al cargarlos al iniciar la

aplicación y a medida que navegamos.

Elementos creados al navegar

15
Menú Favoritos

Menú Favoritos

1. Marcar Pagina: Añade la pagina que estamos viendo actualmente al documento que
contiene los favoritos y lo presenta en la lista de menús dinámicos.

Damos clic en Marcar Pagina

16
 Observamos que un nuevo elemento ha sido añadido al menú de Favoritos

2. Mostrar todos los marcadores: Nos permite visualizar en una nueva ventana todos
los marcadores que tenemos añadidos desde nuestro navegador web Java Web
Browser.
3. Borrar todos los marcadores: Nos permite eliminar los elementos almacenados
como favoritos y además quita todos los elementos añadidos automáticamente al
menú de favoritos.

Favoritos eliminados del Navegador Web

17
Menú Herramientas

En este apartado mostramos las funciones simples incluidas en el menú de herramientas.

Menú Herramientas

1. Iniciar/Detener Navegación Privada: Si activamos/desactivamos esta opción

evitaremos/permitiremos que se almacenen las direcciones de los sitios que
navegamos desde el momento que empezamos la navegación privada hasta cuando
terminamos.

Historial antes de la navegación privada

18
 Vemos que hemos abierto mas pestañas pero que las direcciones de estas
no han sido almacenadas en el historial

2. Establecer Pagina Principal: Nos permite configurar la pagina de inicio de nuestro

navegador, de esta manera cuando damos clic en el icono “Home”, seremos
redirigidos a la pagina que establecimos como pagina de inicio.

Aquí ingresamos la dirección de la que queremos que sea nuestra página de inicio

Si la dirección que ingresamos es

válida todo va correctamente

19
Barra de Navegación

La barra de navegación contiene los botones más comunes y necesarios a la hora de

navegar.

Atrás Adelante Detener Recargar Inicio Ir

1. Atrás: Si no hemos cambiado la dirección de la página de inicio con que se carga el

navegador en la pestaña activa, este botón esta desactivado. Se activa cuando
cambiamos la dirección a la que accede el Navegador. Nos permite regresar a la
página que estábamos viendo anteriormente antes de cambiar de página.
2. Adelante: Análogamente que el botón Atrás, se desactiva si no hemos dado clic en
el botón Atrás o si no hemos cambiado la página de inicio. Nos permite regresar
hacia adelante la última página que estábamos viendo antes de dar clic en el botón
Atrás.
3. Detener: A como su nombre lo indica su función es evitar que la pagina web se
cargue completamente.
4. Recargar: Recarga la pagina que se esta visualizando en el Navegador de la pestaña
activa.
5. Inicio: Nos redirige automáticamente a la pagina que hemos establecido como
pagina de inicio.
6. Ir: Puede ser usado en lugar de dar ENTER a momento de ingresar la dirección de
una pagina web y también puede ser usado para recargar la pagina que se esta
visualizando actualmente.

20
Barra de Dirección

Barra de dirección

Esta barra contiene un único elemento activo, que es el campo de texto donde establecemos
la página que queremos visitar y accedemos a ella presionando la tecla ENTER o al dar clic
en el botón Ir de la barra de navegación.

Área de Pestañas

Área de Pestañas

En esta área reside una de las mas importantes características de este navegador, que es el
permitir trabajar con múltiples pestañas, para cambiar entre una pestaña y otra solamente es
necesario dar clic en la pestaña que queremos ver. Aquí se crea un navegador por cada
pestaña y se destruye cada vez que cerramos una pestaña. Si el número de pestañas excede
el máximo visualizable se agrega en la parte superior derecha una flecha  y el número de

21
pestañas restantes así como en el ejemplo de la captura de pantalla de la parte superior de
este texto.

En esta área de pestañas abarcaremos la forma en que funciona cada navegador web que
pertenece a cada pestaña. Gracias al componente Browser de SWT, los eventos de clics son
auto gestionados por este componente, sin embargo encontramos cierta dificultad al
momento de gestionar el clic derecho en un componente por lo que tuvimos que crear uno
propio basado en un menú desplegable a momento de presionar clic derecho en cualquier
lugar del componente browser. Las opciones que integramos son las siguientes:

Menú desplegable al momento de presionar clic derecho

Aumentar
Guardar Pagina Como…

Ver Código Fuente

Aumentar
Alejar

22
La explicación de cada uno de estos elementos ya ha sido hecha cuando los vimos
anteriormente como parte de la barra de menús, además de mostrar el menú, al dar clic
derecho podemos ver en que parte de la pagina HTML se dio el clic; es decir dentro de qué
etiqueta. Ej.: DIV, TD, HEAD, etc. O si se dio clic sobre una imagen o sobre un link. Esta
funcionalidad se usó accediendo directamente a las funciones de Mozilla Firefox para
definir los elementos propios de nuestro menú.

Barra de Estado

Barra de Estado

La funcionalidad de esta barra es para conocer si la pagina ha sido cargada completamente,

si la etiqueta esta en blando o dice “Terminado” es porque la pagina ya ha sido cargada, en
caso contrario, aun se están cargando elementos de la pagina que se esta intentando
visualizar.

23
Tips para usar el Navegador Java Web Browser

Casi todos los elementos del menú tienen definido un acelerador, de manera que si se
quiere acceder a su función solamente se debe ver el menú en que se encuentra y observar
la combinación de teclas que permite hacerlo.

A continuación presentamos algunos de estas combinaciones para realizar más rápidamente

algunas tareas.

Nueva Pestaña  CTRL + T

Cerrar Pestaña  CTRL + W

Abrir Archivo  CTRL + O

Guardar Pagina  CTRL + S

Imprimir  CTRL + P

Aumentar  CTRL + +

Alejar  CTRL + -

Ver Código Fuente  CTRL + U

Pantalla Completa  F12

Mostrar Historial  CTRL + H

24
Posibles Problemas de ejecución

 Historial: Puede ser que los elementos del menú Historia no se borren al momento
de dar clic en borrar todo el historial, reiniciando el programa se soluciona este
problema, esto es debido a que no encontramos una forma de eliminar menús
creados dinámicamente, solamente cuando carga de nuevo, ya que se eliminan del
fichero xml pero no del programa en ejecución.

 Guardar Como: El navegador no puede guardar una página completa con sus
imágenes y otros recursos, es decir que si queremos abrir la página debemos tener
acceso a internet para que el navegador recupere la información que no pudo ser
almacenada al momento de guardar.

Favoritos: Si los elementos del menú favorito no son eliminados luego de reiniciar
el programa deberá borrar el documento “favoritos.dat” que esta en la raíz de la
carpeta del proyecto.

25
 Conclusión

La aplicación que hemos descrito a lo largo de las paginas anteriores es uno de los tipos de
aplicaciones mas esenciales en estos tiempos, debido a que no podemos aventurarnos a la
mar si tener por lo menos un pequeños bote en el cual sentirnos medianamente seguros.
Nosotros hemos construido este pequeño bote que aunque no posee las características de
los grandes barcos como IExplorer, Firefox o Safari; es simple, funcional y ligero, además
de portable entre diferentes plataformas.

Nuestro programa ha sido realizado enteramente usando herramientas libres y en un

lenguaje que además de poderoso, brinda características que lo hacen especial al momento
de realizar aplicaciones que deben de ejecutarse en diferentes sistemas operativos, el código
utilizado es altamente portable entre un sistema y otro por lo que no necesitamos re
codificar la aplicación para correrla en Linux (ya lo hemos probado en Ubuntu y Debían).
Este Navegador brinda las características y servicios básicos que necesitaría un usuario
promedio sin mucho que envidiar a Mozilla o IExplorer, sin embargo no es nuestro afán
realizar comparaciones innecesarias dado que lo que hemos creado es puramente
académico, desarrollado como un trabajo asignado en la materia de Programación Grafica
de la Universidad Nacional de Ingeniería, por el Catedrático Danny Chávez, por su relación
con el tema de renderizado que es común a la materia que se nos imparte.

Al llegar al final de este trabajo esperamos haber dado el mayor esfuerzo y seguramente
hemos aprendido muchas cosas que antes ignorábamos, acerca del diseño de los
navegadores web y del lenguaje Java en sí. Pero mas que nada hemos aprendido a no
darnos por vencido aunque la dificultad para realizar un trabajo nos exija mas de lo que
nosotros creemos que podemos dar. Ha sido un viaje duro, plagado de sinsabores y

26
desvelos pero han valido la pena al recapacitar y ver lo que hemos avanzado en
conocimientos de programación desde que empezamos hasta el día de hoy.

A través de este proyecto queremos dar a conocer las grandes facilidades y poder que
ofrece la librería SWT que nos ha sido de gran ayuda, dado que a la vez que nos permitía
acceder a las paginas web, nos mostraba una forma de presentar aplicaciones nativas sin
tener que escribir un código especifico para cada plataforma, además de la potencia de las
herramientas del xulrunner-sdk que nos ha demostrado que es posible y además factible
manipular objetos COM desde java, tal como hemos visto con JAVAXPCOM de Mozilla.

Agradecemos a todos los compañeros que hicieron posible la realización de este proyecto y
felicitamos por haber permanecido en la lucha contra la desesperación cuando no se
encontraba la línea donde estaba el error o cuando pasaban horas sin poder encontrar la
forma de resolver determinado problema.

Gracias por seguirnos a lo largo de esta jornada.

Atte.: Grupo de Desarrollo.

27
 Páginas de Referencia

 http://www.eclipse.org/swt/

 http://www.eclipse.org/swt/bugs.php

 http://www.java2s.com/Code/Java/SWT-JFace-Eclipse/CatalogSWT-JFace-

Eclipse.htm

 http://wiki.eclipse.org/index.php/JFace

 http://www.jdom.org/downloads/docs.html

 http://help.eclipse.org/helios/index.jsp?topic=/org.eclipse.platform.doc.isv/reference

/api/org/eclipse/swt/package-summary.html

28
 Colaboradores del Proyecto

Pedro Yuriel Blandon 2009 – 30285

Noe Rolando Garcia Aguirre 2009 – 29226
Francisco Raul Hernández Duarte 2009 – 29201
Maxie Alberjosi Ayala Orozco 2007 – 27654
Leonardo Mayorga 2007 – 27823

Roberto José Noguera 2009 – 29583

Héctor Francisco Montoya Carmona 2009 – 29839
Luis Carlos Pérez Ramos 2009 – 29378
Gabriel Andrés Guillen Garcia 2009 – 29117
Levi Ezequiel Aguilar Silva 2009 – 29004

Freddy René Escobar Ortiz 2009 – 29731

Liesel Carolina Cruz 2009 – 29757
Gema Auxiliadora Rivas Sequeira 2009 – 30298

Patricia Esperanza Traña Hernández 2009 – 29651

Wendy María Briones Mena 2009 – 29996
Marjourie de los Ángeles Aguirre Aristegui 2009 – 29821
Omar Rafael Pérez Sánchez 2009 – 30155
Christian Josué Segura Mora 2009 – 31971
Aldrick Josué Espinoza Jalina 2008 – 23229

Christian Estefanía Zúñiga Betancourt 2009 – 29484

Rosa Erminia Blandon Guido 2009 – 29779
Aura Lizeth Castro Cruz 2009 – 29982

Barra de Menús, Pestañas, Interfaz, Integración, Manual de Usuario

Investigación, Barra de Navegación, Barra de Dirección
Investigación, Historial, Documentación
Investigación, Favoritos
Diseño, Investigación

29