PrimeFaces - Открыть окно по выпадающему выбору

В этом учебном пособии используются серверы maven, java8, glasifish.

  • Вариант использования: ** Если вы хотите открыть новую страницу, нажав на кнопку, ссылку или что-то в этом роде. Даже если URL-адрес страницы адресован непосредственно бином, мы можем это сделать. Но если URL-адрес страницы является динамическим, это не так просто, потому что к тому моменту, когда вы нажмете кнопку, страница уже будет отображена, и вы получите старое значение. Итак, в этом случае я собираюсь реализовать этот вариант использования.

Есть несколько шагов для реализации этого,

, Создать проект Primefaces maven, скачать Glassfish и добавить его в

серверная часть затмения.

, Разверните приложение и протестируйте.

1. Структура проекта

Изображение://wp-content/uploads/2017/09/primafaces-open-windows-project-stucture.png[изображение]

2. Зависимости проекта

Я только добавил Primefaces, JSF библиотеки.

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
    http://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
      <groupId>simple.primefaces.app</groupId>
      <artifactId>simple.primefaces.app</artifactId>
      <version>2017.09.01</version>
      <packaging>war</packaging>
      <name>primefaces-app</name>
      <dependencies>
           <!-- https://mvnrepository.com/artifact/org.primefaces/primefaces -->
           <dependency>
                <groupId>org.primefaces</groupId>
                <artifactId>primefaces</artifactId>
                <version>5.0</version>
           </dependency>
           <!-- https://mvnrepository.com/artifact/javax.faces/jsf-api -->
           <dependency>
                <groupId>javax.faces</groupId>
                <artifactId>jsf-api</artifactId>
                <version>2.0</version>
                <scope>provided</scope>
           </dependency>
           <!-- https://mvnrepository.com/artifact/org.omnifaces/omnifaces -->
           <dependency>
                <groupId>org.omnifaces</groupId>
                <artifactId>omnifaces</artifactId>
                <version>2.6.4</version>
           </dependency>
      </dependencies>
      <build>
           <sourceDirectory>src</sourceDirectory>
           <plugins>
                <plugin>
                     <artifactId>maven-compiler-plugin</artifactId>
                     <version>3.5.1</version>
                     <configuration>
                          <source>1.8</source>
                          <target>1.8</target>
                     </configuration>
                </plugin>
                <plugin>
                     <artifactId>maven-war-plugin</artifactId>
                     <version>3.0.0</version>
                     <configuration>
                          <warSourceDirectory>WebContent</warSourceDirectory>
                     </configuration>
                </plugin>
           </plugins>
      </build>
 </project>

3. Код

Созданы Bean, Converter и Enum и index.xhtml (facelet)

MyBean.java

package simple.primefaces.app;
import java.util.Arrays;
import java.util.List;
import javax.faces.bean.ManagedBean;

@ManagedBean
public class MyBean {
     private static final String GOOGLE = "https://www.google.co.in/";
     private static final String YAHOO = "https://in.yahoo.com/";
     private WebOptions selectedOption;
     private String webOptionUrl;
     public String getWebOptionUrl() {
           return webOptionUrl;
     }
     public void setWebOptionUrl(String webOptionUrl) {
          this.webOptionUrl = webOptionUrl;
     }
     public void prepareUrl(){
          if(WebOptions.GOOGLE.equals(selectedOption)){
               webOptionUrl = GOOGLE;
          } else if(WebOptions.YAHOO.equals(selectedOption)) {
               webOptionUrl = YAHOO;
          } else {
               webOptionUrl = "";
          }
     }
     public List<WebOptions> getAllWebOptions() {
          return Arrays.asList(WebOptions.values());
     }
     public WebOptions getSelectedOption() {
          return selectedOption;
     }
     public void setSelectedOption(WebOptions selectedOption) {
          this.selectedOption = selectedOption;
     }
}

WebOptionConverter.java

package simple.primefaces.app;
import java.io.Serializable;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;
import org.omnifaces.cdi.ViewScoped;

@FacesConverter(value = "simple.primefaces.app.WebOptionConverter", forClass = WebOptionConverter.class)
@ViewScoped
public class WebOptionConverter implements Converter, Serializable {
    /** **  the serialVersionUID      ** ** /
     private static final long serialVersionUID = -218581226063576481L;
     public WebOptionConverter(){
          super();
     }
     @Override
     public Object getAsObject(FacesContext context, UIComponent component, String value) {
          return WebOptions.getOptionByOptoin(value);
     }
     @Override
     public String getAsString(FacesContext context, UIComponent component, Object value) {
          if(value instanceof WebOptions){
               final WebOptions objectStatus = (WebOptions) value;
               return objectStatus.getWebOption();
          }
          return "";
     }
}

WebOptions.java

package simple.primefaces.app;

public enum WebOptions {
     GOOGLE("google"),
     YAHOO("yahoo");
     private String webOption;
     WebOptions(String webOption){
          this.webOption = webOption;
     }
     public static WebOptions getOptionByOptoin(String value){
          if(WebOptions.GOOGLE.webOption.equals(value)){
               return WebOptions.GOOGLE;
          }
          return WebOptions.YAHOO;
     }
     public String getWebOption() {
          return webOption;
     }
}

index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:p="http://primefaces.org/ui">
<h:head>
     <script type="text/javascript">
    function openUrl(){
       var webOptionUrl = document.getElementById("websiteForm:webOptionHidden").value;
       if(webOptionUrl.length === 0){
            var message = 'Please select website';
            alert(message);
       } else {
            window.open(webOptionUrl, '', 'width=1024, height=720, status=no, scrollbars=1 menubar=no, toolbar=no');
       }
  }
  </script>
</h:head>
<h:body>
     <h:form id="websiteForm">
          <p:panelGrid id="selectOption" style="margin-left:500px;">
               <p:row>
                    <p:column>
                         <p:outputLabel value="Please select website: "></p:outputLabel>
                         <p:selectOneMenu id="option" value="#{myBean.selectedOption}">
                              <f:selectItem itemLabel="--" itemValue=""/>
                              <f:selectItems value="#{myBean.allWebOptions}" var="o" itemLabel="#{o.webOption}" itemValue="#{o}"/>
                                   <p:ajax update="@form" process="@this" listener="#{myBean.prepareUrl}"></p:ajax>
                              <f:converter converterId="simple.primefaces.app.WebOptionConverter"/>
                         </p:selectOneMenu>
                    </p:column>
               </p:row>
               <p:row>
               <p:column>
                    <p:commandButton id="submitButton" value="Submit" oncomplete="openUrl();" update="webOptionHidden"/>
                    <p:inputText id="webOptionHidden" value="#{myBean.webOptionUrl}" style="display:none;"/>
               </p:column>
               </p:row>
          </p:panelGrid>
     </h:form>
</h:body>
</html>

Web.xhtml

<?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"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app__3__0.xsd"
    id="WebApp__ID" version="3.0">

 <display-name>simple.primefaces.app</display-name>
 <welcome-file-list>
  <welcome-file>index.html</welcome-file>
  <welcome-file>index.xhtm</welcome-file>
  <welcome-file>index.jsp</welcome-file>
  <welcome-file>default.html</welcome-file>
  <welcome-file>default.htm</welcome-file>
  <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
 <context-param>
  <param-name>com.sun.faces.enableRestoreView11Compatibility</param-name>
  <param-value>true</param-value>
 </context-param>

</web-app>

4, Демо

Создайте приложение, добавьте его на сервер и запустите приложение.

4.1 Если вы запустите приложение, экран будет выглядеть так,

Изображение://wp-content/uploads/2017/09/primafaces-open-windows-demo1.png[изображение]

4.2 Если вы не выберете какую-либо опцию, вам будет предложено выбрать опцию.

Изображение://wp-content/uploads/2017/09/primafaces-open-windows-demo2.png[изображение]

4.3 На данный момент я добавил две страницы google и yahoo. Если вы выберете любую из них, соответствующий веб-сайт откроется в другом окне.

Изображение://wp-content/uploads/2017/09/primafaces-open-windows-demo3.png[изображение]

Изображение://wp-content/uploads/2017/09/primafaces-open-windows-demo4.png[изображение]

4.4 Теперь я объясню трюк, надеюсь, вы знакомы с виджетами простых лиц, конвейером omnifaces, компонентом бобов …​ Если нет, я рекомендую вам пройтись по руководству простых лиц.

, Допустим, мы не выбрали ни одного варианта и нажали кнопку «Отправить», javascript

Метод будет проверен, где я проверяю, выбран ли какой-либо параметр или нет, если ничего не выбрано, просто попросив пользователя выбрать любой из параметров.

, Допустим, вы выбрали любой из вариантов, теперь Ajax вызов

вызывает, выбранная опция будет установлена ​​на бэк-компонент и готовит соответствующий URL страницы. После этого (если вы наблюдаете index.xhtml Я добавил текстовое поле, которое не будет отображаться в Интернете. страница) , После завершения вызова ajax это текстовое поле будет обновлено, я имею в виду

это текстовое поле будет иметь выбранную веб-опцию.

, Если вы нажмете на отправить сейчас, снова метод javascript будет

После этого мы берем значение из этого текстового поля, поэтому оно содержит URL опции. Таким образом, URL будет открыт в новом окне.

Изображение://wp-content/uploads/2017/09/primafaces-open-windows-demo5.png[изображение]

Изображение://wp-content/uploads/2017/09/primefaces-open-windows-demo6.png[изображение]

Эксперты Java команда программистов-разработчиков поделились своими лучшими знаниями о технологии Java и ее использовании в проекте Java. Если вам нужно получить больше информации, вы можете спросить разработчиков, которые уже применяют эту технологию в своих проектах.

  • Подробнее об этом: ** ссылка://jpa/jpa-optimistic-lock-exception-in-java-development/[Исключение оптимистической блокировки JPA в разработке Java]В этом посте объясняется технология JPA и ее использование в разработке Java.

Эксперты java development India объясняют пример использования технологий - JPA и Hibernate, база данных MySql, Maven. Прочитайте этот пост и узнайте, что они хотят сказать.

Рекомендации

Java EE]

ссылка://тег/раскрывающийся список/[раскрывающийся список]ссылка://тег/jsf/[jsf]ссылка://тег/primefaces/[primefaces]

Related