2012-05-04 4 views
1

AJAXデータの検証とJSFフォームを作成する方法を、私はこれは、JSFページでAJAXデータの検証を使用して、データベースのテーブルにデータを挿入するためのJSFフォームのプロトタイプに取り組んでいます

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"  
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets"> 
    <h:head> 
     <ui:insert name="header">   
      <ui:include src="header.xhtml"/>   
     </ui:insert> 
    </h:head> 
    <h:body> 

     <h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1> 
     <!-- layer for black background of the buttons --> 
     <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black"> 
      <!-- Include page Navigation --> 
      <ui:insert name="Navigation">   
       <ui:include src="Navigation.xhtml"/>   
      </ui:insert> 

     </div> 

     <div id="logodiv" style="position:relative; top:35px; left:0px;"> 
      <h:graphicImage alt="Demo Insert Form" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_databasez.png" /> 
     </div> 
     <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px"> 

      <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px"> 

       <div id="settingsHashMap" style="width:350px; height:400px; position:absolute; background-color:r; top:20px; left:1px"> 
        <h:form> 
         <div id="settingsdiv" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px"> 

          <h:panelGrid columns="2"> 
           <h:panelGroup>Session ID</h:panelGroup> 
           <h:panelGroup> 
            <h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}" > 
             <f:validateLength minimum="0" maximum="15"/> 
             <f:ajax render="sessionidvalidate" event="blur"/>           
            </h:inputText> 
            <h:outputText id="sessionidvalidate" rendered="#{DatabaseController.validateSessionid}" value="session is already registered" /> 
           </h:panelGroup> 

           <h:panelGroup>User ID</h:panelGroup> 
           <h:panelGroup> 
            <h:inputText id="userid" value="#{DatabaseController.formMap['userid']}" > 
             <f:validateLength minimum="0" maximum="15"/> 
            </h:inputText> 
           </h:panelGroup> 

           <h:panelGroup>Login Time</h:panelGroup> 
           <h:panelGroup> 
            <h:inputText id="logintime" value="#{DatabaseController.formMap['logintime']}" > 
             <f:validateLength minimum="0" maximum="35"/> 
            </h:inputText> 
           </h:panelGroup> 

           <h:panelGroup>Last Refresh Time</h:panelGroup> 
           <h:panelGroup> 
            <h:inputText id="lastrefreshtime" value="#{DatabaseController.formMap['lastrefreshtime']}" > 
             <f:validateLength minimum="0" maximum="35"/> 
            </h:inputText> 
           </h:panelGroup> 

           <h:panelGroup>User IP</h:panelGroup> 
           <h:panelGroup> 
            <h:inputText id="userip" value="#{DatabaseController.formMap['userip']}" > 
             <f:validateLength minimum="0" maximum="15"/> 
            </h:inputText> 
           </h:panelGroup> 

          </h:panelGrid>   

         </div> 

         <div id="settingstwodiv" style="width:150px; height:60px; position:absolute; background-color:transparent; top:380px; left:800px"> 

          <h:commandButton value="Create User" action="#{DatabaseController.saveData}"/> 

         </div> 
        </h:form> 

       </div> 

      </div> 
     </div> 

    </h:body> 
</html> 

これは、マネージドBeanは次のとおりです。

import java.io.Serializable; 
import javax.enterprise.context.SessionScoped; 
// or import javax.faces.bean.SessionScoped; 
import javax.inject.Named; 
/* include SQL Packages */ 
import java.sql.Connection; 
import java.sql.PreparedStatement; 
import java.sql.ResultSet; 
import java.sql.SQLException; 
import java.sql.Timestamp; 
import java.text.ParseException; 
import java.text.SimpleDateFormat; 
import java.util.HashMap; 
import javax.annotation.PostConstruct; 
import javax.sql.DataSource; 
import javax.annotation.Resource; 
import javax.faces.context.FacesContext; 
import javax.inject.Inject; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpSession; 
// or import javax.faces.bean.ManagedBean; 

import org.glassfish.osgicdi.OSGiService; 

// Demo Insert Form 
@Named("DatabaseController") 
@SessionScoped 
public class Database implements Serializable { 

    private HashMap<String, String> formMap = new HashMap<>(); 

    public Database() { 
    } 
    /* Call the Oracle JDBC Connection driver */ 
    @Resource(name = "jdbc/Oracle") 
    private DataSource ds; 

    public HashMap<String, String> getformMap() { 
     return formMap; 
    } 

    /* 

    CREATE TABLE ACTIVESESSIONS(
    SESSIONID VARCHAR2(30) NOT NULL, 
    USERID VARCHAR2(30) NOT NULL, 
    LOGINTIME TIMESTAMP(6), 
    LASTREFRESHTIME TIMESTAMP(6), 
    USERIP VARCHAR2(30) 
    ) 
    /
    */ 
    @PostConstruct 
    public void hashMapGenerate() { 
     /* Initialize the hashmap */ 
     formMap.put("sessionid", null); 
     formMap.put("userid", null); 
     formMap.put("logintime", null); 
     formMap.put("lastrefreshtime", null); 
     formMap.put("userip", null); 
    } 

    public int saveData() throws SQLException, java.text.ParseException { 
//  formMap = new HashMap<String, String>(); 

     String SqlStatement = null; 

     if (ds == null) { 
      throw new SQLException(); 
     } 

     Connection conn = ds.getConnection(); 
     if (conn == null) { 
      throw new SQLException(); 
     } 

     PreparedStatement ps = null; 

     /* 

     CREATE TABLE ACTIVESESSIONS(
     SESSIONID VARCHAR2(30) NOT NULL, 
     USERID VARCHAR2(30) NOT NULL, 
     LOGINTIME TIMESTAMP(6), 
     LASTREFRESHTIME TIMESTAMP(6), 
     USERIP VARCHAR2(30) 
     ) 
     /
     */ 

     try { 
      conn.setAutoCommit(false); 
      boolean committed = false; 
      try {   /* insert into Oracle the default system(Linux) time */ 
       SqlStatement = "INSERT INTO ACTIVESESSIONS" 
         + " (SESSIONID, USERID, LOGINTIME, LASTREFRESHTIME, USERIP)" 
         + " VALUES (?, ?, ?, ?, ?)"; 

       ps = conn.prepareStatement(SqlStatement); 

       ps.setString(1, formMap.get("sessionid")); 
       ps.setString(2, formMap.get("userid")); 
       ps.setTimestamp(3, toTimeStamp(formMap.get("logintime"))); 
       ps.setTimestamp(4, toTimeStamp(formMap.get("lastrefreshtime"))); 
       ps.setString(5, formMap.get("userip")); 

       ps.executeUpdate(); 

       conn.commit(); 
       committed = true; 
      } 
      finally 
      { 
       if (!committed) { 
        conn.rollback(); 
       } 
      } 
     } finally { 
      /* Release the resources */ 
      ps.close(); 
      conn.close(); 
     } 

     return 0; 

    } 
    private Timestamp toTimeStamp(String s) throws java.text.ParseException 
    { 
     Timestamp ts = null; 
     java.util.Date date = null; 
     if (s == null || s.trim().isEmpty()) return ts; 

     SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss.S"); 
     date = (java.util.Date) sdf.parse(s); 
     ts = new Timestamp(date.getTime()); 

     return ts; 

    } 

    /* Validators section */ 
    public boolean getvalidateSessionid(){ 

     //do SQL query 

     return true; 
    } 

} 

フォームの検証を実装するのが難しいです。私は使用された文字列を渡してデータベースにチェックしたい、この値は既にデータベーステーブルに入っています。ここでは値を確認するJavaメソッドを呼び出しています:

      <h:panelGroup> 
           <h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}" > 
            <f:validateLength minimum="0" maximum="15"/> 
            <f:ajax render="sessionidvalidate" event="blur"/>           
           </h:inputText> 
           <h:outputText id="sessionidvalidate" rendered="#{DatabaseController.validateSessionid}" value="session is already registered" /> 
          </h:panelGroup> 

どのようにJavaメソッドに挿入された値を送信できますか?

ベストウイッシュ

+0

ここに例があります:http://www.tugay.biz/2016/07/jsf-ajax-custom-validator-message.html –

答えて

6

Validatorを作成する必要があります。

キックオフ例:あなたは検証メッセージを表示するように<h:message>を使用する必要があります

<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}"> 
    <f:validateLength minimum="0" maximum="15" /> 
    <f:validator validatorId="sessionIdValidator" /> 
    <f:ajax event="blur" render="sessionidMessage" />           
</h:inputText> 
<h:message id="sessionidMessage" for="sessionid" /> 

注:次のように

@FacesValidator("sessionIdValidator") 
public class SessionIdValidator implements Validator { 

    @Override 
    public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException { 
     // ... 

     if (yourDataService.existSessionId(value)) { 
      throw new ValidatorException(new FacesMessage(FacesMessage.SEVERITY_ERROR, 
       "Session ID is already in use, please choose another.", null)); 
     } 
    } 

} 

はそれを使用してください。あなたはあなたの意見で誰も持っていません。他のすべてのフィールドに同じを適用します:あなたがバリで@Resourceまたは@EJBまたは@Injectを使用したい場合は

<h:inputText id="userid" value="#{DatabaseController.formMap['userid']}"> 
    <f:validateLength minimum="0" maximum="15" /> 
    <f:ajax event="blur" render="useridMessage" />           
</h:inputText> 
<h:message id="useridMessage" for="userid" /> 

が、その後、@ManagedBeanによって@FacesValidator注釈を交換するか、(あなたには、いくつかのためにCDIを使用するように見えるようその理由)@Named

@Named 
public class SessionIdValidator implements Validator { 

    @Resource 
    private DataSource dataSource; 

    @Inject 
    private YourDataService yourDataService; 

    // ... 
} 

、代わりに

を次のようにそれを使用します
+0

例をありがとう!エラーメッセージがWebページに表示されたときに検証の例を実装するとしますか?ボタンを押すときや何かを入力するとき? –

+1

''によると、入力フィールドがぼやけたときだけです。 – BalusC

+0

ぼかしは、テキスト入力内の(フォーカスを失う)イベントを意味します。私は、これは、いくつかのデータをフィールドに入力すると、データが有効であることをフィールド外でクリックすることを意味します。入力フィールドに入力されたすべての新しい文字をチェックするように入力フィールドを設定する方法は?たぶんイベント= "変更"ですか? –

1

はちょうどあなたのタグh:inputTextにリスナーを追加します。

<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}" 
     valueChangeListener="#{DatabaseController.validateSessionid}"> 

ですから、サーバー側で入力した値を確認することができます。ユーザーが入力フィールドからタブアウトすると、JSFはサーバーへのajax呼び出しを行い、ライフサイクルの実行部分を通じて名前入力コンポーネントを実行します。これは、ライフ・サイクルの検証プロセス・フェーズ中に、属性valueChangeListenerで指定された名前入力の値変更リスナーをJSFが起動することを意味します。

そして、私は、このメソッドを実装することをお勧め:

public void validateSessionid(ValueChangeEvent e) { 
    UIInput nameInput = e.getComponent() 
    String sessionid = nameInput.getValue() 

    //do SQL query 
} 

AJAX呼び出した後は、JSFがh:outputText id="sessionidvalidate"レンダリングを返します。

+1

「valueChangeListener」はまったく異なる目的を果たします。値を検証するのではなく、値の変更イベントを待ち受けるのが目的です。 – BalusC

+1

しかし、この場合のプロセスは、カスタムバリデータを使用した場合と事実上同じです。基本的な違いは何ですか? – kapand

+1

ジョブに適切なツールを使用する。あなたが何かを検証したいなら、 'Validator'を使います。これは仕事に適しています。これは 'validate()'メソッドを持っています。このメソッドでは、ValidationExceptionをスローして、JSFがサブミットを無効として扱い、メッセージを処理するように強制できます。 'valueChangeListener'では、すべて手動で行う必要があります。 – BalusC

関連する問題