كيفاش تدير form validation ب jsf


فأول درس من jsf غادي نشوفو كيفاش نديرو form validation ب jsf فالناس لي مكتعرفش شنو هي jsf هي un framework ديال java كتمكن من بناء des applications web وفهاد الدرس البسيط غادي نشوفو كيفاش نقادو فورم كيدخل المستخدم المعلومات وكيتعرضو ف une autre page من بعد مكنديرو ل validation ديال الفورم.

نظرة سريعة بالفيديو

1- الملف form.xhtml

أول حاجة غادي تدير غادي ت télécharger eclipse من هنا منبعد غادي ت télécharger tomcat من هنا من بعد مت installer les deux غادي تفتح eclipse من بعد تزيد project جديد اختار Dynamic Web Project من بعد غادي ت télécharger هاد ل lib javax.faces-2.2.8.jar من هنا من بعد متحملها غادي تزيدها فالمجلد lib لي غادي تلقاه ف WebContent->WEB-INF من بعد غادي تزيد ملف جديد غادي دير click ب droit ديال la souris على WebContent منبعد new منبعد اختار HTML file سميه form.xhtml منبعد اختار New Facelet Template منبعد ميتزاد امسح الكود لي فيه وغادي نزيدو فيه كود جديد كيربط ل app بbootstrap منبعد عندي الفورم ديالي فالفرق بين structure jsf وstructure html كنزيد فقط :h فكل tag فكنفتح الفورم منبعد كنزيد inputText كنعطيها الvalue ديال student.firstname لي غادي تكون عندي ف class سميتها student غادي نزيدوها من بعد ثم كاين ميساج لي كيتعرض يلا كان الحقل خاوي ونفس الشي بالنسبة للحقول الأخرى الفرق فقط فالإمايل وكلمة المرور لي كنعطيهم validateLength لي كتحدد الmin ول max ديال الحقل والهاتف لي خدمت ب regular expression باش حددتلو كيفاش خصو يتكتب وهنا عطيناه الفورم ديال 2 اعداد مفروقين ب - منبعد عندي ال bouton لي ملي كنكليكي عليها كتديني للملف reponse لي غادي نزيدوه من بعد الكود ديال الملف هو:

                                <!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://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:a="http://xmlns.jcp.org/jsf/facelets" >
<h:head>
  <title>Form Validation</title>
  <style>
  		.container{
  			margin-top:30px;
  		}
  </style>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</h:head>

<h:body>
  <div class="container">
  	<div class="row">
		<div class="col-md-6 col-md-offset-3">
			<h:form>
			     <div class="form-group">
			     	  <label for="nom">Nom :</label>
			     	  <h:inputText id="nom" class="form-control" value="#{student.firstname}" label="Nom" required="true" requiredMessage="Veuillez entrer votre nom"/>
			          <h:message for="nom"  class="text-danger"/>
			     </div>
				 <div class="form-group">
				 	  <label for="prenom">Prénom :</label>
				 	  <h:inputText class="form-control" id="prenom" value="#{student.lastname}" label="Prénom" required="true" requiredMessage="Veuillez entrer votre prénom"/>
			          <h:message for="prenom" class="text-danger"/>
				 </div>
				 <div class="form-group">
				 	  <label for="email">Email :</label>
				 	  <h:inputText class="form-control" id="email" value="#{student.email}" label="Email">
				 	     <f:validateLength minimum="10" maximum="20"/>
				 	  </h:inputText>
			           <h:message for="email" class="text-danger"/>
				 </div>
				 <div class="form-group">
				 	  <label for="passe">Mot de passe :</label>
				 	  <h:inputText class="form-control" id="passe" value="#{student.passe}" label="Mot de passe">
			             <f:validateLength minimum="0" maximum="10"/>
			          </h:inputText>
			           <h:message for="passe" class="text-danger"/>
				 </div>
				 <div class="form-group">
				 	  <label for="tel">Téléphone :</label>
				 	  <h:inputText class="form-control" id="tel" value="#{student.phone}" label="Téléphone" validatorMessage="Le numéro de téléphone doit respecter le schema suivant : xx-xx-xx-xx-xx">
			             <f:validateRegex pattern="\d{2}-\d{2}-\d{2}-\d{2}-\d{2}"/>
			          </h:inputText>
			           <h:message for="tel" class="text-danger"/>
				 </div>
			     <div class="form-group">
			     	<h:commandButton value="Valider" class="btn btn-success" action="reponse"></h:commandButton>
			     </div>
	        </h:form>
		</div>
  	</div>
  </div>

</h:body>

</html>

                            

2- الملف Student.java

فالمجلد Java Resources كنزيد package جديد سميه form.validation زيد فيه ملف جديد عبارة عن java class فيه غادي نخزنو المعلومات الخاصة بكل Student فعندنا المعلومات على شكل des variables و كاين ل constructeur ولgetters وsetters الكود ديال الملف هو:


                                package form.validation;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class Student {
   private String firstname;
   private String lastname;
   private String email;
   private String passe;
   private String phone;
   public Student() {
	   
   }

public String getFirstname() {
	return firstname;
}

public void setFirstname(String firstname) {
	this.firstname = firstname;
}

public String getLastname() {
	return lastname;
}

public void setLastname(String lastname) {
	this.lastname = lastname;
}

public String getEmail() {
	return email;
}

public void setEmail(String email) {
	this.email = email;
}

public String getPasse() {
	return passe;
}

public void setPasse(String passe) {
	this.passe = passe;
}

public String getPhone() {
	return phone;
}

public void setPhone(String phone) {
	this.phone = phone;
}

}

                            

3- الملف reponse.xhtml

منبعد ف WebContent  وبنفس الطريقة باش زدت form.xhtml كنزيد ملف جديد سميه reponse.xhtml فيه الكود لي كيربط الملف ب bootstrap ومنبعد عندي liste كنعرض فيها المعلومات الخاصة بكل student وهنا كنعرض les valeurs من la classe student ولي automatiquement ملي كنكتب مثلا {student.firstname}# كت
executer la fonction getFirstname
الكود ديال الملف هو :

                                <!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://xmlns.jcp.org/jsf/html"
      xmlns:a="http://xmlns.jcp.org/jsf/facelets" >
<h:head>
  <title>Form Validation</title>
  <style>
  		.container{
  			margin-top:30px;
  		}
  </style>
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</h:head>

<h:body>
		<div class="container">
		    <div class="row">
		    	<div class="col-md-6 col-md-offset-3">
		    		<ul class="list-group">
		    			<li class="list-group-item">
		    			   <span class="text-info">Nom: </span> #{student.firstname}  
		    			</li>
		    			<li class="list-group-item">
		    		       <span class="text-info">Prénom : </span>  #{student.lastname} 
		    			</li>
		    			<li class="list-group-item">
		    			   <span class="text-info">Email : </span>  #{student.email}  
		    			</li>
		    			<li class="list-group-item">
		    		       <span class="text-info">Mot de passe : </span>  #{student.passe} 
		    			</li>
		    			<li class="list-group-item">
		    		       <span class="text-info">Téléphone : </span>  #{student.phone} 
		    			</li>
		    		</ul>
		    	</div>
		    </div>
		</div>
</h:body>

</html>

                            


بحث في الموقع


إشترك للتوصل بالجديد