Технология оформления Web-приложений
Щелкните правой кнопкой мыши поле name в редакторе исходного кода и выберите «Refactor» > «Encapsulate Fields». Откроется диалоговое окно «Encapsulate Fields», в котором имеется поле name. Обратите внимание, что для параметра «Visibility» (Видимость) полей по умолчанию установлено значение «private» (закрытый), а для средств доступа — значение «public» (общедоступный); в результате модификатор… Читать ещё >
Технология оформления Web-приложений (реферат, курсовая, диплом, контрольная)
Министерство Здравоохранения республики Казахстан Южно-Казахстанская государственная фармацевтическая академия.
Форма выполнения: реферат Дисциплина: информатика На тему: «Технология оформления Web-приложений»
Подготовила: Абдувалиева.М.А Группа:103(ТФП) Принял: Халметов.З.С Веб-приложение — клиент-серверное приложение, в котором клиентом выступает браузер, а сервером — веб-сервер. Логика веб-приложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен информацией происходит по сети.
Технические особенности Существенное преимущество построения Web-приложений для поддержки стандартных функций браузера заключается в том, что функции должны выполняться независимо от операционной системы данного клиента. Вместо того чтобы писать различные версии для Microsoft Windows, Mac OS X, GNU/Linux и других операционных систем, приложение создается один раз для произвольно выбранной платформы и на ней разворачивается. Однако различная реализация HTML, CSS, DOM и других спецификаций в браузерах может вызвать проблемы при разработке веб-приложений и последующей поддержке. Кроме того, возможность пользователя настраивать многие параметры браузера (например, размер шрифта, цвета, отключение поддержки сценариев) может препятствовать корректной работе приложения.
Другой (менее универсальный) подход заключается в использовании Adobe Flash, Silverlight или Java-апплетов для полной или частичной реализации пользовательского интерфейса. Поскольку большинство браузеров поддерживает эти технологии (как правило, с помощью плагинов), Flashили Java-приложения могут выполняться с легкостью. Так как они предоставляют программисту больший контроль над интерфейсом, они способны обходить многие несовместимости в конфигурациях браузеров, хотя несовместимость между Java или Flash реализациями на стороне клиента может приводить к различным осложнениям.
В связи с архитектурным сходством с традиционными клиент-серверными приложениями, в некотором роде «толстыми» клиентами, существуют споры относительно корректности отнесения подобных систем к веб-приложениям; альтернативный термин «Богатое Интернет приложение»
Устройство веб-приложений
Веб-приложение состоит из клиентской и серверной частей, тем самым реализуя технологию «клиент-сервер».
Клиентская часть реализует пользовательский интерфейс, формирует запросы к серверу и обрабатывает ответы от него.
Серверная часть получает запрос от клиента, выполняет вычисления, после этого формирует веб-страницу и отправляет её клиенту по сети с использованием протокола HTTP.
Само веб-приложение может выступать в качестве клиента других служб, например, базы данных или другого веб-приложения, расположенного на другом сервере. Ярким примером веб-приложения является система управления содержимым статей Википедии: множество её участников могут принимать участие в создании сетевой энциклопедии, используя для этого браузеры своих операционных систем (будь то Microsoft Windows, GNU/Linux или любая другая операционная система) и не загружая дополнительных исполняемых модулей для работы с базой данных статей.
В настоящее время набирает популярность новый подход к разработке веб-приложений, называемый Ajax. При использовании Ajax страницы веб-приложения не перезагружаются целиком, а лишь догружают необходимые данные с сервера, что делает их более интерактивными и производительными.
Для создания веб-приложений на стороне сервера используются разнообразные технологии и любые языки программирования, способные осуществлять вывод в стандартную консоль.
Название | Лицензия | Веб-сервер | |
ASP | проприетарная | специализированный | |
ASP.NET | проприетарная | специализированный | |
C/C++ | свободная | практически любой | |
Java | свободная | множество, в том числе свободных | |
Perl | свободная | практически любой | |
PHP | свободная | практически любой | |
Python | свободная | практически любой | |
Ruby | свободная | практически любой | |
Nodejs | MIT License | собственный | |
web приложение браузер файл На стороне клиента используется:
· Для реализации GUI
· HTML, XHTML
· CSS
· Для формирования и обработки запросов, создания интерактивного и независимого от браузера интерфейса:
· ActiveX
· Adobe Flash, Adobe Flex
· Java
· JavaScript
· Silverlight
Настройка проекта веб-приложения
1. Выберите в главном меню «Файл» > «Новый проект» (CTRL+SHIFT+N). В области «Категории» выберите «Java Web». В области «Projects» (Проекты) выберите «Web Application» (Веб-приложение) и нажмите кнопку «Next» (Далее).
2. В экране 2 введите HelloWeb в текстовом поле «Project Name» (Имя проекта).
3. В поле «Project Location» укажите любой каталог на компьютере. В данном учебном курсе этот каталог будет называться $PROJECTHOME.
4. Установите флажок «Использовать отдельную папку для хранения библиотек» и укажите местоположение папки библиотек (необязательно). Для получения дополнительных сведений об этой возможности ознакомьтесь с разделом Совместное использование библиотек проекта.
5. Нажмите кнопку «Далее». Откроется панель сервера и параметров настройки. Выберите версию Java EE, которую требуется использовать для приложения.
6. Выберите сервер, на котором требуется выполнить развертывание приложения. В списке представлены только те серверы, которые зарегистрированы в среде IDE. Обратите внимание, что для поля «Context Path» (например, на сервере) устанавливается значение /HelloWeb в основе которого находится имя проекта, указанное при выполнении предыдущего действия.
7. Нажмите кнопку «Далее». На экране «Frameworks» нажмите кнопку «Finish» для создания проекта.
В среде IDE будет создана папка проекта $PROJECTHOME/HelloWeb. Папка проекта содержит все исходные файлы и метаданные проекта, например сценарий сборки Ant. После этого проект «HelloWeb» откроется в среде IDE. В главном окне редактора исходного кода будет представлена страница приветствия index.jsp. Структуру файлов проекта можно просмотреть в окне «Files» (Ctrl+2), а его логическую структуру — в окне «Projects» (Ctrl+1).
Создание и изменение исходных файлов веб-приложения
Наиболее важной функцией среды IDE является создание и изменение исходных файлов. Именно эти операции при разработке чаще всего отнимают наибольшее количество времени. Среда IDE предоставляет широкий спектр средств, подходящих под личный стиль любого разработчика — как сторонника кодирования вручную, так и разработчика, предпочитающего предоставить среде IDE создание крупных блоков кода.
Создание пакета Java и исходного файла Java
1. В окне 'Проекты' разверните узел 'Исходные пакеты'. Обратите внимание, что узел «Source Packages» содержит только пустой узел пакета по умолчанию.
2. Щелкните узел «Source Packages» правой кнопкой мыши и выберите «New» > «Java Class». Введите NameHandler в текстовом поле «Class Name» иorg.mypackage.hello в поле списка «Package». Нажмите кнопку «Завершить». Новый файл NameHandler. java будет открыт в редакторе исходного кода.
3. Объявите в редакторе исходного кода переменную String, введя непосредственно под объявлением класса следующую строку:
String name;
4. Добавьте следующий конструктор к классу:
public NameHandler () { }
5. Добавьте следующую строку в конструктор NameHandler ():
name = null;
Создание методов получения и установки
1. Щелкните правой кнопкой мыши поле name в редакторе исходного кода и выберите «Refactor» > «Encapsulate Fields». Откроется диалоговое окно «Encapsulate Fields», в котором имеется поле name. Обратите внимание, что для параметра «Visibility» (Видимость) полей по умолчанию установлено значение «private» (закрытый), а для средств доступа — значение «public» (общедоступный); в результате модификатор доступа для объявления переменной класса будет определен как «private», в то время как методы получения и установки будут созданы с модификаторами public и private, соответственно.
2. Нажмите кнопку «Refactor» (Реорганизация). Для поля name создаются методы получения и установки. Модификатор для переменной класса определяется как private, в то время как методы получения и установки создаются с модификаторами «public». Класс Java должен теперь выглядеть следующим образом.
package org.mypackage.hello;
/**
*
* @author nbuser
*/
public class NameHandler {
private String name;
/** Creates a new instance of NameHandler */
public NameHandler () {
name = null;
}
public String getName () {
return name;
}
public void setName (String name) {
this.name = name;
}
}
Изменение файла JavaServer Pages по умолчанию
1. Активируйте файл index. jsp, перейдя на вкладку, отображаемую в верхней части редактора исходного кода.
2. В палитре (Ctrl+Shift+8), расположенной справа от редактора исходного кода, разверните узел «HTML Forms» и перетащите элемент «Form» в позицию, находящуюся в редакторе исходного кода непосредственно после тегов
.
Появится диалоговое окно «Insert Form» .
3. Установите следующие значения:
· Action: response. jsp;
· Method: GET;
· Name: Name Input Form.
Нажмите кнопку «ОК». К файлу index. jsp добавляется форма HTML.
4. Перетащите элемент «Text Input» в позицию непосредственно перед тегом, затем установите следующие значения:
· Name: name;
· Type: text.
Нажмите кнопку «ОК». Между тегами
. Установите следующие значения:· Label: OK;
· Type: submit.
Нажмите кнопку «ОК». Между тегами
21.
Создание файлов JavaServer Pages
1. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта HelloWeb и выберите 'Создать' > JSP. Откроется мастер «New JSP File». Назовите файлresponse и нажмите кнопку «Finish». Обратите внимание на то, что узел файла response. jsp отображается в окне «Projects» под файлом index. jsp, а новый файл открывается в редакторе исходного кода.
2. На палитре справа от редактора исходного кода разверните узел «JSP» и поместите элемент «Use Bean» непосредственно под тегом
в редакторе исходного кода. Откроется диалоговое окно «Insert Use Bean». Укажите значения, как показано на следующем рисунке.· ID: mybean;
· Class: org.mypackage.hello.NameHandler;
· Scope: session.
Нажмите кнопку «ОК». Обратите внимание на то, что под тегом
добавляется тег.3. Перетащите элемент «Set Bean Property» из палитры и поместите его непосредственно перед тегом
. Нажмите кнопку «OК». В появившемся теге удалите пустой атрибут value и измените его следующим образом: Eсли средой IDE был создан атрибут value = «», удалите его. В противном случае значение name, введенное в форме index. jsp, будет перезаписано.
Как указано в документации, значение свойства можно установить различными способами. В этом случае вводимые пользователем данные из index. jsp становятся парой имя/значение, передаваемой в объект request. При установке свойства с помощью тега можно указать значение в соответствии с именем свойства, содержащегося в объекте request. Поэтому при определенииproperty в качестве name можно получить значение, указанное пользователем при вводе.
4. Измените текст между тегами
следующим образом:
Hello, !
5. Перетащите элемент «Get Bean Property» из палитры в позицию непосредственно после запятой между тегами
. Укажите следующие значения в диалоговом окне «Insert Get Bean Property» :
· Bean Name: mybean;
· Property Name: name.
Нажмите кнопку «ОК». Обратите внимание на то, что между тегами
теперь добавлен тег .
Обратите внимание: имена Property нужно вводить с учетом регистра. Свойство «name» должно быть в одном регистре как в response. jsp, так и в форме ввода index.jsp.
6. Щелкните правой кнопкой мыши область редактора исходного кода и выберите «Format» (Alt+Shift+F) для переформатирования кода. Теперь теги
файла response. jsp должны выглядеть следующим образом:7.
8.
9.
10.
Hello, !
Выполнение проекта веб-приложения
Для сборки и выполнения веб-приложений в среде IDE используется сценарий сборки Ant. IDE создаст сценарий сборки на основе параметров, указанных в мастере создания новых проектов, а также проектов в диалоговом окне 'Свойства проектов' (в окне 'Проекты' выберите 'Свойства' в меню правой кнопки мыши узла проекта).
1. В окне 'Проекты' щелкните правой кнопкой мыши узел проекта HelloWeb и выберите 'Выполнить' (F6). При выполнении веб-приложения среда IDE выполнит следующие действия:
· Сборка и компиляция кода приложения (см. примечание ниже). Это действие можно выполнить отдельно от прочих, выбрав Build («Сборка») или Clean and Build («Очистка и сборка») из контекстного меню узла проекта.
· Запуск сервера.
· Развертывание приложения на сервере. Это действие можно выполнить отдельно от прочих, выбрав Deploy («Развертывание») из контекстного меню узла проекта.
· Отображение приложения в окне браузера.
Примечание. По умолчанию, проект создается с включенной функцией 'Компилировать при сохранении', так что не нужно сначала компилировать код. Дополнительные сведения о функции «Компиляция при сохранении» приведены в соответствующем разделе руководства Создание, импорт и настройка проектов Java.
2. Среда IDE откроет окно вывода, показывающее ход выполнения приложения. Взгляните на вкладку HelloWeb в окне вывода. В этой вкладке можно проследить все действия, выполняемые средой IDE. При наличии проблемы IDE отображает информацию об ошибке в этом окне.
3. Среда IDE открывает окно вывода, показывая состояние сервера. Взгляните на вкладку в окне вывода с именем сервера.
Обратите внимание. Если сервер GlassFish не запускается, запустите его вручную и после этого выполните проект снова. Сервер можно запустить вручную из окна 'Службы', щелкнув правой кнопкой мыши узел сервера и выбрав 'Пуск'.
Окно вывода сервера предоставляет массу информации о проблемах при выполнении веб-приложений. Также могут быть полезны журналы сервера. Они расположены в каталоге соответствующего домена сервера. Также можно сделать видимым журнал среды IDЕ, выбрав View («Представление») > IDE log («Журнал IDE») и просмотреть его.
4. Страница index. jsp откроется в браузере по умолчанию. Обратите внимание, что окно браузера может открыться до отображения выходных данных сервера средой IDE.
5. Введите имя в текстовом поле и нажмите кнопку «OК». На экране появится страница response. jsp с простым приветствием.