Telepieza´s Weblog

 Mootools es un Framework (Estructura de soporte definida, mediante la cual otro proyecto de software puede ser desarrollado), web orientado a objeto para JavaScript, de código abierto (Open Source). Gracias a dicho programa podemos desarrollar aplicaciones de escritorio de una forma sencilla y elegante.

Es interesante leer la información de la wikipedia para entender mejor el porqué es necesario programas como Mootools, Jquery, Dojo, Prototype  o script.aculo.us para desarrollar páginas web cada vez más interactivas con el usuario final (Internauta).

Mootools tiene un API para ajax, pero en mi opinión el modulo JPSpan está más desarrollado para entornos AJAX – PHP.

JPSpan una de las cosas que tiene muy buenas es el control de 6 tipos diferentes de errores.

1. Control de Error en la comunicación con XMLHttpRequest.
2. Mensajes de Error durante la comunicación con el Servidor.
3. Control de Error desde el Servidor al Cliente.
4. Mensajes de Error de Aplicación del Servidor al Cliente.
5. Mensajes de Error de Aplicación del Cliente al Servidor.
6. Error de sintaxis en los programas de JavaScript

JPSpan no se centra sólo en gestionar bien los mensajes de error, sino en la comunicación de datos pudiendo ser en los siguientes formatos:  JSON, PHP, XML, TXT.

Podemos utilizar Mootools como gestor de eventos para controlar las teclas y el ratón en nuestra aplicación WEB, dejando el código de nuestra página sólo con código HTML, sin ninguna instrucción  JavaScript y CSS.

Se dice que la era de la WEB 2.0 es eso, uno o varios ficheros con extensión  .css para los estilos, uno o varios ficheros .js para el código JavaScript y por último una página realizada en php o html o .NET o Java, que su resultado final  es sólo código HTML.

Todo lo expuesto no es posible si no tenemos herramientas como Mootools o JPSpan para poder realizar nuestros proyectos con una precisión y fiabilidad increible.

Pero todo tiene una pega, y son las incompatibilidades que un programador tiene cuando quiere unir diferentes programas (Mootools y JPSpan)  para poder llegar a un resultado final  esperado por el programador, cuando tenemos dichos problemas, nos es muy dificil solucionarlos por tener poca ayuda disponible en Internet.

Escribo dicho post para explicar cómo solucionar un problema grave de funcionamiento del modulo JPSpan utilizando Mootools como framework en nuestras aplicaciones Web.

El problema radica en la no recepción de parámetros o datos enviados por nuestro programa realizado en JavaScript al servidor de datos PHP.

Lee el resto de esta entrada »

Vamos a realizar un pequeño resumen en la 5ª parte de lo aprendido sobre JPSpan y PHP antes de seguir aprendiendo más cosas sobre la tecnología AJAX – JPSpan – PHP.

……………………………………………………..

1.- JPSpan se comunica mediante HTTP, define la sintaxis y la semántica que utilizan los elementos software de la arquitectura web (clientes, servidores, proxies) para comunicarse. Es un protocolo orientado a transacciones y sigue el esquema petición-respuesta entre un cliente y un servidor.

2.- JPSpan utiliza el Objeto XMLHttpRequest (XHR), también referida como XMLHTTP (Extensible Markup Language / Hypertext Transfer Protocol), es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores WEB. Para los datos transferidos se usa cualquier codificación basada en texto, incluyendo: texto plano, PHP, XML, JSON, HTML. Dicho objeto lo tenéis en JPSpan/js/httpclient.js

3.- JPSpan utiliza la técnica de reflexión de objetos. La reflexión es un proceso mediante el cual un programa es capaz de obtener información sobre si mismo y por tanto es capaz de auto modificarse en tiempo de ejecución. JavaScript emplea el concepto de reflexión para permitir descubrir propiedades y métodos de objetos externos. El ejemplo más sencillo es el de averiguar si un objeto posee un determinado método y así poder ejecutarlo (Eso es lo que hace JPSpan).

Lee el resto de esta entrada »

Nos vamos a centrar en la 4ª parte en estudiar el método  displayClient(), por ser el encargado de generar el esquema de código JavaScript necesario para la comunicación.

Cómo hemos indicado JPSpan proporciona al Cliente el código JavaScript necesario para realizar llamadas a la clase en el lado del servidor y hacer que la página pueda gestionar las llamadas en sí.

La función displayCliente(), está en la página /JPSpan/Server.php y es :

/**
* Display the Javascript client and exit
* @return void
* @access public
*/
function displayClient() {
$G = & $this->getGenerator();
require_once JPSPAN . ‘Include.php’;
$I = & JPSpan_Include::instance();
// HACK – this needs to change
$I->loadString(__FILE__,$G->getClient());
$client = $I->getCode();
header(‘Content-Type: application/x-javascript’);
header(‘Content-Length: ‘.strlen($client));
echo $client;
}

Lo importante de dicho método es la generación de la variable $client, es donde está todo el código JavaScript generado por JPSpan en función a los parámetros que le hemos enviado, por ejemplo, indicar que el código de transmisión de los argumentos (variables) sea por ‘php’, ‘xml’ o json’ o Comprimir el código JavaScript mediante la página script.php.

Cómo no es posible visualizar por pantalla la variable $client, vamos a introducir tres líneas nuevas de código php (ver abajo en rojo la incorporación) para grabar dicha variable en un fichero con nombre ‘logclient.txt’ para analizar su contenido en profundidad y es :

/**
* Display the Javascript client and exit
* @return void
* @access public
*/
function displayClient() {
$G = & $this->getGenerator();
require_once JPSPAN . ‘Include.php’;
$I = & JPSpan_Include::instance();
// HACK – this needs to change
$I->loadString(__FILE__,$G->getClient());
$client = $I->getCode();
$t_log_fp   = fopen(‘logclient.txt’, ‘w’);
fwrite($t_log_fp, $client );
fclose($t_log_fp);
header(‘Content-Type: application/x-javascript’);
header(‘Content-Length: ‘.strlen($client));
echo $client;
}

La primera instrucción insertada por nosotros $t_log_fp  = fopen(‘logclient.txt, ‘w’); le indicamos que abra el fichero de modo escritura, si no existe lo crea, y que empiece en el primer registro al indicar la letra ‘w’.

La segunda instrucción  fwrite($t_log_fp, $clientn ); le indicamos que grabe en dicho fichero la variable $client.

La tercera instrucción fclose($t_log_fp); le indicamos que cierre el fichero logclient.txt.

NOTA : Cuando activamos el programa realizado en html con el navegador y llama al programa jpspan_server.php del servidor, grabará en la carpeta  (donde ha sido llamado el programa jpspan_server.php) el fichero logclient.txt con todas las instrucciones javascript necesarias para poder realizar la comunicación.

Podemos ver el fichero una vez generado : FICHERO LOGCLIENT.TXT

Lee el resto de esta entrada »

En la tercera parte de Ajax con JPSpan para PHP, vamos a explicar el funcionamiento del programa jpspan_server.php del servidor. (Abajo les dejo el código de dicho programa).

---

<?php
/**
* This is a remote script to call from Javascript
*/
require_once ‘../JPSpan.php’;
require_once JPSPAN . ‘Server/PostOffice.php’;
define(‘JPSPAN_INCLUDE_COMPRESS’,FALSE);
session.start();
class Customer
{
public function getMyDatos($tysexo)
{
$mydatos['sessionid'] = session_id() ;
$mydatos['nombre'] = “mariano” ;
$mydatos['empresa'] = “Telepieza S.A.” ;
if ($tysexo == “H”) $mydatos['tysexo']= “Hombre”;
elseif ($tysexo == “M” ) $mydatos['tysexo']=’Mujer’  ;
else   $mydatos['tysexo'] = ‘¿?’;
return $mydatos ;
}
}
$S = & new JPSpan_Server_PostOffice();
$S->RequestEncoding = ‘php’;
$S->addHandler(new Customer());

  Las instrucciones requiere_once ‘../JPSpan.php’ declara la constante JPSPAN, para después utilizarla en la llamada del programa principal que está en la carpeta JPSpan/Server/PostOffice.php de esa forma tiene disponibles las clases necesarias para la comunicación entre el Servidor y el Navegador.

1.- require_once ‘../JPSpan.php’;
2.- require_once JPSPAN . ‘Server/PostOffice.php’;

La variable JPSPAN_INCLUDE_COMPRESS, puede ser TRUE o FALSE, sirve para comprimir el programa en javascript generado por el servidor para la comunicación, siempre le indicaremos FALSE, porque la técnica de compresión que tiene JPSpan es muy lenta y come mucho recurso de máquina, no es nada aconsejable colocar en dicha variable TRUE.

Lee el resto de esta entrada »

En la segunda parte de Ajax con JPSpan, vamos a realizar un programa en el lado del cliente con JavaScript y HTML y en el servidor un programa en PHP.

Dichos programas serán muy sencillos, porque mi intención es probar la rápidez del sistema de comunicaciones con JPSpan y después iremos complicando los programas en función de los comentarios y pruebas a realizar.

La ídea del programa: El programa tiene que enviar un campo con un select de M=Mujer y H=Hombre al servidor y este tiene que responder la ID de session del sistema, un nombre y empresa, supuestamente extraido de una Base de Datos y el texto de Hombre o Mujer seleccionado por el Usuario.

Ejemplo del programa muy Sencillo de Comunicación Ajax con JpSpan

Hombre/Mujer

Mujer Hombre

Enviar

Sesion ID :

Nombre :

Empresa:

El Sexo Seleccionado es : Mujer

El programa en el lado del cliente y realizado en html es :

---

<head>
<title>Ejemplo Sencillo de JPSpan</title>
<script type=”text/javascript” src=”jpspan_server.php?client”></script>
<script type=”text/javascript”>

function init() {
remoteCustomer = new customer(customerCallback);
}

var customerCallback = {
getmydatos:function(mydatos)
{
showDatos(mydatos);
}
};

function fetchMydatos(tysexo) {
remoteCustomer.getmydatos(tysexo.value);
}

function showDatos(Mydatos) {
document.getElementById(“txtSession”).value = Mydatos["sessionid"];
document.getElementById(“txtNombre”).value  = Mydatos["nombre"];
document.getElementById(“txtEmpresa”).value = Mydatos["empresa"];
document.getElementById(‘esSexo’).innerHTML=Mydatos["tysexo"];
}

</head>
<body onload=”init();”>
<h1>Ejemplo muy Sencillo de Comunicación Ajax con JpSpan</h1>
<p><label>Hombre/Mujer</label>
<select size=”1″ name=”txtSexo”>
<option selected value=”M”>Mujer</option>
<option value=”H”>Hombre</option>
</select></p>
<p><button onClick=”javascript:fetchMydatos(document.getElementById(‘txtSexo’));” >Enviar</button></p>
<p>Sesion ID : <input id=”txtSession”  name=”sessionid” size=”55″ type=”text”></p>
<p>Nombre :<input id=”txtNombre” name=”nombre”  size=”55″ type=”text”> </p>
<p>Empresa : <input id=”txtEmpresa” name=”empresa” size=”45″ type=”text”></p>
<label>El Sexo Seleccionado es : </label><p id=”esSexo”> </p>
</body>
</html>

---

Vamos a comentar las instrucciones que son esenciales para la conexión del  programa con el servidor PHP:

Lee el resto de esta entrada »

Uno de los grandes problemas del protocolo HTTP es que los servidores no pueden conectar con el Cliente (Navegador), si éste no ha pedido una conversación o conexión previa con el servidor de información de Internet.

La naturaleza de HTTP en las aplicaciones web, del punto de vista del internauta, se llevan a cabo por acciones (Eventos) y la aplicación web responde con otra página para enseñar dicha información o solicitar más información al usuario.

En una aplicación Web , cada acción del usuario, por ejemplo hacer un click en un botón de un formulario, genera la recarga de otra página web entera para actualizar la información solicitada y a la vez, muchas veces dicha información precisa de más datos que a su vez, crea frustración por tanta demora entre página y página.

Pero el mundo de internet está cambiando con la revolución de la WEB 2.0 y la técnica AJAX. Gracias a dicha técnica nos podemos acercar a apliaciones en entorno escritorio, sin la necesidad de recargar páginas enteras, sino partes de ella para visualizar los datos requeridos por el usuario.

Para poder trabajar con AJAX, necesitas dominar las tecnologías de  CSS, HTML, XML, JAVASCRIPT, DHTML y DOM, en el lado del Cliente (Navegador) y en el lado del servidor, puede ser cualquier lenguaje orientado a objetos como (JAVA, PHP, VISUAL, PERL).

La técnica que vamos a explicar con JPSpan, es un marco de trabajo Ajax,  para comunicar y transferir datos en formato (XML, JSON y PHP) con servidores programados en PHP con aplicaciones que en su otro extremo tengan  JAVASCRIPT.

JPSpan es simplemente un integrador de clases entre Javascript y PHP, para que se puedan comunicar entre ellos utilizando una clase PHP la técnica de reflexión.

Para poder conseguir los programas de JPSpan, hay que realizar lo siguiente :

1. Nos descargamos de OpenSource la versión JPSpan 0.4.3, dicha versión tiene un montón de ejemplos y uno de ellos el autocomplete2.html es digno de probar.
2. La versión que está colgada en OpenSource es muy antigua, para descargar la versión de explotación o programación tenemos que ir al blog de Valentin Agachi y recuperar JPSpan 2.0 con JSON, dicha versión no tiene ejemplos, pero es una de las más actualizadas, es del año 2.006 y soporta el navegador Opera 8.5+ en sus comunicaciones.
3. Una vez recuperado JPSpan, tenemos que leer el artículo de uno de los blog más importantes de habla inglesa sobre AJAX y es The weblog of Joshua Eichorn

Lee el resto de esta entrada »