開発者ドキュメント

PrimeFaces – ドロップダウン選択でウィンドウを開く

getdocs

このチュートリアルでは、primefaces、maven、java8、glasifishサーバーが使用されています。

  • ユースケース:** ボタン、リンクなどをクリックして新しいページを開く場合は、それはまっすぐなものです。ページのURLが直接バッキングBeanからアドレスされていても、それを行うことができます。しかし、ページURLが動的である場合、ボタンをクリックするまでにページは既にレンダリングされているため、古い値を持つため、単純なことではありません。したがって、このケースではこのユースケースを実装するつもりです。

これを実装するにはいくつかの手順がありますが、

  1. Primefaces Mavenプロジェクトを作成し、glassfishをダウンロードして追加します

日食のサーバー部分。

  1. アプリケーションをデプロイしてテストします.

1.プロジェクトの構成

プロジェクトの依存関係

私は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アプリケーションを実行すると、画面は次のようになります。



4.2オプションを選択しない場合は、オプションの選択を促すメッセージが表示されます。



4.3現在、私は2つのページgoogleとyahooを追加しました。いずれかを選択すると、対応するWebサイトが別のウィンドウで開きます。





4.4今、私はトリックを説明します、あなたはprimefacesウィジェット、omnifaces conveter、backing beanに精通していることを願っています…​もしそうでなければ、primefacesチュートリアルをお勧めします。

  1. オプションを選択せず​​にsubmit、javascriptをクリックしたとしましょう

メソッドがチェックされ、オプションが選択されているかどうかがチェックされます。何も選択されていない場合は、オプションを選択するだけです。

  1. オプションのどれかを選択したとしましょう. 今ではAjaxコール

呼び出されると、選択されたオプションがバッキングBeanに設定され、
それぞれのページURLを準備します。その後、（あなたがfaceletを観察した場合、
index.xhtml Webに表示されないテキストフィールドを追加しました
ページ）
。 AJAX呼び出しの完了後、このテキストフィールドは更新されます

このテキストフィールドには選択したWebオプションがあります。

  1. 今すぐ送信をクリックすると、javascriptメソッドが再び表示されます

このテキストフィールドから値を取得しているので、オプションのURLが含まれています。 URLは新しいウィンドウで開きます。





エキスパートhttp://www.aegisinfoways.com/hire/java-developers.html[Java開発プログラマーチーム]は、JavaテクノロジとそのJavaプロジェクトでの使用に関する最善の知識を共有しています。より多くの情報を入手する必要がある場合は、既にこの技術をプロジェクトに適用している開発者に尋ねることができます。

  • +リンク://jpa/jpa-optimistic-lock-in-java-development/[Java開発におけるJPAオプティミスティックロック例外]+この記事では、JPAテクノロジとJava開発におけるその使用方法について説明します。 。

Java開発の専門家インドは技術のユースケースを説明しています.JAAとHibernate、MySqlデータベース、Mavenです。この記事を読んで、彼らが何を言いたいのかを知ってください。

参考文献

  1. Homepage



    [PrimeFaces – のための究極のUIフレームワーク

Java EE]

リンク://タグ/ドロップダウン/[ドロップダウン]リンク://タグ/jsf/[jsf]

primefaces

モバイルバージョンを終了