Navegador Web Java

U n i v e r s i d a d N a c i o n a l d e I n g e n i e r í a - U N I

I n g e n i e r í a e n C o m p u t a c i ó n

P r o g r a m a c i ó n G r a f i c a

T e r c e r A ñ o

3 T 3 - C O

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

P r o f . : D a n n y C h á v e z

1

INDICE

Introducción ------------------------------------------------------ 1

Objetivos

a. Generales

b. Específicos

------------------------------------------------------ 2

Requisitos e Instalación ------------------------------------------------------ 4

Primer Contacto ------------------------------------------------------ 6

Barra de Menús ------------------------------------------------------ 7

a. Menú Archivo ------------------------------------------------------ 7

b. Menú Ver ------------------------------------------------------ 11

c. Menú Historial ------------------------------------------------------ 14

d. Menú Favoritos ------------------------------------------------------ 16

e. Menú Herramientas ------------------------------------------------------ 18

Barra de Navegación ------------------------------------------------------ 20

Barra de Direcciones ------------------------------------------------------ 21

Área de Pestañas ------------------------------------------------------ 21

Barra de Estado ------------------------------------------------------ 23

Tips de Uso ------------------------------------------------------ 24

Pruebas de Ejecución ------------------------------------------------------ 25

Conclusión ------------------------------------------------------ 26

Paginas Consultadas ------------------------------------------------------ 28

Colaboradores ------------------------------------------------------ 29

2

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.

3

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.

4

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.

5

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.

6

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:

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

1 2

3

4

5

7

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.

8

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

9

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

10

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.

11

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%

12

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

13

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.

14

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

15

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

16

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

17

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

18

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

19

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

20

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.

21

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

22

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

23

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.

24

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

25

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.

26

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

27

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.

28

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

29

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