Автор
Рябинин В. А.
Источник
Інформаційні управляючі системи та комп’ютерний моніторинг (ІУС КМ - 2013) / Збірка матеріалів IV Всеукраїнської науково-технічної конференції студентів, аспірантів та молодих вчених. — Донецьк, ДонНТУ — 2013, Том 2, с. 303-307.
Постановка проблемы
Очень часто возникают ситуации, когда большому количеству пользователей необходимо предоставить доступ к некоторым данным, дать им возможность их получения и редактирования. Эти данные являются общими для всех пользователей и не могут располагаться на каждой клиентской машине. Для решения задач такого рода применяются веб-приложения Web-приложения, Web-application) - программные средства, предназначенные для автоматизированного выполнения действий на Web- серверах. При этом данные хранятся на сервере, там же при необходимости выполняется их программная обработка. По запросу необходимые данные предоставляются клиенту. Для обеспечения диалога с пользователем в веб- приложениях используются Web-браузеры. С одной стороны это представляет ряд преимуществ, с другой – накладывает определённые условия при выборе средств разработки интерфейсов таких приложений. В данной статье дан обзор технологий, позволяющих упростить создание веб-интерфейсов и их связывания с логической частью приложений.
Анализ литературы
Проведен анализ общих требований к проектированию интерфейсов [1]. В указанной в списке источников книге выделен ряд рекомендаций для создания «дружелюбного» к пользователю интерфейса. Можно выделить следующие из них: вместо создания отдельной страницы для редактирования данных предоставлять возможность их редактирования по месту; не требовать перезагрузки страницы при каждом действии пользователя, использовать контекстные инструменты.
Цель статьи
Провести обзор технологий, упрощающих создание веб- интерфейсов, отвечающих вышеуказанным требованиям.
Общая структура веб-приложения.
Веб-приложения создаются в различных вариантах архитектуры клиент-сервер. В таком случае клиентом выступает браузер, а сервером — веб-сервер.
Логика веб-приложения распределена между сервером и клиентом, хранение и обработка данных осуществляется, преимущественно, на сервере, её представление в удобном для пользователя виде - в браузере. Обмен информацией происходит по сети. Общая структура веб-приложения приведена на рисунке 1.
Рисунок 1 – Общая структура веб-приложения
Таким образом, чаще всего веб-приложения состоят как минимум из трёх основных компонентов.
Серверная часть веб-приложения - это программа или скрипт на сервере, обрабатывающая запросы пользователя (точнее, запросы браузера). Для программирования серверной части веб-приложения могут использоваться различные языки программирования: Java, PHP, Perl, Ruby, платформа .NET (языки VB.NET, C# и другие, поддерживаемые .NET). В рамках данной статьи предполагается, что серверная часть написана на языке Java. При каждом переходе пользователя по ссылке браузер отправляет запрос серверу. Сервер обрабатывает данный запрос, запуская некоторый скрипт, который формирует веб-страницу, описанную на языке HTML, и отсылает клиенту по сети. Браузер тут же отображает полученный в виде очередной веб-страницы результат.
Система управления базами данных, (СУБД) - программное обеспечение на сервере, занимающееся хранением данных и их выдачей в нужный момент. Серверная часть веб-приложения обращается к базе, извлекая данные, которые необходимы для формирования страницы, запрошенной пользователем.
Клиентская часть веб-приложения – это отображаемый в браузере графический интерфейс. Это то, что пользователь видит на странице. Через данный интерфейс пользователь взаимодействует с приложением, вводя информацию, нажимая на ссылки и кнопки.
Технологии создания клиентской части
Основной язык, которым описывается графический интерфейс веб-приложения - это HTML. Данный язык описывает структуру веб-страницы, размещение на ней компонентов. Оформление веб-страниц, их стиль и цветовая схема описываются в таблицах стилей - CSS. Для "оживления" графического интерфейса, придания ему динамичности, используются дополнительные технологии: скрипты JavaScript, а также встроенные в веб-страницу компоненты, созданные на Flash, Java или Silverlight. Все эти элементы веб-страницы могут взаимодействовать между собой: программа, написанная на JavaScript и выполняющаяся на веб- странице, может управлять встроенными в страницу компонентами, тем самым реализуя пользовательский интерфейс с богатыми возможностями.
Отсутствие необходимости полностью перезагружать страницу после каждого получения данных от сервера может существенно ускорить работу веб-приложения. Такая концепция имеет название Asynchronous JavaScript and XML (асинхронный JavaScript и XML, Ajax). При использовании данного подхода динамические запросы к серверу происходят без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные.
Преимущества использования фреймворка GWT
Написание веб- приложений с использованием вышеописанной технологии Ajax, с соблюдением требования обеспечения его корректной работы при использовании пользователями различных браузеров может оказаться непростым занятием. Выполнение такой работы требует глубокого знания как JavaScript, так и множества несоответствий различных браузеров.
Google Web Toolkit (GWT) - это фреймворк с открытым исходным кодом, который позволяет Java разработчикам легко разрабатывать веб-приложения на Ajax без углубленного изучения JavaScript и браузерной разработки.
GWT предоставляет разработчику специальное Java API и позволяет разрабатывать графические пользовательские интерфейсы (GUI), избегая работы с JavaScript и абстрагируясь от протокола HTTP и DOM моделей, лежащих в основе браузеров. Все это достигается использованием GWT компилятора, который генерирует JavaScript из написанного на Java кода интерфейса. Таким образом, скомпилированное GWT приложение состоит из фрагментов HTML, XML и JavaScript. Для связи клиентской части приложения с веб-сервером в арсенале GWT есть Remote Procedure Call (RPC) – механизм удаленного вызова процедур, который осуществляет простой обмен Java- объектами между клиентом и сервером в обе стороны.
GWT также позволяет разработчикам эффективно тестировать и отлаживать приложения без необходимости преобразования приложений в JavaScript и развертывания их на веб-сервере. GWT позволяет приложениям быть запущенными в так называемом "Хостинг режиме" (“Hosted Mode”), при этом JVM исполняет код GWT приложения в виде Java байт-кода внутри встроенного браузера. После проверки и тестирования GWT приложений в "Хостинг режиме", можно скомпилировать исходный код Java в JavaScript и развернуть приложение. GWT приложения, которые были развернуты, называются запущенными в "Веб-режиме"(“Web Mode”).
Таким образом, и клиентская и серверная части веб-приложения пишутся на Java. Затем GWT компилятор преобразует клиентские Java классы в совместимые с браузером JavaScript и HTML. После чего появляется возможность развернуть эти JavaScript и HTML на веб-серверах, так что конечные пользователи будут видеть только веб-версию приложения, в то время как классы серверной стороны могут быть развернуты на Tomcat, Jetty или каком-либо ином сервлет-контейнере
Создание интерфейса веб-приложения с использованием Vaadin
Vaadin – это платформа веб-приложений с открытым исходным кодом для создания полнофункциональных интернет приложений. В противоположность библиотекам JavaScript и решениям на основе браузеров/подключаемых модулей, в ее состав входит архитектура на стороне сервера, что означает выполнение большей части программной логики на серверах. Технология Ajax используется на стороне браузера для обеспечения функционально насыщенного и интерактивного интерфейса пользователя. На стороне клиента Vaadin строится на основе GWT и может быть расширена с ее помощью.
Основным элементом Vaadin является библиотека Java, рассчитанная на упрощение создания и обслуживания высококачественных веб-интерфейсов пользователей. Основная идея сервероцентричной модели программирования Vaadin состоит в том, что она позволяет забыть о сети и программировать интерфейсы пользователей точно так же, как программируются все настольные приложения Java, то есть с помощью обычных наборов средств, таких как AWT, Swing или SWT – только еще проще. Сервероцентричная модель программирования позволяет Vaadin взять на себя управление пользовательским интерфейсом в браузере и связь Ajax между браузером и сервером. Естественно, подход Vaadin позволяет не тратить силы на изучение и отладку технологий на стороне браузеров, таких как HTML или JavaScript.
Библиотека Vaadin четко отделяет представление пользовательского интерфейса от логики и позволяет разрабатывать их по отдельности. Подход Vaadin состоит в использовании тем, определяющих внешний вид приложений. Темы контролируют внешний вид интерфейсов пользователей посредством шаблонов CSS и (при желании) HTML. Vaadin предоставляет темы по умолчанию, но при необходимости можно создавать свои собственные. В серверной части Vaadin используется Google Web Toolkit (GWT) для визуализации интерфейса пользователя в браузере. GWT идеально подходит для реализации дополнительных компонентов интерфейса и логики взаимодействия в браузере, тогда как Vaadin обрабатывает логику самого приложения на сервере. Платформа Vaadin разработана с расчетом на расширяемость и позволяет легко использовать любые компоненты GWT от сторонних производителей в дополнение к компонентам, предлагаемым в Vaadin
Выводы
Описана общая структура веб-приложений. Указаны сложности разработки динамичного пользовательского интерфейса веб-приложения. Приведены описания технологий, позволяющих упростить создание этих интерфейсов, а также обмен данными между клиентской и серверной частями веб-приложения.
Список источников
1. Скотт Б., Нейл Т. Проектирование веб-интерфейсов. – Пер. с англ. – СПб.: Символ-Плюс, 2010. 352 с., ил.
2. Материалы с сайта https://vaadin.com/
3. Материалы с сайта http://ru.wikipedia.org/
4. Введение в веб-платформу Vaadin/ Интернет-ресурс. - Режим доступа: www/ URL: https://netbeans.org/kb/70/web/quickstart-webapps-vaadin_ru.html
5. Introduction to GWT – Tutorial/ Интернет-ресурс. - Режим доступа: www/ URL: http://developerlife.com/tutorials/?p=80
УДК 004.912