En el post anterior mostré como empezar con Ext JS. Se creó un MessageBox que mostraba un "Hola Mundo". Pero todo ocurría en el cliente(browser). ¿Qué pasa si deseas que ese mensaje venga desde el servidor web?, o ¿Si deseas enviar datos al servidor web para que este los grabe en una base de datos y no esté refrescando la página web?. Bueno este tutorial te enseña como dar el primer paso, en un posterior post eneseñaré como tulizar los principales componentes de extjs como los formularios y grids.
Paso 0:
Ahora si, es momento que utilices una tecnología del lado del servidor como PHP, ASP o JSP y servlets. Como en mi sangre fluye Java, pues los ejemplos serán con JSP y Servlets.
Ten listo un proyecto web en eclipse o netbeans o en cualquier otro IDE que te permita trabajar.
Paso 1:
En el cliente:
El siguiente HTML muestra un botón que al dar click mostrará un MessageBox como en el ejemplo del post anterior, pero ahora el mensaje que mostrará será un texto enviado desde el servidor web:
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-all.js"></script>
</head>
<body style="padding:10px;">
<button onClick="javascript:obtenerHoraDelServidor();">Obtener Hora Del Servidor</button>
<script type="text/javascript">
//Código ExtJS
</script>
</body>
</html>
Paso 2:
Ahora añade el siguiente código dentro de <script>...</script>
function obtenerHoraDelServidor(){
Ext.Ajax.request({
url:'HoraServidorServlet',
method:'GET',
params:{
accion:'obtenerHora'
},
success: function(response, opts){
var mensaje = response.responseText;
Ext.MessageBox.show({
title:'Hora del servidor',
msg:mensaje,
buttons:Ext.MessageBox.OK,
icon:Ext.MessageBox.INFO
});
},
failure: function(response, opts){
//...
}
});
}
La clase Ext.Ajax permite entablar una comunicación con el servidor, su método request indica la url que gestionará la petición en el servidor, los parámetros a enviar y el procesamiento de la respuesta satisfactoria del servidor(función success) o el procesamiento de una respuesta de error del servidor(función failure).
Paso 3:
En el servidor:
En el paso 2 indicamos una url de servidor. Entonces es momento de crear el servlet que gestionará la petción del cliente(browser):
public class HoraServidorServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss (dd/MM/yyyy)");
String fechaConFormato = sdf.format(new Date());
out.print("Hora del Servidor: " + fechaConFormato );
out.close();
}
}
Observen que el servlet gestiona una petición por método GET(fué indicado en el Ext.Ajax.request()).
Luego de que tienes listo el servlet, ejecuta tu aplicación web y desde index.html o como llamaste a tu html y da click en el botón. El resultado debe ser como se muestra en la siguiente figura:
