Cursos web

Web catálogo de cursos

Spring, AngularJS y Mybatis

Sumario

Angular JS Ventajas Características

Mybatis Ventajas Características Mybatis-Spring

Aplicación Requisitos funcionales Arquitectura Tecnologías, frameworks y herramientas Problemas surgidos

Presentación

Superheroic Javascript MVW Framework Vistas dinámicas en aplicaciones web Extiende HTML

Angular JS Ventajas:

Actualización de vista y control de forma automática (Data binding)

Capa de control autogestionada (controllers) ¡No más manipulación del DOM!

o Separación de lógica de vista y negocio

o Totalmente extensible y compatible con resto de librerías (jQuery, Dojo, Three.js…)

o Deep linking

o Validación de formularios

o Comunicación con servidor vía XHR.

o Gestión de excepciones

o Internacionalización

…

Angular JS - Características

Bindings: {{soyUnBinding}}

Actualización automática:

HTML Vista Modelo

<div ng-controller="TodoCtrl"><span>{{remaining()}} of {{todos.length}} remaining</span>

<a href="" ng-click="archive()">archive</a><ul class="unstyled">

…

<div ng-controller="TodoCtrl"><span>{{remaining()}} of {{todos.length}} remaining</span>

<a href="" ng-click="archive()">archive</a><ul class="unstyled">

…

Compila


Scopes:

ID:

<html lang="en" ng-app> <html lang="en" ng-app>

$scope.phones = $scope.phones =

var phonecatApp = angular.module('phonecatApp', []); …

var phonecatApp = angular.module('phonecatApp', []); …

HTML JS

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',function ($scope, $http) {

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',function ($scope, $http) {


-Integración XHR:

$.ajax({ url: "server", success: function(data){//Update your dashboard gaugesalesGauge.setValue(data.value);}, dataType: "json", complete: poll, timeout: 30000 });})();

$.ajax({ url: "server", success: function(data){//Update your dashboard gaugesalesGauge.setValue(data.value);}, dataType: "json", complete: poll, timeout: 30000 });})();

$http({method: 'GET', url: '/someUrl'}).success(function(data, status, headers, config) {

//…}).error(function(data, status, headers, config) {

//…});

$http({method: 'GET', url: '/someUrl'}).success(function(data, status, headers, config) {

//…}).error(function(data, status, headers, config) {

//…});

1. Llamadas AJAX clásicas (desde librería AJAX o jQuery):

2. Módulo $http3. Módulo $resource

cursosServices.factory('Nivel', ['$resource', function($resource){

return $resource('/cursos-web/getNiveles', {}, { query: {method:'GET', params:{}, isArray:true} //más métodos... }); }]);

cursosServices.factory('Nivel', ['$resource', function($resource){

return $resource('/cursos-web/getNiveles', {}, { query: {method:'GET', params:{}, isArray:true} //más métodos... }); }]);


Más ventajas: Filters Services Módulos $route, $location, $services,

etc. Animaciones

Y mucho más…

Sumario




Presentación

Framework de persistencia Soporta SQL Alternativa/complemento a JDBC

Mybatis

Ventajas: Eliminación de código JDBC (ahorro 95%) Mapping de objetos con registros de BD Configurable por XML o anotaciones Altamente personalizable Soporta múltiples ‘DB vendors’ -> ¡Incluso a

nivel de query! Integración con frameworks: mybatis-spring,

mybatis-velocity, etc. Inconvenientes:

Fuerza al uso de SQL. No soporta bases de datos no-SQL

Mybatis – Mapped Statements

Statements mapeados: Por XML:

<select/> <insert/> <update/> <delete/>

Por código:public interface Mapper {

@Lang(MyLanguageDriver.class) @Select("SELECT * FROM BLOG") List<Blog> selectBlog();

}

Mybatis – Mapped statements

Ejemplo de sentencia SELECT

<select id="selectPerson" parameterType="int"

resultType="hashmap" resultMap="personResultMap" flushCache="false" useCache="true" timeout="10000" fetchSize="256" statementType="PREPARED" resultSetType="FORWARD_ONLY">

SELECT titulo,activo,profesor

FROM TB_CURSOS WHERE ID = #{id} ;

</select>

<select id="selectPerson" parameterType="int"

resultType="hashmap" resultMap="personResultMap" flushCache="false" useCache="true" timeout="10000" fetchSize="256" statementType="PREPARED" resultSetType="FORWARD_ONLY">

SELECT titulo,activo,profesor

FROM TB_CURSOS WHERE ID = #{id} ;

</select>


MYBATIS

JDBC

String selectPerson = "SELECT * FROM PERSON WHERE ID=?";

PreparedStatement ps = conn.prepareStatement(selectPerson); ps.setInt(1,id);

String selectPerson = "SELECT * FROM PERSON WHERE ID=?";

PreparedStatement ps = conn.prepareStatement(selectPerson); ps.setInt(1,id);

<select id=“selectPerson” resultType=“Person”>SELECT * FROM PERSONWHERE ID = #{id}

</select>

<select id=“selectPerson” resultType=“Person”>SELECT * FROM PERSONWHERE ID = #{id}

</select>


Resto de sentencias

<insert

id="insertAuthor" parameterType="domain.blog.Author" flushCache="true" statementType="PREPARED“keyProperty="" keyColumn="" useGeneratedKeys="" timeout="20“

>

<insert

id="insertAuthor" parameterType="domain.blog.Author" flushCache="true" statementType="PREPARED“keyProperty="" keyColumn="" useGeneratedKeys="" timeout="20“

>

<update

id="insertAuthor" parameterType="domain.blog.Author" flushCache="true" statementType="PREPARED" timeout="20“

>

<update


>

<delete


>

<delete


>

Mybatis – Result maps

Result maps:

<select id="selectUsers" parameterType="int" resultType="User“>

select user_id as "id", user_name as "userName", hashed_password as "hashedPassword" from some_table where id = #{id}

</select>

<select id="selectUsers" parameterType="int" resultType="User“>

select user_id as "id", user_name as "userName", hashed_password as "hashedPassword" from some_table where id = #{id}

</select>

Mapeo de datos en JavaBeans:

Mybatis – Result maps

Result maps:

<resultMap id="userResultMap" type="User">

<id property="id" column="user_id" />

<result property="username" column="username"/>

<result property="password" column="password"/>

</resultMap>

<resultMap id="userResultMap" type="User">

<id property="id" column="user_id" />

<result property="username" column="username"/>

<result property="password" column="password"/>

</resultMap>

Mapeo de datos en maps externos:

Mybatis – Más ventajas

Sql dinámico:

<select id="findActiveBlogWithTitleLike"

parameterType="Blog" resultType="Blog">

SELECT * FROM BLOG WHERE state = ‘ACTIVE’ <if test="title != null">

AND title like #{title} </if>

</select>

<select id="findActiveBlogWithTitleLike"

parameterType="Blog" resultType="Blog">

SELECT * FROM BLOG WHERE state = ‘ACTIVE’ <if test="title != null">

AND title like #{title} </if>

</select>

Choose / when / otherwise Trim / where / set Foreach

Mybatis – Más ventajas

Constructor Joins:

Association -> 1:1 Composite -> 1:N y N:N

Discriminators Cachés Include en queries Múltiples Resultsets:

<select id="selectBlog" resultSets="blogs,authors" resultMap="blogResult"> {call getBlogsAndAuthors(#{id,jdbcType=INTEGER,mode=IN})}</select>

<select id="selectBlog" resultSets="blogs,authors" resultMap="blogResult"> {call getBlogsAndAuthors(#{id,jdbcType=INTEGER,mode=IN})}</select>

Mybatis-spring Módulo de integración de Mybatis con Spring (>3.0) Fácilmente configurable en el contexto de Spring (XML o @Configuration) Abstrae creación / borrado de sesiones Combina la potencia de Spring (ID, transaccionalidad (Spring-tx / JTA)) y de Java 5+ (anotaciones)

Sumario




Web cursos Requisitos funcionales:

Acceso al catálogo de cursos Alta de cursos

Requisitos no funcionales: Maven Arquitectura JEE Mybatis AngularJS Spring MVC JSON

Web cursos Arquitectura planteada:

Web cursos

Tecnologías / frameworks / herramientas: Spring (MVC, TX, TEST) Mybatis Angular JS

Maven Git

STS 3.4.0 basado en Eclipse Kepler JDK 1.7 Apache Tomcat 7

Web cursos

DEMO

Web cursos

¡Problemas!: Configuración Mybatis-spring File upload Angular JS

“Efecto siesta”

Web cursos

https://github.com/johnnyRey/cursos-web.githttps://github.com/johnnyRey/cursos-web.git

http://www.slideshare.net/JuanDiegoReyesPonce/cursos-webhttp://www.slideshare.net/JuanDiegoReyesPonce/cursos-web

Web cursos

GRACIAS

Cursos web

Technology

Transcript of Cursos web