martes, 16 de agosto de 2011

JQuery games 2

Hola a todos!

Siguiendo el post JQuery games, donde se tratan los temas básicos para empezar con GameQuery, en este tutorial trataremos lo que yo creo que son los puntos básicos para hacer cualquier juego 2D simple o mínimamente complejo para una web:

- Añadir sprites dinámicamente a un group.
- Capturar eventos del mouse con Jquery.
- Mover todos los sprites de una misma clase css.
- Detectar colisiones entre sprites.
- Eliminar sprites de un group.

Para aprender estos puntos, realizaremos un pequeño minijuego en el que irán cayendo burbujas desde arriba y con el mouse podremos poner burbujas donde queramos.
Cuando una burbuja que caiga de arriba toque a alguna que hayamos añadido, ambas desapareceran.


Aquí tenéis los archivos necesarios para realizar el tutorial:
bluesky.png
burbuja.png

JQuery GAMES: Estructura del juego

Seguimos exactamente con la misma estructura que expliqué en el post JQuery Games, con un apartado nuevo, EVENTOS:

$(window).load(function(){

//DECLARACIÓN DE CONSTANTES
//DECLARACIÓN DE VARIABLES

//MAIN FUNCTION//
$(function(){
//CARGA DE IMÁGENES
//CONFIGURACION DEL PLAYGROUND
//INICIALIZACIÓN DE LAS CAPAS DEL PLAYGROUND
//DEFINICIÓN DE LAS CALLBACK FUNCTIONS
//EVENTOS
//INICIAR EL JUEGO : $.playground().startGame();
});
});

JQuery GAMES: Imágenes y Playground

Las variables que almacenaran los sprites de imágenes son:

var background1;
var burbuja = new Array();

Carga de las imágenes:

background1 = new $.gameQuery.Animation({imageURL: "bluesky.png"});
burbuja["normal"] = new $.gameQuery.Animation({imageURL: "burbuja.png"});

La estructura del playground estará compuesta por 3 groups o capas, una capa para el background, una para las burbujas que genera el juego dinámicamente y otra para las burbujas que genera el usuario clicando en la pantalla.

$.playground()
.addGroup("background", {width: PLAYGROUND_WIDTH,
height: PLAYGROUND_HEIGHT})
.addSprite("background1", {animation: background1,
width: PLAYGROUND_WIDTH,
height: PLAYGROUND_HEIGHT})
.end()
.addGroup("bubbleCPULayer", {width: PLAYGROUND_WIDTH,
height: PLAYGROUND_HEIGHT})
.end()
.addGroup("bubblePlayerLayer", {width: PLAYGROUND_WIDTH,
height: PLAYGROUND_HEIGHT});

JQuery GAMES: generar dinámicamente sprites

Para crear dinámicamente sprites cada cierto tiempo, vamos a crear una callback function que se ejecute cada 1000 milisegundos.

/**CALLBACK BUBBLE GENERATOR**/
$.playground().registerCallback(function(){
var name = "bubbleCPU"+Math.ceil(Math.random()*1000);
$("#bubbleCPULayer").addSprite(name, {animation: burbuja["normal"], posx: Math.random()*PLAYGROUND_WIDTH, posy: 0, width: 33, height: 33 });
$("#"+name).addClass("bubbleCPU");
}, 1000);

Primero creamos el nombre que tendrá la nueva burbuja, el nuevo sprite que añadiremos:
var name = "bubbleCPU"+Math.ceil(Math.random()*1000);

Seguidamente añadimos un nuevo sprite al group "bubbleCPULayer" del playground, esto lo hacemos mediante un selector Jquery por id:
$("#bubbleCPULayer").addSprite(name, {.. atributos ..});

Atributos:
animation - imagen que vamos a cargar
posx - posición x donde aparecerá el sprite, es relativa al group en el que se añade
posy - posición y donde aparecerá el sprite, es relativa al group en el que se añade
width - ancho de la imagen que se mostrará
height - alto de la imagen que se mostrará

Esto es IMPORTANTÍSIMO:
Añadimos una clase css a la burbuja que hemos creado dinámicamente:

$("#"+name).addClass("bubbleCPU");

Sin este paso, sin añadir la clase no podremos recoger fácilmente el grupo de todas las burbujas que añadamos dinámicamente, a no ser que vayamos apuntando las id's (algo engorroso si pensamos en que se irán creando y destruyendo).

JQuery GAMES: capturar eventos del mouse

Los eventos del mouse los capturamos mediante una función estándar de JQuery.
Como queremos que cuando cliquemos en la pantalla, se genere dinámicamente una nueva burbuja en la capa o group "bubblePlayerLayer", emplearemos la función click:

/**EVENTOS**/
$("#playground").click(function(e){
mousex = e.pageX;
mousey = e.pageY;
var newx = mousex-20;
var newy = mousey-20;
var name = "bubble_"+Math.ceil(Math.random()*1000);
$("#bubblePlayerLayer").addSprite(name, {animation: burbuja["normal"], posx: newx, posy: newy, width: 33, height: 33 });
$("#"+name).addClass("bubblePlayer");
});

e.pageX - Indica la posición del eje x relativa al div que dispara el evento.
e.pageY - Indica la posición del eje y relativa al div que dispara el evento.

Cuando hemos recogido las coordenadas x e y del mouse, restamos o sumamos los píxels de desplazamiento del sprite, para que quede centrado en el punto donde clicamos. Y seguidamente añadimos un nuevo sprite dinámicamente, de la misma forma que en el punto anterior, pero indicando la capa "bubblePlayer".

JQuery GAMES: mover todos los sprites de una misma clase css

Ahora por cada segundo que pasa se está creando una nueva burbuja en la parte superior del playground, y si clicamos sobre el playground se crean burbujas donde indicamos con el mouse.
Para hacer que las burbujas vayan cayendo tenemos que crear una nueva callback function que gestione lo siguiente:

"Por cada sprite de la clase css 'bubbleCPU' incrementa su posición y"

Esta callback function queda de la siguiente forma:

$.playground().registerCallback(function(){
$(".bubbleCPU").each(function(){
var posy = parseInt($(this).css("top"))+5;
$(this).css("top",""+posy+"px");
});
}, REFRESH_RATE);

Por cada sprite de la clase css 'bubbleCPU':
$(".bubbleCPU").each(function(){.........});

incrementa su posición y:
var posy = parseInt($(this).css("top"))+5;
$(this).css("top",""+posy+"px");

JQuery GAMES: detectar colisiones entre sprites

Para detectar las colisiones entre dos sprites, emplearemos la función "collision()" de gameQuery.
Esta función retorna la lista de elementos que han colisionado con el elemento que invoca la función:
Como parámetro podemos añadirle un filtro, identificador de elemento, clase css de elemento con el que queremos ver si ha colisionado:
Por ejemplo:
var collided = $("#elementoA").collision("#elementoB,.group");

Aquí vemos si un elemento con id "elementoA" ha colisionado con un elemento con id "elementoB", para ello comprobaremos que la variable collided <-- (recuerdo que es una lista), tiene más de 0 elementos:

if(collided.length > 0)

Bien, ahora vamos a seguir con nuestro ejemplo, veamos como detectamos que sprites de la clase "bubbleCPU" ha colisionado con un sprite de la clase "bubblePlayer":

Para ello modificamos la callback function que controla el movimiento de caída de las burbujas:

$.playground().registerCallback(function(){
$(".bubbleCPU").each(function(){
var posy = parseInt($(this).css("top"))+5;
$(this).css("top",""+posy+"px");
if(posy > PLAYGROUND_HEIGHT){
$(this).remove();
return;
}
var idBubbleCPU = $(this).attr('id');
var collided = 0;
$(".bubblePlayer").each(function(){
collided = $(this).collision("#"+idBubbleCPU+",.group");
if(collided.length > 0){
$(this).remove();
}
});

if(collided.length > 0){
$(this).remove();
}
});
}, REFRESH_RATE);


Lo primero que hacemos es crear una "colisión" con el suelo, es decir, que las burbujas desaparezcan al llegar al suelo:

if(posy > PLAYGROUND_HEIGHT){
$(this).remove();
return;
}

remove() elimina el sprite del playground y de todo el DOM, así ya no lo procesaremos más.

Seguidamente para crear la colisión entre objetos de dos clases css, tenemos que tener dos .each anidados, lo que queremos decir es:
"por cada objeto de tipo A mira si ha colisionado con algún elemento de tipo B"

$(".bubbleCPU").each(function(){
...
var idBubbleCPU = $(this).attr('id');
var collided = 0;
$(".bubblePlayer").each(function(){
collided = $(this).collision("#"+idBubbleCPU+",.group");
if(collided.length > 0){
$(this).remove();
}
});
if(collided.length > 0){
$(this).remove();
}
});

Como vemos, dentro del segundo each(), para ver si alguna burbuja creada por el usuario ha colisionado con la burbuja que estamos tratando en la iteracción actual, empleamos la idBubbleCPU, que hemos recogido antes de entrar en el .each() mediante:
var idBubbleCPU = $(this).attr('id');

Si la variable collided es mayor que cero, se ha producido una colisión, y debemos eliminar ambas burbujas!!

Con esto termina el tutorial 2!

Aquí tenéis el link al ejemplo funcionando!
Bubbles!!

viernes, 12 de agosto de 2011

JQuery CSS

Hola a todos!!
Vamos a cambiar el estilo css de un elemento cualquiera de una página html!!

Lo más importante es que el elemento en cuestión esté vinculado a una clase css, si no es así, la función css no tendrá efecto.

Por ejemplo vamos a cambiar el color del texto de un div y a ponerlo en negrita al clicar sobre él:
Para ello es necesario crear primero la clase que asignaremos al div:

<style type='text/css'>
.classA{
color: #01587B;
}
</style>

Para crear el div, como siempre, para que podamos seleccionar el div con facilidad le asignaremos una id, en este caso "clic", y le asignamos la class css "classA":

<div id="clic" class="classA">Click!</div>

Ahora desde cualquier función javascript, podemos cambiar el color del texto que contiene el div y ponerlo en negrita mediante la siguiente función:

$('#clic').css({'color':'#017B13', 'font-weight':'bold'});

Como vemos el parámetro de la función css, es un array de pares (atributo, valor), y la sintaxis es la siguiente:
{'atributocss1':'valor', 'atributocss2':'valor', 'atributocss3,'valor'}

Lo mejor de esta función Jquery es que es cross-browser, funciona en todos los navegadores, a diferencia de la función addClass, que en algunos navegadores no funciona.

$('#id').addClass("classB");

Eso es todo! un saludo!

miércoles, 10 de agosto de 2011

JQuery games

Buenas a todos!

Hace unos años cuando quería hacer juegos para que funcionaran en el navegador, la única opción atractiva tanto en rendimiento como en agilidad de desarrollo era Flash, pero requería que los usuarios se instalaran plugins <- Un palo enorme!
Y escribir aplicaciones con javascript implicaba pelearse horas para que funcionaran en todos los navegadores, entonces en 2006 apareció JQUERY! (gracias John Resig!!)
JQuery es un framework que funciona sobre javascript y que simplifica el trabajo sobre documentos html (manipulación del DOM, manejo de eventos, animaciones, AJAX, entre otros). La librería js que voy a mostraros es un plugin de JQuery especializado en el desarrollo de juegos, Gamequery.

Antes de empezar aquí tenéis los enlaces de las dos imágenes que empleo en el tutorial:

JQuery GAMES: incluir librería GameQuery

Para empezar tenemos que descargarnos de http://gamequery.onaluf.org/ el .js de la librería, y incluirlo en nuestro proyecto, en caso de que no queramos alojar directamente el .js en nuestro servidor, direccionaremos al que está en http://gamequery.onaluf.org/download/jquery.gamequery-0.5.1.js

Como este game engine es un plugin de JQuery, también tenemos que agregar el .js de Jquery:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>

<script type='text/javascript' src="http://gamequery.onaluf.org/download/jquery.gamequery-0.5.0.js"></script>

Una vez incluidos los .js, ya podemos empezar a programar el juego!

JQuery GAMES: Playground

El "playground" es el espacio de la página donde se mostrará nuestro juego.
Mediante propiedades css, defino el ancho y el alto, que en el ejemplo será de 600x350:
No hace falta decir que esto va dentro del documento html!!

<div id="playground" style="position:relative; float:left; width: 600px; height: 350px; background: black;"></div>


JQuery GAMES: Main function

Todos los recursos (imágenes de fondo, sprites, sonidos, etc) y la declaración de las funciones del juego, serán cargadas al entrar en la página.
Para conseguir esto empleo la función de JQuery:

$(window).load(function(){...aquí la chicha!...});

Esta función se ejecuta cuando la página se ha cargado completamente, es decir, cuando se han cargado todos los frames, objetos e imágenes.
Y es dentro de esta función donde definiremos la Main Function del juego!
La estructura que voy a emplear para el ejemplo es la siguiente:

$(window).load(function(){

//DECLARACIÓN DE CONSTANTES
//DECLARACIÓN DE VARIABLES

//MAIN FUNCTION//
$(function(){
//CARGA DE IMÁGENES
//CONFIGURACION DEL PLAYGROUND
//INICIALIZACIÓN DE LAS CAPAS DEL PLAYGROUND
//DEFINICIÓN DE LAS CALLBACK FUNCTIONS
//INICIAR EL JUEGO : $.playground().startGame();
});
});

JQuery GAMES: Carga de imágenes y configuración del Playground

El playground se divide en capas, que en gameQuery se llaman "Groups".
En los groups es donde introduciremos los sprites.
Un group puede contener uno o más groups y estos a su vez pueden contener más groups.

De esta forma organizamos como se mostraran los sprites en la pantalla.

En este tutorial la estructura del playground será la siguiente:


En el apartado de declaración de constantes definimos el ancho y alto que tendrá el playground:
var PLAYGROUND_WIDTH = 600;
var PLAYGROUND_HEIGHT = 350;

Y justo debajo en el apartado de definición de variables definimos la variable que contendrá la imagen del background y la variable que contendrá el sprite del bot.

var background1;
var botAnimation = new Array();

¿Porqué un array para el sprite del bot?
La razón es porqué es probable que nuestro personaje tenga varios estados diferentes durante el juego, entonces almacenaremos las diferentes animaciones (sprites) en los distintos índices del array.
En este primer tutorial solamente emplearemos un sprite.

Una vez definidas las variables que almacenan las animaciones, las cargaremos al empezar la Main Function:

//CARGA DE IMÁGENES
background1 = new $.gameQuery.Animation({
imageURL: "background_stars.jpg"});

botAnimation["normal"] = new $.gameQuery.Animation({imageURL: "bot.png"});

Una vez cargadas las imágenes tenemos que configurar el escenario de Juego el Playground!!
Indicándole el alto y ancho que tendrá, para ello usaremos las constantes definidas anteriormente:

//CONFIGURACION DEL PLAYGROUND
$("#playground").playground({
height: PLAYGROUND_HEIGHT,
width: PLAYGROUND_WIDTH,
keyTracker: true});

Hecho esto, todo está preparado para que organicemos la escena en groups y añadamos cada sprite correspondiente al group que le toca:

//INICIALIZACION DE LAS CAPAS DEL PLAYGROUND
$.playground()
.addGroup("background", {width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT})
.addSprite("background1", {animation: background1, width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT})
.end()
.addGroup("botLayer", {width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT}) .addGroup("bot",{posx: 270, posy: 130, width: 53, height: 62})
.addSprite("botNormal", {animation: botAnimation["normal"], posx: 0, posy: 0, width: 53, height: 62});

Al añadir un grupo indicamos el nombre del grupo y sus dimensiones:

addGroup("background", {width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT})

Seguidamente o bien añadimos nuevos grupos dentro de este, o bien añadimos un sprite, en este caso se añade el sprite que corresponde con la imagen de background:

.addSprite("background1", {animation: background1, width:PLAYGROUND_WIDTH, height:PLAYGROUND_HEIGHT})

En el campo "animation" indicamos la variable que contiene la imagen que hemos cargado previamente.

La función .end() indica que hemos acabado de insertar grupos o sprites dentro de un grupo determinado, y podemos añadir seguidamente otro grupo al mismo nivel que el anterior.
Los grupos que añadimos seguidamente, se verán en la escena encima de los anteriores.
Por ejemplo:

groupA.groupA1.end.groupA2.end.end.groupB.groupB1

Una secuencia de este tipo mostrará primero lo que contenga el grupo B sobre lo que contenga el grupo A. Y del grupo A, primero se mostrará lo que contenga el grupo A2 sobre el grupo A1.

JQuery GAMES: Start Game!!

Con las imágenes cargadas y el playground configurado, ya podemos mostrar algo por pantalla!! wuahha!
Solamente tenemos que llamar dentro del Main Function a la función startGame(), de la siguiente forma:

$.playground().startGame();

Ahora solamente veríamos:
Falta un poco de movimiento no?

JQuery GAMES: Añadiendo movimiento a la escena, las Callback functions

Para controlar el gameplay, la lógica de juego, tenemos que procesar información y realizar operaciones antes de mostrar cada nuevo fotograma del juego.
Lo primero que tenemos que decidir es el REFRESH_RATE, es decir, los fotogramas por segundo. En nuestro caso emplearemos 30fps.

Así que añadimos una nueva constante:

var REFRESH_RATE = 30;

Una vez declarada, vamos a incluir al playground una Callback function, esta función es la que se ejecutará 30 veces por segundo. Y se incluirá en el apartado //CALLBACK FUNCTIONS de la Main Function.
Su sintaxis es la siguiente:

$.playground().registerCallback(function(){
.... código que se ejecutará 30 veces por segundo ....
}, REFRESH_RATE);

Ahora vamos a mover al bot!
Como quiero que vaya de un lado para otro, he añadido una variable en el apartado de declaración de variables, llamado direction, si es uno va hacia la izquierda, si es 0 hacia la derecha:

var direction = 1;

Ahora en la callback function añadimos el siguiente código:

$.playground().registerCallback(function(){
var pos = parseInt($("#bot").css("left"));
if(direction == 1){
var nextpos = pos-8;
if(nextpos>50){
$("#bot").css("left", ""+nextpos+"px");
}else{
direction = 0;
}
}else if(direction == 0){
var nextpos = pos+8;
if(nextpos<500){
$("#bot").css("left", ""+nextpos+"px");
}else{
direction = 1;
}
}
}, REFRESH_RATE);

Como podemos ver, el movimiento lo hacemos simplemente alterando la propiedad css left, del group "bot", que a su vez contiene el sprite "botNormal". Así pues desplazamos todo el grupo con su contenido.

Esto es todo, espero que os sea útil!

En este enlace podéis ver el ejemplo:

En el siguiente tutorial explicaré:
- Añadir sprites dinámicamente a un group.
- Capturar eventos del mouse con Jquery.
- Mover todos los sprites de una misma clase css.
- Detectar colisiones entre sprites.
- Eliminar sprites de un group.

lunes, 11 de abril de 2011

Cambiar el charset de la respuesta de un Servlet

En el doGet, doPost o Service, según el que tengamos implementado, o en todos:

Llamamos al método setContentType del objeto HttpServletResponse response:

response.setContentType("text/html;charset=ISO-8859-1");

o por ejemplo:

response.setContentType("text/html;charset=utf-8");

jueves, 7 de abril de 2011

JQuery: Cambiar el valor de un input

Buenas!!
Tras procesar información de un formulario, o quizás antes de que el usuario introduzca información, puede ser interesante cambiar el valor que contiene un input.

Supongamos que tenemos un campo "idioma", con un valor por defecto de "ES":

<input id="idioma" type="text" value="ES" name="idioma">

Y por alguna razón, queremos cambiarlo por otro valor, por ejemplo "EN":

$("#idioma").val("EN");

Tan simple como esto.

JQuery: Obtener el valor que contiene un input

Buenas!
Una de las cosas más útiles para procesar información de formularios HTML antes de enviar posibles peticiones a servidores, es poder recoger el valor que contiene un campo concreto de un formulario como puede ser un simple input text:

Supongamos que tenemos un campo "idioma", con un valor por defecto de "ES":

<input id="idioma" type="text" value="ES" name="idioma">

Y desde JavaScript queremos recoger su valor en una variable concreta:

var idi = $("#idioma").val();

El atributo más importante e imprescindible del campo input, para que podamos trabajar de esta forma, es el atributo "id", es el que nos sirve para referenciar el componente específico del DOM del que queremos obtener información.

Y yastargh!!

JQuery: Qué es?

Buenas!
Esta es la primera entrada de toda una serie de microreferencias útiles hacia JQuery.

JQuery es una librería de funciones JavaScript, libre de uso.

Simplifica completamente el desarrollo de código JavaScript, y proporciona muchos componentes de uso habitual como calendarios, sliders, selectores de autocompletado, etc.

Empezar a utilizar JQuery es tan fácil como ir a la página web: http://jquery.com/
Y descargarse el .js, para referenciarlo directamente desde nuestro servidor, o directamente referenciar el .js de JQuery que tienen ellos en su servidor: http://code.jquery.com/jquery-1.5.2.min.js

Para crear una referencia a JQuery debemos hacerlo de la misma forma que si agregaramos un .js normal:


<script type="text/javascript" src="/js/jquery.min.js"></script>


A partir de tenerlo referenciado podremos empezar a generar código empleando su sintaxis y sus funciones.


Quería escribir menos.

martes, 29 de marzo de 2011

Distribución y ejecución de un jar

Hola!

Una vez hecho el build de una aplicación java a través Netbeans, se genera una carpeta llamada "dist" dentro de la carpeta del proyecto.

La carpeta "dist" contiene el proyecto compilado como un .jar, y las librerías que emplea nuestro proyecto en la carpeta "lib".

Esta carpeta podemos copiarla para ejecutarla sobre cualquier JVM.

Desde consola en windows, la ejecución del jar será de la siguiente forma:

- Situados sobre el directorio "dist".

- Ejecutar: java -jar fichero.jar

yatarghh!!

Reemplazar saltos de línea

Buenas!
Supongamos que tenemos en un campo de un registro más de una línea, como puede ser por ejemplo el campo descripción, y que por alguna razón deseamos obtener la descripción en una sola línea, sin retornos de carro o saltos de línea.

select replace(replace(n.descripcion, chr(10)||chr(13), ''), chr(13)||chr(10),'') from noticia n

Donde chr(10)||chr(13) es la concatenación de ambos carácteres y la función chr() devuelve el carácter determinado por un código ASCII.

yatahh!

lunes, 21 de marzo de 2011

Vincular un archivo JavaScript externo

Buenas!
Normalmente cuando trabajamos con funciones JavaScript solemos programarlas en ficheros .js, en plan: "functions.js", "ajax.js", "jquery.js".

¿Cómo vinculamos un .js a nuestras páginas html?

Simplemente en la zona donde está situado el <head>, hay que agregar lo siguiente:
<script languaje="JavaScript" src="fichero.js"&gt</script>
O si por ejemplo está en una carpeta:
<script languaje="JavaScript" src="carpeta/fichero.js"></script>

Ejemplo:

<head>
<meta equiv="Content-Type" content="text/html; charset=UTF-8">
<script languaje="JavaScript" src="js/sagan_api.js"></script>
<title>JSP Page</title>
</head>

Ahí está!

jueves, 10 de febrero de 2011

Update con replace en Oracle

Supongamos que tenemos una tabla en la que guardamos temas de conversa llamada TEMA, cuyos atributos son:

TEMA: idTema, nombre, descripcion, idioma

En nuestro caso todas las descripciones empiezan con la misma cadena de carácteres:
"El tema trata de chicles", "El tema trata de perros", etc.
Y queremos modificar las descripciones en castellano de todos los temas para que empiecen con otra cadena de carácteres:
"El tema es sobre chicles", "El tema es sobre perros", etc.

update tema
set descripcion = replace(descripcion,'El tema trata de', 'El tema es sobre')
where idioma='ES'


Y ya está!

martes, 8 de febrero de 2011

Configurar JAVA_HOME para Apache en Windows 7

Como la mayoría de lo que pongo, algo simple pero que si no lo haces no esperes que funcione nada.

Para poder ejecutar Apache Tomcat en Windows 7, una vez hemos instalado el JDK de Java, es necesario crear una variable de sistema llamada JAVA_HOME.

Así que vamos a - Equipo>Propiedades del sistema>Cambiar configuración.
Dentro vamos a - Opciones avanzadas>Variables de entorno.

Una vez estamos en esta ventana, en el apartado de "Variables del sistema", creamos una variable llamada "JAVA_HOME", cuyo valor es la ruta del directorio del JDK de Java, en mi caso actualmente es: "C:\Program Files\Java\jdk1.6.0_23"

Eso es todo amigos!!!

Configurar variables de entorno JDK en Windows 7

Esto suele ser un coñazo difícil de encontrar...

Ir a inicio y seleccionar "Equipo".
Dentro de la ventana de "Equipo" seleccionar "Propiedades del sistema" (está en la barra de arriba).
Dentro de la ventana de "Propiedades del sistema" seleccionar "Cambiar configuración".
Ir a la pestaña "Opciones avanzadas" y elegir "Variables de entorno...".

Ahora antes de crear las variables de entorno localizamos la ruta del directorio bin del jdk, y de los ficheros tools.jar y src.zip.
En mi versión actual yo los tengo en los siguientes directorios:

C:\Program Files\Java\jdk1.6.0_23\bin

C:\Program Files\Java\jdk1.6.0_23\src.zip

C:\Program Files\Java\jdk1.6.0_23\lib\tools.jar

Ahora creamos dentro de "Variables de usuario" una variable de entorno llamada: "Path" (En mayúscula la primera letra).
Y su contenido será la ruta de la carpeta bin, sin poner ";" al final:
Y su contenido será: "C:\Program Files\Java\jdk1.6.0_23\bin"

Después creamos una variable llamada "ClassPath", tal y como la he escrito, y su contenido serán las rutas de los dos ficheros y quedará así:
"C:\Program Files\Java\jdk1.6.0_23\src.zip;C:\Program Files\Java\jdk1.6.0_23\lib\tools.jar;."
Es muy importante que pongamos un punto y coma y un punto al final -> ";."

Aceptamos todos los cambios y ya estarán configuradas las variables de entorno.
He escrito demasiado para la poca cosa que representa realmente.