<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>.:: Seam City ::. &#187; ajax</title>
	<atom:link href="http://seamcity.madeinxpain.com/archives/tag/ajax/feed" rel="self" type="application/rss+xml" />
	<link>http://seamcity.madeinxpain.com</link>
	<description>Sobre programación en general, y Seam en particular</description>
	<lastBuildDate>Thu, 22 Jan 2009 15:35:41 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Seam y Ajax con Seam Remoting</title>
		<link>http://seamcity.madeinxpain.com/archives/seam-y-ajax-con-seam-remoting</link>
		<comments>http://seamcity.madeinxpain.com/archives/seam-y-ajax-con-seam-remoting#comments</comments>
		<pubDate>Thu, 29 May 2008 09:16:35 +0000</pubDate>
		<dc:creator>Tes</dc:creator>
				<category><![CDATA[seam]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://seamcity.madeinxpain.com/?p=42</guid>
		<description><![CDATA[Realizar peticiones Ajax a tus componentes en Seam es increíblemente fácil gracias al framework Seam Remoting.
Con solo añadir un par de lineas de javascript, tu componente escrito en Java se convierte en un componente javascript, pudiendo acceder a sus campos y ejecutar sus métodos asíncronamente.
En simplemente tres pasos podemos invocar a un componente y manejar [...]]]></description>
			<content:encoded><![CDATA[<p>Realizar peticiones Ajax a tus componentes en Seam es increíblemente fácil gracias al framework Seam Remoting.<br />
Con solo añadir un par de lineas de javascript, tu componente escrito en Java se convierte en un componente javascript, pudiendo acceder a sus campos y ejecutar sus métodos asíncronamente.<br />
En simplemente tres pasos podemos invocar a un componente y manejar la respuesta.</p>
<p><strong>1) Indica los métodos que van a invocarse vía Ajax</strong><br />
Simplemente marca con la anotación @WebRemote los métodos que quieras invocar por Ajax.</p>
<div class="syntax_hilite">
<div id="java-8">
<div class="java">@<a href="http://www.google.com/search?q=allinurl%3AName+java.sun.com&amp;bntl=1" onclick="javascript:pageTracker._trackPageview('article_out/www.google.com');"><span style="color: #aaaadd; font-weight: bold;">Name</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"calculadora"</span><span style="color: #66cc66;">&#41;</span><br />
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> Calculadora <span style="color: #66cc66;">&#123;</span></p>
<p>&nbsp; &nbsp;<span style="color: #000000; font-weight: bold;">private</span> float pi = <span style="color: #cc66cc;">3</span>.<span style="color: #cc66cc;">14</span>;<br />
&nbsp; &nbsp;<span style="color: #000000; font-weight: bold;">private</span> float n = <span style="color: #cc66cc;">10</span>;</p>
<p>&nbsp; &nbsp; @WebRemote<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #993333;">int</span> suma<span style="color: #66cc66;">&#40;</span>float a, float b<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">return</span> a+b<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p>&nbsp; &nbsp; @WebRemote<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #993333;">int</span> sumaConstante<span style="color: #66cc66;">&#40;</span>float a<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006600;">n</span> + a;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p>&nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// Este metodo no está marcado con @WebRemote, por lo que no se puede invocar desde javascript</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #993333;">void</span> metodoNoAjax<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
&nbsp; <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">public</span> float getPi<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006600;">pi</span>;<span style="color: #66cc66;">&#125;</span><br />
<span style="color: #66cc66;">&#125;</span></div>
</div>
</div>
<p></p>
<p>Si quisieses invocar un EJB en lugar de un POJO, las anotaciones @WebRemote deberán estar en la declaración los métodos de la interface del EJB.</p>
<p><strong>2) Importa los scripts necesarios</strong><br />
Primero debes importar el script que contiene el código que permite las llamadas remotas:</p>
<div class="syntax_hilite">
<div id="javascript-9">
<div class="javascript">&lt;script type=<span style="color: #3366CC;">"text/javascript"</span> src=<span style="color: #3366CC;">"seam/resource/remoting/resource/remote.js"</span>&gt;&lt;/script&gt;</div>
</div>
</div>
<p></p>
<p>Ahora por cada componente que contenga métodos que quieras invocar vía Ajax debes importar otro script en el que indicas el nombre del componente (el que has definido en la anotacion @Name).<br />
Este script contiene el stub del componente, que indica los métodos a los que puedes llamar y la definición de sus tipos.<br />
Por ejemplo, si tienes un componente anotado con @Name("calculadora") deberás incluir la siguiente linea</p>
<div class="syntax_hilite">
<div id="javascript-10">
<div class="javascript">&lt;script type=<span style="color: #3366CC;">"text/javascript"</span> src=<span style="color: #3366CC;">"seam/resource/remoting/interface.js?calculadora"</span>&gt;&lt;/script&gt;</div>
</div>
</div>
<p></p>
<p>Si quisieses acceder a más de un componente en la misma página puedes especificar varios componentes:</p>
<div class="syntax_hilite">
<div id="javascript-11">
<div class="javascript">&lt;script type=<span style="color: #3366CC;">"text/javascript"</span> src=<span style="color: #3366CC;">"seam/resource/remoting/interface.js?calculadora&amp;componente2&amp;componente3"</span>&gt;&lt;/script&gt;</div>
</div>
</div>
<p></p>
<p>También puedes importar el javascript de los componentes usando el tag s:remote.</p>
<div class="syntax_hilite">
<div id="javascript-12">
<div class="javascript">&lt;s :remote include=<span style="color: #3366CC;">"calculadora,componente2,componente3"</span>/&gt;</div>
</div>
</div>
<p></p>
<p><strong>3) Invoca el método y maneja la respuesta</strong><br />
Ahora podemos invocar los métodos de nuestra calculadora marcados con @WebRemote.<br />
Para obtener los objetos javascript que representan nuestros componentes debemos hacerlo a través de Seam.Component.<br />
En la llamada le pasamos los parámetros que tenga el método al que estemos invocando (admite sobrecarga) y un último parámetro que será la función a la que se invocará con el resultado de la invocación</p>
<div class="syntax_hilite">
<div id="javascript-13">
<div class="javascript">&lt;script type=<span style="color: #3366CC;">"text/javascript"</span>&gt;<br />
&nbsp; <span style="color: #009900; font-style: italic;">//&lt;![CDATA[</span></p>
<p>&nbsp; <span style="color: #003366; font-weight: bold;">function</span> suma<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; Seam.<span style="color: #006600;">Component</span>.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"calculadora"</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">suma</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">1</span>, <span style="color: #CC0000;">5</span>, muestraResultado<span style="color: #66cc66;">&#41;</span>;<br />
&nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p>&nbsp; <span style="color: #003366; font-weight: bold;">function</span> muestraResultado<span style="color: #66cc66;">&#40;</span>result<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>result<span style="color: #66cc66;">&#41;</span>; <span style="color: #009900; font-style: italic;">// --&gt; mostrará un 6</span><br />
&nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p>&nbsp; &nbsp;<span style="color: #009900; font-style: italic;">// ]]&gt;</span><br />
&lt;/script&gt;</div>
</div>
</div>
<p></p>
<p>También puedes acceder a los campos del componente que tengan un getter asignar un valor a los que tengan un setter.</p>
<div class="syntax_hilite">
<div id="javascript-14">
<div class="javascript">&lt;script type=<span style="color: #3366CC;">"text/javascript"</span>&gt;<br />
&nbsp; <span style="color: #009900; font-style: italic;">//&lt;![CDATA[</span></p>
<p>&nbsp; <span style="color: #003366; font-weight: bold;">var</span> calc = Seam.<span style="color: #006600;">Component</span>.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"calculadora"</span><span style="color: #66cc66;">&#41;</span>;<br />
&nbsp; <span style="color: #003366; font-weight: bold;">function</span> suma<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; calc.<span style="color: #006600;">n</span> = <span style="color: #CC0000;">25</span>;<br />
&nbsp; &nbsp; calc.<span style="color: #006600;">sumaConstante</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">5</span>, muestraResultado<span style="color: #66cc66;">&#41;</span><br />
&nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p>&nbsp; <span style="color: #003366; font-weight: bold;">function</span> muestraResultado<span style="color: #66cc66;">&#40;</span>result<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>result<span style="color: #66cc66;">&#41;</span>;&nbsp; &nbsp;<span style="color: #009900; font-style: italic;">// --&gt; mostrará 30</span><br />
&nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>calc.<span style="color: #006600;">pi</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #009900; font-style: italic;">// --&gt; mostrará 3.14</span><br />
&nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p>&nbsp; &nbsp;<span style="color: #009900; font-style: italic;">// ]]&gt;</span><br />
&lt;/script&gt;</div>
</div>
</div>
<p></p>
<p>Seam Remoting también permite evaluar EL Expressions, trabajar con Collections, hacer debug de las llamadas enviadas y recibidas, suscribirse a una cola JMS.<br />
Toda esta información y más se encuentra disponible en la <a href="http://docs.jboss.com/seam/2.0.0.GA/reference/en/html/remoting.html" onclick="javascript:pageTracker._trackPageview('article_out/docs.jboss.com');">documentación</a> en inglés</p>
]]></content:encoded>
			<wfw:commentRss>http://seamcity.madeinxpain.com/archives/seam-y-ajax-con-seam-remoting/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

