1-diciembre-2016
admin

Handlebars como sistema de templates en jQuery

HandlebarsJS es un sistema de plantillas Javascript y una herramienta esencial. Está basado en la sintaxis de «Mustache Templates«, a las que han agregado algunas funcionalidades extra.

Documentación Oficial

Ejemplo de uso para intentar explicar como funciona:

1 – Añadimos dentro de nuestra página html el siguiente template y le asignamos un id.

< script type="text/x-handlebars-template" id="templateEx">
{{# each elementos}}
Name: {{name}} 
{{/each}} < /script>

En esta plantilla se recorre la lista elementos y se escribe el valor de su propiedad name

2 – En nuestro fichero js cuando queramos cargar la pagina tenemos que decirle que compile la plantilla para ello primero tenemos que obtener el código del a plantilla.

var stemplate = $("#templateEx").html();
//Y una vez obtenido poedemos compilar la plantilla:
var tmpl = Handlebars.compile(stemplate);

3 – Ahora solo faltaría asignar los datos al contexto de la plantilla:

var ctx = {};
ctx.elementos = [{"name":"elemento1"},{"name":"elemento2"}];
html = tmpl(ctx);

4 – Ahora añadimos el contenido de la plantilla al html.

$("#content").append(html);
$("#content").show(); 

En este ejemplo se ha usado jQuery para tratar con el DOM pero puede usarse cualquier otra librería.


24-noviembre-2016
admin

Aplicación que integra Spring-Boot + AngularJS + Thymeleaf

En mi repositorio de GitHub he dejado una apicación simple que integra Spring-Boot con AngularJS utilizando lo siguiente:

Para la configuración de Spring se ha utilizado Spring Boot junto con los siguientes módulos
. . . . 1- Spring Data JPA -> como capa de persistencia.
. . . . 2- Spring Data REST con Spring HATEOAS -> para la capa de servicios rest con los que interactuará AngularJS.
. . . . 3- Spring Security -> para la Autenticación y Autorización de la aplicación.
. . . . 4- Spring MVC con Thymeleaf -> se utiliza para gestionar principalmente los listados de consulta, así como todas las vistas que no tienen formularios.
. . . . 5- AngularJS -> se utiliza para las vistas de los formularios de detalles.
. . . . 6- Bootstrap + Angular-ui + Font Awesome + Angular-Show-Errors -> para el diseño y maquetación del front end.
. . . . 7- JUnit -> pruebas unitarias.

Se utilizan Base de datos y servidor embebidos a modo de ejemplo: H2 y Tomcat.

Para la creación de informes se utiliza JasperReports. Se ha configurado el pom para que a partir de los ficheros /src/main/resources/static/reports/*.jrxml y genere los /src/main/webapp/jasper/*.jasper. Para ello basta con ejecutar mvn generate-resources.

La gestión de dependencias se realiza con: Maven y bower.


Instalación
=========

1- Instalar maven (utilizada la 3.0.5)
2- Instalar el wraper de maven para spring-boot:

mvn -N io.takari:maven:wrapper

3- Se puede ejecutar de varias formas:

//Con maven:	
mvn spring-boot:run. 

//o bien

//Construyendo el jar:      
mvn clean package 
//Y haciéndolo correr con:  
java -jar target/springangularjs-0.0.1-SNAPSHOT.jar

4- Si todo va bien la aplicación correrá en: http://localhost:8080/
5- Copiar proyecto e importarlo al eclipse como proyecto de maven.
6- Recordar que para modificar las librerías de js es necesario bower. Para ello:
. . . . a- se necesita tener instalado node.js (https://nodejs.org/)
. . . . b- se necesita también tener instalado git (https://git-scm.com/download/win)
. . . . c- instalamos bower con:

                  npm install -g bower

. . . . d- finalmente ejecutando «bower install» en el proyecto nos colocara en el directorio /src/main/resources/static/bower_components las versiones de las librerías indicadas en el bower.json.


Todo el código esta subido al GitHub
Esquema de la Arquitectura
Digrama de clases

16-noviembre-2016
admin

Despliegue aplicación Spring-Boot en Openshift

En este tutorial vamos a explicar como se debe desplegar una aplicación Spring-Boot en Openshift. La aplicación correrá en un tomcat y utilizará como Base de Datos H2.

Creamos la aplicación en OpenShift. Para ello:
Paso 1: Nos registramos en https://www.openshift.com/
Paso 2: Creamos una aplicación que contenga un Tomcat 7 (JBoss EWS 2.0).



Instalamos y configuramos las Openshift Client Tools
Paso 1: Lo primero que debemos hacer es instalar Ruby, la versión que recomienda Openshift es la 1.9.3.
http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-1.9.3-p551.exe
(Cuando estamos instalando Ruby debemos marcar la opcion que dice Add Ruby executables to your PATH, para que se añada al Path del sistema.)
Para saber si tenemos Ruby añadido correctamente al Path, abrimos un terminal y ejecutamos:

ruby –v.

Paso 2: Instalamos la última versión de Git.
https://github.com/msysgit/msysgit/releases/download/Git-1.9.5-preview20150319/Git-1.9.5-preview20150319.exe
para comprobar si git también está bien instalado poedemos ejecutar:

git --version.

Paso 3: Instalamos las Client Tools (Openshift rhc).

//Para instalar las rhc sólo debemos escribir en nuestro terminal:		
gem install rhc
//A continuación, configuramos con:	 
rhc setup

Nos pedirá logarnos con nuestras credenciales. Al introducirlas, si son correctas el sistema de configuración nos indicará que va a crear un Token para que podamos acceder a OpenShift sin necesidad de colocar nuestras credenciales de acceso, este Token se guardará en nuestra carpeta de usuario en una carpeta llamada .openshift.



Generando War
Usando maven se puede hacer directamente por la consola con:

mvn clean package


Desplegando WAR en OpenShift
Paso 1: Primero debemos crear un SSH public key para poder acceder al servidor por ssh. Se crean desde la propia consola web de Openshift. O usamos la que nos ha creado por defecto openshift en nuestro directorio de usuario cuando se instaló rhc.
Si queremos crear una nueva podemos crearla con el Putty Key Generator. Luego se debe añadir en el openshift a través de la consola web.
Paso 2: Descargamos el repositorio git.
Paso 3: Borrar la carpeta src y el pom.xml
Paso 4: Colocamos nuestro WAR en la carpeta webapp
Paso 5: Editar el archivo server.xml que está en .openshift/config/server.xml. Buscamos el siguiente conector y en el redirectPort pone 8443, le quitamos el 8 y guardamos.
Paso 6: Al archivo .openshift/config/context.xml le añadimos la siguiente Valve:

< Valve className="org.apache.catalina.valves.RemoteIpValve" protocolHeader="x-forwardedproto"/>

Paso 7: Hacemos commit y push
Paso 8: Reiniciamos el servidor.



Base de datos H2
Se debe colocar el fichero de bd en app-root/data y darle permisos de lectura y escritura.

8-noviembre-2016
admin

Comandos básicos de GIT

Comandos Básicos de Git

a) Buscando Ayuda:
1. git help comando ó git comando –help -> Muestra la ayuda para ese comando

b) Creación de un repositorio:
2. git init -> Crea un repositorio en el directorio actual
3. git clone url -> Clona un repositorio remoto dentro de un directorio

c) Operaciones sobre Archivos:
4. git add path -> Adiciona un archivo o un directorio de manera recursiva
5. git rm ruta -> Remueve un archivo o directorio del árbol de trabajo
-f : Fuerza la eliminación de un archivo del repositorio
6. git mv origen destino -> Mueve el archivo o directorio a una nueva ruta
-f : Sobre-escribe los archivos existentes en la ruta destino
7. git checkout [rev] archivo -> Recupera un archivo desde la rama o revisión actual
-f : Sobre-escribe los cambios locales no guardados

d) Trabajando sobre el código:
8. git status -> Imprime un reporte del estado actual del árbol de trabajo local
9. git diff [ruta] -> Muestra la diferencia entre los cambios en el árbol de trabajo local
10. git diff HEAD ruta -> Muestra las diferencias entre los cambios registrados y los no registrados
11. git add path -> Selecciona el archivo para que sea incluido en el próximo commit
12. git reset HEAD ruta -> Marca el archivo para que no sea incluido en el próximo commit
13. git commit -> Realiza el commit de los archivos que han sido registrados (con git-add)
-a : Automáticamente registra todos los archivos modificados
14. git reset –soft HEAD^ -> Deshace commit & conserva los cambios en el árbol de trabajo local
15. git reset –hard HEAD^ -> Restablece el árbol de trabajo local a la versión del ultimo commit
16. git clean -> Elimina archivos desconocidos del árbol de trabajo local

e) Examinando el histórico:
17. git log [ruta] -> Muestra el log del commit, opcionalmente de la ruta especifica
18. git log [desde [..hasta]] -> Muestra el log del commit para un rango de revisiones dado
–stat : Lista el reporte de diferencias de cada revisión
-S’pattern’ : Busca el historial de cambios que concuerden con el patrón de búsqueda
19. git blame [archivo] -> Muestra el archivo relacionado con las modificaciones realizadas

f) Repositorios remotos:
20. git fetch [remote] -> Trae los cambios desde un repositorio remoto
21. git pull [remote] -> Descarga y guarda los cambios realizados desde un repositorio remoto
22. git push [remote] -> Guarda los cambios en un repositorio remoto
23. git remote -> Lista los repositorios remotos
24. git remote add remote url -> Añade un repositorio remoto a la lista de repositorios registrados

g) Ramas:
25. git checkout rama -> Cambia el árbol de trabajo local a la rama indicada
-b rama : Crea la rama antes de cambiar el árbol de trabajo local a dicha rama
26. git branch -> Lista las ramas locales
27. git branch -f rama rev -> Sobre-escribe la rama existente y comienza desde la revisión
28. git merge rama -> Guarda los cambios desde la rama

h) Exportando e importando:
29. git apply – < archivo -> Aplica el parche desde consola (stdin)
30. git format-patch desde [..hasta] -> Formatea un parche con un mensaje de log y un reporte de diferencias (diffstat)
31. git archive rev > archivo -> Exporta resumen de la revisión (snapshot) a un archivo
–prefix=dir/ : Anida todos los archivos del snapshot en el directorio
–format=[tar|zip] : Especifica el formato de archivo a utilizar: tar or zip

i) Etiquetas:
32. git tag name [revision] -> Crea una etiqueta para la revisión referida
-s : Firma la etiqueta con su llave privada usando GPG
-l [patrón] : Imprime etiquetas y opcionalmente los registros que concuerden con el patrón de busqueda

j) Banderas de Estado de los Archivos:
M (modified) : El archivo ha sido modificado
C (copy-edit) : El archivo ha sido copiado y modificado
R (rename-edit) : El archivo ha sido renombrado y modificado
A (added) : El archivo ha sido añadido
D (deleted) : El archivo ha sido eliminado
U (unmerged) : El archivo presenta conflictos después de ser guardado en el servidor (merge)

1-noviembre-2016
admin

Generar modelo entidad relación a partir de una base de datos MySQL

Para obtener automáticamente un modelo entidad relación a partir de una base de datos MySQL se puede utilizar la herramienta MySQL Workbench.

Modo de uso:
1 – Hay que descargarsela e instalarla.

2 – Nos vamos al menú superior Database y seleccionamos la opción de Reverse Engineer (Ingeniería inversa).

3 – Rellenamos los datos de conexión a la BD en la ventana que se nos abrirá.

4 – Se va siguiendo las distintas ventanas que van saliendo dando a next. Ellas nos irá pidiendo la bd de la que se quieren extraer los datos, los objetos a extraer,..

5 – Si todo va bien al final nos mostrará el modelado con las tablas pedidas.


24-octubre-2016
admin

i18n con Spring Boot

Paso 1: Añadir los properties con las keys en src/main/resources/ uno por cada idioma tal que así:
messages.properties (este será el de por defecto)
messages_es.properties

Paso 2: Hay que configurar la aplicación para que la request obtenga el locale. Para ello se pueden añadir estos beans:

	@Bean
	public LocaleResolver localeResolver() {
	    return new CookieLocaleResolver();
	}
	@Bean
	public LocaleChangeInterceptor localeChangeInterceptor() {
		LocaleChangeInterceptor lci = new LocaleChangeInterceptor();
		lci.setParamName("lang");
		return lci;
	}
	@Override
	public void addInterceptors(InterceptorRegistry registry) {
		registry.addInterceptor(localeChangeInterceptor());
	}

Paso 3: Modo de uso.
Desde un controller de Spring basta con inyectar un MessageSource y ya podríamos usarlo.

        .....
	@Autowired
	private MessageSource messageSource;

	@RequestMapping(value = "/list", method = RequestMethod.GET)
        public String listItems(Model uiModel, Pageable page, HttpServletRequest request){
             String msg = messageSource.getMessage(request.getParameter("key.successMessage")
                                                     .toString(),null,LocaleContextHolder.getLocale());
             ....
        }
        ....

Desde el front-end con thymeleaf bastaria con usar el #{key.successMessage}

< html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
>
....
< span th:text="#{key.successMessage}">
....
5-octubre-2016
admin

Bower

Bower es un gestor de dependencias para el desarrollo web frontend. Facilita la tarea de instalar y mantener al día las distintas librerías y frameworks del proyecto.

Instalación:
Primero se necesita instalar node.js. Se descarga de https://nodejs.org/ y se instala el *.msi en windows.
Puedes comprobar que se ha instalado bien ejecutando por consola el comando:

node -v



Después se instala git. Para ello hay que descargar y ejecutar https://git-scm.com/download/win



Por último se instala el bower. Para ello necesitamos el comando npm que ya nos instaló node.js.

npm install -g bower


Para crear por primera vez el archivo bower.json lo más cómodo es, desde la raíz de tu proyecto, lanzar el comando:

bower init

El fichero bower.json sera similar a este:

{
  "name": “Prueba Bower”,
  "version": "0.0.0",
  "authors": [
    "Yo "
  ],
  "dependencies": {
    "jquery": "~3.1.0"
  }
}

En «dependencies» se indican las distintas librerías y sus versiones. El símbolo ~ indica que bower instalará la 3.1.0 o una superior cuando salga siempre que sea de la 3.1.x

Guía de comandos de bower

26-septiembre-2016
admin

Crear una aplicación Spring-Boot

Paso 1 – Instalar maven
Se descarga la version de maven (3.0.5 o superior en este caso). Se mete el directorio bin al path.

Paso 2 – Instalar el wraper de maven para spring-boot. Ver https://github.com/takari/maven-wrapper
Se instala con este comando de maven: mvn -N io.takari:maven:wrapper
Luego para compilar se podría hacer (en lugar de mvn clean install):
./mvnw clean install or ./mvnw.cmd clean install

Paso 3 – Crear proyecto boot inicial.
Consiste en, primero, crear aplicacion en esta url: http://start.spring.io/
Y luego, montar aplicacion:

mvn eclipse:eclipse


Paso 3 – Correr la aplicación.
Dos opciones para lanzar la aplicación pueden ser:

//Con maven:	
mvn spring-boot:run. 
//Construyendo el jar:		
mvn clean package 
//Y haciéndolo correr con:	
java -jar target/nombre_jar.jar


18-septiembre-2016
admin

Crear una aplicación con gvNIX

gvNIX está basado en Spring Roo y te permite generar aplicaciones web java de manera muy rápida a partir de un esquema de base de datos. http://www.gvnix.org/

Instalación de gvNIX

Comandos a ejecutar para la creación de un proyecto

//Primero se configura la BD de la que luego se hará ingeniería inversa...
jpa setup --database MYSQL --provider HIBERNATE --databaseName mi_base_datos --hostName mi_ip --userName mi_usuario --password mi_contraseña
//Luego se puede comprobar si se ha realizaco la conexión bien
database introspect --schema nombre_de_mi_esquema
// si te dice que no encuentra el driver puedes instalarlo así
addon search mysql
//te deberia salir una lista con los drivers que puedes instalar para a continuación
addon install id --searchResultId xx    
//xx sería el codigo del driver mostrado en el listado que saca el anterior comando...
//En mi caso me dió problemas y el de mysql no me lo instaló bien así que lo instale a mano.
//Para ello me lo descargue y lo instalé con el siguiente comando:
osgi start --url file:///C:\\mysql-connector-java-5.1.18.jar
//Ahora ya se puede crear las entidades a partir de la BD.
database reverse engineer --schema nombre_de_mi_esquema --package ~.domain --includeTables "tab_*"
//se crea el negocio y la presentación para spring mvc
web mvc setup
web mvc all --package ~.web
web mvc finder all
//añadimos la internacionalización
web mvc language --code en
web mvc language --code es
//Seleccionamos el nivel de log
logging setup --level INFO

Hasta aquí ya tendriamos un el proyecto funcionando, podriamos ejecutarlo y ver como se pueden hacer las tareas crud con las pantallas con los estilos por defecto de gvNIX. Ver guia de estilos gvNIX.

Si quisiéramos cambiar la presentación para usar por ejemplo bootstrap deberiamos seguir a continuación los siguientes pasos:

// Añadimos jQuery al proyecto
web mvc jquery setup
// Instalamos Bootstrap
web mvc bootstrap setup
// Instalamos el componente datatables
web mvc datatables setup 
// Añadimos JQuery a todos los archivos
web mvc jquery all
// Se crea los datatables de todos los listados
web mvc datatables all
// Se actualiza bootstrap para que importe los ficheros datatables
web mvc bootstrap update
//Instalamos el security
security setup
// Seactualiza bootstrap para que importe los ficheros del security
web mvc bootstrap update
// Instalamos reports en el proyecto
web report setup
// Creamos un report 
web report add --controller ~.web.SampleController --reportName samplereport

Notas:
web mvc bootstrap setup
Este comando importará e instalará todos los recursos necesarios para utilizar bootstrap. Además, modificará la estructura de algunos tagx existentes para que funcionen correctamente con Bootstrap y modificará todas las vistas de la aplicación para que utilicen los tags de JQuery.

web mvc bootstrap update
Este comando permite regenerar de forma correcta todos los componentes importados por Bootstrap. En caso de una modificación incorrecta de estos componentes, podremos regenerarlos para que vuelvan a su estado inicial.



Documentación oficial versión 1.4.1


9-septiembre-2016
admin

Eliminar Spring Roo con eclipse

Para quitar Spring Roo de un proyecto que lo esté utilizando sin perder las funcionalidades que se tienen se deben seguir los siguientes pasos:

Paso 1: Eliminación de los aspectos del proyecto
Para ello seleccionamos el proyecto en el IDE -> pulsamos el botón derecho del ratón -> en el menú contextual seleccionamos la opción Refactor/Push In… -> tras pulsar el botón “OK” -> se eliminarán del proyecto las clases de los aspectos.

Paso 2: Eliminación de las anotaciones de las clases del proyecto.
Se realiza reemplazando las anotaciones de Spring Roo. Para ello, iremos a la opción del menú Search/Search/File Search -> en el campo con título “containing text” insertaremos la expresión regular “\n.*[@\.]Roo[^t_]+?.*$” (sin comillas) -> seleccionaremos las check: “Case sensitive” y “Regular expression” -> a continuación, pulsaremos el botón “Replace…” -> y, para finalizar, se mostrará un ventana que solicitará el nuevo texto, en donde pulsaremos el botón de aceptación.

Paso 3: Eliminación referencias del pom.
Se eliminan a mano todas las dependencias a Spring ROO existentes en el pom.xml.

Paso 4: Corregir errores del eclipse
Aparte es posible que haya que corregir algun error en el codigo generado en las clases con relaciones muchos a muchos. Tales como:
– crear método ‘getSerialversionUID’ en las clases,
– pasar los constructores a public
– quitar la propiedad ‘final’ de la clase
– quitar los ‘implements serializes’ repetidos
– añadir los métodos ‘hashcode’ y ‘equals’
– …
Se trata de errores que se solucionan rapido porque los va a ir sacando el eclipse.

Tras todo eso puedes probar tu proyecto ejecutando
mvn clean install jetty:run

Páginas:«1...78910111213...30»

Categorias

Linkedin