Знакомство с Apache Click

Быстрое создание Web-приложений на основе легковесной модели без использования сложных инфраструктур

Познакомьтесь с Apache Click – инфраструктурой Web-приложений на платформе Java EE (Enterprise Edition), которая позволяет создавать приложения, не используя принципы MVC (Model–View–Controller) и серверные страницы Java (JSP). В статье приводится ряд примеров, в частности, пример простой Web-страницы с формой ввода данных, которые затем отображаются на другой странице приложения.

Натан А. Гуд, инженер по программному обеспечению, начальник отдела

Натан Гуд (Nathan A. Good) живет в регионе Twin Cities (штат Миннесота, США). Н. Гуд профессионально занимается разработкой программного обеспечения, архитектурой программного обеспечения и системным администрированием. Когда Н. Гуд не занят написанием программного обеспечения, он с удовольствием занимается построением ПК и серверов, изучением и освоением новых технологий, а также убеждением своих коллег в необходимости перехода на программное обеспечение с открытым кодом. Натан Гуд лично и в соавторстве написал множество книг и статей, в том числе: Professional Red Hat Enterprise Linux 3, Regular Expression Recipes: A Problem-Solution Approach, Regular Expression Recipes for Windows Developers: A Problem-Solution Approach, PHP 5 Recipes: A Problem-Solution Approach. Самая новейшая из его работ: Foundations of PEAR: Rapid PHP Development.



02.02.2012

Для выполнения примеров к этой статье вам необходимо установить Eclipse и сервер Web-приложений. Мы будем использовать Tomcat 6.0, но подойдут и другие серверы, например, WebSphere® Application Server Community Edition, Jetty или более ранние версии Tomcat. Если сервер Web-приложений еще не установлен на вашем компьютере, то установите Apache Tomcat 6.0 или WebSphere Application Server Community Edition (ссылки для загрузки приведены в разделе Ресурсы).

Обзор Apache Click

Apache Click представляет собой инфраструктуру, позволяющую быстро разрабатывать Web-приложения. Она проектировалась с целью предоставления разработчикам возможности создавать приложения, не используя инфраструктуры, основанные на MVC или JSP, которые могут оказаться слишком тяжеловесным решением. Apache Click была выпущена под лицензией Apache (см. раздел Ресурсы).

В отличие от своих более сложных собратьев, Apache Click использует лишь HTML-шаблоны и стандартные Java-классы (или POJO-классы). Шаблоны обрабатываются инфраструктурой Apache Velocity (более подробную информацию о Velocity можно найти по ссылкам в разделе Ресурсы), которая позволяет максимально приблизить их к HTML, не вводя специальные теги. Синтаксис шаблонов Velocity не требует длительного изучения, позволяя разработчикам Web-приложения использовать опыт работы с HTML.

Классы POJO являются наследниками базовых классов, входящих в стандартную поставку Apache Click. В частности, она включает класс Page и классы компонентов, которые следует расширять для реализации обработчиков страниц. Эти компоненты предоставляют ряд функций для создания элементов управления HTML и обработки событий.

Кроме того, Apache Click включает в себя API модельного тестирования (mock testing), который облегчает написание юнит-тестов, непрерывную интеграцию и применение принципов разработки на основе тестирования ( test-driven development – TDD). Более подробную информацию о Mock API можно получить по ссылкам в разделе Ресурсы.


Компоненты и обработка событий в Apache Click

В Apache Click все компоненты, используемые на страницах, являются наследниками базового класса org.apache.click.Page. Он предоставляет методы для обработки событий, связанных с инициализацией (onInit()), отображением (onRender()) и проверкой безопасности страниц (onSecurityCheck()). Вы можете перегружать эти методы в дочерних классах, добавляя нужную функциональность. При этом каждый дочерний класс должен предоставлять базовый набор функций для обработки событий на страницах.

Apache Click позволяет создавать страницы, обладающие состоянием (stateful pages). Для этого следует реализовать интерфейс java.io.Serializable и вызывать метод setStateful() в конструкторе (листинг 1).

Листинг 1. Установка флага сохранения состояния в конструкторе
    public WelcomePage() {
        setStateful(true);
    }

В стандартный набор Apache Click входят несколько компонентов, представляющих собой элементы HTML. Эти компоненты позволяют программно создавать формы ввода данных, динамически добавляя на них элементы. Вы также можете манипулировать HTML-содержимым элементов непосредственно из кода на Java.

Метод setEventListener(), предоставляемый полями ввода (например, TextField или Select), позволяет указывать, какой метод вашего класса-наследника Page должен обрабатывать содержимое формы, если оно успешно пройдет валидацию.

Кнопки и ссылки также поддерживают обработку событий. В частности, вы можете создать новую кнопку типа submit на форме, связав ее с методом-обработчиком вашего класса-наследника Page. Пример приведен в листинге 2.

Листинг 2. Добавление кнопки для отправки формы и задание обработчика события onClick
Submit submitButton = new Submit("Submit Me", this, "onClick");

При нажатии на кнопку событие будет передано на обработку в метод onClick() вашего класса-наследника Page. Этот метод может содержать любой код обработки содержимого формы, например, для сохранения его в базе данных или перенаправления на другую страницу.

Если вас интересует более подробное описание API, обратитесь к разделу Ресурсы.


Шаблоны в Apache Click

По умолчанию Apache Click использует Apache Velocity в качестве системы для работы с шаблонами. Apache Click автоматически связывает шаблоны с классами-наследниками Page, используя ряд правил отображения (mapping rules). Например, страничный класс HelloPage будет автоматически связан с HTML-файлом hello.html в вашем Web-проекте, а класс HelloWorldPage – со страницей helloWorld.html или hello-world.html.

Если вас не устраивают стандартные правила отображения, то вы можете описать свои собственные в файле click.xml.

Кроме того, у вас есть возможность отказаться от Velocity и выбрать другую библиотеку для работы с шаблонами. В частности, Apache Click позволяет использовать JSP для отображения страниц. Эта возможность может оказаться полезной, если в вашем проекте уже есть ранее созданные JSP-страницы.


Загрузка Apache Click

Ссылка на сайт, с которого можно загрузить Apache Click, приведена в разделе Ресурсы. Загрузив zip-архив, распакуйте его в любом каталоге по вашему усмотрению.

Если вы хотите самостоятельно выполнить примеры, входящие в поставку Apache Click, разверните файл click-examples.war, находящийся в директории dist, на своем сервере Web-приложений. Примеры охватывают множество аспектов создания приложений, например, работу с таблицами, элементами управления и шаблонами.

После загрузки и распаковки архива можно переходить к созданию Web-приложения с использованием Apache Click.


Добавление Apache Click в проект

Вначале следует добавить JAR-файл Apache Click в classpath вашего Web-проекта. После этого можно разворачивать проект на сервере Web-приложений.

Для создания Web-приложения, использующего Apache Click, выполните следующие действия.

  1. Выберите пункт New>Other в меню Eclipse.
  2. Далее выберите пункт Select a Wizard, а затем – Web/Dynamic Web Project, после чего нажмите Next.
  3. Введите имя проекта в поле Project Name (например, MyFirstClick).
  4. Выберите сервер приложений, например Apache Tomcat 6.0, в поле Target Runtime. Более подробная информация о конфигурировании сред исполнения в Eclipse приведена по ссылке в разделе Ресурсы.
  5. Оставьте остальные поля заполненными по умолчанию и нажмите на кнопку Finish.

В результате должен быть создан пустой Web-проект в Eclipse (рисунок 1).

Рисунок 1. Пустой проект Web-приложения
Screenshot showing the directories in the empty web project.

Теперь вы можете подключить библиотеки Apache Click, выполнив следующие действия.

  1. Нажмите File>Import в верхнем меню.
  2. Выберите пункт General/File System из списка и нажмите Next.
  3. Перейдите в директорию, в которую вы распаковали архив Apache Click, и выберите каталог dist.
  4. Выберите файлы click-{номер версии}.jar and click-{номер версии}-extras.jar, как показано на рисунке 2.
    Рисунок 2. Импорт JAR-файлов
    Window showing click-2.0.1-incubating.jar and click-extras-2.0.1-incubating.jar selected.
  5. Убедитесь, что в поле Into folder указана директория WebContent/WEB-INF/lib, и нажмите Finish.

Теперь, когда все необходимые JAR-файлы скопированы в директорию WEB-INF, отредактируйте файл web.xml, добавив в него описание ClickServlet – единственного сервлета, который используется в Apache Click для диспетчеризации событий. После этого вы сможете выполнять все примеры к статье, не трогая web.xml. Содержимое этого файла показано в листинге 3.

Листинг 3. Файл web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" 
		xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
		http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>MyFirstClick</display-name>

    <servlet>
        <servlet-name>ClickServlet</servlet-name>
        <servlet-class>org.apache.click.ClickServlet</servlet-class>
        <load-on-startup>0</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>ClickServlet</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>welcome.html</welcome-file>
    </welcome-file-list>

</web-app>

Далее создайте пакет для будущих классов страниц, например, com.example.myfirstclick.pages, а затем файл click.xml, который следует поместить в директорию WEB-INF проекта. Скопируйте имя только что созданного пакета в click.xml, как показано в листинге 4.

Листинг 4. Файл click.xml
<?xml version="1.0" encoding="UTF-8"?>
<click-app>
    <pages package="com.example.myfirstclick.pages" />
</click-app>

Создание демонстрационного приложения

Создав проект будущего приложения, можно переходить к написанию классов, расширяющих стандартные классы Apache Click. Во-первых, следует создать наследника класса Page, который является базовым классом для всех компонентов, использующихся на страницах. Для этого добавьте новый класс в ранее созданный пакет, выбрав пункт меню File>New>Other, а затем – Java/Class. Убедитесь, что в поле Superclass указан класс org.apache.click.Page.

Далее добавьте содержимое листинга 5 в новый класс.

Листинг 5. Класс WelcomePage
package com.example.myfirstclick.pages;

import org.apache.click.Page;

public class WelcomePage extends Page {

    // Инициализация поля класса
    protected String theMessage = "Welcome!";

    public WelcomePage() {
        // Добавление значения поля в ассоциативный массив ("message" = "$message")
        addModel("message", theMessage);
    }
}

После создания класса WelcomePage нам понадобится страница HTML, выступающая в качестве шаблона для информации, отправляемой клиентскому браузеру. Поскольку по умолчанию используется библиотека Apache Velocity, HTML-шаблон выглядит очень похоже на обычную статическую страницу.

Создайте новую страницу HTML с именем welcome.html в директории WebContent проекта и добавьте в нее фрагмент кода, приведенный в листинге 6.

Листинг 6. Файл welcome.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MyFirstClick Welcome</title>
</head>
<body>
<p>$message</p>
</body>
</html>

Обратите внимание на переменную шаблона $message – Velocity автоматически подставит ее значение в процессе генерации кода страницы. Сервлет ClickServlet связывает класс WelcomePage с шаблоном welcome.html. Этот класс инициализирует свое поле theMessage, присваивая ему значение "Welcome", а затем, в конструкторе, передает имя и значение этого поля в слой модели, вызывая метод addModel() (таким образом, строка "message" указывает на поле "theMessage"). В итоге значение поля theMessage отображается в браузере.


Запуск демонстрационного приложения

Теперь пришло время собрать приложение в виде файла Web-архива и скопировать его в директорию webapps Tomcat. Проще всего это можно сделать, выполнив следующие действия.

  1. Выделите проект и выберите пункт меню File>Export.
  2. Выберите пункт Web/WAR и нажмите Next.
  3. Выберите директорию webapps в каталоге Tomcat в поле Destination.
  4. Установите флаг Overwrite existing files (заменять существующие файлы) и нажмите Finish (рисунок 3).
    Рисунок 3. Экспорт проекта в виде WAR-архива
    Window showing MyFirstClick as the Web project.

Экспортировав WAR-файл в директорию webapps Tomcat, вы можете обратиться к ранее созданной странице, перейдя в браузере по адресу http://localhost:8080/MyFirstClick/welcome.html (URL зависит от того, к какому порту привязан ваш сервер приложений, а также от имени, которое вы присвоили Web-приложению).

Поэкспериментируйте с этим примером, меняя значение поля message в классе WelcomePage и повторно разворачивая приложение на сервере. Если текст на странице меняется, то пора переходить к более сложным, динамическим примерам.


Создание формы ввода

Итак, у нас уже есть простая приветственная страница, и пора переходить к более сложным вещам. В настоящее время Web-приложения содержат не так много чисто статических страниц: большинство из них позволяют пользователю ввести некоторые данные, после чего выполняют определенную обработку этих данных. Типичным примером является Web-форма ввода данных, которые затем отображаются на другой Web-странице.

Для реализации этого сценария мы создадим класс InputPage, также являющийся наследником Page (листинг 7).

Листинг 7. Класс InputPage
package com.example.myfirstclick.pages;

import org.apache.click.Page;
import org.apache.click.control.Form;
import org.apache.click.control.Submit;
import org.apache.click.control.TextField;

public class InputPage extends Page {

    public Form form = new Form();

    private TextField nameField;

    public InputPage() {

        form.setLabelsPosition(Form.POSITION_TOP);

        nameField = new TextField("Enter your name");

        form.add(nameField);
        form.add(new Submit("Submit", this, "onSubmitClick"));

    }
    
    public boolean onSubmitClick()
    {
        SayHelloPage nextPage = (SayHelloPage)getContext().createPage("/sayHello.html");
        nextPage.setName(nameField.getValue());
        
        setForward(nextPage);
        
        return false;
    }

}

Конструктор нового класса добавляет текстовое поле ввода к объекту типа Form. Кроме того, класс также добавляет кнопку для отправки данных формы на сервер и связывает ее с обработчиком (методом onSubmitClick()). Метод-обработчик вызывается сразу после нажатия на кнопку, поэтому в нем можно выполнить все действия по подготовке следующей страницы. Пока мы не добавим следующую страницу (класс SayHelloPage), этот класс компилироваться не будет.

Далее создадим еще один файл HTML с именем input.html в директории WebContent проекта. На этой странице будет использоваться переменная $form, которая будет заменяться фрагментом HTML, сформированным на основе поля form в классе InputPage. В итоге файл input.html должен выглядеть, как показано в листинге 8.

Листинг 8. Файл input.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MyFirstClick Input Sample</title>
</head>
<body>
$form
</body>
</html>

Теперь можно добавить страницу для отображения введенных пользователем данных. Для этого создадим класс SayHelloPage, также наследующий org.apache.click.Page. Скопируйте в него содержимое листинга 9.

Листинг 9. Класс SayHelloPage
package com.example.myfirstclick.pages;

import org.apache.click.Page;

public class SayHelloPage extends Page {

    private String name;
    
    @Override
    public void onInit()
    {
        super.onInit();
        
        if (name != null)
        {
            addModel("name", name);
        }

    }
    
    public void setName(String name) {
        this.name = name;
    }    
    
}

Этот класс переопределяет метод onInit() базового класса Page для задания значений полей, которые затем будут отображаться на странице. Не забывайте проверять на null все значения, передаваемые в метод addModel(), поскольку иначе можно получить в ответ исключение типа IllegalArgumentException. В этом есть и положительный момент, поскольку приходится писать такой код, который будет корректно отображать страницу, даже если не указаны значения некоторых полей.

Доступ к полю name класса SayHelloPage осуществляется через открытый метод setName(). Этот метод вызывается внутри метода-обработчика onSubmitClick() класса InputPage после создания нового экземпляра страницы.

Ошибки с сообщениями вида "No path configured..."

Когда я впервые запускал это приложение, сервлет ClickServlet выдал сообщение "No path configured for Page class: com.example.myfirstclick.pages.SayHelloPage" (не найден путь для класса com.example.myfirstclick.pages.SayHelloPage). Проблема заключалась в том, что я передавал класс SayHelloPage.class в метод createPage(), забыв добавить описание страницы в файл click.xml. Если же переименовать страницу в /sayHello.html, то все работает без проблем. Это происходит потому, что по умолчанию Apache Click связывает классы с файлами, имеющими расширения .jsp и .htm, а я использовал .html.

Метод onSubmitClick() извлекает значение элемента nameField (nameField.getValue()) и сохраняет его в поле name. Затем он перенаправляет пользователя на нужную страницу при помощи метода setForward(). В результате поле name класса SayHelloPage содержит значение, введенное пользователем в текстовом поле на первой странице.

Далее добавим HTML-страницу c именем sayHello.html, на которой используется переменная шаблона $name. Содержимое этой страницы приведено в листинге 10.

Листинг 10. Страница sayHello.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Results</title>
</head>
<body>
<p>Hello, $name!</p>
</body>
</html>

Для запуска этого примера введите адрес http://localhost:8080/MyFirstClick/input.html в браузере, затем введите свое имя в текстовом поле и нажмите на кнопку Submit. В результате ваше имя должно отобразиться на следующей странице.


Заключение

Apache Click позволяет быстро создавать Web-приложения на основе легковесной модели без использования сложных инфраструктур. Благодаря простоте Apache Click вы можете использовать свои любимые приемы объектно-ориентированного программирования. В свою очередь, использующаяся по умолчанию система заполнения шаблонов (Apache Velocity) позволяет создавать страницы в соответствии со спецификацией HTML без применения нестандартных тегов.

Наконец, компонентная модель, поддерживающая обработку событий, применяемая в Apache Click, предоставляет возможности легкого создания собственных компонентов HTML и обработки генерируемых ими событий.

Ресурсы

Научиться

Получить продукты и технологии

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Open source, Технология Java
ArticleID=790972
ArticleTitle=Знакомство с Apache Click
publish-date=02022012