· Un applet es un programa Java diseñado para formar parte de una página web.
- HTML (HyperText Markup Language) es el lenguaje de programación básico usado para crear páginas web.
- Un Web Browser es un programa que permite desplegar páginas web en el monitor.
- Un documento HTML (página web) es un documento de texto que contiene instrucciones (tags) y el texto que se quiere mostrar.
- Las instrucciones HTML (tags) permiten formatear texto, incluir controles (botones, check boxes, etc), mostrar imágenes, llamar applets, etc.
- Las instrucciones HTML siempre comienzan con el signo < y terminan con el signo >.
- Una línea de instrucciones HTML siempre tiene un tag de comienzo, el texto o el item que será formateado o controlado y el tag de cierre.
Ejemplo:
La línea <B>Este es un ejemplo</B> producirá como salida:
Este es un ejemplo
- Todo documento HTML comienza con el tag <HTML> y termina con el tag </HTML>.
- Instrucciones HTML básicas:
<B> </B>
|
Formatea el texto incluido en negritas
|
<I> </I>
|
Formatea el texto incluido en itálicas
|
<U> </U>
|
Muestra el texto incluido subrayado
|
<CENTER> <CENTER>
|
Centra horizontalmente el texto incluido
|
<BR>
|
Interrumpe la línea
|
<Hn> </Hn>
|
Establece el nivel del encabezamiento (n es un número del 1 al 6)
|
<P> </P>
|
Inserta un nuevo párrafo
|
<HR>
|
Inserta una línea horizontal
|
<IMG src= ”....”
|
Inserta una imagen
|
<TABLE> </TABLE>
|
Inserta una tabla (<TR> define una fila, <TD> una celda)
|
<BODY> </BODY>
|
Encierra el cuerpo de la página
|
<HEAD> </HEAD>
|
Encierra el encabezamiento de la página
|
<TITLE> </TITLE>
|
Encierra el titulo de la página
|
- HTML no es case-sensitive.
- HTML ignora los espacios en blanco.
Ejemplo
Código |
<HTML>
<HEAD>
<TITLE>HELLO, WORLD!</TITLE>
</HEAD>
<BODY>
<H1>Hello, World! (this is the H1 tag)</H1>
<H2>This line is formatted with the H2 tag</H2>
<P>This body text line contains several character formatting tags including
<I>italics</I>, <B>bold</B>, <U>underline</U>, and <STRIKE>Strikethrough</STRIKE>. The following code line creates a line break followed by a horizontal rule: <BR>
<HR>
<IMG src= “j0105050.wmf”>This line contains an image.
</BODY>
</HTML>
|
- Algunos tags como <P> no siempre requieren su correspondiente </P>.
- No todos los browsers interpretan <P> </P> como una línea en blanco. IE, por ejemplo, ignora tags que contienen solamente espacios en blanco. Para insertar una línea en blanco puede usarse el códigononbreaking space: <P> </P>.
- La instrucción para llamar un applet es <APPLET CODE = “....” WIDTH = 300 HEIGHT = 200></APLPELT>
Donde entre comillas (“…”) debe aparecer el nombre del applet (por ejemplo: hello_world.class), el atributo WIDTH fija el ancho del applet en la pantalla y HEIGHT el alto.
- El ancho y alto del applet se mide en pixels.
- Visual Studio contiene su propio editor HTML (HTML Editor Window) que permite utilizar tres diferentes vistas: la design view para crear documentos en un entorno gráfico similar al de un procesador de texto, el source view que permite editar el código fuente en un ambiente similar a un editor de texto (como el notepad), y el quick view que permite ver el documento como aparecería en el browser.
- Abra Visual J++,seleecione el tab new, seleccione Visual J++ Projects, seleccione Empty Project. Entre greet como nombre del proyecto.
- Seleccione Project en la barra de menú. Seleccione Add web page en el pull-down menu.
- Seleccione el tab New en la caja de dialogo Add Item. Abra el fólder Web Page. Seleccione Page. Entre Test.htm como nombre de la página. Clic el botón Open.
- Note que en el extremo inferior de la pantalla aparecen tres tabs: Design, Source y Quick View. Estos tabs activan las respectivas vistas. Seleccione Source.
- Coloque El cursor en la línea en blanco debajo de la instrucción <P> </P> y escriba:
<APPLET CODE = “greet.class” WIDTH = 450 HEIGHT = 200>
- Oprima la tecla Enter. Escriba </APPLET>
- Seleccione View de la barra de menú y Refresh del pull-down menu. Note que el código APPLET es sustituido por una caja de las dimensiones indicadas (dichas dimensiones pueden ahora cambiarse de la misma manera que se cambian las de cualquier ventana bajo Windows).
- Haga clic sobre la caja que representa al APPLET. Si la ventana de propiedades del APPLET no se puede observar, actívela escogiendo Properties window en el pull-down mwnu de la opción View.
- Para facilitar el trabajo con APPLETS existen dos paquetes que manejan las clases más utilizadas: el java.applet.* y el java.awt.*. El primero contiene la clase Applet, sobre la cual está basada cualquier applet que se diseñe. La segunda (Abstract Windows Toolkit) contiene todos los componentes que usualmente se utilizan en Windows, tales como etiquetas, botones, etc. Los applets normalmente se inician importando ambas clases.
- Seleccione Project de la barra de menú. Seleccione Add Class en el pull-down menu.Seleccione Class en el fólder class. Entre greet.java como nombre de la clase.
- Modifique el código fuente como se muestra en la figura abajo:
Greet.class
|
import java.applet.*;
import java.awt.*;
public class greet extends Applet
{
Label greeting = new Label("Hello. Whow are you?");
public void init()
{
add(greeting);
}
}
|
· Seleccione greet Properties en el pull-down menu de la opció Project de la barra de menú.
· En la caja When project runs, load: seleccione Test.htm.
- Clic el botón OK.
- Seleccione Build -> Build
- Oprima la tecla F5 (o seleccione Start en el pull-down menu de la opción Debug) para abrir el applet en el browser.
- El applet también puede abrirse usando el Quick View.
- Para formatear el texto de una etiqueta (label) se usa el método setFont( ). Este método requiere de un objeto tipo Font como argumento.
- Un objeto tipo Font se caracteriza por tres argumentos: typeface (tipo), style y point size.
- Seleccione greet.java. Coloque el cursor al final de la línea que declara la etiqueta (Label greeting = new Label("Hello. Whow are you?"); ). Oprima la tecla enter.
- En la nueva línea, escriba: Font bigFont = new Font("TimesRoman", Font.ITALIC,24);. Con esta acción creará un objeto tipo Font, llamado bigFont y con las características fijadas en el argumento.
- Coloque el cursor a la derecha del símbolo { que se encuentra después de public void init() y oprima la tecla enter.
- En la nueva línea, escriba: greeting.setFont(bigFont); Con esta acción formatea la etiqueta greeting según los atributos de bigFont.
- Reconstruya (Rebuild) el proyecto y vuelva a correrlo para apreciar los cambios.
- Coloque el cursor al final de la línea que construye el objeto bigFont (Font bigFont = new Font("TimesRoman", Font.ITALIC,24); ) y oprima la tecla enter.
- Declare un botón (pressMe) y un campo de texto (answer) entrando las siguientes líneas:
Button pressMe = new Button("Press Me");
TextField answer = new TextField(" ", 20);
- Coloque el cursor al final de la línea add(greeting); y oprima enter.
- Agregue el campo de texto y el botón:
add(answer);
add(pressMe);
- Evite que el usuario tenga que hacer clic en el campo de texto para escribir, fijando el foco del teclado mediate la siguiente línea:
answer.requestFocus();
- Reconstruya el proyecto y vuélvalo a correr. Aunque no se ha programado ninguna acción para el botón, los elementos agregados (campo de texto y botón) deben estar funcionales.
- Un evento ocurre cuando el usuario interactúa con un componente de la interfase, por ejemplo: hace clic en un botón.
- La respuesta del programa a un evento se programa dentro de su fuente. En el ejemplo del punto anterior el evento es hacer clic y la fuente el botón.
- Para que un applet acepte eventos generados por el ratón se debe importar el paquete java.awt.event y agregar implements ActionListener al encabezamiento de la clase.
- Modifique greet.java como se indica abajo. Reconstruya el proyecto y pruébelo entrando un nombre en el campo de texto y haciendo clic en el botón.
greet.java
|
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class greet extends Applet implements ActionListener
{
Label greeting = new Label("Hello. Whow are you?");
Font bigFont = new Font("TimesRoman", Font.ITALIC,24);
Button pressMe = new Button("Press Me");
TextField answer = new TextField(" ", 20);
public void init()
{
greeting.setFont(bigFont);
add(greeting);
add(answer);
add(pressMe);
pressMe.addActionListener(this);
answer.requestFocus();
}
public void actionPerformed(ActionEvent thisEvent)
{
String name = answer.getText();
greeting.setText("Hi there " + name + "!");
}
}
|
- import java.awt.event.*; importa el paquete necesario para manejar eventos y implements ActionListener implementa los métodos en el contenidos
- pressMe.addActionListener(this); prepara el applet para manejar eventos del botón.
- El método
public void actionPerformed(ActionEvent thisEvent)
{
String name = answer.getText();
greeting.setText("Hi there " + name + "!");
}
programa la respuesta del applet al evento (clic en el botón)
- String name = answer.getText(); captura el texto entrado en el campo de texto y lo deposita en la cadena name.
- greeting.setText("Hi there " + name + "!"); cambia el texto de la etiqueta greeting.
- Los campos de texto usualmente se preparan para que el usuario pueda entrar el texto haciendo clic en un botón u oprimiendo la tecla enter después de escribir el texto.
- Coloque el cursor al final de la línea pressMe.addActionListener(this); y oprima enter.
- Escriba answer.addActionListener(this);. Esto habilita el campo de texto para responder al evento oprimir la tecla enter.
Ejercicio
Crear un applet que muestre un mensaje con la pregunta ¿Quién es el mejor programador java en el grupo? Incluya un botón que responda al evento clic cambiando el texto de la etiqueta para que diga: el mejor programador java del grupo es + su nombre.
0 comentarios:
Publicar un comentario