Предположим в некотором проекте появилась необходимость добавить некоторую форму опроса пользователей на веб сайте (детальная форма) и форму для просмотра и редактирования списка пользователей для администратора системы (списковая форма).
Рассмотрим процесс создания этих форм с использованием OData, Angular.js, Bootstrap и JavaScript Grid. Все требования к такому приложению уже реализованы в этих инструментах, и нам практически не требуется ничего писать.
Перечислим основные требования к форме опроса (в скобках указаны инструменты, реализующие данное требование):
- Поля формы: “First Name”, “Last Name”, “Email”, “Comment”
- Форма должна сохранять данные в базе данных для последующего просмотра и анализа администратором системы (Angular.js)
- Форма должна проводить верификацию данных до отправки на сервер (Angular.js)
- Форма не должна перезагружать страницу при посылке данных на сервер (Angular.js)
- Форма должна модифицировать свой размер под различную ширину экрана или блока div, в который она будет вставлена на странице сайта (Bootstrap)
Основные требования к форме для работы со списком пользователей:
- Обеспечивать страничный механизм или виртуальный скроллинг в случае большого количества пользователей
- Обеспечивать сортировку по любым полям (колонкам грида)
- Обеспечивать возможность поиска данных
- Обеспечивать возможность добавления-редактирования-удаления данных
Любой JavaScript грид полностью обеспечивает все эти требования. Например стоит посмотреть на библиотеки Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo.
Основные запросы к серверу:
- Добавить новую запись
- Изменить запись
- Удалить запись
- Получить общее количество записей, удовлетворяющих некоторому условию
- Получить выборку из общего набора записей для показа на одной странице
- Получить весь набор записей
- Отсортировать записи по одному или нескольким полям
- Отфильтровать записи по некоторому набору условий
- Выполнение batch update операций – добавление, изменение и удаление сразу группы записей
Чтобы избежать необходимости реализации обработчиков всех перечисленных запросов, мы возьмем NitrosBase.js, который является готовым OData сервером и полностью обеспечивает автоматическую обработку всех этих запросов.
Форма опроса
Форму опроса (детальную форму) мы создадим с помощью Bootstrap и Angular.js:
- Bootstrap существенно облегчает дизайн формы и обеспечивает возможность простого изменения размера, расположения элементов и т.д.
- Angular.js обеспечивает минимальность кода для верификации данных и посылки их на сервер. Связка Bootstrap + Angular.js позволяет создавать простые формы «на лету».
Мы рекомендуем всегда иметь под рукой несколько готовых шаблонов различных форм. Например:
- Простая детальная форма с полями различных типов
- Простая детальная форма с маленьким списком, например, детальная форма данных о человеке со списком контактов
- И т.д.
Очень хорошо держать шаблоны на каком-нибудь сайте типа JSFiddle, Bootply, CodePen, Plunker и т.д.
Используя простой copy-paste на основе подобного примера формы:
- Создаем поля формы, меняем их названия.
- Указываем что поля “First Name”, “Last Name” и “Email” являются обязательными
- Выставляем URL для сохранения данных с формы – в данном случае ‘http://nitrosdata.com/service/sandboxdb/user’.
- Слегка настраиваем layout формы (в данном случае размещаем комментарий справа от других полей). И это все что нам нужно сделать.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-example32-production</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <link href="http://bootswatch.com/cerulean/bootstrap.min.css" rel="stylesheet" type="text/css"> <style>.form-control {border-width:2px}</style> </head> <body ng-app="formExample" ng-controller="ExampleController"> <div class="container"> <div class="col-md-12"> <h1>Simple Bootstrap + Angular.js form</h1> <br /> </div> <form name="myForm"> <div class="col-md-4"> <div class="form-group"> <label for="firstname">First Name:</label> <input class="form-control" id="firstname" type="text" placeholder="Enter first name" ng-model="user.firstname" required autofocus /> </div> <div class="form-group"> <label for="lastname">Last Name:</label> <input class="form-control" type="text" id="lastname" placeholder="Enter last name" ng-model="user.lastname" required /> </div> <div class="form-group"> <label for="email">Email:</label> <input class="form-control" type="email" id="email" name="input" placeholder="Enter email" ng-model="user.email" required> </div> </div> <div class="col-md-8"> <div class="form-group"> <label for="comment">Comment:</label> <textarea rows="9" class="form-control" id="comment" placeholder="Enter comment" ng-model="user.comment"></textarea> </div> </div> <div class="col-md-12"> <input class="btn btn-primary" type="submit" ng-click="insert(myForm.$valid, user)" value="Add new user" /> <input class="btn btn-info" type="submit" ng-click="update(myForm.$valid, user)" value="Update" /><br /><br /> </div> </form> </div> <script> angular.module('formExample', []) .controller('ExampleController', ['$scope', '$http', function ($scope, $http) { $scope.update = function (isvalid, user) { if (!isvalid) return; $http.post('http://nitrosdata.com/service/sandboxdb/user', JSON.stringify(user)) .success(function (data, status, headers, config) { $scope.user = data.d.results; }); }; $scope.insert = function (isvalid, user) { if (!isvalid) return; user.id = undefined; $scope.update(isvalid, user); } }]); </script> </body> </html>
Список пользователей
Список пользователей (списковую форму) будем делать на основе примера грид контрола из библиотеки Kendo UI. Практически все программирование сведется к указанию правильных URL для операций модификации данных и к описанию колонок грида.
<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding"> <style>html {font-size: 12px;font-family: Arial, Helvetica, sans-serif;} body {margin: 0;} </style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "http://nitrosdata.com/service/sandboxdb/user", create: { url: "http://nitrosdata.com/service/sandboxdb/user" }, update: { url: "http://nitrosdata.com/service/sandboxdb/user" }, destroy: { url: function (data) { return "http://nitrosdata.com/service/sandboxdb/user(" + data.id + ")"; } } }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true, schema: { model: { id: "id" } } }, filterable: true, editable: true, toolbar: ["create", "save", "cancel"], sortable: true, pageable: true, columns: ["firstname", "lastname", "email", "comment", { command: "destroy", title: " ", width: 150 }] }); }); </script> </div> </body> </html> Сервер
Для обработки всех необходимых в данном примере запросов нам вообще не потребуется разрабатывать каких-либо кодов. Все запросы к базе данных полностью покрываются стандартом Odata, и NitrosBase.js автоматически их обрабатывает.
Заключение
Существует множество библиотек для упрощения web разработки, например: Angular.js, Bootstrap, Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo, JayData, Breeze.js, datajs, ODataJS, NitrosBase.js и т.д. Каждая из них решает свою задачу. Удачный подбор совокупности библиотек под конкретную задачу может существенно сократить время разработки.
Использование готовых шаблонов форм с использованием перечисленных выше библиотек позволяет вести разработку «на лету» используя copy-paste и внося лишь мелкие изменения в код.
ссылка на оригинал статьи http://habrahabr.ru/post/252657/
Добавить комментарий