lunes, 30 de noviembre de 2009

Tu Primer Proyecto Web con Eclipse & Tomcat

Tu primer proyecto web usando Eclipse y Tomcat

Requerimientos:

  1. Instalación de Tomcat (Descarga).
  2. Eclipse IDE. En este post usaré EasyEclipse Expert Java Version: 1.3.1.1 (Descarga).

Siguiendo la línea "Para Newbies", explicaré en cortos pasos una manera rápida de crear tu primer proyecto web con java usando Eclipse como IDE y Tomcat como servidor web. En este caso no se usará un "Super Wizard" para configurar el proyecto sino que se seguiran ciertos pasos manuales para
entender un poco lo que se está haciendo.


1. Primero tenemos que crear nuestro proyecto Java.

File -> New -> Java Project





2. Ahora creamos una clase simple que sera invocada por nuestro código JSP.

Clic derecho en el directorio "src" -> New -> class
Right click on “src” folder ->New ? class

package newbie;  

public class HolaMundo {
public static String getHola() {
return "Hola From Costa Rica, Pura Vida!!!";
}
}


3. Es tiempo de crear la estructura de nuestro directorio "WebContent". Para este simple caso crearemos la siguiente estructura:

HolaMundo
+WebContent
++ pages
++ WEB-INF

4. Dentro del directorio WEB-INF agregaremos un archivo llamado "web.xml". Por el momento vamos a dejarlo simple, pero en el futuro, a medida en que crezca el proyecto, más configuraciones se agregaran a este archivo.

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<!--> More Settings Here <-->

</web-app>


5. Dentro del directorio de "pages" agregaremos un JSP llamado “HolaMundo.jsp”:

<%@ page import="newbie.HolaMundo" %>
<%
String message = HolaMundo.getHola();
%>
<h1><%=message%></h1>

El código de este JSP basicamente incluye nuestra clase Java y despliega el String retornado por el método "getHola()".

6. Antes de configurar nuestro Tomcat necesitamos configurar nuestro "build path". Por defecto Eclipse establece el directorio de salida o "outout folder" (donde los "*.class" para cada uno de los "*.java" se localizan) in "<nombre_proyecto/bin>". Ya que nuestro proyecto es web, necesitamos mover el path a:

“HolaMundo/WebContent/WEB-INF/classes”

Clic derecho en el proyecto ->Build Path-> Configure Build Path... ->Source Tab



7. El último paso es configurar nuestro Tomcat. La manera más fácil es simplemente abrir el archivo "server.xml" localizado en:

<Tomcat Installation>\conf\server.xml

y agregar las siguientes líneas entre las etiquetas “<Host> </Host>”

<Context path="/HolaMundo" reloadable="false" docBase="E:\HolaMundo\WebContent" />

El atributo "path" es un path virtul que apunta a nuestro proyecto indicado por el atributo "docBase".

Si todo fue hecho correctamente lo único que resta es arrancar nuestro Tomcat. Es recomendado instalar un plugin a eclipse, "Tomcat Launcher Plugin", para facilitar las tareas de arrancar y parar el servidor.

Normalmente Tomcat corre en el puerto 8080:


viernes, 20 de noviembre de 2009

Propagando comillas en funciones de Javascript

Me encontré con un problema uno de estos días que representaba recibir en una función de Javascript un texto con comillas adecuadamente escapadas (uso de "\"). Ese mismo texto tenía que ser incluido dinámicamente como otro parámetro de otra función.


<html>
<head>
<script language="javascript">
function A(texto_escapado) {
var divContenido=document.getElementById("contenido");
divContenido.innerHTML = "<a href=\"javascript:B(\'" + texto_escapado +"\');\">clic aca!</a>";
alert(texto_escapado);
}

function B(texto_escapado) {
alert(texto_escapado);
}
</script>
</head>
<body>
<p><a href="javascript:A('\'Esto está escapado\'');">Paso 1</a></p>
<div id="contenido">...</div>
</body>
</html>


El problema que se genera es que a la hora de usar el texto para incluirlo en una concatenación, el texto escapado se pierde y se usa el carácter causando el siguiente
problema:


'Missing ) after argument list'





La solución que encontré es usar la función "replace" de una forma que parece muy particular:


texto_escapado = texto_escapado.replace(/\'/g, '\\\'');


Las dos primeras barras inclinadas ("slashes") son para escapar la primera barra en el texto y la última barra inclinada con la comilla es para escapar la comilla.
(\\="\") + (\'=') = \'


<html>
<head>
<script language="javascript">
function A(texto_escapado) {
var divContenido=document.getElementById("contenido");
alert(texto_escapado);
texto_escapado=texto_escapado.replace(/\'/g, '\\\'');
divContenido.innerHTML = "<a href=\"javascript:B(\'" + texto_escapado +"\');\">clic aca!</a>";
}

function B(texto_escapado) {
alert(texto_escapado);
}
</script>
</head>
<body>
<p><a href="javascript:A('\'Esto está escapado\'');">Paso 1</a></p>
<div id="contenido">...</div>
</body>
</html>


viernes, 6 de noviembre de 2009

7 tips básicos para surfear sobre tu código con Eclipse!

En este corto artículo enfocado a los "newbies" de Eclipse, voy a enseñar unos tips básicos del IDE de Eclipse que considero esenciales en grandes proyectos donde
necesitamos "surfear" en grandes "olas" de código.

1. Buscando por recursos

Olvidemonos de la manera anticuada de navegar a travez de la jerarquía de directorios o paquetes. Si conoces el nombre del recurso que andas buscando, o al menos una parte de él,
usa la opción de Eclipse para buscar un recurso (CTRL + SHIFT + “R”). Puedes usar "wild cards" en caso de que olvidaras el nombre completo de tu recurso.





2. Abre un tipo.

Deseas ir más allá de las fronteras de tus (*.java)'s locales? Si quieres abrir una clase contenida en un JAR (un .class), entonces utiliza el siguiente comando que te permite
ver la clase contenida en algún jar: (CTRL + SHIFT + “T”). Por supuesto que solo puedes abrir una clase contenida en un JAR si el .java esta contenido en el mismo JAR, o si
tienes configurado un decompilador de Java (fuera de nuestro foco en este artículo).



3. Apariciones de Clases y Objectos

A veces queremos ver a gran escala dónde hay apariciones de ciertas clases, variables u objetos. Simplemente haciendo doble clic sobre la clase u objeto el IDE marcará
todas las apariciones de la misma facilitandonos el trabajo en lugar de buscar línea por línea o usar el a veces incomodo comando de buscar.


4. Si dentro de una clase existe una referencia a otra clase, solo presiona la tecla CONTROL y has clic sobre la clase seleccionada. Esto te permitirá brincar sobre la
clase seleccionada.



5. Referencias

Quieres saber que tan popular es tu clase o método? Usa el abridor de referencias para descubrirlo. Selecciona tu clase o métod, clic derecho > References > [Workspace | Project | ...]


6. Jerarquía de llamados

Una larga línea entre tu método y su originador? No juegues de paleontólogo, usa la jerarquía de llamados para averiguarlo. Clic derecho en tu método > Open Call Hierarchy (or CTRL + SHIFT + “H”) y “voila”.





7. Búsqueda de Archivos

Cuando el texto que buscas está bastante escondido dentro de tu código, incluyendo XML, JavaScript, JSP, *, lo que necesitas es usar el buscador de archivos: CTRL + “H”