navigation
TRANSCRIPT
كلية اهلندسة املعلوماتية السنة اخلامسة
هندسة الربجمياتو لطالب قسمي الشبكات والنظم سوريا -محص
مقرر التجارة االلكرتونية زينب خلوف.د
اخلامسةاحملاضرة
الصفحات بني التنقل
JSF: Page Navigation
JSF يف الصفحات بني التنقل أنواع
.م بشكل ضمين أو بشكل صريحالتنقل بني الصفحات ميكن أن يت اليت النتيجة خالل من إليها اإلنتقال سيتم اليت الصفحة حتديد الطريقة هذه يف ويتم: الصفحات إىل ضمين تنقل .1
إسم متثل إعادهتا يتم اليت النتيجة أن حيث. Managed Bean من Action Method الطريقة تعيدها تكون أن ميكن بل حمارف سلسلة النتيجة هذه تكون أن بالضرورة ليس هأن علما إليها اإلنتقال سيتم اليت الصفحة الصفحة إىل اإلنتقال يتم" success" احملارف سلسلة إعادة تتم عندما ،( 1) املثال يف. عددية قيمة
success.xhtml احملارف سلسلة تعاد وعندما "index "الصفحة إىل اإلنتقال يتم index.xhtml. ويفيتم اإلنتقال إىل الصفحة 2يعاد وعندما xhtml.1ىل الصفحة إنتقال يتم اإل 1تتم إعادة عندما (2)املثال
2.xhtml.
public int guessCommand () { if (guess == target) { return (1); } else { this.attempts++; return (2); } }
public String guessCommand () { if (guess == target) { return ("success"); } else { this.attempts++; return ("index"); } }
2املثال 1املثال -faces التعريفات ملف إىل صريح بشكل التنقل قواعد إضافة تتم الطريقة هذه يف: الصفحات إىل الصريح التنقل .2
config.xml ، معينة نتيجة أجل من إليها اإلنتقال سيتم اليت الصفحة صريح بشكل حتدد القواعد هذه.
:مالحظة
ويتم من خالل وضع إسم الصفحة اليت Static Navigation نتقال الثاب ويوجد نوع من أنواع االنتقال يسمى باإل :لزر األوامر Actionيراد اإلنتقال إليها يف خاصية
<h:commandButton ... action="fixed-page/">
:كما يف املثال
<h:commandButton ... action="/view/result-page-1.xhtml/">
.صحيح للصفحةحيث جيب حتديد املسار ال الصفحات إىل الصريح التنقل
Explicit Page Navigation
يتم Netbeans، يف faces-config.xmlمن خالل تعريف قواعد التنقل يف امللف يتم الصفحات بني الصريح التنقل :وفقاً للشكل faces-config.xmlإنشاء امللف
:امبني يف الشكل كم WEB-INFضمن اجمللد ليتوضع بشكل إفرتاضي
:مبني يف الشكل faces-config.xml للملفالشكل العام
ملف يف املعرفة تلك غري بالتطبيق اخلاصة التعريفات مجيع ويتضمن xml الـ ملف جذر ميثل< faces-config> العنصر-faces امللف يف العناصر كل. Web Deployment Descriptor( web.xml) التطبيق إستخدام موصف
config.xml مثل (application, managed-bean, ..., factory )امللف يتضمن أن وميكن إختيارية هي .يف هذه احملاضرة سنركز على كيفية تعريف قواعد التنقل. العناصر هذه من أكثر أو واحد
:ات يتضمن جمموعة من القواعد لتعريف التنقل بني الصفح faces-config.xmlمثال عن ملف
faces-config.xml
1 <?xml version="1.0"?> 2 <faces-config xmlns="http://java.sun.com/xml/ns/javaee" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 5 http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd" 6 version="2.0"> 7 8 <navigation-rule> 9 <from-view-id>/start-page.xhtml</from-view-id> 10 <navigation-case> 11 <from-outcome>too-short</from-outcome> 12 <to-view-id>error-message.xhtml</to-view-id> 13 </navigation-case> 14 </navigation-rule> 15 <navigation-rule> 16 <from-view-id>/start-page.xhtml</from-view-id> 17 <navigation-case> 18 <from-outcome>page1</from-outcome> 19 <to-view-id>result-page-1.xhtml</to-view-id> 20 </navigation-case> 21 <navigation-case> 22 <from-outcome>page2</from-outcome> 23 <to-view-id>result-page-2.xhtml</to-view-id> 24 </navigation-case> 25 </navigation-rule> 26 </faces-config> 27
faces-config.xmlيف امللف (Navigation Rules) التنقل قواعديعرف قاعدة ، ميكن أن يكون هلذا العنصر عدد من العناصر األبناء ، من أكثرهم <navigation-rule>العنصر
:استخداماً CHILD ELEMENT MULTIPLICITY DESCRIPTION
from-view-id zero or one عليها القاعدة ، إذا مل يكن حتدد الصفحة اليت تطبق .هذا العنصر موجود فالقاعدة تطبق على كل الصفحات
navigation-case zero to many حيدد الصفحة التالية اليت سيتم اإلنتقال إليها إذا حتقق . شرط أو خرج معني
، هذا اليعطي أخطاء navigation-caseمن املالحظ من اجلدول السابق أن القاعدة قد التتضمن أي عنصر : مالحظة
موافقة هلذه navigation-case واليوجد حالة Action Methodبالتنفيذ ولكن حيصل خطأ ان كان هناك نتيجة لـ .النتيجة
. أيضاً عناصر أبناء ومن أكثرها استخداماً <navigation-case>للعنصر CHILD ELEMENT MULTIPLICITY DESCRIPTION from-outcome zero or one تعرف خرج مثل"success " أو"failure" لـ
Action Method to-view-id exactly one تعرف الصفحة التالية اليت سيتم االنتقال إليها إذا حتققت
.هذه احلالةfrom-action zero or one قيمة تدل على تعبري جيب أن يتنفذ حىت يتم تطبيق هذه
.القاعدةredirect zero or one حيدد أن اإلنتقال للصفحة املعرفة بـto-view-id جيب
.HTTP redirectأن يتم وفقاً لـ اإلنتقال الضمين قد يكون أبسط ولكن التنقل الصريح يسمح بتخصيص : للصفحات الصريح التنقل وحماسن مساوئ
من حيث أنه ميكن إسناد الشروط مكان واحد لقواعد التنقل بدل البحث يف ملفات جافا ، هذا يعطي مرونة أكرب .لصفحات البدء أو إستخدام التنقل الشرطي wildcardsلصفحات خمتلفة الحقا وميكن إستخدام
(/http://www.coreservlets.com/JSF-Tutorial/jsf2: )الصفحات بني الصريح التنقل عن مثال أوامر وزر inputText نص إلدخال ُمكونة تتضمن ، start-page-1.xhtml البداية ، صفحة املثال هذا يف
commandButton .لإلنتقال صفحة يارتإخ عشوائي بشكل يتم ني أو أكثرحمرف من مكونة رسالة املستخدم أدخل إذا .خطأ رسالة تعرض لصفحة لاإلنتقا فإنه يتم وإال املدخلة الرسالة عرض فيها ويتم إليها
:SimpleController.java هو Managed Beanالتطبيق مكون من
SimpleController.java
1 package coreservlets; 2
3 import java.io.Serializable; 4 import javax.enterprise.context.RequestScoped; 5 import javax.inject.Named; 6 @RequestScoped 7 @Named 8 public class SimpleController { 9 private String message=""; 10 11 public String getMessage() { 12 return(message); 13 } 14 15 public void setMessage(String message) { 16 this.message = message; 17 } 18 19 public String doNavigation() { 20 if (message.trim().length() < 2) { 21 return("too-short"); 22 } else { 23 String[] results = 24 { "page1", "page2" }; 25 return(RandomUtils.randomElement(results)); 26 } 27 } 28 } 29
.هو صف مساعد يسمح باختيار عنصر من صف بشكل عشوائي RandomUtils.javaالصف
RandomUtils.java
1 package coreservlets; 2 3 import java.util.Random; 4 5 public class RandomUtils { 6 private static Random r = new Random();
7 8 public static int randomInt(int range) { 9 return(r.nextInt(range)); 10 } 11 12 public static int randomIndex(Object[] array) { 13 return(randomInt(array.length)); 14 } 15 16 public static <T> T randomElement(T[] array) { 17 return(array[randomIndex(array)]); 18 } 19 } 20
. ، فيم يلي عرض هلذه الصفحات JSFوكذلك يتألف التطبيق من جمموعة من صفحات start-page.xhtmlالصفحة
start-page.xhtml
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" 4 xmlns:h="http://java.sun.com/jsf/html"> 5 <h:head><title>JSF 2.0: Basic Navigation Rules</title> 6 <link href="./css/styles.css" 7 rel="stylesheet" type="text/css"/> 8 </h:head> 9 <h:body> 10 <div align="center"> 11 <table border="5"> 12 <tr><th class="title">JSF 2.0: Basic Navigation Rules</th></tr> 13 </table> 14 <p/> 15 <h:form> 16 Your message: 17 <h:inputText value="#{simpleController.message}"/> 18 <br/>
19 <h:commandButton value="Show Results" 20 action="#{simpleController.doNavigation}"/> 21 </h:form> 22 </div> 23 </h:body> 24 </html> 25
result-page-1.xhtmlالصفحة
result-page-1.xhtml
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" 4 xmlns:h="http://java.sun.com/jsf/html"> 5 <h:head><title>Result Page 1</title> 6 <link href="./css/styles.css" 7 rel="stylesheet" type="text/css"/> 8 </h:head> 9 <h:body> 10 <div align="center"> 11 <table border="5"> 12 <tr><th class="title">Result Page 1</th></tr> 13 </table> 14 <p/> 15 16 <h2>Your message: "#{simpleController.message}"</h2> 17 18 </div></h:body></html> 19
result-page-2.xhtmlالصفحة
result-page-2.xhtml
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" 4 xmlns:h="http://java.sun.com/jsf/html"> 5 <h:head><title>Result Page 2</title> 6 <link href="./css/styles.css" 7 rel="stylesheet" type="text/css"/> 8 </h:head> 9 <h:body> 10 <div align="center"> 11 <table border="5"> 12 <tr><th class="title">Result Page 2</th></tr> 13 </table> 14 <p/> 15 16 <h2>Your message: "#{simpleController.message}"</h2> 17 18 </div></h:body></html> 19
error-message.xhtmlالصفحة
error-message.xhtml
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" 4 xmlns:h="http://java.sun.com/jsf/html"> 5 <h:head><title>Error: Message Too Short</title> 6 <link href="./css/styles.css" 7 rel="stylesheet" type="text/css"/> 8 </h:head> 9 <h:body> 10 <div align="center"> 11 <table border="5"> 12 <tr><th class="title">Error: Message Too Short</th></tr> 13 </table> 14 <p/>
15 16 <h2>Short message.</h2> 17 18 </div></h:body></html> 19
faces-config.xmlامللف
faces-config.xml
1 <?xml version="1.0"?> 2 <faces-config xmlns="http://java.sun.com/xml/ns/javaee" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 5 http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd" 6 version="2.0"> 7 8 <navigation-rule> 9 <from-view-id>/start-page.xhtml</from-view-id> 10 <navigation-case> 11 <from-outcome>too-short</from-outcome> 12 <to-view-id>error-message.xhtml</to-view-id> 13 </navigation-case> 14 </navigation-rule> 15 <navigation-rule> 16 <from-view-id>/start-page.xhtml</from-view-id> 17 <navigation-case> 18 <from-outcome>page1</from-outcome> 19 <to-view-id>result-page-1.xhtml</to-view-id> 20 </navigation-case> 21 <navigation-case> 22 <from-outcome>page2</from-outcome> 23 <to-view-id>result-page-2.xhtml</to-view-id> 24 </navigation-case> 25 </navigation-rule> 26 </faces-config> 27
from-actionإستخدام
:يف بعض األحيان قد تعيد طريقتني خمتلفتني نفس النتيجة ، كما يف املثال package bean; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class PageController {
public String processPage1() { return "success"; } public String processPage2() { return "success"; }
} .للتميز بني حاليت االنتقال from-actionيف هذه احلالة نستخدم
<?xml version='1.0' encoding='UTF-8'?> <faces-config version="2.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"> <navigation-rule> <from-view-id>index.xhtml</from-view-id> <navigation-case> <from-action>#{pageController.processPage1}</from-action> <from-outcome>success</from-outcome> <to-view-id>page1.xhtml</to-view-id> </navigation-case> <navigation-case> <from-action>#{pageController.processPage2}</from-action> <from-outcome>success</from-outcome> <to-view-id>page2.xhtml</to-view-id> </navigation-case> </navigation-rule>
</faces-config> يف القواعد *استخدام حمرف البدل
: كما يف املثال التايل <from-view-id>من املمكن استخدام حمرف البدل يف القواعد بدل اسم الصفحة يف <navigation-rule>
<from-view-id>*</from-view-id> <navigation-case> <from-outcome>too-short</from-outcome> <to-view-id>/view/error-message.xhtml</to-view-id> </navigation-case> </navigation-rule>
.<from-view-id>أي أن هذد القاعدة تتحقق من أجل أي صفحة بداية Conditional Navigation Rulesقواعد اإلنتقال الشرطي
: ، كما يف املثال التايل <if>من املمكن تعريف قواعد انتقال شرطية من خالل استخدام الومسة <navigation-case> <from-outcome>success</from-outcome> <if>#{user.newVisitor}</if> <to-view-id>/welcome-new.xhtml</to-view-id> </navigation-case> <navigation-case> <from-outcome>success</from-outcome> <if>#{!user.newVisitor}</if> <to-view-id>/welcome-back.xhtml</to-view-id> </navigation-case>
هو userصحيحة حيث أن {user.newVisitor}#و successيف احلالة األوىل إذا كانت النتيجة ManagedBean و newVisitor اسم خلاصية من نوع منطقي لـuser.
Dynamic To-Idsإمكانية حتديد إسم الصفحة اليت سيتم اإلنتقال إليها بشكل ديناميكي ، بدل من facse-config.xmlيف من املمكن حساب الصفحة اليت سيتم اإلنتقال إليها بشكل ديناميكي يف ملف التول
-exam/يف املثال التايل سيتم االنتقال من الصفحة . أن يتم حتديد إسم الصفحة بشكل غري مباشر كنتيجة إعادة
question.xhtml إىل الصفحة ذات اإلسم الناتج من تنفيذ التعبري#{exam.nextQuestionPage} <from-view-id>/exam-question.xhtml</from-view-id> <navigation-case> <to-view-id>#{exam.nextQuestionPage}.xhtml</to-view-id> </navigation-case>
Page Forward vs Page Redirectالفرق بني
أما عند إستخدام .يدةعند االنتقال إىل الصفحة اجلد URLاليتم تغيري الـ Page Forwardعند إستخدام توجيه الصفحة .عند اإلنتقال إىل الصفحة اجلديدة URLيتم تغيري الـ redirection Pageإعادة التوجيه
: عدة طرقلتحقيق إعاد التوجيه بشكل عملي يوجد :للزر Actionبشكل ثابت من خالل اخلاصية الطريقة األوىل
<h:form> <h:commandButton action="page1?faces-redirect=true" value="Page1" /> </h:form>
:Action Methodمن خالل القيمة اليت تعيدها ال الطريقة الثانية public String sayHello() {
if (age < 11) { helloText = "Hello " + name + "!"; } else { helloText = "Good Morning " + name + "!"; } return ("home?faces-redirect=true"); }
</ navigation-case> ضمن </ redirect>من خالل استخدام الومسة الثالثةالطريقة <navigation-rule> <from-view-id>start.xhtml</from-view-id> <navigation-case> <from-outcome>page1</from-outcome> <to-view-id>page1.xhtml</to-view-id> <redirect /> </navigation-case> </navigation-rule>
مراجع احملاضرة
1. The Java EE 6 Tutorial. http://download.oracle.com/javaee/6/tutorial/doc/javaeetutorial6.pdf
2. JSF 2.0: Explicit Page Navigation and faces-con_g.xml, available from:http://www.coreservlets.com/JSF-Tutorial/jsf2/
3. Mastering JavaServer Faces, by Bill Dudney, Jonathan Lehr, Bill Willis, and LeRoy Mattingly.
4. JSF 2.0 lecture notes by Dr. Beatrice Amrhein, available from: http://sws.bfh.ch/~amrhein/
5. JSF 2.0 Tutorial, available from: http://www.mkyong.com/jsf2/