Skip to content
Permalink
Browse files
Versión inicial
  • Loading branch information
dmunozfer committed Sep 26, 2016
0 parents commit 4073d7ac9a9e3feb056b852cc70d856fecb1bbd5
@@ -0,0 +1,82 @@

# Created by https://www.gitignore.io/api/java,maven,eclipse

### Java ###
*.class

# Mobile Tools for Java (J2ME)
.mtj.tmp/

# Package Files #
*.jar
*.war
*.ear

# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
hs_err_pid*


### Maven ###
target/
pom.xml.tag
pom.xml.releaseBackup
pom.xml.versionsBackup
pom.xml.next
release.properties
dependency-reduced-pom.xml
buildNumber.properties
.mvn/timing.properties


### Eclipse ###

.metadata
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.settings/
.loadpath
.recommenders

# Eclipse Core
.project

# External tool builders
.externalToolBuilders/

# Locally stored "Eclipse launch configurations"
*.launch

# PyDev specific (Python IDE for Eclipse)
*.pydevproject

# CDT-specific (C/C++ Development Tooling)
.cproject

# JDT-specific (Eclipse Java Development Tools)
.classpath

# Java annotation processor (APT)
.factorypath

# PDT-specific (PHP Development Tools)
.buildpath

# sbteclipse plugin
.target

# Tern plugin
.tern-project

# TeXlipse plugin
.texlipse

# STS (Spring Tool Suite)
.springBeans

# Code Recommenders
.recommenders/
@@ -0,0 +1,13 @@
# Carga de fragmentos de thymeleaf con ajax


## Información
Proyecto de ejemplo de carga de fragmentos de thymeleaf mediante ajax.

Para más información consultar la entrada [Fragmentos en Thymeleaf 3 cargados con ajax](http://dmunozfer.es/fragmentos-en-thymeleaf-con-spring-boot-y-ajax) del blog [dmunozfer.es](http://dmunozfer.es).

## Dependencias

- Spring Boot con Thymeleaf
- Webjars (jquery y bootstrap)
- Lombok
74 pom.xml
@@ -0,0 +1,74 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>es.dmunozfer</groupId>
<artifactId>spring-boot-thymeleaf-fragment-ajax</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>spring-boot-thymeleaf-fragment-ajax</name>
<description>Ejemplo de carga fragmentos thymeleaf con ajax</description>

<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.4.1.RELEASE</version>
<relativePath /> <!-- lookup parent from repository -->
</parent>

<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>

<jquery.version>3.1.0</jquery.version>
<bootstrap.version>3.3.7-1</bootstrap.version>
</properties>

<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>

<!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>${jquery.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>${bootstrap.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
</dependency>
</dependencies>

<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>


</project>
@@ -0,0 +1,12 @@
package es.dmunozfer;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
@@ -0,0 +1,12 @@
package es.dmunozfer.service;

import lombok.Builder;
import lombok.Data;

@Data
@Builder
public class Car {

private String brand;
private String model;
}
@@ -0,0 +1,9 @@
package es.dmunozfer.service;

import java.util.List;

public interface CarService {

List<String> findAllBrands();
List<String> findAllModelsByBrand(String brand);
}
@@ -0,0 +1,42 @@
package es.dmunozfer.service;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.concurrent.ThreadLocalRandom;
import java.util.stream.Collectors;

import org.springframework.stereotype.Service;

@Service
public class CarServiceImpl implements CarService {

private final String[] brands = { "Audi", "BMW", "Citroën", "Ford", "Mercedes", "Reanult", "Seat" };
private List<Car> cars;

public CarServiceImpl() {
this.cars = new ArrayList<>();
for (String brand : brands) {
for (int i = 0; i < 5; i++) {
this.cars.add(generateRandomCar(brand));
}
}
}

@Override
public List<String> findAllBrands() {
return Arrays.asList(brands);
}

@Override
public List<String> findAllModelsByBrand(String brand) {
List<String> result = cars.stream().filter(x -> brand.equals(x.getBrand())).map(Car::getModel).collect(Collectors.toList());
result.sort(java.util.Comparator.naturalOrder());
return result;
}

private Car generateRandomCar(String brand) {
return Car.builder().brand(brand).model(String.format("Modelo %s %d", brand, ThreadLocalRandom.current().nextInt(1, 100))).build();
}

}
@@ -0,0 +1,40 @@
package es.dmunozfer.web;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import es.dmunozfer.service.Car;
import es.dmunozfer.service.CarService;

@Controller
@RequestMapping
public class HomeController {

private CarService carService;

@Autowired
public HomeController(CarService carService) {
this.carService = carService;
}

@RequestMapping("/")
public String index(Model model) {
List<String> brands = carService.findAllBrands();
Car car = Car.builder().build();
model.addAttribute("car", car);
model.addAttribute("brands", brands);
return "home";
}

@RequestMapping("/ajax/brands")
public String ajaxBrands(@RequestParam("brand") String brand, Model model) {
List<String> models = carService.findAllModelsByBrand(brand);
model.addAttribute("models", models);
return "home :: models";
}
}
Empty file.
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description"
content="Ejemplo de uso de carga de fragmentos de thymeleaf con ajax" />
<meta name="author" content="David Muñoz Fernández" />

<title>Spring boot + thymeleaf + fragments + ajax - dmunozfer.es</title>

<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css' />
<script src="webjars/jquery/jquery.js"></script>
<script src="webjars/bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
<script th:inline="javascript">
/*[+
$(function() {
$("#model").load('/ajax/brands', $("#brand").serialize());
$('#brand').on('change', function() {
$("#model").load('/ajax/brands', $("#brand").serialize());
});
});
+]*/
</script>

<div class="container">
<div class="page-header">
<h1>Spring boot + thymeleaf + fragments + ajax - dmunozfer.es</h1>
</div>

<div id="info-panel">
<h3>Información</h3>
<p>Ejemplo de uso de carga de <strong>fragmentos de thymeleaf 3</strong> mediante ajax utilizando spring boot.</p>
</div>

<div id="form-panel">
<h3>Formulario</h3>
<div class="panel panel-primary">
<div class="panel-heading">Selecciona el modelo de coche</div>
<div class="panel-body">
<form th:object="${car}" method="post">
<div class="form-group">
<label for="marca">Marca</label>
<select th:field="*{brand}" required="required" class="form-control">
<option th:each="brand : ${brands}" th:value="${brand}" th:text="${brand}" />
</select>
</div>
<div class="form-group">
<label for="modelo">Modelo</label>
<select th:field="*{model}" required="required" class="form-control">
<option th:fragment="models" th:each="model : ${models}" th:value="${model}" th:text="${model}" />
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 4073d7a

Please sign in to comment.