Java Server Pages

Java Server Pages תכנות מתקדם 2 89-211תרגול מספר 5 תשס"ט 2009-2010 אליהו חלסצ'י

בשיעור הקודם ראינו דוגמא כיצד להפעיל Servlet שהחזיר לנו דף html כתגובה המתאימה לקלט שהמשתמש הכניס דרך form. ציינו שדף JSP גם יכול להיות דינאמי ע"י שילוב קוד java בתוכו, כאשר ההרצה נעשית בצד השרת. בתרגול היום נראה דוגמא לכך. התרגול מבוסס על ה tutorial מתוך http://www.jsptut.com/ הקדמה

תזכורת ליצירת פרויקט והפעלתו: ניצור פרויקט dynamic web חדש בשם JSPtest תחת WebContent ניצור קובץ index.jsp שעליו נבצע את רוב ההדגמות. לאחר ייצוא הפרויקט לקובץ war והפעלת tomcat נוכל לראות את התוצאות תחת http://localhost:8080/JSPtest/ + שם הקובץ הרלוונטי הקדמה

נתחיל עם דוגמא פשוטה הכותבת את התאריך והשעה הנוכחיים. ניתן לשתול expressions של java בתוך“<%= … %>” בדוגמא קראנו ליצירה של אובייקט חדש מסוג Date שנמצא תחת java.util (קראנו לו באופן מפורש ללא import) אוטומטית תבוצע קריאה ל .toString() ובדף נקבל:Hello! The time is now Sat May 09 20:52:26 IDT 2009 expressions <HTML> <BODY> Hello! The time is now <%=new java.util.Date() %> </BODY> </HTML>

חוץ מלשתול ביטויים של java בתוך קוד ה html ניתן גם לשתול בלוקים שלמים של קוד ב java הנקראים scriptlets. נמצאים בתוך “<% … %>” הקריאה להדפסה מתוךSystem תיראה על מסךהשרת – נוח לבדיקות. יצרנו אובייקט חדש מסוגDate למשתנה date. scriptlet יכול גם לתרום קודhtml ע"י out.println ויכול לקבל מידע רב דרךהמשתנה request. scriptlets <HTML> <BODY> <% // This scriptlet declares and initializes "date" System.out.println( "Evaluating date now" ); java.util.Date date = new java.util.Date(); %> Hello! The time is now <% out.println( date ); out.println( "<BR>Your machine's address is " ); out.println( request.getRemoteHost()); %> </BODY> </HTML> Hello! The time is now Sat May 09 20:53:34 IDT 2009Your machine's address is 127.0.0.1

ניתן גם לערבב קוד html עם scriptlets במקום להדפיס אותו דרך out. טבלה ב html נבנית בתוך התגיות<table> … </table> כאשר כל תא נכנסתחת התגיות <td>…</td> והתגית <tr>משמשת לירידת שורה בטבלה. בדוגמא שלפנינו "חתכנו" קוד html של טבלהוהכנסנו בתוכו scriplet שמבצע לולאת for. את ה scriplt חתכנו והכנסנו בפנים קוד htmlשמצייר את תוכן הטבלה לפי i. התוצאה: scriptlets <HTML> <BODY> <TABLEBORDER=2> <% int n=5; for(int i=0;i<n;i++){ %> <TR> <TD>Number</TD> <TD><%= i+1 %></TD> </TR> <% } %> </TABLE> </BODY> </HTML>

בדוגמא הראשונה ביצענו קריאה ל Date באופן מפורש ללא import, ביצוע import הוא מעט שונה ומתבצע דרך directive – תחת “<%@ …%>” בדוגמא page directive המבצע import ל java.util.* כדי לבצע יותר מ import אחד ישלהפריד באמצעות "," לדוגמא:<%@ page import="java.util.*,java.text.*" %> ניתן גם לצרף קבצים שלמים של JSPוהקוד הופך ליותר קריא ונוח. directives <%@pageimport="java.util.*"%> <HTML> <BODY> <% Date date = new Date(); %> Hello! The time is now <%= date %> </BODY> </HTML> <HTML> <BODY> Going to include hello.jsp...<BR> <%@includefile="hello.jsp"%> </BODY> </HTML>

ה JSP שלנו מהווה למעשה מחלקה, וכל ה scriptlets שאנו כותבים נכנסים למתודה אחת שבתוך מחלקה זו. אנו יכולים להגדיר עוד משתנים ומתודות ע"י:“<%! … %>” ולהשתמש בהם בתוךה scrpitlets השונים. בדוגמא שלפנינו חישוב התאריך הפעםמתבצע רק פעם אחת כשהדף עולהולא בכל פעם שמרעננים אותו. וזאת משום שזו "הכרזה" וככזו היא מחושבת רק כשהדף נטען. declarations <%@ pageimport="java.util.*"%> <HTML> <BODY> <%! Date theDate = new Date(); Date getDate(){ return theDate; } %> Hello! The time is now <%= getDate() %> </BODY> </HTML> שאלה: מדוע לא מומלץ להשתמש בשיטה זו כדי להכריז על משתנים ולהעביר מידע בין דפים? תשובה: מכיוון שאנו בסביבה מרובת threads – כמה threads שפועלים על אותו ה instanceיכולים להפריע אחד לשני ולגרום לבעיות, הסנכרון אפשרי אך יכביד על פעולות המערכת. כדאי להעביר מידע דרך האובייקטים request או session.

הגיוני שהמשתמש יעבור דרך כמה דפים בהם תהיה לו אינטראקציה עם המערכת. כדי שנוכל לשייך מידע עבור כל משתמש נשתמש ב “session”s. session הוא אובייקט מידע הנוצר עבור כל משתמש, וניתן להכניס בו מידע ולחלץ ממנו מידע כבכל מבנה נתונים. לאחר timeout מסוים המידע נמחק. sessions index.jsp SaveName.jsp NextPage.jsp <HTML> <BODY> Hello, <%=session.getAttribute("theName")%> </BODY> </HTML> <HTML><BODY> <FORMMETHOD=POSTACTION="SaveName.jsp"> What's your name? <INPUTTYPE=TEXTNAME=usernameSIZE=20> <P><INPUTTYPE=SUBMIT> </FORM> </BODY></HTML> <% String name=request.getParameter("username"); session.setAttribute("theName",name); %> <HTML><BODY> <AHREF="NextPage.jsp">Continue</A> </BODY></HTML> Continue Hello, eli

עיבוד טפסים הופך לפשוט ביותר ע"י שימוש במחלקה בה מתודות ה setters וה getters בעלות שמות המתאמים לשמות השדות בטופס. כעת נרחיב את הדוגמא הקודמת כדי לראות כיצד. נוסיף שדות לטופס שלנו בקובץ index.jsp : עיבוד טפסים <HTML> <BODY> <FORMMETHOD=POSTACTION="SaveName.jsp"> What's your name? <INPUTTYPE=TEXTNAME=usernameSIZE=20><BR> What's your e-mail address? <INPUTTYPE=TEXTNAME=emailSIZE=20><BR> What's your age? <INPUTTYPE=TEXTNAME=ageSIZE=4> <P><INPUTTYPE=SUBMIT> </FORM> </BODY> </HTML>

תחת src ניצור package חדש בשם user ובתוכו מחלקה חדשה בשםUserData. לכל שדה בטופס נתאיםמתודות set ו get. למשל עבור השדה ageנתאים במדויק את המתודותsetAge ו getAge עיבוד טפסים package user; publicclass UserData { String username; String email; intage; // setters publicvoid setUsername( String value ){ username = value; } publicvoid setEmail( String value ){ email = value; } publicvoid setAge( int value ){ age = value; } // getters public String getUsername() { returnusername; } public String getEmail() { returnemail; } publicint getAge() { returnage; } }

כעת נעדכן את SaveName.jsp ניתן לרשום הגדרות בתג אחד ע"י: “<jsp:tag …/>” נשתמש ב useBean כדי לחפש מופע של UserData בתוך ה session ונקרא לו “user” (אם לא היה כזה אז נוצר חדש, ואם היה אז הוא מעודכן) נשתמש ב setProperty כדי שאוטומטית כל המידע שב session יוכנסלמתודות ה set של user. ההתאמה היא ע"פהשמות. עיבוד טפסים <jsp:useBeanid="user"class="user.UserData"scope="session"/> <jsp:setPropertyname="user"property="*"/> <HTML> <BODY> <AHREF="NextPage.jsp">Continue</A> </BODY> </HTML>

כעת נעדכן את NextPage.jsp נשתמש שוב ב useBean כדי לחפש מופע של UserData בתוך ה session. כעת user, המופע של המחלקה UserDate, כבר מכיל את המידע לאחר שהוכנס אוטומטית ע"י מתודות ה setters. וכעת ניתן ע"י מתודות ה getters לגשת אל המידע מכל מקום בקוד. עיבוד טפסים <jsp:useBeanid="user"class="user.UserData"scope="session"/> <HTML><BODY> You entered<BR> Name: <%= user.getUsername() %><BR> Email: <%= user.getEmail() %><BR> Age: <%= user.getAge() %><BR> </BODY></HTML> You enteredName: eliEmail: eli.kh81@gmail.comAge: 28

כעת נראה דוגמא לדף שמפעיל משימה כלשהי בצד השרת, מקבל דיווח על אחוז ההתקדמות שלה ומציג progress bar בהתאם. הקבצים שנבנה: MydemoTask.java שידמה משימה שלוקחת זמן StartTask.jsp שיקרא להפעלת המשימה ב Thread run.jsp שיפעיל את StartTask.jsp ויקבל עדכונים על התקדמות המשימה. דוגמא חדשה

MyDemoTask.java: נממש את Runnable. במתודה run נריץ את progress מ 1 עד 100 תוך כדי שינה של 500ms. getProgress() תחזיר את progress. StartTask.jsp : נשתמש ב useBean כדי למצואב session מופע של MyDemoTaskשנקרא “task”. ניצור Thread חדש עםtask ונקרא להפעלתו עם start. נעביר את הדפדפן ל run.jsp ע"י forward. המשך package demoTask; publicclass MyDemoTask implements Runnable{ intprogress; publicvoid run(){ progress=0; while (progress<100){ progress++; try { Thread.sleep(500); } catch (InterruptedException e) {} } } publicint getProgress(){returnprogress;} } <jsp:useBeanid="task"class="demoTask.MyDemoTask"scope="session"/> <%new Thread(task).start(); %> <jsp:forwardpage="run.jsp"/>

המשך run.jsp: לדף זה ייכנס המשתמש. עם כניסתו הראשונה נוצר מופע של MyDemoTask בשם task בגלל השימוש ב useBean <jsp:useBeanid="task"class="demoTask.MyDemoTask"scope="session"/> <html> <head> <metahttp-equiv="refresh"content="1;url=run.jsp"> </head> <body> <formaction="StartTask.jsp"method="post"> <inputtype="submit"value="start"> </form> <%int percent=task.getProgress(); %> <br><%= percent %> % done.<br> <tablewidth="70%"border="1"cellpadding="0"cellspacing="2"> <tr> <%for(int i=2;i<=percent;i+=2){ %> <tdwidth="2%"bgcolor="#00DD00"> </td> <% } %> <%for (int i=100;i>percent;i-=2){ %> <tdwidth="2%"> </td> <% } %> </tr> </table> </body></html>

המשך run.jsp: לדף זה ייכנס המשתמש. עם כניסתו הראשונה נוצר מופע של MyDemoTask בשם task בגלל השימוש ב useBean התגית meta קוראת לרענון הדף בכל שנייה אחת. <jsp:useBeanid="task"class="demoTask.MyDemoTask"scope="session"/> <html> <head> <metahttp-equiv="refresh"content="1;url=run.jsp"> </head> <body> <formaction="StartTask.jsp"method="post"> <inputtype="submit"value="start"> </form> <%int percent=task.getProgress(); %> <br><%= percent %> % done.<br> <tablewidth="70%"border="1"cellpadding="0"cellspacing="2"> <tr> <%for(int i=2;i<=percent;i+=2){ %> <tdwidth="2%"bgcolor="#00DD00"> </td> <% } %> <%for (int i=100;i>percent;i-=2){ %> <tdwidth="2%"> </td> <% } %> </tr> </table> </body></html>

המשך run.jsp: לדף זה ייכנס המשתמש. עם כניסתו הראשונה נוצר מופע של MyDemoTask בשם task בגלל השימוש ב useBean התגית meta קוראת לרענון הדף בכל שנייה אחת. הטופס מפעיל את StartTask.jsp שמריצה את run של task ב Thread חדש ומחזירה את הדפדפן לכאן. <jsp:useBeanid="task"class="demoTask.MyDemoTask"scope="session"/> <html> <head> <metahttp-equiv="refresh"content="1;url=run.jsp"> </head> <body> <formaction="StartTask.jsp"method="post"> <inputtype="submit"value="start"> </form> <%int percent=task.getProgress(); %> <br><%= percent %> % done.<br> <tablewidth="70%"border="1"cellpadding="0"cellspacing="2"> <tr> <%for(int i=2;i<=percent;i+=2){ %> <tdwidth="2%"bgcolor="#00DD00"> </td> <% } %> <%for (int i=100;i>percent;i-=2){ %> <tdwidth="2%"> </td> <% } %> </tr> </table> </body></html>

המשך run.jsp: לדף זה ייכנס המשתמש. עם כניסתו הראשונה נוצר מופע של MyDemoTask בשם task בגלל השימוש ב useBean התגית meta קוראת לרענון הדף בכל שנייה אחת. הטופס מפעיל את StartTask.jsp שמריצה את run של task ב Thread חדש ומחזירה את הדפדפן לכאן. מקבלים את העדכון מ task לתוך percent ומדפיסים אותו ב html. <jsp:useBeanid="task"class="demoTask.MyDemoTask"scope="session"/> <html> <head> <metahttp-equiv="refresh"content="1;url=run.jsp"> </head> <body> <formaction="StartTask.jsp"method="post"> <inputtype="submit"value="start"> </form> <%int percent=task.getProgress(); %> <br><%= percent %> % done.<br> <tablewidth="70%"border="1"cellpadding="0"cellspacing="2"> <tr> <%for(int i=2;i<=percent;i+=2){ %> <tdwidth="2%"bgcolor="#00DD00"> </td> <% } %> <%for (int i=100;i>percent;i-=2){ %> <tdwidth="2%"> </td> <% } %> </tr> </table> </body></html>

המשך run.jsp: לדף זה ייכנס המשתמש. עם כניסתו הראשונה נוצר מופע של MyDemoTask בשם task בגלל השימוש ב useBean התגית meta קוראת לרענון הדף בכל שנייה אחת. הטופס מפעיל את StartTask.jsp שמריצה את run של task ב Thread חדש ומחזירה את הדפדפן לכאן. מקבלים את העדכון מ task לתוך percent ומדפיסים אותו ב html. ניצור טבלה בת 50 תאים המקבילה ל 100% כאשר ע"פ percent נצבע תאים ברקע ירוק. <jsp:useBeanid="task"class="demoTask.MyDemoTask"scope="session"/> <html> <head> <metahttp-equiv="refresh"content="1;url=run.jsp"> </head> <body> <formaction="StartTask.jsp"method="post"> <inputtype="submit"value="start"> </form> <%int percent=task.getProgress(); %> <br><%= percent %> % done.<br> <tablewidth="70%"border="1"cellpadding="0"cellspacing="2"> <tr> <%for(int i=2;i<=percent;i+=2){ %> <tdwidth="2%"bgcolor="#00DD00"> </td> <% } %> <%for (int i=100;i>percent;i-=2){ %> <tdwidth="2%"> </td> <% } %> </tr> </table> </body></html>

עם הלחיצה על start מתבצעת הפנייה ל StartTask.jsp שמריצה את run של task ב Thread נפרד וחוזרת ל run.jsp. run.jsp המתעדכנת בכל שנייה, מקבלת את העדכון מ task ובונה לפיו טבלה שתאיה מייצגים עדכון זה. התוצאה היא שבכל שנייה עוד תא ייצבע בירוק ויורה על אחוז ההתקדמות. תוצאה

כתבו קובץ JSP שיעבור לדף הבית של אתר הקורס (אפשר לשלוח הוראות לדפדפן ע"י המשתנה response) בצעו את תרגילי ההטמעה מהשיעור הקודם רק ע"י קובצי JSP. (ללא servlet) שפרו את הדוגמא האחרונה כך ש: עדכון בכל שנייה יהיה רק אם המשימה מופעלת. הוסיפו כפתור שעוצר \ ממשיך את המשימה. הוסיפו כפתור שמפסיק את המשימה. הטמעה

Java Server Pages