Crea gráficos con Java, Flash, y JFreechart. Escrito en español. PDF actualizado disponible en http://solucionjava.com/manuales_gratis.phpDescripción completa
curso de programacion orientada a objetos en java usando netbeansDescripción completa
JavaDescrição completa
Filminas sobre curso de JavaDescripción completa
Descripción: Java avanzado y conexión a la base de datos desde Java. Escrito en español. PDF actualizado disponible en http://solucionjava.com/manuales_gratis.php
Descripción completa
Programación Básica de JAVA
Descripción completa
es un libro de javaDescripción completa
Descripción completa
Descripción: TEMA 1: HERRAMIENTAS DE DESARROLLO: ECLIPSE TEMA 2: LENGUAJE JAVA Y POO TEMA 3: PATRONES DE DISEÑO WEB TEMA 4: ARQUITECTURA JAVA EE TEMA 5: TECNOLOGÍAS JAVA EE TEMA 6: TECNOLOGÍAS AVANZADAS JAVA EE
JAVADescripción completa
Principali concetti della programmazione con Thread. esempi con un Modello di automa cellulare e simulatore di un sistema automatico di produzione.Full description
Description complète
Chat creado con Soker
Seguridad ajax
Descripción: en este documento se encuentra una serie de programas utilizando las sentencias if, else if, en if simples y anidados con codigo, algoritmo, y prueba de datos.
I n g . C e d r i c S i m o n – T e l : 2 2 6 8 0 9 7 4 – C e l : 8 8 8 8 2 3 8 7 – E m a i l : c e d r i c @ s o l u c i o n j a v a . c o m – W e b : w w w . s o l u c i o n j a v a . c o m
S o l u c i o n J a v a . c o m
Curso de Ajax con Java
Pagina 2 / 13
Índice de contenido 1. Introducción Introducción al curso...................................................... curso................................................................................................ ........................................................................3 ..............................3 1.1. Objetivo de este curso................................................................... curso................................................................................................. .............................. ..................3 .......... ........3 1.2. Manual del alumno................................................. alumno............................................................................................ ........................................................................3 .............................3 1.3. Ejercicios prácticos..................................................................... prácticos......................................................................................................... .................................... ...............3 ........... ....3 1.4. Requisitos para atender atender a este curso.................................................... curso.............................................................................................3 .........................................3 1.5. Soporte después del curso................................................... curso.............................................................................................. ..........................................................3 ...............3 2. Introducción..................... Introducción................................................................ ...................................................................................... ........................................................................ ............................. ...4 2.1. Definición y uso.......................................................... uso.................................................................................................... ....................................................................4 ..........................4 2.2. Marcos de trabajo.................................................................................... trabajo.......................................................................................................... ...................... ................4 .......... ......4 3. Javascript avanzado.......................................... avanzado..................................................................................... ....................................................................................5 .........................................5 3.1. Javascript y CSS......................................................... CSS.................................................................................................... ...................................................................5 ........................5 4. Ajax con Java................................................................................ Java......................................................................................................................... ......................................... ...............6 ........... ....6 4.1. Llamada Ajax con HTML.......................................................... HTML............................................................................................................ .................................................. ....6 4.2. Llamada Ajax con Java........................................................................................................... Java........................................................................................................... .......7 Servlet para Ajax.................................................................................... Ajax................................................................................................................. ............................. .............7 .......... ...7 4.3. Listas con selección automática....................................................... automática.....................................................................................................9 ..............................................9 4.4. Ajax y seguridad.......................................... seguridad..................................................................................... .................................................................................10 ......................................10 5. Ejercicios.......................................... Ejercicios..................................................................................... ...................................................................................... ........................................... .............1 .......... ...11 1 6. Esquema de la base de datos................................................ datos.................................................................................................. .................................................. ...........12 .......... .12
1. Introducción al curso 1.1. Objetivo de este curso En este curso vamos a aprender el uso de la tecnología Ajax, que nos permitirá crear páginas web más dinámicas y más atractivas.
1.2. Manual del alumno Este manual del alumno es una ayuda para el alumno, para tenga un recuerdo del curso. Este manual contiene un resumen de las materias que se van a estudiar durante el curso, pero el alumno debería de tomar notas personales para completas este manual.
1.3. Ejercicios prácticos Para captar mejor la teoría, se harán muchos ejercicios con los alumnos, para probar la teoría y verificar la integración de la materia. También, el alumno podrá copiar sus códigos en una memoria flash al fin del curso para llevarse, con fin de seguir la práctica en su hogar.
1.4. Requisitos para atender a este curso El conocimiento de los lenguaje HTML, CSS, Java, y Javascript es requerido para poder atender a este curso. Si el alumno tiene dificultades en un u otro capitulo, el debe sentirse libre de pedir explicaciones adicionales al profesor. Pero si aparece que el alumno no posee los requisitos mínimos para este curso, por respeto a los otros alumnos que ya poseen esta materia, el alumno podría ser traslado para otro curso en el futuro, cuando el cumplirá con los requisitos.
1.5. Soporte después del curso Si tienes preguntas sobre la materia del curso en tus ejercicios prácticos, puedes escribir tus preguntas a [email protected] . Para informaciones sobre otros cursos, visita el sitio web www.solucionjava.com www.solucionjava.com..
2. Introducción 2.1. Definición y uso Ajax significa “Asynchronous Javascript and XML”. Basicamente, la tecnología Ajax permite comunicar con sistemas remotos y/o refrescar partes de una página si necesidad de recargar la página. Algunos ejemplos del uso de Ajax: – – – – – – –
Lista con selección automática de valor. Aplicaciones de chat 'Drag and drop' Validaciones extensas de formulario Menús dinámicos Personalización de página ...
2.2. Marcos de trabajo Existen muchos marcos de trabajo para Ajax. La mayoría son marcos de trabajo para Javascript, que tienen una parte orientada a Ajax. Los marcos de trabajo te permiten usar códigos/efectos con Javascript/Ajax sin necesidad de entender todo el código que va atrás. Muy probablemente estarás interesado en varios marcos de trabajo, y trabajaras con varios al mismo tiempo, ya que posiblemente ninguno tiene todo lo que quieres. Ademas, el objetivo de este curso es que seas capaz de desarrollar tu propio marco de trabajo ademas de usar los terceros. Algunos marcos de trabajo 'libres': Rico (http://openrico.org/ (http://openrico.org/ ) Script.aculo.us Script.aculo.us ( http://script.aculo.us/ ) Mootools (http://demos.mootools.net/ (http://demos.mootools.net/ ) OAT (http://oat.openlinksw.com/ (http://oat.openlinksw.com/ ) ZeroKonfig (http://www.zkoss.org/ ( http://www.zkoss.org/ ) ... – – – – – –
3. Javascript avanzado 3.1. Javascript y CSS El Javascript interactua con las hojas de estilo para modificar la presentación de los datos. Cualquier atributo de CSS y HTML se puede modificar usando Javascript. Recuerden que un atributo CSS prevalece sobre atributos HTML. js_css.jsp: <SCRIPT language="JavaScript" src="js/soljava.js"> <SCRIPT language="JavaScript" src="js/js_css.js"> www.solucionjava.com | Primera llamada con Java
Prueba de javascript con CSS
Formulario
Color valign="top">Co lor de fondo de la pagina:
Rojo Negro Azul Verde
Color de letras de la pagina:
Rojo Blanco Azul Verde
Tamano de letras de la tabla:
10 12 14 8
Alinear la tabla:
A la izquierda A la derecha En medio
js_css.js: function changeBgColor(color){ document.body.style.backgroundColor=color; } function changeFgColor(color){ document.body.style.color=color; } function changeFontSz(valor){ document.getElementById("tabla").style.fontSize=valor; } function changeTbAlign(valor){ document.getElementById("tabla").align=valor; }
ajax_html.jsp: <%@include file="include/cabecera.jspf" %> www.solucionjava.com | Curso de Ajax | Primera llamada Ajax con HTML
Este es mi bloque de texto inicial
<%@include file="include/pie.jspf" %> ajax_html.js: var req; function getText() { var url = "nuevo_texto.txt"; if (window.XMLHttpRequest) { req = new XMLHttpRequest( ); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("Get",url,true); req.onreadystatechange = callback; req.send(null); } function callback( ) { if (req.readyState==4) { if (req.status == 200) { document.getElementById('texto').innerHTML = req.responseText; } } }
nuevo_texto.txt:
Este es el texto desde el archivo en el servidor!
4.2. Llamada Ajax con Java Ahora hemos llamado una página de texto 'fijo' en el servidor. Muy fácilmente se podría sacar el URL, o la lista de URL de la base de datos, por ejemplo. Pero el Ajax permite más todavía: permite llamar a un Servlet o página jsp, y traer el contenido del servlet.
1. Servlet para Ajax Es un servlet que va a devolver un contenido estructurado o no. Puede ser texto, HTML, o XML por ejemplo. En el ejemplo abajo, vamos a recuperar los datos de un paciente sin salir de la página. Ejemplo: ajax_java.jsp <%@include file="include/cabecera.jspf" %> www.solucionjava.com | Curso de Ajax | Primera llamada Ajax con Java
String sql="select * from patient where no_patient="+no_patient; try { miDB = new LeerDB(this.getServletName()); miDB.select(sql); if (miDB.getNext()) { ajaxData.append("Nombre y apellidos: "+miDB.getStringHTML("fname")+" "+miDB.getStringHTML("fname2")+" "+miDB.getStringHTML("lname")+""+miDB.getStringHTML("lname2")+" "); ajaxData.append("Fecha de nacimiento: "+miDB.getDateLong("dnaiss") +" "); } else ajaxData=new StringBuffer("Paciente numero "+no_patient+" no encontrado."); } catch (Exception e) { ajaxData=new StringBuffer("Error con el SQL : "+sql); e.printStackTrace(); } finally{ if (miDB!=null) miDB.cleanup(); } } else { ajaxData=new StringBuffer("Error de seguridad. Usted no tiene acceso a esta pagina."); } this.writeResponse(response, ajaxData.toString()); } public void writeResponse(HttpServletResponse resp, String output) throws IOException { resp.setContentType("text/plain"); resp.setHeader("Cache-Control", "no-cache"); resp.setHeader("Content", "text/html;charset=iso-8859-1"); resp.getWriter().write(output); } } web.xml: ... GetPatientDetailsGetPatientDetailscom.solucionjava.ejemplosGetPatientDetailsGetPatientDetails/GetPatientDetails ...
4.3. Listas con selección automática Para la lista con selección automática, vamos a usar el marco de trabajo Script.acuo.us con una salsa de SolucionJava. Agregar en la carpeta /images la imagen lista3.gif. En la carpeta /css la hoja de estilo SJajax.css, y en / WEB-INF/lib el archivo SjFramework.jar SjFramework.jar ajax_lista.jsp: <%@include file="include/cabecera.jspf" %> <script src="scriptaculous/prototype.js" type="text/javascript"> <script src="scriptaculous/scriptaculous.js" type="text/javascript"> www.solucionjava.com | Curso de Ajax | Primera lista con seleccion automatica en Ajax con Java
ajax_lista.js: function getSql(field, value) { return "nolimit=SI&localSQL=city&ajaxSQL="+ escape(" where city_name like #"+field.value+"@# "+ " group by city_name"); } function getSelectionId2(text, li) { $('no_city').value=li.id; $("city").value=$("city").value.substring(0,$("city").value.lastIndexOf('--')); }
AjaxListaDyn.java: package ajax; import javax.servlet.http.HttpSession; public class AjaxListaDyn extends AjaxList { private static final long serialVersionUID = 1L; protected String checkSecurity(HttpSession session) { return ""; // No verifico nada de seguridad } protected String translateSql(String localSQL, HttpSession session) { if (localSQL.equals("city")) localSQL = "select no_city, city_name, concat('-->',region) from city "; return localSQL; } protected void initConnection() { try { readDB = new LeerDB(this.getServletName()); } catch (Exception e) { e.printStackTrace(); } } }
4.4. Lista dinámica con acción personalizada Usando el tag para listas dinamicas, se hace mu sencillo el uso de la lista dinámica. El tag genera todo el HTML y el Javascript necesario, menos el include de los archivos .js de Scriptaculous. Ejemplo:
En caso de tener varias listas en una misma página, usar el parametro 'div=”x”' con un valor de div diferente para cada lista. Usar el atributo autoSelect="false" para que no se selecciona automaticamente el valor cuando solo hay 1 posibilidad. Usar minChar="x" para que inicia la búsqueda cuando se han entrado x caracteres (por defecto=2) Usar nolimit="x" para que limite la lista a los x primeros registros (por defecto son son 100). En la clausula where, remplazar las simple comillas del SQL por #, los signos % por @, y escapar las doble comillas con \. Usar \”+field_value+\” para insertar el valor teclado por el usuario.
4.5. Ajax y seguridad Como el Ajax permite (en ciertos casos) hacer llamadas directas a la base de datos o a recursos 'seguros', deben tener en mente el aspecto relacionado a la seguridad con Ajax. Como las llamadas Ajax se hacen desde el navegador, por una consulta HTML, es posible recuperar la sesión del usuario y entonces validar si el tiene acceso a este recurso (o no).
5. Ejercicios 1. Crear una página página con con un titulo (h1) y una una tabla con 8 celdas de colores colores diferentes. diferentes. Al pasar el el ratón sobre una celda, el color de fondo del titulo se cambia al color de la celda. 2. Crear un formulario formulario con nombre, apellido, apellido, fecha fecha de nacimiento, nacimiento, sexo sexo (radio), (radio), puesto de de trabajo (lista), y salario. Comprobar antes de que se envie el formulario: Que los nombre y apellidos no sean nulos Que la fecha de nacimiento es válida (dd/mm/yyyy) es en el pasado Que el salario es un numero>=0 Que se escogió el puesto de trabajo (Valor inicial: 'Elige') Que se escogió el sexo 3. Crear una pagina con un párrafo y un botón. botón. Haciendo Haciendo clic sobre el el botón hace aparecer/desaparecer el párrafo de la vista y cambia el texto del botón. 4. Crear una página página con con un bloque bloque de texto texto y un botón. botón. Cada Cada vez que que se presiona presiona el botón, botón, se tiene tiene que agregar los números del 1 al 10 al final del bloque de texto, sin refrescar la pagina. 5. Crear una página página con con un contador=1 contador=1 y un botón. botón. Cada vez vez que se presiona presiona el el botón, se tiene que aumentar de 1 el contador, sin refrescar la pagina. 6. Crear una página página con con la lista de de empleados empleados y su salario. salario. Permitir cambiar cambiar el salario salario directamente, directamente, sin salir de la página (Ajax). 7. Crear una pagina pagina con con una lista de empleados. empleados. Al hacer clic clic sobre un empleado, empleado, muestra sus sus detalle en otra parte de la misma página (Ajax). • • • • •
<script type="text/javascript"> cityAjax = new Ajax.Autocomplete Ajax.Autocompleter("city", r("city", "autocomplete_ch oices2", "AjaxListaDyn", {paramName: "ajaxSQL", minChars: 2, callback: getSql, afterUpdateElement : getSelectionId2,autoSelect: true });