Translate

martes, 14 de febrero de 2012

Creando un servicio web en java



Para iniciar este post debemos tener en cuenta lo siguiente:
1.       Utilizaremos la definición de nuestro servicio web anterior de php (ósea el wsdl), Aquí lo encuentra , de todos modos pondré el contenido del wsdl no se vayan.
2.       Además recordemos el paso del pitufo.
3.       Vamos a utilizar NetBeans (Aquí puedes leer mas) a veces se instala cuando bajan el jdk, ahora estoy utilizando Windows (no me juzguen ya pondré algo utilizando Linux sobre computo paralelo o algo posteriormente)
Una de las cuestiones que siempre dicen por ahí y que considero esencial para un desarrollador decente es reutilizar código, esto por beneficios y demás y porque nos ahorra tiempo y como nos daremos cuenta en un trabajo el tiempo es el recurso más escaso. Bueno vamos al punto (ya todos con su pitufo?) en primer lugar la definición de nuestro servicio web:
<?xml version="1.0" encoding="UTF-8"?>
<wsdl:definitions
    name="compareTo"
    targetNamespace="http://www.ITO.com/compareTo.wsdl"
    xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
    xmlns:tns="http://www.ITO.com/compareTo.wsdl"
    xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    xmlns:xsd1="http://www.ITO.com/compareTo.xsd1">
    <wsdl:documentation xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/">Created using Cape Clear Studio SOA Editor - http://www.capeclear.com</wsdl:documentation>
    <wsdl:types>
        <xsd:schema
            targetNamespace="http://www.ITO.com/compareTo.xsd1"
            xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/"
            xmlns:xsd="http://www.w3.org/2001/XMLSchema"
            xmlns:xsd1="http://www.ITO.com/compareTo.xsd1"> </xsd:schema>
    </wsdl:types>
    <wsdl:message name="compareToResponse">
        <wsdl:part name="result" type="xsd:int"/>
    </wsdl:message>
    <wsdl:message name="compareToRequest">
        <wsdl:part name="numberA" type="xsd:int"/>
        <wsdl:part name="numberB" type="xsd:int"/>
    </wsdl:message>
    <wsdl:portType name="compareToPortType">
        <wsdl:operation name="compareTo">
            <wsdl:input message="tns:compareToRequest"/>
            <wsdl:output message="tns:compareToResponse"/>
        </wsdl:operation>
    </wsdl:portType>
    <wsdl:binding name="compareToBinding" type="tns:compareToPortType">
        <soap:binding style="rpc" transport="http://schemas.xmlsoap.org/soap/http"/>
        <wsdl:operation name="compareTo">
            <soap:operation soapAction="capeconnect:compareTo:compareToPortType#compareTo"/>
            <wsdl:input>
                <soap:body use="literal"/>
            </wsdl:input>
            <wsdl:output>
                <soap:body use="literal"/>
            </wsdl:output>
        </wsdl:operation>
    </wsdl:binding>
    <wsdl:service name="compareTo">
        <wsdl:port binding="tns:compareToBinding" name="compareToPort">
            <soap:address location="http://localhost/ITOServicios/compareTo/compareTo.php"/>
        </wsdl:port>
    </wsdl:service>
</wsdl:definitions>

Esta definición fue creada en el post anterior si quieren chequen no vamos  explicar mucho sobre el ahora, solo recordaremos un poco sobre la operación que realizábamos, la operación compara dos números enteros y  vamos a iniciar el NetBeans, yo utilizo la versión 7.0.1 pero supongo que no existirá ningún problema con alguna otra.



Vamos a ir a file->new->project.



De la ventana seleccionamos el tipo del proyecto Java Web y una aplicación web y damos continuar.



El paso siguiente es indicar el nombre y donde se guardara el nuestro proyecto como se aprecia en la imagen he seleccionado “C:\ITOServicios” pero bueno pongan lo que ustedes gusten.



Seleccionamos nuestro servidor de aplicaciones yo seleccione GlassFish y la versión de Java EE 5 (pueden utilizar la 6), y vamos a dar click next.



Y en frameworks no vamos a seleccionar ninguno; y hacemos click en Finish.



Tendremos algo como lo que se ve en la imagen. Ahora agregaremos nuestro servicio web en este caso vamos a generarlo desde un WSDL, hacemos click derecho en el proyecto y agregamos un nuevo elemento, esto es new->other.



Seleccionamos la opción Web Services y en el tipo Web Service from WSDL. Y damos click en Next,



Ahora introducimos el nombre del servicio web el paquete y la dirección donde se encuentra el servicio en mi caso lo tengo en una carpeta llamada “C:\wsdlITOServicios\compareTo.wsdl” como se ve en la imagen.



Obtenemos algo como la imagen no sé si se aprecia pero en el output se puede ver el proceso donde se convierte el wsdl hacia clases Java (mas bien se generan clases para manejar e implementar lo definido en el wsdl), ahora vamos a escribir la implementación del servicio web
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package www.ITO;

import javax.jws.WebService;

/**
 *
 * @author Roque
 */
@WebService(serviceName = "compareTo", portName = "compareToPort", endpointInterface = "com.ito.compareto.CompareToPortType", targetNamespace = "http://www.ITO.com/compareTo.wsdl", wsdlLocation = "WEB-INF/wsdl/CompareTo/compareTo.wsdl")
public class CompareTo {

    /***
     * Implements the compareTo operation
     * that is used to know wich number is
     * bigger or if they are equal
     *
     * @param numberA the first number to compare
     * @param numberB second number to compare
     * @return
     */
    public int compareTo(int numberA, int numberB) {
        if( numberB > numberA )
        {
            return -1;
        }
        else if(numberA > numberB )
        {
            return 1;
        }
        else
        {
            // is equal
            return 0; 
        }
    }
   
}
El pedasito de código básicamente nos realiza la operación de comparación entre dos números que denominamos “a” y “b” donde:
·         si “a” > “b” regresa como resultado un numero 1
·         si “b” > “a” regresa como resultado el valor -1
·         y en cualquier otro caso regresamos 0 asumiendo que si no son mayores es que son iguales
Otro detalle, siempre que puedan comenten su código por lo que mas quieran, en un libro leí lo siguiente “piensa que el encargado de mantener tu código es un asesino en serie que sabe donde vives”.
Vamos a ejecutar nuestro proyecto.




Ahora en la barra de direcciones agregaremos el nombre de nuestro servicio web, quedando algo como http://localhost:8080/CompareTo/compareTo, con esto veremos que nos da información del servicio web y vamos a copiar la dirección a nuestro servicio web en mi caso es: http://localhost:8080/CompareTo/compareTo?wsdl
Ahora vamos a agregar el cliente del servicio web esto para efectos simplemente demostrativos. Para esto vamos a agregar un nuevo elemento a nuestro proyecto ya saben click derecho sobre el proyecto y new other



Aquí seleccionamos Web Servicies y Web Service Client y damos click en siguiente



Ahora pegaremos la dirección de nuestro wsdl y vamos a indicar el nombre del paquete en Package yo coloque www.client pero pueden indicar cualquier el mismo que el anterior si lo desean.



Ahora únicamente tenemos que incluir al cliente para que este invoque a nuestro servicio web, vamos a nuestro index y vamos a arrastrar desde el apartado que nos genero cuando creamos nuestro cliente que se llama Web  Service Refetences el cliente para nuestra operación,



Como se ve en la imagen es el elemento que tengo seleccionado.



Lo que nos generara una porción de código para ejecutar nuestro servicio web, esta parte como es para realizar prueba vamos a ejecutarla y como se ve el numero A y numero B tienen el valor de 0.



Ya que ambos números son iguales nos devuelve el valor 0 que es correcto ahora realizamos algunos cambios y ejecutamos nuevamente.




Con eso concluiremos nuestras pequeñas pruebas sobre la implementación y este largo post.

sábado, 11 de febrero de 2012

Creando un servicio web con PHP


Vamos a iniciar primero que necesitas para hacer tu pinche web service???.

Pues creo que lo primero es saber que es un servicio web, y de acuerdo a la W3C (World Wide Web Consortium

Un servicio web es sistema de software el cual ha sido diseñado para soportar interacción interoperable maquina a maquina en un red. Contiene un interfaz la cual es descrita en un formato procesable por las maquinas (específicamente WSDL). Otros sistemas interactúan con el servicio web un de la forma establecida por su descripción utilizando mensajes SOAP. Típicamente transmitidas utilizando HTTP con una serialización XML en conjunto con otros estándares web relacionados (Tomado del libro Building Web Services With Java, Segunda edición).

Que conocimientos necesitas para comenzar con los servicios web?
  1. Primer lugar saber preparar una bebida energizante conocida como "pitufo" (este paso es esencial y requerido ya que se recomienda preparar uno para que te acompañe a lo largo de esta publicación).
  2. Segundo comprender lo que llaman por ahí la "pila tecnológica" y seguir el paso 1.
  3. Instalar algunas aplicaciones que son requeridas y no olvidar el paso 1.
  4. Escribir un poquito en unos archivos de php y regresar al paso uno tanto como sea necesario.
No suena tan perro vea, bueno para seguir recordemos no olvidar el paso uno.

  • La pila tecnológica
Imagen 1: Pila tecnológica (esta imagen la hice yo así que no se fíen del todo)

Capa de transporte

En la base de la pila los servicios web son básicamente mecanismos de mensajería, así que es razonable pensar sobre tecnologías de transporte de mensajes en la base de cualquier servicio web. Los servicios web son esencialmente transportes neutrales. Un mensaje de un servicio web puede ser transmitido usando bien sea por el protocolo HTTP o HTTPS, así como también a través de mecanismos mas especializados como JMS.

Capa de mensajería

En la capa de mensajería están fundamentalmente tecnologías como XML, SOAP, y WS-Addressing. Los servicios web utilizan XML como el formato de las cargas de mensajes entre el proveedor y el solicitante. Otra de los estándares más populares y maduros es SOAP. La especificación SOAP define un mecanismo simple para envolver mensajes que define las bases de la mayoría de los mensajes de servicios web. WS-Addressing es una especificación propuesta por BEA, IBM y Microsoft para  la estandarización del concepto de puntero de servicio web.

Capa de descripción

Las descripciones de servicios web son descripciones adicionales de meta datos asociados con servicios web desplegados en una red. Ayuda a los sistemas SOA a obtener menor acoplamiento y las características de uniones por las que son conocidos. Las tecnologías listadas en esta capa incluyen WSDL, WS-Policy, UDDI y WS-ResourceProperties.
WSDL (Web Services Description Language, Lenguaje de Descripción de Servicios Web) el mas maduro y popular de los formatos de metadatos de servicios web. Con WSDL, los desarrolladores describen la funcionalidad característica de su servicio web: ¿Qué operaciones el servicio brinda?, ¿Qué entrada o salida es asociada con dichas operaciones?
UDDI (Universal Description Discovery and Integration, Descricpcion Universal de Descubrimiento e Integración) es la especificación mas extendida y reconocida para registro de servicios web.
WS-ResourceProperties introduce una especificación para describir la relación entre el estado de la información y el servicio web. WS-ResourceProperties es un componente importante del marco de trabajo WS-ResourceFramework el cual fue propuesto por Computer Associates, Globus, HP e IBM para lograr obtener las relaciones entre los servicios web y sus recursos más representativos.

Calidad de experiencia

En esta capa se encuentran las tecnologías que clarifican ciertas capacidades y requerimiento de transacciones relacionadas con servicios web, seguridad y envio de transportes seguro. Las tecnologías listadas en este nivel son WS-Security, WS-reliableMessagin, WS-transactions y WS-ResourceLifeTime.
WS-Security es la familia de especificaciones relacionadas que especifican como la interacción con el servicio web se realice de manera segura. WS-Security logra los conceptos como relaciones de confianza en un ambiente de servicios web y la identidad de los solicitantes del servicio web.
WS-ReliableMessaging es la propuesta que busca la manera de que tanto como el solicitante así como el proveedor no tengan duda de que algún mensaje no a recibido.
WS-Transactions es una serie de especificaciones relacionadas que clarifican el como la invocación de los servicios web están relacionadas en el contexto transaccional también conocido como semánticas ACID.

Capa de composición

En la capa de composición se encuentra las especificaciones BPEL4WS y WS-Notification describe como otros servicios web son combinados o compuestos. BPEL4WS es un estándar para lograr como se pueden combinar los servicios web en procesos de negocio de alto nivel al describir flujos de trabajo o orquestación de servicios web.
WS-Notification busca el como publicar y suscribir mensajes de notificación en un ambiente de servicios web.

Ok para este momento necesitamos regresar al paso uno.
  • Requisitos de software
  • XAMP: XAMPP es una forma fácil de instalar la distribución Apache que contiene MySQL, PHP y Perl. XAMPP es realmente simple de instalar y usar - basta descargarlo, extraerlo y comenzar. Aquí puedes leer y ver mas no olvidemos el paso uno 
  • SOAEditor: Cape Clear libero un editor SOA libre, que permite a los desarrolladores de software (osease como quien dice el que esta leyendo esto), crear, ver y editar rápidamente servicios usando WSDL (que ya se menciono anteriormente). El editor simplifica el proceso de la creación de servicios al simplificar el lenguaje WSDL. Aquí los puedes descargar (lo uso en windows sorry así nos lo paso el doctor ups, lo pegas en una carpeta en C: y creas una carpeta CapeClear y ahi extraes creas un acceso directo y listo cualquier error verifica que tengas instalado el jdk ya que eso me paso y mi cambie mi jdk al 1.6) y vemos el paso uno 
  • SOAPUI: es una solucion open source multi plataforma. Cuenta con una interfaz gráfica que nos da la opción de probar nuestros servicios web, soap ui soporta los protocolos y estándares lo que da una gran variedad de pruebas. Aquí puedes leer y ver más.
Ok ahora si viene lo divertido volvemos al paso uno (todo con medida), pensemos una operación a realizar mediante un servicio web digamos una que nos dejaron de tarea: a partir de dos números se diga cual es mas grande, pensemos que devolveremos un numero y recibe la operación dos números (numero a y numero b) y las salidas de la operacion seran las siguientes:
  • -1 cuando b > a
  • 0 cuando a == b
  • 1 cuando a > b
Lo que hacemos en un inicio es abrir el soap editor para generar la definición de nuestros servicio web
Indicamos nombre y el espacio de nombres en este caso elegí el nombre compareTo y en el espacio de nombres http://www.ITO.com/compareTo.wsdl ustedes pueden indicar el que mas les guste c:.


Indicamos el nombre de la operación.


vamos a la parte de la petición y modificamos el nombre y los parametros de entrada para agregar un parametro de entrada hacemos click add y ingresamos los datos de nuestros parámetros para que luzcan como la imagen

ahora editamos la parte del response de indicando el nombre del parametro y su tipo en este caso un tipo int 

vamos a la parte de binding y modificamos en este caso eliminamos lo que tenga el textbox que indica parts.
en el estilo existen dos posibilidades document y rpc en este caso utilizaremos rpc sin embargo document es el mas utilizado pero explicar las diferencias entre uno y otro esta fuera del alcance de este POST.
En el tipo también existen dos tipos literal y encoded sin embargo de acuerdo con las declaraciones del doctor Giner donde se indica que la W3C declaro que encoded no es interoperable se prefere el uso de literal en lugar de encoded; ¡recuerden elimnar parts!.



y realizamos la misma operación en la pestaña response de binding.


ahora nos dirigimos a la parte de services y vamos a indicar donde se encontrara la implementación de nuestro servicio web. Colocaremos en este caso http://localhost/ITOServicios/compareTo/compareTo.php en la parte de address. Con esto nos dirigimos a guardar recuerden iniciar el servidor apache en su xamp. Creamos en htdocs dentro de nuestra instalación de xamp una carpeta llamada ITOServicios y dentro de esta una carpeta llamada compareTo ahí sera la carpeta donde se guardara la definición de nuestro servicio web. En mi caso la carpeta es la siguiente "C:\xampp\htdocs\ITOServicios\compareTo".


Vamos al botón guardar (el del disco de 3 1/2 para los que nos toco) y damos click guardar e indicamos el nombre y toda la cosa.



Ahora tenemos que editar ese archivo para modificar lo que al parecer es un bug del SOAEditor para eliminar los parts, en este caso yo lo edito utilizando el notepad++ (lo pueden buscar en Internet pero, bueno cualquier editor de texto es bueno), vamos a eliminar dentro de los elementos internos de wsdl:binding y eliminaremos en wsdl:input y en wsdl:output la parte de parts="" para obtener algo como la imagen siguiente:


Ahora vamos a utilizar la bibliotecas nusoap (cuidado no digan librerías esas son las que venden libros; y menos en el seminario de maestría) la descargan y la descomprimen, lo que haremos es crear una carpeta lib en nuestro directorio compareTo y ahí vamos a insertar la carpeta nusoap quedando algo como lo siguiente:

Obteniendo algo como lo siguiente:
ahora vamos a crear un archivo que llamaremos compareTo.php en el cual se encontrara la implementación de nuestra operación inicial se acuerdan la de comprar si a y b no se que regresaba 0 o algo así, pues esa. Ahora creamos el archivo compareTo.php en la carpeta compareTo esto porque si recuerdan así se llamaban el archivo donde se encontrara la implementación de nuestro servicio web.


y vamos a obtener un archivo mas en nuestra carpeta


algo como lo que se muestra en la imagen

y vamos a editarlo en este caso utilizo zend studio en version trial (=( no tener dinero para licencia) y vamos a agregar la implemetación de nuestra operación. Aqui muestro el codigo con el que yo la implemente de una manera muy simple.

<?php
require("lib/nusoap.php");
$servidor=new soap_server("compareTo.wsdl");
function compareTo ($numberA, $numberB)
{
if( $numberB > $numberA )
{
return -1;
}
elseif ($numberA > $numberB )
{
return 1;
}
else
{
// is equal
return 0; }
}
$HTTP_RAW_POST_DATA = isset($HTTP_RAW_POST_DATA) ? $HTTP_RAW_POST_DATA : '';
$servidor->service($HTTP_RAW_POST_DATA );
exit();
?>

el script php incluimos la bibliteca nusoap, despues creamos una instancia de la clase soap_server (eso creo no  soy experto en php y no se si es correcto decir instancia) y despues se define una super compleja funcion llamada compareTo en donde si el numero "b" es mayor que el numero "a" se regresa un valor "-1" si "a" es mayor que "b" se regresa un valor "1" y en caso contrario se regresa un valor "0", asumiendo que si no es mayor ni menor es porque son valores iguales. 
El final la variable $HTTP_RAW_POST_DATA se utiliza para ejecutar el servicio web como notaran se realiza una asignación ya que la variable $HTTP_RAW_POST_DATA debe contener la petición XML SOAP posteriomente cuando se invoca a servidor->service el XML el analizado, y se crea la respuesta XML. Posteriormente el servicio web es llamado para obtener la pagina actual y finalmente exit(); finaliza la ejecución de las instrucciones. (Cualquier mal uso de definiciones es culpa de Checo).


 y la imagen por si no se aprecia adecuadamente.


Para probar vamos a un explorador (utilizare internet explorer no me juzguen en chrome cuando abro el wsdl me abre una ventana de descarga) y vamos a poner la siguiente ruta "http://localhost/ITOServicios/compareTo/compareTo.php" (recuerden el paso uno naaaa jajaja, no ya enserio recuerden iniciar apache en xamp








vamos a observar algo como lo que se muestra en las imágenes. Vamos a probar que este adecuadamente implementado nuestro servicio utilizando soap UI se acuerdan de esa aplicación bueno vamos a abrirla






obtendremos algo como lo que se ven en la imagen. Ahí vamos a indicar en nuestra Initial WSDL/WADL la dirección de nuestro wsdl en mi caso es la siguiente "http://localhost/ITOServicios/compareTo/compareTo.php?wsdl" osea la dirección de implementación agregando "?wsdl" al final.


Posteriormente nos generara un nuevo proyecto con el nombre que indicamos vamos a expandirlo y de ahi vamos a expandir la opción que nos muestra para obtener en mi caso es Request1.






Vamos a probar la implementación esto escribiendo los valores y presionaremos el botón de enviar petición (el boton verde de la flecha en la parte superior) y nos devolvera la petición con el valor que mencionamos en un inicio, (si esta bien claro jeje, en mi caso si esta bien).






Vamos a crear un archivo index.php para que tenga un formulario y se inserten los numeros que se van a comparar. El codigo para mi index.php si notan en el action declaro que se invoque cliente.php y vamos a crearlo y escribir algunas cosas en el.



<form action="cliente.php" method="post">
Ingrese el numero A:
<br />
<input type="text" name="numberA" />
<br />
Ingrese el numero B:
<br />
<input type="text" name="numberB" />
<br  />
<input type="submit" value="Enviar" />
</form>




vamos a crear el archivo cliente.php en nuestra carpeta compareTo y en este vamos a escribir lo siguiente;



<?php
require_once("lib/nusoap.php");
$a=$_POST['numberA'];
$b=$_POST['numberB'];
$cliente = new nusoap_client("http://localhost/ITOServicios/compareTo/compareTo.php?wsdl", "wsdl");
$proxy=$cliente->getProxy();
$r = $proxy->compareTo($a, $b);
if(!$cliente->getError())
{
if($proxy->fault)
{
print_r($r);
}
else
{
print "<strong>El resultado es: </strong> ".$r;
}
}
else
{
print_r($r);
}
?>




tendremos algo como la imagen que se muestra. y posteriormente vamos a probar que funcione adecuadamente. Para esto vamos a escribir en nuestro explorador ahora si el favorito (chrome) la dirección hacia  nuestra carpeta.




tendremos algo como la imagen que se muestra. Vamos a ingresar algunos datos (numeros) para verificar el funcionamiento. Yo ingrese en el numero "A" 2 y en el numero "B" 3 con el resultado siguiene


 con lo que tendremos completado nuestra invocación al servicio web.


Como nos gusta ponerle crema a los tacos ahora vamos a agregar unas cosillas mas a nuestros scripts php en este caso index.php y cliente.php para tener validación de los datos ingresados por el usuario. Para esto seguiremos los datos de este enlace donde se valida datos en un formulario  utilizando jquery (enserio esta bueno chequen el enlace) y vamos a agregar los siguientes archivos:


no vamos a explicar la validación dentro de jquery y validación para eso está el otro post, solo modificaremos valitation.js mas adelante ademas vamos a agregar un una carpeta css a nuestra carpeta compareTo y vamos a poner nuestra hoja de estilo




obteniendo algo como lo que se muestra ne la imagen y el contenido de la hoja de estilo sera siguiente:



@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background: #fff;
line-height:14px;
font-size: 12px;
font-family: Arial,  Verdana, Helvetica, sans-serif;
margin:0pt;
cursor:default;
overflow: hidden;
}
html,body{
height:100%;
text-align: center;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}
strong{
font-weight: 700;
}
/******* GENERAL RESET *******/
h1{
font-weight: 700;
font-size: 18px;
line-height: 1.2em;
border-bottom: 1px dotted #6b9ef1;
color: #5f95ef;
margin-bottom: 1em;
}
/******* LOGO *******/
#logo{
margin-top: 1em;
display: block;
}
/******* /LOGO  *******/
/******* CONTAINER *******/
#container{
width: 600px;
margin: 40px auto;
text-align: left;
}
/******* /CONTAINER *******/
/******* FORM *******/
#customForm{
padding: 0 10px 10px;
}
#customForm label{
display: block;
color: #797979;
font-weight: 700;
line-height: 1.4em;
}
#customForm input{
width: 220px;
padding: 6px;
color: #949494;
font-family: Arial,  Verdana, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #cecece;
}
#customForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#customForm textarea{
width: 550px;
height: 80px;
padding: 6px;
color: #adaeae;
font-family: Arial,  Verdana, Helvetica, sans-serif;
font-style: italic;
font-size: 12px;
border: 1px solid #cecece;
}
#customForm textarea.error{
background: #f8dbdb;
border-color: #e77776;
}
#customForm div{
margin-bottom: 15px;
}
#customForm div span{
margin-left: 10px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
#customForm div span.error{
color: #e46c6e;
}
#customForm #send{
background: #6f9ff1;
color: #fff;
font-weight: 700;
font-style: normal;
border: 0;
cursor: pointer;
}
#customForm #send:hover{
background: #79a7f1;
}
#error{
margin-bottom: 20px;
border: 1px solid #efefef;
}
#error ul{
list-style: square;
padding: 5px;
font-size: 11px;
}
#error ul li{
list-style-position: inside;
line-height: 1.6em;
}
#error ul li strong{
color: #e46c6d;
}
#error.valid ul li strong{
color: #93d72e;
}
/******* /FORM *******/
y modificaremos nuestro index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Comparador</title>
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="validation.js"></script>  
<link href="css/style_form_validate.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center><h1>Comparar dos numeros</h1></center>
<div id="container">  
        <h1>Comparador</h1>  
        <form method="post" id="customForm" action="cliente.php">  
            <div>  
                <label for="numberA">Numero A</label>  
                <input id="numberA" name="numberA" type="text" />  
                <span id="numberAInfo">Escriba un numero</span>  
            </div>  
            <div>  
                <label for="numberB">Numero B</label>  
                <input id="numberB" name="numberB" type="text" />  
                <span id="numberBInfo">Escriba un numero</span>  
            </div>
            <div>  
                <input id="send" name="send" type="submit" value="Enviar" />  
            </div>  
        </form>  
</div>
</body>
</html>
Ahora modificaremos el contenido de nuestro archivo validation.js y obtendremos algo como lo siguiente:


/***************************/
//@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/

$(document).ready(function(){
//global vars
var form = $("#customForm");
var numberA = $("#numberA");
var numberAInfo = $("#numberAInfo");
var numberB = $("#numberB");
var numberBInfo = $("#numberBInfo");
//On blur
numberA.blur(validateNumberA);
numberB.blur(validateNumberB);
//On key press
numberA.keyup(validateNumberA);
numberB.keyup(validateNumberB);
//On Submitting
form.submit(function(){
if(validateNumberA() && validateNumberB())
return true
else
return false;
});
//validation functions
function validateNumberA(){
var value = numberA.val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var intRegex = /^\d+$/;
//if it's NOT valid
if(!intRegex.test(value)){
numberA.addClass("error");
numberAInfo.text("Lo sentimos solo se permiten numeros enteros");
numberAInfo.addClass("error");
return false;
}
//if it's valid
else{
numberA.removeClass("error");
numberAInfo.text("Escriba un numero");
numberAInfo.removeClass("error");
return true;
}
}
function validateNumberB(){
var value = numberB.val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var intRegex = /^\d+$/;
//if it's NOT valid
if(!intRegex.test(value)){
numberB.addClass("error");
numberBInfo.text("Lo sentimos solo se permiten numeros enteros");
numberBInfo.addClass("error");
return false;
}
//if it's valid
else{
numberB.removeClass("error");
numberBInfo.text("Escriba un numero");
numberBInfo.removeClass("error");
return true;
}
}
});


Vamos a nuestro index.php en nuestro navegador y probamos introducir elementos no numéricos como una letra digamos, si no se reflejan los cambios talvez debas cerrar el explorador y cargar de nuevo.






Una ves obtenemos algo como la imagen nos dirigimos a modificar nuestro cliente para mejorar un poco su aspecto. Esto ya que en validation.js solo validaremos del lado del cliente (osea el cliente de la aplicación web no del servicio web).


Como somos de esos desarrolladores de sofware que se preocupan porque la aplicación no falle (no como esos que dicen para que si el usuario nunca va a entrar como checo, naaa jaja) vamos también a validar realizando los siguientes cambios a  cliente.php



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Comparador</title>
<link href="css/style_form_validate.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center><h1>Comparador</h1></center>
<?php
require_once("lib/nusoap.php");
if(isset($_POST['numberA']) && isset($_POST['numberB']))
{
$a=$_POST['numberA'];
$b=$_POST['numberB'];
$cliente = new nusoap_client("http://localhost/ITOServicios/compareTo/compareTo.php?wsdl", "wsdl");


$proxy=$cliente->getProxy();


$r = $proxy->compareTo($a, $b);


if(is_numeric($a)&&is_numeric($b))
{
if(!$cliente->getError())
{
if($proxy->fault)
{
print "<div id=\"error\" class=\"error\"><ul><li><strong>Ocurrio un error:</strong>";
print_r($r);
print "</li></ul></div>";
print "<a href=\"index.php\">Regresar</a>";
}
else
{
print "<div id=\"error\" class=\"valid\"><ul><li><strong>El resultado es:</strong>".$r."</li></ul></div>";
if($r == 1)
{
print "<div id=\"error\" class=\"valid\"><ul><li><strong>El numero ".$a." es mayor que ".$b."</strong></li></ul></div>";
}
elseif($r == -1)
{
print "<div id=\"error\" class=\"valid\"><ul><li><strong>El numero ".$b." es mayor que ".$a."</strong></li></ul></div>";
}
else
{
print "<div id=\"error\" class=\"valid\"><ul><li><strong>El numero ".$a." es igual a ".$b."</strong></li></ul></div>";
}
print "<a href=\"index.php\">Regresar</a>";
}
}
else
{
print "<div id=\"error\" class=\"error\"><ul><li><strong>Ocurrio un error:</strong>";
print_r($r);
print "</li></ul></div>";
print "<a href=\"index.php\">Regresar</a>";
}
}
else
{
print "<div id=\"error\" class=\"error\"><ul><li><strong>No es un numero:</strong>".$p."</li></ul></div>";
print "<a href=\"index.php\">Regresar</a>";
}

}
else
{
print "<div id=\"error\" class=\"error\"><ul><li><strong>No se asigno un valor:</strong>Debe ingresar al formulario primero</li></ul></div>";
print "<a href=\"index.php\">Ir al formulario</a>";
}
?>


y vamos realizar algunas pruebas nuestra pequeña aplicación para verificar que realice todo adecuadamente.


nos da como resultado:


una prueba más sera como la siguiente:


la cual nos arroja el siguiente resultado


y un caso raro que sucede cuando alguien pega la dirección completa en el navegador?


y con eso se termina este post super largo espero le sea de utilidad a alguien. 


Aquí están los códigos fuentes