Обманите лица JavaServer, загрузите данные вашего компонента со стороны клиента

Обычно мы используем JavaServer Faces (JSF) для доступа к данным и логике на стороне сервера, но может случиться так, что нам действительно придется извлекать данные на стороне клиента, а затем вводить их в наши компоненты, управляемые сервером.

Например, давайте представим, что ваш клиент абсолютно хочет отобразить случайную симпатичную картинку, предоставленную третьей стороной Dog API , который мы собираемся использовать в этой статье, в приложении, но сервер, на котором запущено приложение Java, определенно не имеет доступа в Интернет, несмотря на попытки убедить как компанию, так и администратора сервера, что он не может быть разработан без доступа в Интернет.

В таком особом случае и при классическом швейцарском способе решения проблемы вам, вероятно, придется найти консенсус и применить трюк (или взломать, зависит от того, видите ли вы стакан наполовину полным или наполовину пустым), который мы собираемся разработать в этом сообщении в блоге.

Прежде Чем Мы Начнем

Чтобы следовать этому решению, вам понадобится проект Java, в котором реализованы как JSF, так и Primefaces . Если у вас их нет или вы хотите создать пустой, вы можете поступить так, как я описал в своей предыдущей статье ” Создайте проект Primefaces JSF с Maven и Widfly “.

приступая к работе

В первый раз, когда я столкнулся с таким тупиком, как на фото выше, я не знал, с чего начать. После небольшого исследования я, наконец, обнаружил краеугольный камень решения, соответственно Primefaces | /> , который обеспечивает простой способ выполнения вспомогательных методов компонента с помощью Javascript./> , который обеспечивает простой способ выполнения вспомогательных методов компонента с помощью Javascript. Используя его, мы можем отправлять данные из Javascript в компоненты, декодировать эту информацию и в конечном итоге “конвертировать” их в значения компонента.

Рабочий процесс

Рабочий процесс решения и шаги, которые мы собираемся выполнить, следующие:

1. Извлекать данные из стороннего API с помощью Javascript
2. Передайте результаты из Javascript в Java-компонент, используя команда/> команда/>
3. Проанализируйте информацию до фактических значений объекта компонента
4. Отображение значений компонента на стороне клиента
5. В этом страница с данными

Давайте начнем 🚀

1. Извлекать данные из стороннего API с помощью Javascript

Чтобы начать нашу реализацию, мы сначала создаем новую страницу src/main/webapp/dogs.xhtml , которая содержит кнопку для ручного запуска нашего процесса и удаленную команду. Оба компонента должны содержаться в форме.

Кроме того, мы также добавляем фактическую реализацию извлечения данных API третьей стороны. Для этой цели мы используем Javascript Fetch API .

2. Передайте результаты в компонент

Возможно, вы заметили, что приведенная выше /> классически не вызывает действие компонента или прослушиватель, а скорее немедленно вызывает функцию Javascript randomDog(); ./> классически не вызывает действие компонента или прослушиватель, а скорее немедленно вызывает функцию Javascript randomDog(); . Это означает, что, прежде всего, мы получаем данные со стороны клиента. Поэтому теперь мы должны передать результаты бобу. Для этой цели мы создаем новый компонент src/main/java/DogsBean.java

import java.io.Serializable;
import javax.faces.view.ViewScoped;
import javax.inject.Named;

@Named("dogs")
@ViewScoped
public class DogsBean implements Serializable {
   public void load() {
      // TODO load the data to object values
   }
}

Наш компонент готов, теперь мы можем улучшить наш сервлет, соответственно, мы связываем с компонентом load() метод.

Мы завершаем цепочку , вызывая удаленную команду с результатом Javascript fetch 🤓 . Для этой цели мы используем функцию, созданную удаленной командой Primefaces, обозначенную именем loadResult мы предоставили и передаем информацию в виде нового массива JSON, содержащего идентификатор, имя и значение , результат выборки данных в виде текста.

Этот вызов отправит новый запрос на сервер. Поэтому мы могли бы получить доступ к параметрам запроса в нашем компоненте, чтобы узнать интересующие нас данные. Они идентифицируются с помощью идентификатора, имени мы указали выше соответственно "собака" .

public void load() {
   final String jsonData = FacesContext.getCurrentInstance()
                           .getExternalContext()
                           .getRequestParameterMap()
                           .get("dog");
}

3. Проанализируйте информацию, чтобы быть значениями объекта

Данные, передаваемые API Dog, предоставляются в виде данных JSON, например:

{
    "message": "https://images.dog.ceo/breeds/coonhound/n02089078_2794.jpg",
    "status": "success"
}

Поэтому, чтобы разобрать их на значения объектов Java, мы создаем новый соответствующий объект передачи данных (DTO).

import java.io.Serializable;

public class DogDTO implements Serializable {

   private String message;
   private String status;

   public String getMessage() {
      return message;
   }
   public void setMessage(String message) {
      this.message = message;
   }
   public String getStatus() {
      return status;
   }
   public void setStatus(String status) {
      this.status = status;
   }
}

Имея как данные, так и объект Java, мы не смогли десериализовать информацию с помощью библиотеки Google gson , которую мы добавляем в качестве новой зависимости в наш pom.xml .

  com.google.code.gson
  gson
  2.8.6

Мы объявляем объявить вышеизложенное в качестве члена класса компонента и эффективно обрабатываем синтаксический анализ данных в нашем методе load() .

import java.io.Serializable;
import javax.faces.context.FacesContext;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

@Named("dogs")
@ViewScoped
public class DogsBean implements Serializable {

   private DogDTO dog;

   public void load() {
      final String jsonData = FacesContext.getCurrentInstance()
                           .getExternalContext()
                           .getRequestParameterMap()
                           .get("dog");
      final Gson gson = new GsonBuilder().create();
      dog = gson.fromJson(jsonData, DogDTO.class);
   }

   public DogDTO getDog() {
      return dog;
   }
}

4. Отображение значений компонента на стороне клиента

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

Вот и все, наша реализация готова. Мы могли бы запустить наш сервер приложений в терминале, чтобы опробовать решение.

mvn clean install && mvn wildfly:run

Если все пойдет по плану, мы могли бы открыть наше приложение в нашем любимом браузере по адресу http://localhost:8080/jsf-dogs/dogs.xhtml и не должны иметь возможности приводить случайную собаку каждый раз, когда мы объявляем о своем действии 😊

Так много собачьего 😍

5. В этом страница с данными

Этот шаг не является обязательным но я думаю, что интересно отметить, что также возможно загружать данные со стороны клиента при доступе к странице. По сути, со стороны сервера, в нашем компоненте, мы выполняем функцию Javascript на стороне клиента, как только все загружено из жизненного цикла PostContruct .

@PostConstruct
public void init() {
   PrimeFaces.current().executeScript("randomDog();");
}

Вот и все, мы сделали это! Мы могли бы перезапустить наш сервер и протестировать нашу окончательную реализацию 🎉

Начальная собачка и так много другой собачки 😍

Вишенка на торте 🍒 🎂

Если вы хотите избежать хлопот по созданию собственного проекта и копированию/вставке приведенного выше кода, я опубликовал исходный код и проект онлайн на GitHub , будьте моим гостем и, как всегда, я был бы очень рад услышать ваши отзывы 😃

В бесконечность и дальше 🚀

Дэвид

Изображение на обложке от Шон Панг на Расплескать

Оригинал: “https://dev.to/daviddalbusco/trick-javaserver-faces-load-your-bean-data-from-the-client-side-5al9”