TOC

PrimeFaces - Fenêtre ouverte par sélection déroulante

Dans ce tutoriel, les serveurs primefaces, maven, java8 et glasifish sont utilisés.

  • Cas d’utilisation: ** Si vous souhaitez ouvrir une nouvelle page en cliquant sur un bouton, un lien ou quelque chose de simple. Même si l’URL de la page est adressée directement à partir d’un bean de sauvegarde, nous pouvons le faire. Mais si l’URL de la page est dynamique, ce n’est pas une mince affaire, car au moment où vous cliquez sur le bouton, la page est déjà affichée, vous aurez donc l’ancienne valeur. Donc, dans ce cas, je vais implémenter ce cas d’utilisation.

Il y a plusieurs étapes pour mettre cela en œuvre,

  1. Créez un projet Primefaces, téléchargez Glassfish et ajoutez-le à

la partie serveur de Eclipse.

  1. Déployez l’application et testez.

1. Structure du projet

image

2. Dépendances du projet

Je viens d’ajouter primefaces, librairie 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. Code

Ont créé un haricot, un convertisseur et une énumération et un 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, démo

Générez l’application, ajoutez-la au serveur et exécutez-la.

4.1 Si vous exécutez l’application, l’écran ressemblera à ceci,

image

4.2 Si vous ne sélectionnez aucune option, vous serez invité à choisir une option.

image

4.3 Pour le moment, j’ai ajouté deux pages, google et yahoo. Si vous en sélectionnez une, le site Web correspondant s’ouvrira dans une autre fenêtre.

image

image

4.4 Maintenant, je vais expliquer le truc, en espérant que vous connaissez les widgets Primefaces, Omnifaces Conveter, Backing Bean …​ Si vous ne le connaissez pas, je vous recommande de suivre le didacticiel Primefaces.

  1. Supposons que nous n’ayons sélectionné aucune option et cliqué sur soumettre, javascript

La méthode sera vérifiée si je vérifie si une option est sélectionnée ou non, si rien n’est sélectionné, il suffit de demander à l’utilisateur de sélectionner l’une des options.

  1. Supposons que vous ayez sélectionné l’une des options. Maintenant, un appel Ajax

invoqué, l’option sélectionnée sera définie sur le haricot de sauvegarde et prépare son URL de page respective. Après cela (si vous observez facelet, index.xhtml J’ai ajouté un champ de texte qui ne sera pas affiché sur le Web. page) . Une fois l’appel ajax terminé, ce champ de texte sera mis à jour, je veux dire

ce champ de texte aura l’option Web sélectionnée.

  1. Si vous cliquez sur Soumettre maintenant, la méthode javascript sera à nouveau utilisée.

appelé, nous prenons la valeur de ce champ de texte, qui contient donc l’URL de l’option Donc, l’URL sera ouvert dans une nouvelle fenêtre.

image

image

Les experts ( http://www.aegisinfoways.com/hire/java-developers.html [équipe de programmeurs de développement Java) ont partagé leurs meilleures connaissances concernant la technologie Java et son utilisation dans des projets Java. Si vous souhaitez obtenir plus d’informations, vous pouvez demander aux développeurs qui appliquent déjà cette technologie dans leurs projets.

  • En savoir plus sur ce lien: ** lien://jpa/exception-verrou-optimiste-jpa-en-développement-java/[Exception de verrouillage optimiste JPA dans le développement Java]Cet article explique la technologie JPA et son utilisation dans le développement Java.

Les experts du développement java en Inde expliquent le cas d’utilisation des technologies - JPA et Hibernate, base de données MySQL, Maven. Lisez ce post et sachez ce qu’ils veulent dire.

Références

  1. https://www.primefaces.org/ [PrimeFaces - Ultimate UI Framework for

Java EE]

lien://tag/dropdown/[dropdown]lien://tag/jsf/[jsf] primefaces

Related