Привет, Хабр!
При изучении технологий Ext JS и Java, написал web-приложение «Каталог автомобилей». Хочу поделиться с Вами этим опытом.
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Добавим файлы фрэймворка Ext JS:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Модель Ext JS MVC:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Создадим файл app.js:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
app.js
В файле index.jsp подключаем стили Ext JS, затем фреймворк Ext JS и только потом app.js:
Проверим, что всё работает:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Понадобится четыре вида — это вид поиска SearchCarView.js, вид таблицы CarGridView.js, вид формы добавления данных AddCarFormView.js и вид каркаса CarCatalogView.js, куда поместим все виды.
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
SerachCarView.js
CarGridView.js
AddCarFormView.js
CarCatalogView.js
Укажим виды в app.js:
Проверим, что всё работает:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
CarCatalogController.js
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
CarCatalogModel.js
CarCatalogStore.js
Добавим в CarGridView.js параметр store: 'CarCatalogStore', для отображения данных в таблице:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Укажим контролер CarCatalogController.js и хранилище CarCatalogStore.js в app.js:
Проверим, что всё работает. 404 (Not Found) — это нормально, так как по адресу localhost:8080/car еще ничего нет:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Создадим папку java:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Создадим модель данных и слой доступа к данным (DAO):
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Car.java
CarDao.java
CarDaoImpl.java
Создадим слой сервиса:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
CarService.java
CarServiceImpl.java
Создадим контролер, который будет замапен на адрес /car для обработки запросов с клиента:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
CarController.java
ExtResult.java
Проверьте, что всё работает. Соберите проект с помощью maven install и запустите приложение.
Создадим spring контекст my-context.xml c:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
my-context.xml
Создайте БД с названием CarCatalog и кодировкой utf_general_ci или измените название в контексте my-context.xml на своё. Также измените p:username и p:password, если не совпадает.
Создадим настройки для spring DispatcherServlet, который будет обрабатывать запросы с клиента:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
mvc-dispatcher-servlet.xml
Добавим spring контекст my-context.xml и настройки для spring DispatcherServlet в дескриптор развертывания web.xml:
Добавим в контролер CarCatalogController.js параметр refs и обработчики для компонентов:
И последнее — добавим иконки к кнопкам «Добавить» и «Удалить».
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
index.jsp
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
При изучении технологий Ext JS и Java, написал web-приложение «Каталог автомобилей». Хочу поделиться с Вами этим опытом.
Вид и функциональность приложения
- Добавление;
- Удаление;
- Редактирование;
- Поиск;
- Валидация данных;
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/c4c/5f1/e98/c4c5f1e98a924878a4ca93a8df115ec5.png)
Добавление и валидация
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/f24/98a/116/f2498a116e9041b6ab63d3c2f7078e17.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/4dd/0cd/e11/4dd0cde118af41d19dc0146db93d3d2d.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/627/af1/192/627af119200b473c83873464817710ee.png)
Редактирование
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/00f/d0b/1c4/00fd0b1c42894de8a9e92471a0fe1d84.png)
Поиск
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/0d6/55a/8c5/0d655a8c5724404d942b2e539927acab.png)
Инструменты
- IntelliJ IDEA 13 скачать
- Ext JS 5.0.1 скачать
- Apache Tomcat 8.0.12 скачать
- MySQL 5.6.20 скачать
- Apache Maven 3.0.5 скачать
- Java 1.8.0_20 скачать
- Java doc читать
- Ext JS Guides читать
- Hibernate читать
- JPA читать
- Spring читать
- SQL читать
- MVC читать
- DAO читать
- Layer Service читать
- Дескриптор развертывания читать
Создание проекта
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Укажите путь к Java в Project SDK:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Укажите путь к своей Maven home directory:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
«Maven projects need to be imported» кликаем Enable Auto-Import
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/811/3ec/34c/8113ec34c8ae41f1bf6f1a12d8e23530.png)
Укажите путь к Java в Project SDK:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/c22/4b5/c89/c224b5c8922144d187c2d5cba3144e23.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/7bf/6ea/fbd/7bf6eafbdc04432fa965847b731f4f17.png)
Укажите путь к своей Maven home directory:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/7bb/31e/7b1/7bb31e7b156b445595a734127e31ca49.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/a50/212/379/a5021237977e469baaebcf425921578c.png)
«Maven projects need to be imported» кликаем Enable Auto-Import
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/92b/f66/e6d/92bf66e6d39044a6a3ff00a1d1e7009f.png)
Добавление сервера
Добавим Tomcat Server:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
В Application server укажите путь до Tomcat сервера:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
Ok -> Apply -> Ok
Проверим, что всё работает:
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](/web/20211020194532im_/https://habr.com/img/image-loader.svg)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/ab2/e1f/a1d/ab2e1fa1df7445998e5261936505812b.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/1ab/b56/415/1abb564153ce4167b5231f8c20e59afb.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/506/f50/cd8/506f50cd8221499380459263a12bd0d3.png)
В Application server укажите путь до Tomcat сервера:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/87a/f8f/d39/87af8fd393e5460ca218899db116ffa1.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/2ff/195/761/2ff19576125547cdac0025f191c315cf.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/036/231/c9c/036231c9cc994caa83ac0c51056fe83f.png)
Ok -> Apply -> Ok
Проверим, что всё работает:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/961/6c5/355/9616c5355397413d803794d4a1cbbd31.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/8f0/a4c/b34/8f0a4cb34e3f4416a38d76222adf1715.png)
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/ea2/bf8/4f1/ea2bf84f1bff45c88dc63b35ef85ba65.png)
Клиент (ExtJS)
Добавим файлы фрэймворка Ext JS:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/e7e/4a9/284/e7e4a92844ed450cbde071ed4c488b62.png)
Модель Ext JS MVC:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/3c6/9b3/bbd/3c69b3bbd0e6458d9c3bbc7901f02cfb.png)
Создадим файл app.js:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/4a3/df1/f77/4a3df1f77c004db88b7a3ea1c36a8314.png)
app.js
Ext.application({
name: 'CarCatalog',
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'panel',
html: '<h2>Каталог автомобилей</h2>'
}
});
}
});
- Метод Ext.application инициализирует приложение Ext JS;
- name: 'CarCatalog' указывает имя приложения, которое будет затем использоваться для создания полных имен классов приложения;
- launch: function(){} тут происходит создание приложения;
В файле index.jsp подключаем стили Ext JS, затем фреймворк Ext JS и только потом app.js:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Каталог</title>
<link rel="stylesheet" type="text/css" href="resources/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>
<script type="text/javascript" src="resources/ext-all.js"></script>
<script type="text/javascript" src="resources/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
Проверим, что всё работает:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/b21/030/a88/b21030a8841f4b0f972e8d5382edd7f7.png)
View
Понадобится четыре вида — это вид поиска SearchCarView.js, вид таблицы CarGridView.js, вид формы добавления данных AddCarFormView.js и вид каркаса CarCatalogView.js, куда поместим все виды.
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/f93/39a/b27/f9339ab273b14ce2b646dfbabb06509d.png)
SerachCarView.js
Ext.define('CarCatalog.view.SearchCarView', {
extend: 'Ext.form.Panel',
alias: 'widget.searchCarView',
bodyPadding: 10,
items: [
{
xtype: 'textfield',
name: 'search',
fieldLabel: 'Введите название модели',
maxLength: 200
}
]
});
CarGridView.js
Ext.define('CarCatalog.view.CarGridView', {
extend: 'Ext.grid.Panel',
alias: 'widget.carGridView',
width: 400,
height: 300,
frame: true,
iconCls: 'icon-user',
viewConfig:{
markDirty:false
},
columns: [
{
text: 'Модель',
flex: 1,
sortable: true,
dataIndex: 'name',
editor: {
xtype:'textfield',
allowBlank: false,
blankText: 'Это поле должно быть заполнено'
}
},
{
flex: 2,
text: 'Цена',
sortable: true,
dataIndex: 'price',
editor: {
xtype:'textfield',
regex: /^([0-9]{1,20})*$/,
regexText: 'Цена должна состоять из цифр',
allowBlank: false,
blankText: 'Это поле должно быть заполнено'
}
}
],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
saveBtnText: 'Сохранить',
cancelBtnText: 'Отменить'
})
],
selType: 'rowmodel',
dockedItems: [
{
xtype: 'toolbar',
items: [
{
text: 'Добавить',
action: 'add',
iconCls: 'icon-add'
},
'-',
{
action: 'delete',
text: 'Удалить',
iconCls: 'icon-delete',
disabled: true
}
]
}
]
});
AddCarFormView.js
Ext.define('CarCatalog.view.AddCarFormView', {
extend: 'Ext.window.Window',
alias: 'widget.addCarFormView',
autoShow: true,
layout: 'fit',
modal: true,
items: [
{
bodyPadding: 10,
xtype: 'form',
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Название модели',
allowBlank: false,
blankText: 'Это поле должно быть заполнено'
},
{
xtype: 'textfield',
name: 'price',
fieldLabel: 'Цена',
regex: /^([0-9]{1,20})*$/,
regexText: 'Цена должна состоять из цифр',
allowBlank: false,
blankText: 'Это поле должно быть заполнено'
}
]
}
],
buttons: [
{
text: 'Сохранить',
action: 'save',
disabled: true
},
{
text: 'Отменить',
handler: function () {
this.up('window').close();
}
}
]
});
CarCatalogView.js
Ext.define('CarCatalog.view.CarCatalogView', {
extend: 'Ext.panel.Panel',
width: 500,
height: 360,
padding: 10,
alias: 'widget.carCatalogView',
layout: 'border',
items: [
{
xtype: 'carGridView',
region: 'center'
},
{
xtype: 'panel',
html: '<div style="font: normal 18px cursive"><center><font size = "10">Каталог автомобилей</font></center></div>',
region: 'north',
height: 80
},
{
xtype: 'searchCarView',
title: 'Поиск',
region: 'west',
width: 300,
collapsible: true,
collapsed: false
}
],
renderTo: Ext.getBody()
});
- Метод Ext.define('Имя', {параметры}) создает класс-компонент, который может быть унаследован от какого-нибудь компонента. Например в CarGridView.js указали extend: 'Ext.grid.Panel', что будет представлять собой таблицу;
Укажим виды в app.js:
Ext.application({
name: 'CarCatalog',
views: [
'AddCarFormView',
'CarCatalogView',
'CarGridView',
'SearchCarView'
],
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype : 'carCatalogView'
}
});
}
});
- 'carCatalogView' алиас, который указали для вида CarCatalogView.js
Проверим, что всё работает:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/ff8/278/0c7/ff82780c78b943de814ddc1b03cbc7e7.png)
Controller
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/a18/ad8/f5d/a18ad8f5dcb14759a861901fa19b54f6.png)
CarCatalogController.js
Ext.define('CarCatalog.controller.CarCatalogController', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
});
}
});
- С помощью параметра init инициализируются обработчики для компонентов (кнопки, поля и т.д). Связать конпонент с обработчиком помогает функция control;
Модель и хранилище
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/75c/aa5/5de/75caa55dec414017bf99d72e47a33d2e.png)
CarCatalogModel.js
Ext.define('CarCatalog.model.CarCatalogModel', {
extend: 'Ext.data.Model',
fields: ['name', 'price'],
proxy: {
type: 'rest',
api: {
create: 'car',
read: 'car',
destroy: 'car',
update: 'car'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true
}
}
});
CarCatalogStore.js
Ext.define('CarCatalog.store.CarCatalogStore', {
extend: 'Ext.data.Store',
requires : [
'CarCatalog.model.CarCatalogModel'
],
model: 'CarCatalog.model.CarCatalogModel',
autoLoad: true,
autoSync: true,
proxy: {
type: 'rest',
api: {
create: 'car',
read: 'car',
destroy: 'car',
update: 'car'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true
}
}
});
- 'car' имя, на которое будет замапен java-класс (контролер), который будет обрабатывать GET, POST, PUT, DELETE запросы с клиента;
Добавим в CarGridView.js параметр store: 'CarCatalogStore', для отображения данных в таблице:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/3e6/4db/95e/3e64db95ed5e47c59e6a3fb3156c3ef4.png)
Укажим контролер CarCatalogController.js и хранилище CarCatalogStore.js в app.js:
Ext.application({
name: 'CarCatalog',
views: [
'AddCarFormView',
'CarCatalogView',
'CarGridView',
'SearchCarView'
],
controllers : [
'CarCatalogController'
],
stores : [
'CarCatalogStore'
],
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype : 'carCatalogView'
}
});
}
});
Проверим, что всё работает. 404 (Not Found) — это нормально, так как по адресу localhost:8080/car еще ничего нет:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/1af/28e/351/1af28e351de94201bbd11de14a5cdc1a.png)
Сервер (Java)
Добавьте зависимости в pom.xml
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.jvm.version>1.7</project.jvm.version>
<spring.version>3.2.2.RELEASE</spring.version>
<spring.security>3.1.4.RELEASE</spring.security>
<slf4j.version>1.5.6</slf4j.version>
<log4j.version>1.2.17</log4j.version>
<hibernate.version>4.2.2.Final</hibernate.version>
<jackson.version>1.9.12</jackson.version>
<lombok.version>0.11.8</lombok.version>
<querydsl.version>3.2.0</querydsl.version>
<springkex.version>0.0.23-SNAPSHOT</springkex.version>
</properties>
<dependencies>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.6</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-entitymanager</artifactId>
<version>${hibernate.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>cglib</groupId>
<artifactId>cglib</artifactId>
<version>2.2.2</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.4</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>4.3.1.Final</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-jpamodelgen</artifactId>
<version>1.2.0.Final</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.mysema.querydsl</groupId>
<artifactId>querydsl-jpa</artifactId>
<version>${querydsl.version}</version>
</dependency>
<dependency>
<groupId>com.mysema.querydsl</groupId>
<artifactId>querydsl-apt</artifactId>
<version>${querydsl.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.1.3</version>
</dependency>
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-config</artifactId>
<version>${spring.security}</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-ldap</artifactId>
<version>${spring.security}</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-web</artifactId>
<version>${spring.security}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-taglibs</artifactId>
<version>${spring.security}</version>
</dependency>
<dependency>
<groupId>opensymphony</groupId>
<artifactId>quartz</artifactId>
<version>1.6.3</version>
</dependency>
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjrt</artifactId>
<version>1.7.2</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>1.7.2</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>commons-dbcp</groupId>
<artifactId>commons-dbcp</artifactId>
<version>1.4</version>
<exclusions>
<exclusion>
<artifactId>commons-pool</artifactId>
<groupId>commons-pool</groupId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>${log4j.version}</version>
</dependency>
<dependency>
<groupId>com.jolbox</groupId>
<artifactId>bonecp</artifactId>
<version>0.7.1.RELEASE</version>
</dependency>
</dependencies>
Создадим папку java:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/4fb/d4d/4f9/4fbd4d4f92fc415faf729419a131b97f.png)
Создадим модель данных и слой доступа к данным (DAO):
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/5dc/350/f51/5dc350f5181848beb409376d4c09203e.png)
Car.java
@Entity
@Table(name = "cars")
public class Car implements Serializable {
@Id
@Column(name = "ID")
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "name")
private String name;
@Column(name = "price")
private Long price;
public Car() {
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Long getPrice() {
return price;
}
public void setPrice(Long price) {
this.price = price;
}
}
CarDao.java
public interface CarDao {
void add(Car car);
void update(Car car);
void delete(Car car);
Collection<Car> getCars(String search);
public List findByCar(String name, Long price);
}
CarDaoImpl.java
public class CarDaoImpl implements CarDao {
@PersistenceContext
private EntityManager emf;
@Override
public void add(Car car) {
emf.persist(car);
}
@Override
public void update(Car car) {
emf.merge(car);
}
@Override
public void delete(Car car) {
emf.remove(emf.getReference(Car.class, car.getId()));
}
@Override
public Collection<Car> getCars(String search) {
if (null == search || search.trim().isEmpty()) {
return emf.createQuery(
"select c from Car c")
.getResultList();
}
return emf.createQuery(
"select c from Car c where c.name like :search")
.setParameter("search", search.trim() + "%")
.getResultList();
}
public List<Car> findByCar(String name, Long price) {
return emf.createQuery(
"select c from Car c where c.name = :name and c.price = :price")
.setParameter("name", name)
.setParameter("price", price)
.getResultList();
}
}
- Метод getCars(String search) принимает значение поля поиска и если пусто — вернет все данные;
- Метод findByCar(String name, Long price) используется для поиска дубликата при добавлении данных;
Создадим слой сервиса:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/99b/e80/351/99be803514bf4ceab50c447c40cebe02.png)
CarService.java
public interface CarService {
Boolean add(Car car);
void update(Car car);
Collection<Car> getCars(String search);
void delete(Car car);
}
CarServiceImpl.java
public class CarServiceImpl implements CarService {
private CarDao carDao;
public CarDao getCarDao() {
return carDao;
}
public void setCarDao(CarDao carDao) {
this.carDao = carDao;
}
@Transactional
@Override
public Boolean add(Car car) {
List<Car> duplicate = carDao.findByCar(car.getName(), car.getPrice());
if (duplicate.isEmpty()) {
carDao.add(car);
return true;
}
return false;
}
@Transactional
@Override
public void update(Car car) {
carDao.update(car);
}
@Transactional
@Override
public Collection<Car> getCars(String search) {
return carDao.getCars(search);
}
@Transactional
@Override
public void delete(Car car) {
carDao.delete(car);
}
}
Создадим контролер, который будет замапен на адрес /car для обработки запросов с клиента:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/83f/1be/980/83f1be98062344c68205f9cdb853432e.png)
CarController.java
@Controller
@RequestMapping("/car")
public class CarController {
@Autowired
private CarService carService;
@RequestMapping(method = RequestMethod.GET)
@ResponseBody
public Collection<Car> getCars(String search) {
return carService.getCars(search);
}
@RequestMapping(method = RequestMethod.POST)
@ResponseBody
public ExtResult setCar(@RequestBody Car car) {
return new ExtResult(carService.add(car), car);
}
@RequestMapping(value = "{id}", method = RequestMethod.DELETE)
@ResponseBody
public String deleteCar(@RequestBody Car car) {
carService.delete(car);
return "delete";
}
@RequestMapping(value = "{id}", method = RequestMethod.PUT)
@ResponseBody
public String updateCar(@RequestBody Car car) {
carService.update(car);
return "update";
}
}
- Каждый метод замапен на соответствующий запрос с клиента. Внедряем зависимость с помощью spring аннотации Autowired и вызываем соответствующие методы у сервиса;
- ExtResult — вспомогательный класс. Используется для ответа клиенту, что сущность, которую пытаемся записать в БД, дубликат или не дубликат;
ExtResult.java
public class ExtResult {
private boolean success;
private Car data;
public ExtResult(boolean success, Car data) {
this.success = success;
this.data = data;
}
public ExtResult() {
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public Car getData() {
return data;
}
public void setData(Car data) {
this.data = data;
}
}
Проверьте, что всё работает. Соберите проект с помощью maven install и запустите приложение.
Создадим spring контекст my-context.xml c:
- настройками подключения к БД;
- бином EntityManager — объект, через который происходит взаимодействие с БД. Инжектится в CarDaoImpl.java;
- инжектом объекта класса CarDaoImpl.java в объект класса CarServiceImpl.java;
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/d52/1d2/e1f/d521d2e1f7cb4f29a5902ea1d44a9376.png)
my-context.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:jdbc="http://www.springframework.org/schema/jdbc"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:p="http://www.springframework.org/schema/p"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
<bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean"
p:dataSource-ref="dataSource"
p:packagesToScan="model"
p:jpaProperties-ref="jpaProperties"
p:persistenceProvider-ref="persistenceProvider"/>
<bean class="org.springframework.orm.jpa.support.PersistenceAnnotationBeanPostProcessor"
depends-on="entityManagerFactory"/>
<bean id="dataSource" class="com.jolbox.bonecp.BoneCPDataSource" destroy-method="close"
p:driverClass="com.mysql.jdbc.Driver"
p:jdbcUrl="jdbc:mysql://localhost:3306/CarCatalog?characterEncoding=UTF-8"
p:username="root"
p:password="1234"
p:idleConnectionTestPeriodInMinutes="1"
p:idleMaxAgeInSeconds="240"
p:minConnectionsPerPartition="2"
p:maxConnectionsPerPartition="5"
p:partitionCount="2"
p:acquireIncrement="1"
p:statementsCacheSize="100"
p:releaseHelperThreads="2"
p:statisticsEnabled="false"/>
<bean id="persistenceProvider" class="org.hibernate.ejb.HibernatePersistence"/>
<bean id="jpaProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean">
<property name="properties">
<props>
<prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
<prop key="connection.pool_size">1</prop>
<prop key="current_session_context_class">thread</prop>
<prop key="show_sql">true</prop>
<prop key="hibernate.hbm2ddl.auto">create</prop>
<prop key="hibernate.ejb.naming_strategy">org.hibernate.cfg.ImprovedNamingStrategy</prop>
</props>
</property>
</bean>
<bean id="transactionManager" class="org.springframework.orm.jpa.JpaTransactionManager"
p:entityManagerFactory-ref="entityManagerFactory"/>
<tx:annotation-driven transaction-manager="transactionManager"/>
<bean name="carDao" class="model.dao.impl.CarDaoImpl">
</bean>
<bean name="CarService" class="service.impl.CarServiceImpl">
<property name="carDao" ref="carDao">
</property>
</bean>
</beans>
Создайте БД с названием CarCatalog и кодировкой utf_general_ci или измените название в контексте my-context.xml на своё. Также измените p:username и p:password, если не совпадает.
Создадим настройки для spring DispatcherServlet, который будет обрабатывать запросы с клиента:
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/862/eed/300/862eed3000bc4d94a54d6801a9d93e84.png)
mvc-dispatcher-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="controllers"/>
<mvc:view-controller path="/" view-name="/index.jsp"/>
<mvc:resources mapping="/**" location="/"/>
<mvc:annotation-driven/>
</beans>
- context:component-scan поиск и регистрация компонентов в контейнере спринга;
- mvc:view-controller домашняя страница;
- mvc:resources автоматически обрабатывать запросы на получение статических данных;
Добавим spring контекст my-context.xml и настройки для spring DispatcherServlet в дескриптор развертывания web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>mvc-dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>mvc-dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
classpath:/my-context.xml
</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
</web-app>
Добавим в контролер CarCatalogController.js параметр refs и обработчики для компонентов:
Ext.define('CarCatalog.controller.CarCatalogController', {
extend: 'Ext.app.Controller',
refs: [
{selector: 'carGridView',
ref: 'carGridView'},
{selector: 'carGridView button[action="add"]',
ref: 'carGridAdd'},
{selector: 'carGridView button[action="delete"]',
ref: 'carGridDelete'},
{selector: 'searchCarView button[action="search"]',
ref: 'searchCar'},
{selector: 'addCarFormView',
ref: 'addCarFormView'},
{selector: 'carCatalogView',
ref: 'carCatalogView'},
{selector: 'addCarFormView textfield[name=name] ',
ref: 'addCarFormName'},
{selector: 'addCarFormView textfield[name=price]',
ref: 'addCarFormPrice'},
{selector: 'addCarFormView button[action=save]',
ref: 'addCarFormSave'}
],
init: function () {
this.control({
'carGridView button[action=add]': {
click: this.onAddCar
},
'carGridView button[action=delete]': {
click: this.onDelCar
},
'searchCarView textfield[name="search"]': {
change: this.onChangeText
},
'carGridView': {
cellclick: this.onLineGrid
},
'addCarFormView button[action=save]': {
click: this.onSaveCar
},
'addCarFormView textfield[name=name]': {
change: this.onValidation
},
'addCarFormView textfield[name=price]': {
change: this.onValidation
}
});
},
onSaveCar: function (button) {
var me = this;
var carModel = Ext.create('CarCatalog.model.CarCatalogModel');
carModel.set(this.getAddCarFormView().down('form').getValues());
carModel.save({
success: function (operation, response) {
var objAjax = operation.data;
Ext.getStore('CarCatalogStore').add(objAjax);
me.getAddCarFormView().close();
},
failure: function (dummy, result) {
Ext.MessageBox.show({
title: 'Дубликат!',
msg: 'Такая модель и цена уже существуют',
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
}
});
},
onAddCar: function () {
Ext.widget('addCarFormView');
},
onDelCar: function () {
var sm = this.getCarGridView().getSelectionModel();
var rs = sm.getSelection();
this.getCarGridView().store.remove(rs[0]);
this.getCarGridView().store.commitChanges();
this.getCarGridDelete().disable();
},
onChangeText: function () {
Ext.getStore('CarCatalogStore').load({
params: {
search: this.getCarCatalogView().down('searchCarView').getValues()
}
});
},
onLineGrid: function () {
this.getCarGridDelete().enable();
},
onValidation: function () {
if (this.getAddCarFormName().validate() && this.getAddCarFormPrice().validate()) {
this.getAddCarFormSave().enable();
} else {
this.getAddCarFormSave().disable();
}
}
});
- ref ссылка на что-то в selector'e;
- selector указывает на компоненты, для быстро обращения к ним через ref;
- onSaveCar создается модель данных и сохраняется;
- onAddCar создает виджет формы добавления;
- onDelCar удаляет запись;
- onChangeText загружает данные в соответствии со значением в поле поиска;
- onLineGrid при выделении строки кнопка «Удалить» становится активной;
- onValidation валидация полей формы добавления;
И последнее — добавим иконки к кнопкам «Добавить» и «Удалить».
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/1b5/f53/828/1b5f53828aff42d59c94804196c08d08.png)
index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Каталог</title>
<link rel="stylesheet" type="text/css" href="resources/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>
<script type="text/javascript" src="resources/ext-all.js"></script>
<script type="text/javascript" src="resources/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
.icon-delete {
background-image: url(resources/delete.png) !important;
}
.icon-add {
background-image: url(resources/add.png) !important;
}
</style>
</head>
<body>
</body>
</html>
Готовый проект скачать
![](https://webcf.waybackmachine.org/web/20211020194532/https://habrastorage.org/files/62f/ebf/e73/62febfe73a4f40c3bea2e54a7fa4615f.png)