Mi primer Applet

Creando un nuevo proyecto

Comencemos a crear nuestro primer Applet. Para esto, puedes usar cualquier editor de Java, si ya dominas alguno. En caso contrario, te recomendamos descargar NetBeans, que es el programa que usamos, y sobre el que explicaremos con detalle su uso.

Una vez abierto nuestro editor, creemos un nuevo proyecto. En el caso de NetBeans, vayamos al menú archivo [File], y elijamos "nuevo proyecto" [New Project]. Se nos desplegará una ventana para elegir el tipo; en la categoría "Java", elijamos "Aplicación de Java" [Java Application] y demos clic al botón "siguiente" [Next]

Ahora nos pide un nombre para el proyecto, así como una localidad. Estos pueden ser cualquiera que deseen, en mi caso le llamaré "applet1" y lo pondré en una carpeta especial dentro de mi disco local. Es importante que sepan donde crean sus proyectos, pues continuamente estaremos trabajando con sus carpetas. Después, quitamos la casilla que dice "Crear clase principal" [Create Main Class] y le damos terminar [Finish].

Si le diste por error "Create Main Class", será mejor que le eliminemos, pues en nuestro caso no le necesitaremos, y podría hasta salir contraproducente. Comencemos por cambiar nuestro modo de vista. Por defecto tendremos tres pestañas en la parte superior bajo la barra de menús, estas son "proyecto" [project], "archivos" [files] y "servicios" [services]. Elegiremos archivos por la comodidad de nuestro proyecto. Si gustas puedes cerrar las otras dos pestañas, pues no haremos uso de ellas.

Dentro de la vista de archivos, veremos una carpeta con el nombre de nuestro proyecto. Despleguemoslo. En su interior habrá varias carpetas más y archivos, estre la carpeta abrá una que dice "src", despleguemosla tambien. Esta es nuestra carpeta fuente [source], en donde estarán todos los archivos que usaremos a lo largo de nuestros proyectos. Si por error le dijiste al principio que creara la clase principal, aquí verás una carpeta con el nombre de tu proyecto. Dale clic con el botón derecho, y elije "eliminar" [Delete]. Acepta la ventana de confirmación. Ahora comencemos con la creación de nuestro applet.

Creando el applet

A la carpeta "scr", demosle clic derecho, y de la opción "nuevo" [new], elijamos "otros" [other]. De la categoría "Java" elijamos "Applet" y demos clic al botón "siguiente" [next]. Aquí nos pide un nombre para nuestro applet, podemos elegir el nombre que queramos, yo le llamaré "applet1". Demos clic al botón "terminar" [Finish].

Si lo hicimos de forma correcta, debe aparecernos un código como el que sigue:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

import java.applet.Applet;

/**
 *
 * @author Thermos Pyro
 */
public class applet1 extends Applet {

    /**
     * Initialization method that will be called after the applet is loaded
     * into the browser.
     */
    public void init() {
        // TODO start asynchronous download of heavy resources
    }

    // TODO overwrite start(), stop() and destroy() methods
}

Si el la primera vez que ves un código, posiblemente veas muchas cosas extrañas que no entiendas, y te asustes a punto tal que ya no quieras saber nada de programación. ¡Alto un segundo! Deja de preocuparte, que la mayoría son tan solo comentarios. Aunque suene muy lógico, quizá tengas duda de que es precisamente un comentario y para que sirve, así que dejame explicarte. Existen dos tipos básico de comentarios: Los multilínea, que comienzan con un /* y terminan con un */. Ejemplo:

/*
	Este es un comentario multilínea.
	Podemos escribir varias líneas de código dentro de ellas para comentarios largos.
*/

Si notas que hay un asterisco por cada linea dentro de los comentarios multilínea, son tan solo de adorno, no dejes que te preocupen. Para comodidad y menor confusión, eliminaremos estos comentarios extras. Ahora, el segundo tipo de comentario, es el comentario unilínea, que comienza por // y termina en cuanto alcanza un retorno. Ejemplo:

	// Este es un comentario unilínea. Solo podemos escribir una línea de comentarios con este.

Estos tipos de comentarios son más usados para notas rápidas y pequeñas, comunmente usados en la misma línea del código para explicar lo que hace. Los comentarios de este tipo en el código dejemosle como están, pues más tarde los usaremos como referencia.

Ahora pasaré a explicar las partes de nuestro código. Al principio verán la siguiente línea:

import java.applet.Applet;

Esta línea importa la libería Applet que nos permite (Vaya la redundancia), poder usar el applet. Siempre al principio deben ser importadas las librerías necesarias para nuestro código, no se preocupen aun por ello, yo les indicaré las librerías que necesitaremos conforme avancemos en nuestro código.

Después de la declaración, está el inicio de nuestra clase:

public class applet1 extends Applet {

Todas las clases que creamos deben iniciar de esta forma, y tener todo el código en su interior. Esta es de forma pública, que es la forma predeterminada de toda clase y algunos casos de variables que veremos después, y se "extiende" de Applet, que es el que nos permite crear la visualización de nuestro código para la página web. Notarán que al final de su declaración, abre una llave, cuyo cierre corresponde a aquella hasta el final de nuestro documento. A este espacio entre las llaves se le conoce como "el interior de la clase", que es donde tendremos que poner todo el código necesario para que sea leido por nuestro programa.

Dentro de la clase applet1, veremos que se declara una función de tipo público vacio "public void" (O sea que no regresará nada), de nombre "init", como se ve a continuación:

	public void init() {
		// TODO start asynchronous download of heavy resources
	}

Dentro de este ya viene un comentario que explica su función: PARAHACER comenzar descarga asíncrona de recursos pesados. En este momento no significa nada para nosotros, ya veremos su funcionalidad con detalle más tarde cuando lo vayamos a utilizar.

Comenzando a dibujar en el applet

Después de esta larga y aburrida explicación, comenzaremos a hacer algo de mayor interes y a ver resulados. Primero necesitaremos importar una nueva librería, por lo que al principio escribiremos el siguiente texto:

import java.awt.Graphics;

Ya con nuestra librería graphics lista para usarse, abriremos una nueva función dentro de la clase applet1, de tipo público vacio, de nombre "paint" que jalará una variable tipo "Graphics" de nombre "g". En otras palabras, escribiremos lo siguiente:

	public void paint(Graphics g)
	{
		// Aquí se dibujan todos los objetos
	}

Como ya expliqué en el comentario que he agregado, en su interior se darán los métodos que dibujarán los objetos en pantalla. Para este momento ya habrán notado que el código lleva ciertos tabuladores. Estos no son necesarios, aunque si recomendados, pues ayudan a leer mejor el código. NetBeans se encarga de ello en la mayoría de las situaciones, así que no se preocupen. Otro detalle que verán es que la llave de inicio se pone tras ser declarada la función, pero yo lo puse en la siguiente línea inmediata. Estas dos formas son los estandares, y puedes usar la que más te acomode de estas dos. Yo prefiero la segunda, pues es más facil de leer para mí.

Ahora, por último, agergaremos el método que nos permetirá dibujar un rectángulo en nuestro applet. Para esto, escribiremos la siguiente línea dentro de paint:

		g.drawRect(50, 30, 200, 100);

A través de este método le estamos pidiendo que dibuje un rectángulo en las coordenadas (50,30), con 200 de ancho y 100 de alto. Para asegurarnos que el código esté correcto, lo pongo a continuación para que lo compares con el tuyo:

import java.applet.Applet;
import java.awt.Graphics;

public class applet1 extends Applet
{
	
	public void init()
	{
		// Comienza descarga asíncrona de recursos pesados
	}

	// TODO overwrite start(), stop() and destroy() methods
	
	public void paint(Graphics g)
	{
		// Aquí se dibujan todos los objetos
		g.drawRect(50, 30, 200, 100);
	}
}

Ahora si correremos nuestro programa. Para esto presionaremos las teclas Shift+F6 y esperaremos unos segundos a que lo genere y lo abra. Si haz seguido nuestros pasos de forma correcta hasta ahora, ¡Felicidades! ¡Tienes un rectángulo negro! Y con esto, ya tenemos todos los conocimientos básicos de applets.

Un poco de html

Antes que continuemos con nuestro curso, quisiera hacer una pausa para que veamos un poco de html. Quizá te hayas dado cuenta que dentro de la carpeta de nuestro proyecto, se ha generado una nueva subcarpeta de nombre "construir" [build]. Al desplegarla, veremos una subcarpeta de nombre "clases" [classes], y un archivo html con el mismo nombre que nuestro applet. Para aquellos que no sepan, los archivos html son aquellos que se abren con los exploradores web, mismos que vemos normalmente como páginas de Internet. Demos clic con el botón derecho sobre él y compiemoslo. Peguemoslo en nuestra carpeta src, dando un clic derecho sobre ella y eligiendo pegar.

Desde src, demos doble clic al archivo html para editarlo. Veremos mucho código generado por nuestro programa, pero lo dejaremos de la forma más sencilla posible por el momento. Borremos todo lo que está de más, dejando tan solo lo que está dentro de las etiquetas "applet", quedando como a continuación:

<APPLET codebase="classes" code="applet1.class" width=350 height=200></APPLET>

¿Por qué es importante hacerlo desde el src y no hacerlo directo en build? Por que de esta forma, afectará por completo al applet. Veamos un ejemplo: cambiemos los valores de altura y anchura a que sea de 600 x 400:

<APPLET codebase="classes" code="applet1.class" width=600 height=400></APPLET>

Volvamos a correr el código, vayamos a nuestro applet1.java y presionemos Shift+F6. Podremos notar que nuestro applet es más grande, y si vemos el código en nuestro build, notaremos que tambien ha cambiado su código, tomando el del src. Es aquí donde vemos la importancia de modificar nuestro código html desde el src. Devolvamos sus valores originales, pues serán con los que estaremos trabajando en el transcurso de nuestro proyecto.

Agregando colores a nuestro applet

Bueno, tenemos un lindo rectángulo en nuestro applet, ¿Pero no sería un poco triste si todos nuestros objetos fueran negro sobre un fondo blanco? Lo mejor será aprender a usar colores cuanto antes, para darle mayor vida a nuestros applets. Primero que nada, debemos agregar la librería correspondiente para poderlos usar:

import java.awt.Color;

Ahora, cambiemos el fondo de nuestro applet. Para ello, modificaremos la función init de tal forma que quede así:

	public void init()
	{
		// Comienza descarga asíncrona de recursos pesados
		this.setBackground(Color.blue);
	}

Por último, modifiquemos el color con el que dibujaremos nuestro rectángulo. Para ello, agregaremos este método en paint, antes de dibujar el rectángulo:

		g.setColor(Color.yellow);

Corramos de nuevo nuestro applet con Shift+F6, y veremos que ahora tenemos un fondo azul con un rectángulo amarillo. Por cualquier cosa, tu código hasta ahora debe verse de esta forma:

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Color;

public class applet1 extends Applet
{
	
	public void init()
	{
		// Comienza descarga asíncrona de recursos pesados
		this.setBackground(Color.blue);
	}

	// TODO overwrite start(), stop() and destroy() methods
	
	public void paint(Graphics g)
	{
		// Aquí se dibujan todos los objetos
		g.setColor(Color.yellow);
		g.drawRect(50, 30, 200, 100);
	}
}

Puedes jugar con los colores a tu gusto para crear las combinaciones que desees. Ahora si, ya sabes las bases principales de applets. Sin mayor demora, ¡Continuemos con la siguinte parte de nuestro curso!

[Un proyecto de Ayotli Diseño Web]