Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas

viernes, 17 de febrero de 2017

WebJar: Concepto e introducción

A día de hoy en un proyecto web Java podemos llevar el control de las librerías que tenemos en el mismo de una forma muy sencilla, ordenada y cómoda. Gracias todo a software de gestión de proyecto como Maven o Gradle. 

Y tambien a dia de hoy cada vez hacemos más uso de librerias de Javascript que cada vez son más complejas. Y las cuales no son tan dificil de gestionar como las de Java. Para ello han nacido los Webjars. El concepto de WebJar se basa en encapsular en un único jar toda una librería de Javascript, como puede ser Jquery, Angular Js o Bootstrap. 

Esto lo podremos hacer en dos sencillos pasos. Primero, añadiendo la librería que deseemos a nuestro repositorio de dependencias.


<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap</artifactId>
 <version>3.3.7</version>
</dependency>

Aqui podemos ver como maven se encarga de añadir también las dependencias que tenga:



Segundo, utilizar la librería a través de las etiquetas html tal y como hariamos si estuviesen fisicamente en nuestra carpeta de recursos. 


<script src="webjars/jquery/1.11.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

De esta forma tan sencilla, podemos tener una mejor gestión de nuestras librerías javascript y evitar que nuestra carpeta de recurso se vuelva una maraña de ficheros .js, .css, etc.

domingo, 3 de abril de 2016

Utilizando lenguajes de Script dentro de Java

Una de las características más interesantes dentro de Java SE 6 es la posibilidad de usar lenguaje de Script (Phyton, PHP, Ruby o Javascript) dentro del propio Java. Este sería el comienzo para la implementación que vendría después en Java 8 que permitiría el uso de Lambda y el motor Nashorn.

¿Para que nos puede servir ejecutar lenguaje de Script dentro de Java? Pues para distintas funcionalidades como puede ser:
  • Tienes una script con una determinada funcionalidad y la quieres usar dentro de Java para evitarte la duplicidad del código o el trabajo extra.
  • Quieres habilitar un mecanismo para que los clientes puedan ejecutar su propio código de Script. 
A continuación indicaremos algunas posibilidades y ejemplos de lo que se puede hacer. Pero si quieres más información aquí tiene la documentación oficial.

Ejemplo 1: Lo más básico, ejecutar javascript:

// Crear el gestor de motores de script
ScriptEngineManager factory = new ScriptEngineManager();
// Crear el motor de Javascript
ScriptEngine jsEngine = factory.getEngineByName("JavaScript");
// Evaluar el código Javascript
jsEngine.eval("print('Hello, World')");

Ejemplo 2: Ejecutar código de un fichero javascript

jsEngine.eval(new java.io.FileReader("/WEB-INF/js/general.js"));

Ejemplo 3: Crear variables y distintos contextos

// Creamos una variable, por defecto es global
jsEngine.put("x", "hello");
// Evalua el código javascript y pinta "hello"
jsEngine.eval("print(x)");
// Creamos un contexto asociado unicamente a este motor de script concreto
ScriptContext newContext = new SimpleScriptContext();
newContext.setBindings(jsEngine.createBindings(), ScriptContext.ENGINE_SCOPE);
Bindings engineScope = newContext.getBindings(ScriptContext.ENGINE_SCOPE);
// Le damos un valor distinto a la misma variable pero en otro ambito
engineScope.put("x", "world");
// Evaluamos el código anterior e indicamos el nuevo ambito. Pinta "world"
jsEngine.eval("print(x)", newContext);

Ejemplo 4: Invocar funciones y metodos Script

//Creamos una funcion javascript 
String script = "function hello(name) { print('Hello, ' + name); }"
// eevaluamos el script
jsEngine.eval(script);
// javax.script.Invocable is opcional y puede no setar implementada para todos los motores de script
Invocable inv = (Invocable) jsEngine;
// Invocamos la funcion global 'hello' e indicamos su parametro de entrada
inv.invokeFunction("hello", "Scripting!!");

Ejemplo 5: Ejecución de código compilado

//Compilable soporta la re-ejecucion de codigo previamente compilado
Compilable jsCompilable = (Compilable) jsEngine;
CompiledScript script = jsCompilable.compile("function test() { return 10; }; test();");
//Évaluamos el codigo compilado
Object compiledOutput = script.eval();
//Podemos hacer uso del codigo compilado cada vez que queramos
System.out.println(compiledOutput); 

jueves, 17 de diciembre de 2015

Como escapar código en un XML

Este es un post sencillo, sobre como escapar el código introducido dentro de un XML.

Es posible que por motivos que solo el MEV, tengas que introducir código HTML dentro de un XML o como ha sido en mi caso, que el front este generado con páginas XSLT.

Para solucionar esto, se incluye las secciones CDATA. Estas secciones de código permite indicar al XML que su contenido no sea transformado pasando por ejemplo de '&' a '&amp;'. Comunmente utilizados para evitar problemas con el código javascript. Como consejo indicar que si se el código javascript se incluye en un fichero externo, no hace falta añadir la sección CDATA.

Ejemplo:

miércoles, 11 de diciembre de 2013

Tratamiento de fechas con Spring MVC y JQuery

En un post anterior hablaba sobre Spring MVC y los formularios, y una persona me pregunto sobre el tratamiento de las fechas. Debido a ello voy a explicar como podemos utilizar las fechas en un formulario de Spring MVC y que mantengan su formato, con la ayuda de JQuery.

Para empezar mostramos el DTO con la información. Al haberse realizado con JPA este mismo DTO nos permitirá almacenar la información de los datos a guardar en la BBDD.
@Entity
@Table(name = "libro", catalog = "almacen")
public class Libro implements java.io.Serializable {

 private static final long serialVersionUID = 1L;
 private Integer ident;
 private String nombre;
 private String autor;
 private String serie;
 private String argumento;
 private Integer paginas;
 private Integer volumen;
 @DateTimeFormat(pattern = "dd/MM/yyyy")
 private Date publicacion;

 public Libro() {
 }
 
 @Column(name = "PUBLICACION")
 public Date getPublicacion() {
  return publicacion;
 }

 public void setPublicacion(Date publicacion) {
  this.publicacion = publicacion;
 }

....
}

Aquí podemos ver como además de las anotaciones propias de JPA para realizar la persistencia, hemos añadido la anotación @DateTimeFormat que es propia de Spring y nos permite mostrar la fecha en base a un patrón válido de formato de fecha.

Por otro lado contamos con la página JSP donde añadimos el campo con el tag form:input normal, independientemente de que vayamos a mostrar una fecha.


Con esto ya tendriamos el campo y nos debería valer, siempre y cuando introduzcamos una fecha con el formato indicado anteriormente. Pero yo he querido facilitar un poco más las cosas y añadir una utilidad para introducir fechas. Y como Spring no la trae en sus tags, he echado mano de Jquery. Para ello solo tenemos que asociar un pequeño script que incluya el siguiente código. Así al clickear sobre el campo se abrirá un calendario que nos permitirá indicar la fecha de manera sencilla.

$(function() {
    $('#publicacion').datepicker();
});

Con esto, ya podremos recoger la fecha en el controlador de Spring de forma correcta. Aunque es posible que os haya surgido una excepción del tipo JodaTime library not available - @DateTimeFormat not supported. Y aunque no se muy bien a que es debido tiene una fácil solución también, y es incluyendo la siguiente dependencia en nuestro pom.xml


 joda-time
 joda-time
 1.6.2
 runtime

jueves, 7 de marzo de 2013

TypeError: $ is not a function


Este error da al utilizar JQuery y en apariencia parece no reconocerlo. En principio tiene varias soluciones y aquí te indico un par:

- Poner jQuery en vez de $ en todas sus apariciones.

- Crear la función javascript 'jQuery(function ($) {' en vez de '$(function() {'.

viernes, 28 de diciembre de 2012

Struts 2 y Json

Con Struts 2 se pueden realizar no solo llamadas sincronas al servidor a través de un action sino que ofrece otras posibilidades como puede ser realizar llamadas asincronas y que devuelvan un JSON.
En este post no detendremos en como hacerlo posible y en uno posterior comentaremos cual puede ser un error frecuente. Para empezar definimos un paquete dentro del fichero struts.xml donde incluiremos todos los actions que vayan a devolver como respuesta un json:


Podemos hacer las declaraciones de 2 formas, una con anotaciones y otra con la forma convencional de struts indicandolo en su fichero de configuración. En este post lo indicaremos con anotaciones y en el del error mediante fichero de configuración. El siguiente paso es crear nuestra clase he indicar que es un action extendiendo de ActionSupport y decir a que paquete pertenece mediante anotaciones.
@Namespace("/")
@ResultPath("/")
@ParentPackage("es.home.example.json")
public class ValidateObjectAction extends ActionSupport{
Una vez tenido nuestro action creado debemos indicar en que método vamos a realizar toda la lógica, lo normal es llamarlo execute pero con struts 2 eso no es necesario ya. Mediante anotaciones y propiedades le indicamos cuando va a ser llamado (cuando se indique la direccion del action 'validateObjectJson', y que cuando todo sea correcto ('success') que devuelva json.
 @Action(value="validateObjectJson", results={@org.apache.struts2.convention.annotation.Result(name="success", type="json")})
  public String execute(){
   ...
}
Hay que tener en cuenta que los atributos de la clase se devolverán en formato de json y que tenemos que saber manejarlo posteriormente en nuestra clase JSP. Este formato es muy util cuando trabajamos con javascript. Esta podría ser un ejemplo de llamada javascript para dicho Action.
function validateObject() {
 var formulario = dojo.byId("form01");
 formulario.action = 'validateObjectJson.action';  var xhrArgs = {
  form : formulario,
  handleAs : "json",
  load : function(data) {
   ...
  }
 };
 dojo.xhrPost(xhrArgs);
}

jueves, 22 de noviembre de 2012

Dojo y su 'Value collided'

Últimamente por temas de trabajo, me las he visto con el Dojo 1.6 y aunque es verdad que ha mejorado mucho con respecto a cuando empezó, también es verdad que a mi el mundillo javascript no me gusta :-P.

Al caso, el tema es que tengo un par de combos-select que se encuentran anidados entre ellos y cuando se marca un valor en uno, se muestra una posible lista de resultados en el siguiente. Los monte y en un primer momento funcionaban correctamente pero con algunos casos me daba el siguiente fallo:
dijit.form.FilteringSelect: Error: dojo.data.ItemFileReadStore: The json data provided by the creation arguments is malformed. Items within the list have identifier:  Value collided:
Investigando por la red, parece que en el ItemFileReadStore que uso para rellenar el dijit.form.FilteringSelect hay algún que esta duplicado (su id para ser mas exacto).

La solución es bien sencilla, al hacer la select que rellene ese combo-select mediante el anterior valor, evitar que nos devuelva duplicados (por ejemplo poniendo un DISTINCT en la secuencia de BBDD).