TOC

PrimeFaces - Fenster durch Dropdown-Auswahl öffnen

In diesem Tutorial werden Primefaces, Maven, Java8, Glasifish-Server verwendet.

  • Anwendungsfall: ** Wenn Sie eine neue Seite öffnen möchten, indem Sie auf die Schaltfläche, den Link oder etwas anderes klicken, ist dies eine direkte Sache. Selbst wenn die Seiten-URL von einem direkt unterstützten Bean aus angesprochen wird, können wir dies tun. Wenn die Seiten-URL dynamisch ist, ist dies jedoch keine einfache Sache, denn wenn Sie auf die Schaltfläche klicken, ist die Seite bereits gerendert, sodass Sie einen alten Wert haben. In diesem Fall werde ich diesen Anwendungsfall implementieren.

Es gibt mehrere Schritte, um dies zu implementieren,

  1. Erstellen Sie ein Primefaces-Maven-Projekt, laden Sie glassfish herunter und fügen Sie es hinzu

der Server-Teil von Eclipse.

  1. Stellen Sie die Anwendung bereit und testen Sie.

1. Projektstruktur

Bild

2. Projektabhängigkeiten

Ich habe gerade Primefaces hinzugefügt, die jsf-Bibliothek.

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. Code

Habe ein Bean, Converter und Enum und index.xhtml (Facelet) erstellt

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, Demo

Erstellen Sie die Anwendung, fügen Sie sie dem Server hinzu und führen Sie die Anwendung aus.

4.1 Wenn Sie die Anwendung ausführen, sieht der Bildschirm folgendermaßen aus:

image

4.2 Wenn Sie keine Option auswählen, werden Sie aufgefordert, eine Option auszuwählen.

image

4.3 Im Moment habe ich zwei Seiten Google und Yahoo hinzugefügt. Wenn Sie eine davon auswählen, wird die entsprechende Website in einem anderen Fenster geöffnet.

image

image

4.4 Nun werde ich den Trick erklären. Ich hoffe, Sie kennen Primefaces-Widgets, Omnifaces Conveter, Backing Bean …​ Wenn dies nicht der Fall ist, empfehle ich Ihnen, das Primefibel-Tutorial durchzugehen.

  1. Angenommen, Sie haben keine Option ausgewählt und auf Senden, Javascript, geklickt

Die Methode wird geprüft, wo geprüft wird, ob eine Option ausgewählt ist oder nicht.

  1. Angenommen, Sie haben eine der Optionen ausgewählt, jetzt einen Ajax-Anruf

aufgerufen wird, bewirkt, dass die ausgewählte Option auf die Hintergrundbohne und gesetzt wird bereitet die jeweilige Seiten-URL vor. Danach (wenn Sie Facelet beobachten, index.xhtml Ich habe ein Textfeld hinzugefügt, das nicht im Web angezeigt wird Seite) . Nach Beendigung eines Ajax-Aufrufs wird dieses Textfeld aktualisiert

Dieses Textfeld enthält die ausgewählte Weboption.

  1. Wenn Sie jetzt auf "Senden" klicken, wird wieder die Javascript-Methode verwendet

aufgerufen, dort nehmen wir den Wert aus diesem Textfeld und enthalten daher die URL der Option Die URL wird also in einem neuen Fenster geöffnet.

image

image

Experten Java-Entwicklerprogrammierungsteam haben ihr bestes Wissen über Java-Technologie und ihre Verwendung in Java-Projekten geteilt. Wenn Sie weitere Informationen benötigen, können Sie die Entwickler fragen, die diese Technologie bereits in ihren Projekten einsetzen.

Experten für Java Development India erläutern den Anwendungsfall von Technologien - JPA und Hibernate, MySql-Datenbank, Maven. Lesen Sie diesen Beitrag und wissen Sie, was sie sagen möchten.

Referenzen

  1. https://www.primefaces.org/ [PrimeFaces - Ultimate UI Framework für

Java EE]

dropdown jsf primefaces

Related