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:
! Directivas Globales ServerRoot "C:/Archivos de programa/apache Group/Apache" Timeout 300 KeepAlive On MaxKeepAliveRequests 100 KeepAliveTimeout 15 Port 80! Directivas del servidor principal 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
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>
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.
<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 HEIGHT=300> </APPLET> 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()
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;
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;
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>
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.
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
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>
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>
<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+"!") '>
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().
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()
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
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
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>
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>
<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>
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>
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>
<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>