Статьи

Интеграция Ext JS Forms со Struts2

Сентябрь 15, 2018

В этой статье описываются шаги по интеграции формы, созданной с помощью Ext JS, с внутренним сервером Struts2
.

Немного о Ext JS

Ext JS — это кросс-браузерная библиотека JavaScript для создания многофункциональных интернет-приложений. Ext JS доступен как по коммерческой, так и по открытой лицензии.

1.  Ext JS предоставляет множество встроенных компонентов графического интерфейса. Эти компоненты пригодятся при разработке нового приложения с нуля. Всегда есть компонент, доступный почти для всех видов RIA GUI.

2.  Ext JS следует модели проектирования компонентов. Можно легко расширить любой из основных компонентов для удовлетворения их конкретных требований.

3.  Будь то IE или последний браузер Chrome, приложения Ext JS выглядят и ведут себя одинаково независимо от того, где они работают. Ext JS использует функции HTML5 в современных браузерах и использует альтернативы в старых браузерах.

4.  Ext JS использует AJAX для взаимодействия с веб-сервером. Это увеличивает опыт RIA. 

Интеграция Ext JS со Struts 2

Ext JS формы отправляются с использованием AJAX по умолчанию, и он ожидает ответа JSON / XML от сервера. Ответ должен иметь свойство success, которое определяет, возвращаются ли ошибки с сервера или нет. В случае отклика на ошибку, свойство «error» отклика используется для установки сообщений об ошибке. Мы обсудим это подробнее в следующем разделе.

Struts 2 может обрабатывать запрос Ext JS, как и любой другой запрос, и для этого не требуется никаких специальных мер. Но для генерации ответа json нам нужно использовать плагин json. Процедура использования этого плагина json описана в следующем разделе.

Теперь у нас есть общее представление об интеграции Ext JS и Struts 2, давайте создадим пример, чтобы увидеть, как он работает.

Ext JS Form

Сначала создайте простую форму в Ext JS. Для простоты мы создали форму с 3 полями и кнопкой отправки. Метки поля формы: имя, фамилия и возраст.

Ext JS использует имена полей формы в качестве имен параметров при отправке запроса на сервер. Следовательно, нам нужно предоставить имена для каждого поля, значение которого мы хотим отправить на сервер.

{
    xtype: 'textfield',
    padding: 10,
    width: 303,
    name: 'firstName',
    fieldLabel: 'First Name'
},
{
    xtype: 'textfield',
    padding: 10,
    width: 302,
    name: 'lastName',
    fieldLabel: 'Last Name'
},
{
    xtype: 'numberfield',
    padding: 10,
    width: 186,
    name: 'age',
    fieldLabel: 'Age'
}

Чтобы включить действие Struts для правильного чтения данных формы, нам нужно убедиться, что у нас есть атрибуты в классе действия с такими же именами, как имена, упомянутые выше в форме Ext JS. Мы также должны определить атрибуты действия с правильными типами данных, чтобы разрешить автоматическое преобразование по строкам. Важно помнить, что у нас должен быть публичный метод get / set для каждого атрибута, определенного для захвата отправленных данных поля формы. Пожалуйста, проверьте код действия формы в разделе ниже для более подробной информации об этом.

Отправить кнопку обработчик

При нажатии кнопки «Отправить» будет вызвана функция JS, связанная с обработчиком кнопки. Эта функция устанавливает URL-адрес формы и вызывает метод submit () формы, определенной в Ext JS. Простейшая форма обработчика кнопок может быть такой, как показано ниже:

var form = button.up('form').getForm();
form.url='registerUser';
//form.submit();

form.submit({
    success: function(form, action) {
        Ext.Msg.alert('Success', 'The form is submitted successfully.');
    },
    
    failure: function(form, action) {
        Ext.Msg.alert('Failed', 'There is some error returned from the server.');
    }
});

Существует два способа отправки формы с использованием формы Ext JS. Если мы не хотим обрабатывать ответ от сервера после отправки формы, мы можем просто вызвать метод submit () без каких-либо аргументов. Этот способ прокомментирован в приведенном выше примере кода.

Ext JS предоставляет способ обработки ответа после отправки. Метод submit () может иметь два настроенных метода обратного вызова — успех и сбой.

Успех вызывается, когда для свойства ответа установлено значение true.

Ошибка вызывается, если свойство успеха отсутствует в ответе или для него установлено значение false.

Struts 2 Action

Теперь мы изучили клиентскую часть кода. Теперь давайте сосредоточимся на серверной части кода для обработки отправленных данных формы. Приведенный ниже код предоставляет подробную информацию о нашем классе действий.

public class Registration {

	private boolean success;
	private String firstName;
	private String lastName;
	private int age;
	
	public String registerUser() {
		
		System.out.println("Got following user details: " );
		System.out.println("First Name: " + getFirstName());
		System.out.println("Last Name: " + getLastName());
		System.out.println("Age: " + getAge());
		success = true;
		return Action.SUCCESS;
	}

	public String getFirstName() {
		return firstName;
	}
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}
	public String getLastName() {
		return lastName;
	}
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}
	
}

Для простоты мы просто печатаем представленные данные на консоль. Мы сопоставили метод registerUser этого класса с нашим действием отправки формы. Мы увидим это в файле struts.xml позже.

 Если вы наблюдаете, этот класс действий похож на любой другой класс действий Struts 2. Прелесть JSON-плагина Struts заключается в том, что нам не нужно вносить какие-либо изменения в класс действия, чтобы вернуть ответ JSON. Эта часть обрабатывается путем настройки типа результата для json в struts.xml.

Настройка json-плагина с помощью Struts

Сначала вам нужно скачать плагин JSON, если у вас его нет в загрузке.

Для настройки плагина json выполните следующие действия:

  1. Сохраните jar-файл плагина json в каталоге WEB-INF / lib веб-проекта.
  2. В Struts.xml создайте новый пакет, который расширяет json-default. Если вы хотите использовать существующий пакет, добавьте json-default как запятую, разделенную в свойстве extends существующего пакета.
  3. Определите действия, которые должны возвращать ответ json внутри определенного выше пакета.
  4. Поместите тип результата как json для действий, возвращающих ответ json.

После выполнения вышеуказанных шагов файл struts.xml будет выглядеть следующим образом

<struts>
<package name="default" extends="json-default" namespace="/">					<action name="registerUser" class="sampleapp.action.Registration" method="registerUser">
			<result type="json"/>
		</action>
	</package>
</struts>

Теперь мы готовы запустить и протестировать наш пример интеграции. Когда мы запустим пример, появится форма, показанная на первом снимке экрана. Добавьте определенные данные и нажмите кнопку «Отправить», вы увидите введенные данные на консоли сервера.

Обработка ошибок на стороне сервера

Проверка на стороне сервера может быть выполнена аналогично тому, как мы это делаем для любого другого приложения Struts 2. Чтобы отобразить ошибку проверки в поле формы, добавьте сообщение об ошибке в карту ошибок Struts. Убедитесь, что ошибка добавлена ​​с использованием имени поля, которое используется на панели форм Ext JS. Установите для свойства ‘success’ в действии значение false. Это заставляет Ext JS интерпретировать ответ как сбой. Вот и все, больше ничего не нужно связывать ошибку с соответствующими полями формы. Когда вышеуказанный json возвращается в форму Ext JS, он отображает сообщения об ошибках в полях.

30
Share: