1
Download Sesion 2 - Emagister
Document related concepts
no text concepts found
Transcript
Programación Web con JAVA
Instructor: Carlos Carreño
Sesion 2
1. Aplicación del Lenguaje JAVA
Applets.
Un applet es un programa que viaja por la red desde un
servidor web y que se instala en la memoria RAM de la
maquina del cliente para ejecutarse dentro de una caja negra
(sanbox)
Configuracion del Apache Web Server.
Para publicar una aplicación que utilice el Web Browser
como cliente se necesita de la implementación de un
servidor web que es un tipo de servidor de archivos ,solo
que estos archivos tienen una extensión html, htm y están
escritos utilizando un lenguaje basado en marcadores o tags.
(Hiper Text Market Language).
Index.html
Index.html
Web Browser
Internet
Web Server
(Apache,IIS)
El Apache Web Server se configura mediante directivas que
se añaden al archivo httpd.conf. agrupadas en:
Programación Web con JAVA
!
Instructor: Carlos Carreño
Directivas Globales
ServerRoot "C:/Archivos de programa/Apache
Group/Apache"
Timeout 300
KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 15
!
Directivas del servidor principal
Port 80
ServerAdmin you@your.address
DocumentRoot "C:/Archivos de programa/Apache
Group/Apache/htdocs"
DirectoryIndex index.html
ErrorLog logs/error.log
CustomLog logs/access.log common
Programación Web con JAVA
Instructor: Carlos Carreño
Alias /icons/ "C:/Archivos de
programa/Apache Group/Apache/icons/"
ScriptAlias /cgi-bin/ "C:/Archivos de programa/Apache
Group/Apache/cgi-bin/"
<Directory "C:/Archivos de programa/Apache
Group/Apache/cgi-bin">
AllowOverride None
Options None
</Directory>
DefaultIcon /icons/unknown.gif
!
Directivas de los servidores virtuales
NameVirtualHost 12.34.56.78:80
<VirtualHost ip.address.of.host.some_domain.com>
ServerAdmin webmaster@host.some_domain.com
DocumentRoot /www/docs/host.some_domain.com
ServerName host.some_domain.com
ErrorLog logs/host.some_domain.com-error_log
CustomLog logs/host.some_domain.com-access_log
common
</VirtualHost>
Programación Web con JAVA
Instructor: Carlos Carreño
Creación de un programa Applet.
Todo programa applet(clase) se crea a partir de la herencia
de la clase java.applet.Appet. asi tenemos:
import java.applet.Applet;
import java.awt.Graphics;
public class ClsApplet extends Applet{
public void paint(Graphics g){
g.drawString("Hola Mundo 1",10,10);
}
}
Porque no hay main?
Creación de la pagina web
Para enviar el programa applet al cliente se crea una pagina
web que realice una llamada al servidor web que despachara
el programa hacia el cliente.
Programación Web con JAVA
Instructor: Carlos Carreño
<HTML>
<HEAD>
<!-- Generated by Kawa IDE -->
<TITLE>Applet title</TITLE>
</HEAD>
<BODY>
<H1>First Heading</H1>
<HR>
<APPLET CODE="ClsApplet.class" WIDTH=300
</APPLET>
<HR>
</BODY>
</HTML>
HEIGHT=300>
La pagina web llama al applet a traves del tag
<APPLET CODE="ClsApplet.class" WIDTH=300
</APPLET>
HEIGHT=300>
El ancho del recuadro que aparece en la pagina web sera de
300x300 pixeles.
Ciclo de vida de un applet.
Cualquier clase que se desea enviar para que se ejecute del
lado del cliente puede ser enviada mediante un applet ,sin
embargo es recomendable conocer cual es el ciclo de vida para
colocar el código de la clase en el lugar correcto.
Stop()
Init()
Start()
Paint(Graphics g)
Repaint()
Destroy()
Programación Web con JAVA
Instructor: Carlos Carreño
Cual es el método obligatorio a implementar?
Que representa el objeto g, de la clase Graphics?
Aplicación de Interfaces
Creación de Threads.
Los threads son pequeños métodos que se ejecutan
independientemente uno de otro, las clases threads aprovechan
la capacidad de multitarea de los sistemas operativos como
Windows o Linux.
Para crear un thread debes implementar la Interface Runnable
o extender una clase a partir de la clase thread.
He aquí una implementación de Threads a partir de Runnable.
import java.awt.Graphics;
import java.util.*;
import java.text.DateFormat;
import java.applet.Applet;
public class Clock extends Applet implements Runnable{
private Thread clockThread = null;
Programación Web con JAVA
Instructor: Carlos Carreño
public void start(){
if(clockThread == null){
clockThread = new Thread(this,"Clock");
clockThread.start();
}
}
public void run(){
Thread myThread = Thread.currentThread();
while(clockThread == myThread){
repaint();
try{
Thread.sleep(1000);
}catch(InterruptedException e){}
}
}
public void paint(Graphics g){
Calendar cal = Calendar.getInstance();
Date date = cal.getTime();
DateFormat dateFormatter =
DateFormat.getTimeInstance();
g.drawString(dateFormatter.format(date),5,10);
}
public void stop(){
clockThread = null;
}
}
Programación Web con JAVA
Instructor: Carlos Carreño
La Pagina para mostrar el reloj debe contener.
<HTML>
<HEAD>
<!-- Generated by Kawa IDE -->
<TITLE>Applet title</TITLE>
</HEAD>
<BODY>
<H1>First Heading</H1>
<HR>
<APPLET CODE="Clock.class" WIDTH=300 HEIGHT=300></APPLET>
<HR>
</BODY>
</HTML>
2. Formularios HTML
Los Formularios HTML están formados por un conjunto de
controles encerrados entre los tags <FORM> y </FORM>
Asi:
<FORM NAME="formulario1"
ACTION="http://www.company.com/servlets/paymanager">
<INPUT TYPE="TEXT" NAME="shopingcard" >
<INPUT TYPE="PASSWORD" NAME="clave">
<INPUT TYPE="SUBMIT" VALUE="Aceptar">
</FORM>
Programación Web con JAVA
Instructor: Carlos Carreño
Controles standares del lenguaje HTML
Button
Checkbox
Hidden
Password
Radio
Reset
Select
Submit
Text
Textarea
Botones que permiten suministrar los datos al
programa que los trata.
Control utilizado para seleccionar multiples
opciones.
Caja de texto que permance oculta se utiliza
cuando se quiere ocultar un dato.
Caja de texto para el ingreso de una clave ,no
muestra los caracteres de la clave.
Control para seleccionar solo una opcion del
conjunto de opciones posibles.
Es un boton que reinicia los controles a su valor
por default.
Es un control que permite seleccionar un o mas
opciones de un conjunto limitado de las mismas
Es un boton que permite invocar desde el
browser al programa o URL asociada al
formulario suministrando los datos de los
controles.
Caja de texto utilizada para el ingreso de los
datos.
Es una caja de texto de multiples lineas al cual se
le añade un scroll para un mejor visualizacion de
las lineas de texto.
Programación Web con JAVA
Instructor: Carlos Carreño
Referenciando Objetos del Formulario
Los Controles de un formulario se referencian de dos
maneras:
a)
document.form[0].elements[0].value
o
b)
document.formulario1.shopingcard.value
Control Button
<INPUT TYPE="BUTTON" NAME="boton1"
VALUE="texto sobre el boton" onClick="script a ejecutar">
Ejemplo
<INPUT TYPE="BUTTON" NAME="boton1"
VALUE="Ayuda" onClick="getAyuda()">
Propiedades
name
Es el nombre con el cual se puede referenciar al control
value
Es el valor que sera mostrado por el Control
Programación Web con JAVA
Instructor: Carlos Carreño
document.formulario1.boton1.value="Ayuda en Linea"
Metodos
click()
simula el click del usuario sonbre el boton
Manejador de Evento
onClick()
Agrupa el codigo javascript que se ejecuta cuando el usario
hace click sobre el control o cuando se invoca al metodo click.
Control Checkbox
<INPUT TYPE="CHECKBOX" VALUE="valor de retorno
si se elige la opcion"> texto de titulo
Ejemplo
<FORM NAME="FMPedido">
<INPUT TYPE="CHECKBOX" NAME="chkpedido"
VALUE="Si"
onClick=" if (this.checked){ alert(' Su pedido ha sido enviado
correctamente!')}" > Desear Ordenar el Pedido?
</FORM>
Programación Web con JAVA
Instructor: Carlos Carreño
Propiedades
checked
retorna un valor boolean (true, false) indicando si el control
esta seleccionado
defaultchecked
retorna un valor booleano true si se ha utilizado el atributo
checked en el tag INPUT
** tambien posee el metodo click y el manejador de evento
onClick.
Ejercicio:
Cree la siguiente pagina web ,llamela pedido.html y abrala con
el Web Browser.(ie, netscape).
<html>
<head>
<title> Formularios HTML, Author: Carlos Carreño</title>
</head>
<body>
Programación Web con JAVA
Instructor: Carlos Carreño
<FORM NAME="FMPedido"
ACTION="http://www.company.com/servlets/pedido">
<INPUT TYPE="CHECKBOX" NAME="chkpedido"
VALUE="Si"
onClick=" if (this.checked){ alert(' Su pedido ha sido enviado
correctamente!')}" >
Desear Ordenar el Pedido?
<INPUT TYPE="Submit" Value="Enviar Pedido">
</FORM>
</body>
</html>
Control Text y Textarea
<INPUT TYPE="TEXT" NAME="nombre la caja de texto"
VALUE="Valor por defecto" SIZE="tamaño de la caja" >
Ejemplo
<INPUT TYPE="TEXT" NAME="username"
onBlur='if(this.value=="") {
alert("Este dato es requerido,por favor , no deje la
caja en blanco.")
this.focus()
}else{
alert("Gracias, "+this.value+"!") }'>
Programación Web con JAVA
Instructor: Carlos Carreño
propiedades
defaultvalue
valor de cadena que asigna un valor por defecto al control en
el tag INPUT en el atributo VALUE
Metodos
blur()
Causa la perdida del focus de la caja de texto
focus()
trae el focus hacia el control
select()
selecciona el texto de la caja
Manejadores de Eventos
onBlur
asigna el codigo javascript (js) que se ejecuta cuando el
control pierde el focus o se invoca al metodo blur().
Programación Web con JAVA
Instructor: Carlos Carreño
onFocus
asigna el codigo js que se ejecuta cuando el control gana el
focus o se invoca el metodo focus().
onSelect
asigna el codigo js que se ejecuta cuando se selecciona el texto
o se invoca el metodo select().
Ejercicio:
Cree y visualice la siguiente pagina
<html>
<head>
<title> Formularios HTML, Author: Carlos Carreño</title>
</head>
<body>
<FORM NAME="FMPedido"
ACTION="http://www.company.com/servlets/pedido">
<INPUT TYPE="CHECKBOX" NAME="chkpedido" VALUE="Si"
onClick=" if (this.checked){ alert(' Su pedido ha sido enviado
correctamente!')}" >
Desear Ordenar el Pedido?
<INPUT TYPE="TEXT" NAME="username" onBlur='
if(this.value=="") {
alert("Este dato es requerido,por favor , no deje la caja en
blanco.")
this.focus()
Programación Web con JAVA
Instructor: Carlos Carreño
}else{
alert("Gracias, "+this.value+"!")
}'>
<INPUT TYPE="button" Value="Enviar Pedido"
onClick="document.FMPedido.username.blur()">
</FORM>
</body>
</html>
Control radio button
Este control permite seleccionar solo una opcion de un grupo
de opciones disponibles.
<FORM NAME=”frmradio”>
Desea Agregar item?
<INPUT TYPE=”RADIO” NAME=”confirma”
VALUE=”Yes”>
<INPUT TYPE=”RADIO” NAME=”confirma”
VALUE=”No”>
</FORM>
Para referenciar los elementos del radio group los podemos
hacer como un arreglo asi:
Document.frmradio.confirma[0].value
Programación Web con JAVA
Instructor: Carlos Carreño
Propiedades
Checked
Contiene un valor booleano true si la opcion esta seleccionado
y false si no esta seleccionado.
Defaultchecked
True si el atributo checked fue utilizada en el tag INPUT del
radio button.
Length
Valor entero que indica el numero de elementos que tiene el
radio group.
** tambien tiene los atributos name, value ademas del metodo
clic() y evento onClick()
Ejemplo
<html>
<head>
<title> Formularios HTML, Author: Carlos Carreño</title>
<SCRIPT>
<!-function getRespuesta(){
var respuesta=""
for(i=0;i<document.frmradio.agregar.length;i++){
if(document.frmradio.agregar[i].checked){
respuesta=document.frmradio.agregar[i].value
Programación Web con JAVA
Instructor: Carlos Carreño
alert("Tu respuesta fue "+respuesta)
}
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#CCFF00">
<H1>Trabajo con radio group</H1><HR>
<FORM NAME="frmradio"
ACTION="http://www.company.com/servlets/clsradio" >
Desea agregar el Item?
<INPUT TYPE="RADIO" VALUE="yes" NAME="agregar" CHECKED>
Yes
<INPUT TYPE="RADIO" VALUE="No" NAME="agregar" > No
<INPUT TYPE="BUTTON" VALUE="Aceptar" onClick="getRespuesta()">
</FORM>
</body>
</html>
Programación Web con JAVA
Instructor: Carlos Carreño
Tag SCRIPT
Dentro de las paginas web podemos incrustar código fuente
que se ejecute del lado del cliente cuando se realice una
llamada a las funciones . el código que deseemos ejecutar los
podemos incrustar en lo eventos de los controles o mediante
funciones encerradas por el tag <SCRIPT> y </SCRIPT>.
Ejercicio
Crear una pagina HTML que valide si el se ingreso el login
y/o el password de un usuario.
El código que genera la pagina anterior es el siguiente:
<html>
<head>
<title> Formularios HTML, Author: Carlos Carreño</title>
Programación Web con JAVA
Instructor: Carlos Carreño
<SCRIPT>
<!-function Verify(){
if(document.frmlogin.username.value==""){
alert('Se necesita ingresar el login de usuario')
document.frmlogin.username.focus()
}
if(document.frmlogin.clave.value==""){
alert('Por Favor Ingrese la clave')
document.frmlogin.clave.focus()
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#CCFF00">
<H1>Validacion del Usuario</H1><HR>
<table>
<FORM NAME="frmlogin"
ACTION="http://www.company.com/servlets/clslogin"
onSubmit="Verify()">
<tr>
<td>Usuario</td>
<td><INPUT TYPE="TEXT" NAME="username" onClick='this.select()'">
</td>
</tr>
<tr>
<td>Clave</td>
<td><INPUT TYPE="PASSWORD" NAME="clave"
onClick='this.select()'> </td>
</tr>
<tr> <td><INPUT TYPE="SUBMIT" Value="Aceptar" ></td></tr>
</FORM>
</table>
</body></html>
Programación Web con JAVA
Instructor: Carlos Carreño
Control Select
Es el anologo al control combobox de otros lenguajes de
programación.
Se puede utilizar para seleccionar una opcion o varias
seteando el atributo MÚLTIPLE en el tag SELECT.
<SELECT NAME=”Combo” >
<OPTION> Primera Opcion
<OPTION SELECTED> Segunda Opcion
<OPTION> Tercera Opcion
</SELECT>
otra forma ,para permitir la selección múltiple.
<SELECT NAME=”mCombo” MULTIPLE SIZE=”3” >
<OPTION> Primera Opcion
<OPTION SELECTED> Segunda Opcion
<OPTION> Tercera Opcion
<OPTION> Cuarta Opcion
</SELECT>
Programación Web con JAVA
Instructor: Carlos Carreño
Ejemplo
<html>
<head>
<title>Formularios HTML,Author: Carlos Carreño
</title>
<SCRIPT>
<!-function goVisita(){
var lugar= new Array()
lugar[0]="http://www.visit.hawaii.org/"
lugar[1]="http://www.tahitiweb.com/"
lugar[2]="http://www.lankaweb.com/"
lugar[3]="http://www.peru.com/"
var i=document.frmvisita.cmblugar.selectedIndex
location.href=lugar[i]
}
//-->
</SCRIPT>
</head>
Programación Web con JAVA
Instructor: Carlos Carreño
<body bgcolor="#CCFF00">
<H1>Trabajo con el Control Select </H1>
<HR>
<FORM NAME="frmvisita"
ACTION="http://www.company.com/servlets/clsselect" >
<BR>
Seleccione el Lugar que desa Visitar.
<SELECT NAME=”cmblugar” onChange="goVisita()" >
<OPTION> Hawaii
<OPTION> Tahiti
<OPTION> Sri Lanka
<OPTION> Cusco
</SELECT>
</FORM>
</body>
</html>
