Archivo para 6/09/08

Introduccion a Jaxer

Y la mejor manera es con ejemplos. Para saber que es Jaxer leete el post anterior. Para poder probar estos ejemplos necesitas tener instalado Aptana Studio (el mismo post anterior te indica como poder hacerlo).

Lo que me gusta de Jaxer es que podemos escribir el codigo del cliente y del servidor en la misma pagina (si queremos). Esto nos permite depurar rapidamente nuestras aplicaciones y comprobar si nuestras funciones javascript funcionan como deben. Aptana en funcion de que el codigo sea del cliente o del servidor resalta el mismo de un color diferente (ver imagen superior). Escribir el codigo es tan sencillo como fijar el codigo del atributo “runat” al valore correspondiente. por ejemplo todo aquel codigo cuyo “runat=server” se ejecutara en el servidor.

Vamos a probar un ejemplo muy tonto, Abre Aptana y crea un nuevo proyecto (File > New Project).

Despues crea un HTML con el siguiente contenido:


Estoy en el cliente...

<input type="button" name="Pulsame" value="Pulsame" onclick="pulsar()" />

<script runat="client">

		function pulsar()
		{
			alert("llego");
			pulsar_servidor();

		}

</script>

<script runat="both">

	function pulsar_servidor()
	{
		alert("Y esto aunque no lo parezca, se ejecuta tras procesarlo el servidor");
	}

</script>

Fijate que solo tenemos un boton que cuando lo pulsamos llama a una funcion “pulsar()” que se ejecuta en el cliente y esta invoca a una funcion “pulsar_servidor” que se ejecutar “en el servidor”, si,.. increible pero cierto. Asi de simple. Todo ello con la magia de el atributo “runat”, el codigo del cliente y el servidor reside en el mismo fichero pero su ejecucion sera en cliente o servidor en funcion de los valores especificados. Viene a ser algo parecido a DWR.

Otro ejemplo, este algo mas tipico, el de un formulario que envia sus valores al servidor tras pulsar el boton “Submit”, Aqui creariamos primero el fichero del cliente:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
	</head>
	<body>

		<form id="form1" name="form1" method="get" action="formulario.html">

			<input type="text" name="nombre" value="Soledad" />
			<input type="submit" value="Enviar" />

		</form>

	</body>
</html>

Este fichero solo contiene un formulario con una caja de texto y un boton “Submit”, Cuando se pulsa el boton se envia el formulario a un target llamado “formulario.html”. Creemos este fichero tambien:

<script runat="server-proxy">

	//Jaxer.response.setContents("Podria devolver esto.");

	nombre=Jaxer.request.data.nombre;

	document.writeln("Parametros recibidos:");
	document.writeln("Nombre es: <B>"+nombre+"</B>");

</script>

Este fichero tan simple (que ya se ejecuta en el servidor, runat=”server-proxy”) lo unico que hace es recuperar el valor introducido en la caja de texto mediante la API de Jaxer (Jaxer.request.data.) e imprimir el valor del mismo:

Instalar Aptana Studio en Ubuntu (y que funcione)

Estoy tanteando ahora Jaxer y he visto que en uno de los metodos mas rapidos de desarrollo web.
Con Jaxer puedo por ejemplo programar mis rutinas Ajax Javascript y comprobar al instante si funcionan correctamente. Es un servidor Ajax con su propio API (Acceso a base de datos, generacion de ficheros, etc…) Asi que cambia un poco la filosofia de programacion, no estamos programando las tradicionales aplicaciones web, que desde un cliente (browser) lanzan peticiones a un servidor web y reciben la respuesta. Aqui con Jaxer empleamos un servidor Ajax.

Hablare de Jaxer en un proximo post. Aqui quiero centrarme en la instalacion de Aptana Studio, que de primeras, da algun que otro problema en Linux.

Aptana Studio es un IDE de desarrollo web fantastico.
Contiene APIs de las principales librerias javascript, asi que es muy comodo escribir el codigo y ver como se van resaltando las funciones. Ademas posee un visor de HTML interno con lo que podemos estar escribiendo el codigo y de un “botonazo” ver como queda la pantalla HTML renderizada
e incluso probarla si tenemos el codigo atacando a un servidor web o Ajax.
Por ejemplo, podriamos escribir un formulario HTML y un boton “Enviar” que atacara a un servlet/JSP o PHP que recibiera los parametros del formulario, los procesara y nos enviara una respuesta.
Pues todo eso, desde el mismo editor, sin salir, ni hacer cosas raras podriamos comprobarlo.

Aptana, se puede instalar como plugin de Eclipse (y me imagino que no dara tantos problemas), pero para aquell@s de vosotr@s que no usais Eclipse o quereis ejecutarlo de manera StandAlone, es lo que veremos aqui.
Ademas yo soy de esas personas que prefiere un Eclipse ligerito de plugins, con los esenciales, para que trabajar con el entorno no se haga muy pesado…

Bien, para instalar Aptana Studio conectate a :

http://www.aptana.com/

y alli nos descargamos Aptana Studio y Aptana Jaxer (si, si, has leido bien, nos descargamos los dos y ahora te explicare porque) para Linux.

Aptana Studio para Linux en teoria lleva Aptana Jaxer incluido en el paquete, pero oh! sorpresa!! cuando instalas Aptana Studio y vas a arrancar el servidor Jaxer interno, te dara un error y te mostrara una ventana indicando que no encuentra el fichero “jaxer”.
asi que nos bajamos “aparte” el servidor jaxer, para luego sobreescribir el jaxer interno, con estos ficheros del jaxer externo y poder parar/arrancar el servidor Jaxer desde el propio entorno.

Instalar Aptana Studio es simple. Es un ZIP que debes descomprimir como root en la siguiente ruta: /usr/local

Tras descomprimir se crea la ruta: /usr/local/aptana

Bien, si ahora procedemos a ejecutar el entorno:

$ ./AptanaStudio

parece que todo va bien, pero si creamos un proyecto, editamos un HTML y por ejemplo le damos a la pestaña de “Previsualizar”, Oh Sorpresa,,, sale toda la ventana en blanco y no nos renderiza el HTML. Parece que el servidor HTML interno de preview no funciona.

A solucionarlo…

Nos salimos e instalamos xulrunner, o en su defecto firefox-2

$ aptitude install xulrunner

esto es por lo que entendi, que Aptana espera ejecutar un ejecutable compilado estaticamente y esto no es asi en las ultimas versiones de firefox. Asi que debemos indicarle la ruta de las librerias adecuadas para que la previsualizacion del HTML embebido funcione.

Otra cosa, En vez de llamar a AptanaIDE directamente creamos un shell script con
el siguiente contenido:

#!/bin/sh
MOZILLA_FIVE_HOME=/usr/lib/xulrunner
if [ $LD_LIBRARY_PATH ]; then
LD_LIBRARY_PATH=$MOZILLA_FIVE_HOME:$LD_LIBRARY_PATH
else
LD_LIBRARY_PATH=$MOZILLA_FIVE_HOME
fi
export MOZILLA_FIVE_HOME LD_LIBRARY_PATH
echo "MOZILLA_FIVE_HOME es $MOZILLA_FIVE_HOME"
echo "LD_LIBRARY_PATH es $LD_LIBRARY_PATH"
/usr/local/aptana/AptanaStudio

Le damos permisos de ejecucion. Yo he llamado al script “run.sh”

$ sudo chmod +x run.sh

y ahora si lo ejecutamos:

$ ./run.sh

Arranca Aptana y ahora “oh sorpresa” la previsualizacion del HTML si funciona. Genial…

Es hora de arrancar Jaxer server, vamos a la pestaña de servidores, nos situamos sobre el servidor y haciendo click derecho, seleccionamos la opcion “Start” y como ya comentabamos, el editor da un error y el servidor Jaxer no pasa a estado “Running”.

Para solucionarlo, salimos de Aptana.
Descomprimimos el servidor Jaxer.zip que nos descargamos antes (recuerdas que te dije que te descargaras los 2 ficheros).

Nos situamos en el directorio:
/usr/local/aptana/plugins/com.aptana.ide.framework.jaxer.server.linux_1.1.7.015414/jam

y es ahi, donde debemos descomprimir el fichero Jaxer.zip para que remplace el directorio “jaxer”.

volvemos a arrancar el entorno y ya funciona correctamente: ahora ya Podemos parar/arrancar el servidor Ajax.

Si queremos que todo funciona correctamente y hay comunicacion entre el cliente y el servidor Ajax, podemos escribir por ejemplo este HTML:

Hola, la version de Jaxer es:
<script runat="server">
	document.write("
Jaxer build number: " + Jaxer.buildNumber + "
");
</script>

Y al previsualizarlo, deberia hacerse ya la llamada al servidor y te mostraria por pantalla la version del mismo.

Hay unos cuantos ejemplos que puedes ver en el lateral izquierdo, bajo la opcion de pestaña Samples.
Si seleccionas alguno te da 2 opciones:

– Visualizarlo: lo ejecuta
– Importarlo como proyecto: se trae el codigo y crea un nuevo proyecto

echale un vistazo a los de Jaxer y JQuery son muy interesantes…

Aqui hay mas info:
http://www.aptana.com/docs/index.php/Installing_Aptana_on_Linux

Enlace | Un upload de fichero con Jaxer es tan sencillo como ejecutar…
Enlace | API de Jaxer

Introduccion a JQuery+JSON: getJSON

Y el post anterior tenia una finalidad clara, introducirnos el concepto de JSON para que lo podamos emplear facilmente desde JQuery. JQuery es una libreria JavaScript que nos permite crear aplicaciones muy potentes de manera muy simple.

En JQuery existe una funcion llamada getJSON que simplifica las llamadas Ajax a un servidor. El formato de esta funcion es el que vemos en el siguiente enlace. Esta llamada lo que hace es enviar una peticion a una determinada URL y esperar a recibir una respuesta en formato JSON, cuando llega la respuesta entonces ejecuta una funcion de procesado de la respuesta.

Probemos el ejemplo de la pagina. Abre un editor de texto y copia el siguiente codigo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "<a class="external free" title="http://www.w3.org/TR/html4/loose.dtd" href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
  <script src="<a class="external free" title="http://code.jquery.com/jquery-latest.js" href="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"></script>

  <script>
  $(document).ready(function(){
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });
  });
  </script>
  <style>img{ height: 100px; float: left; }</style>
</head>
<body>
<div id="images"></div>
</body>
</html>

Cuando lo ejecutes, podras ver que se te muestran la imagen de 4 gatitos. (¿Y esto como es posible?). Vamos a verlo, diseccionando el codigo:

Lo primero que hacemos es importar la libreria de JQuery:

<script src="<a class="external free" title="http://code.jquery.com/jquery-latest.js" href="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"></script>

Sin mayor misterio. esto es solo para poder usar JQuery.

La funcion que nos interesa es precisamente getJSON, que es de la forma:

 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
codigo_a_ejecuta_cuando_llega_la_respuesta
}

Si te fijas, estamos enviando una peticion a la siguiente URL:

"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"

Que si la copiamos y pegamos en la URL de un navegador, esta devolviendo precisamente un string en formato JSON:

({
		"title": "Recent Uploads tagged cat",
		"link": "http://www.flickr.com/photos/tags/cat/",
		"description": "",
		"modified": "2008-09-06T22:41:00Z",
		"generator": "http://www.flickr.com/",
		"items": [
	   {
			"title": "Jungle-apartment cat",
			"link": "http://www.flickr.com/photos/28359008@N04/2833762651/",
			"media": {"m":"http://farm4.static.flickr.com/3075/2833762651_5a09bd3f11_m.jpg"},
			"date_taken": "2008-07-06T23:52:55-08:00",
			"description": "&lt;p&gt;&lt;a href=&quot;http://www.flickr.com/people/28359008@N04/&quot;&gt;World Eggplant&lt;/a&gt; posted a photo:&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;http://www.flickr.com/photos/28359008@N04/2833762651/&quot; title=&quot;Jungle-apartment cat&quot;&gt;&lt;img src=&quot;http://farm4.static.flickr.com/3075/2833762651_5a09bd3f11_m.jpg&quot; width=&quot;240&quot; height=&quot;160&quot; alt=&quot;Jungle-apartment cat&quot; /&gt;&lt;/a&gt;&lt;/p&gt; ",
			"published": "2008-09-06T22:41:00Z",
			"author": "nobody@flickr.com (World Eggplant)",
			"author_id": "28359008@N04",
			"tags": "cute cat ling katt"
	   },
	   {
			"title": "Let Me0owwwt",
			"link": "http://www.flickr.com/photos/sudsmuffincanada/2833750221/",
			"media": {"m":"http://farm4.static.flickr.com/3215/2833750221_0361858bb6_m.jpg"},
			"date_taken": "2008-09-05T18:41:14-08:00",
			"description": "&lt;p&gt;&lt;a href=&quot;http://www.flickr.com/people/sudsmuffincanada/&quot;&gt;SudsMuffinCanada&lt;/a&gt; posted a photo:&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;http://www.flickr.com/photos/sudsmuffincanada/2833750221/&quot; title=&quot;Let Me0owwwt&quot;&gt;&lt;img src=&quot;http://farm4.static.flickr.com/3215/2833750221_0361858bb6_m.jpg&quot; width=&quot;180&quot; height=&quot;240&quot; alt=&quot;Let Me0owwwt&quot; /&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Willow&lt;/p&gt;",
			"published": "2008-09-06T22:35:55Z",
			"author": "nobody@flickr.com (SudsMuffinCanada)",
			"author_id": "21274915@N04",
			"tags": "cat willow gato chatte"
	   },

Esto es precisamente porque estamos usando el API de Flick. Cuando ponemos una URL en este formato, a cambio recibimos una respuesta en formato de string JSON.

Y precisamente asi se comporta la funcion getJSON, cuando recibe la respuesta ejecuta el cuerpo de la funcion.
Esta era:

$.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });

O lo que es lo mismo:

.. Por cada data.items creame un tag donde el valor del atributo “SRC” es el valor del objeto JSON: item.media.m devuelto y eso me lo añades a un div con el id=”images”.
Cuando el valor de i sea 3 te sales, es decir, me devuelves solo cuatro imagenes (empiezo en 0).
Asi que por eso, precisamente obtenemos cuatro imagenes de gatitos desde flick.

¿Simple, no?

Pues la idea es la misma, emplear JQuery en nuestros desarrollos. llamando a getJSON cuando queramos atacar a una URL nuestra que nos debera devolver un string en formato JSON y cuando recibimos ese string JSON le aplicamos la funcion que tengamos definida. Ajax 100%.

Introduccion a JSON

(Ultimamente estoy posteando mucho sobre programacion web y JQuery, espero que me lo perdoneis, a mi me sirve de recordatorio y a otros tal vez para animarse a vivir en este mundo tan malo).

En programacion web, cuando queremos pasar informacion (parametros) desde el lado del cliente al lado del servidor empleamos principalmente dos metodos HTTP que son GET o POST.
Generalmente usamos para ello un formulario que el cliente rellena con los datos que queremos pasar.
El metodo POST se debe emplear cuando el volumen de informacion es elevado, p.ej queremos enviar el contenido de un fichero o una serie de parametros que ocupan varios bytes. El metodo GET se emplea cuando el numero de bytes es menor.
Seguro que te suena el metodo GET, Son listas de valores key=value, Asi que una URL es del estilo:

http://direccion_principal?parametro=valor&parametro2=valor2&parametro3=valor3...

Cuando la peticion llega al servidor, decodifica la URL y obtiene asi la lista de parametros y sus valores asociados.

Bien, … si empleamos el metodo GET es habitual que la forma de paso de parametros sea de 3 formas:

– lista de valores key=value, la mas habitual
– JSON, realmente es un string pero ya organizamos la informacion para que sea facilmente accesible
– XML, otro string que es un XML y que nos permite parsear a posteriori los valores.

Ejemplos:

– Lista de valores: Destino?nombre=Jose&Apellidos=Delgado&alias=piwi
– Json: Destino?json={nombre=Jose,Apellidos=Delgado,alias=piwi}
– XML: Destino?xml=<Parametros><Parametro id=nombre>Jose</Parametro>…

Usar uno u otro, ya depende del programador y de lo “a gusto” que se sienta con uno u otro metodo, no entraremos en “debate”. Pero todos buscan el mismo objetivo: el paso de parametros.

Aqui voy a hablaros de JSON (Javascript Object Notation) y del que podeis obtener mucha mas informacion en el siguiente enlace.

JSON es una forma de intercambio de datos. Y la ventaja que tiene, es que desde el lado de Javascript puede ser considerado como un objeto. Cuando lo tratemos sin embargo desde el lado del servidor, debremos tratarlo como si fuera un string.  Existen librerias segun el lenguaje que usemos que nos permiten genera JSON de manera muy simple a partir de un objeto o parsear un string JSON y convertirlo en un objeto.

Por ejemplo si quisieramos crear un objeto JSON desde Javascript podriamos ejecutar un codigo similar al siguiente:

<script>
    var a={"nombre":"jose","apellidos":"delgado","alias":"piwi"};
    alert (a.nombre);
    alert (a.alias);
</script>

Imprimiria los valores correspondientes y podriamos tratarlo desde Javascript como si fuera un objeto (nombre.atributo).

Si en cambio queremos enviarlo a un servidor, debemos convertir el objeto JSON a un string o definirlo directamente como string. En el caso de Javascript podemos emplear uno de los parsers que vimos en la pagina anterior.Por ejemplo importamos la libreria json2.js y ya podriamos ejecutar:

cadena=JSON.stringify(a);

que nos convertiria el objeto JSON de javascript en un string del estilo:

"{"nombre":"Jose","Apellidos":"Delgado":"alias":"Piwi" }"

el cual puede ser enviado al servidor para ser procesado posteriormente.
El asunto es mas complejo y esto es solo una introduccion, pero la idea es que veais como un objeto con sus atributos puede ser serializado a un string y despues a su vez, a posteriori ser “deserializado” de nuevo a objeto, a partir del string recibido. lo que hace que sea muy sencillo el acceso a sus metodos y atributos.

Ubuntu en el Acer Aspire One

Ahora que bajan de precio y son mas asequibles, un miniportatil es otra opcion para lleva Ubuntu a cualquier lado con nosotros. Si sois poseedores de un Acer Aspire One y teneis problemas para configurar la tarjeta WIFI usando Ubuntu, en la siguiente direccion os cuentan el proceso a seguir:

Enlace | Pillate un Linux

Probando Google Chrome (y 2)

Ahora si que si.. recordais que intente instalarme Google Chrome en Ubuntu mediante wine y no tuve mucho exito. Pues esta mañana he visto que habian actualizado wine a la version 1.1.4 y que habian solucionado muchos bugs de Google Chrome, asi que he decidido actualizar la version de wine y volver a probar. Esta vez: Exitos… El proceso ya os lo conte.


(Mata a tu jefe Flash en Hermoso dia)

Para que se vieran mejor las fuentes, tambien me he instalado fuentes de texto adicionales para wine ejecutando:

$ winetricks corefonts tahoma

Nota: Winetricks ha sido todo un descubrimiento, este shell script es excepcional para instalar librerias en wine.

Eso si, Google Chrome en Linux mediante wine esta muy verde todavia. Da problemas de visualizacion en algunas paginas o fallos al reproducir videos. No lo recomiendo de momento (a menos que quieras ver como es) y si esperar a la version nativa.

Cita

Feliz cumpleaños Marta Checa…
 





¿Es compatible tu equipo con Ubuntu?


( Muchos fondos de pantalla, aqui )

DESCARGATE SCIFI LIFE

365 Dias de Soledad
Me debes los sueños, las promesas y las noches rotas. Me debes la paz, la sonrisa y la esperanza robadas. Me debes la sangre, las lágrimas y el sudor vertido. Me debes las noches vacías, los abrazos anhelados. Me debes un beso de ajenjo de tu amarga boca.

The Ubuntu Counter Project - user number # 11961
Geo Visitors Map
septiembre 2008
L M X J V S D
« Ago   Oct »
1234567
891011121314
15161718192021
22232425262728
2930  

Blog Stats

  • 30.909.668 hits