Java Server Pages

הקדמהJSPקוד

עיבוד טפסיםprogress barדוגמת

הטמעה

– תרגול 2 תכנות מתקדם 89-2115

Java Server PagesJava Server Pages

אליהו חלסצ'י

89-21189-211 22תכנות מתקדם תכנות מתקדם 5תרגול מספר

2009-2010תשס"ט

הקדמהJSPקוד


הטמעה


הקדמהבשיעור הקודם ראינו דוגמא כיצד להפעיל •

Servlet שהחזיר לנו דף html כתגובה המתאימה לקלט שהמשתמש הכניס דרך

form. גם יכול להיות דינאמי ע"י JSPציינו שדף •

בתוכו, כאשר ההרצה נעשית javaשילוב קוד בצד השרת.

בתרגול היום נראה דוגמא לכך.•//:http מתוך tutorialהתרגול מבוסס על ה •

www.jsptut.com/

הקדמהJSPקוד


הטמעה


הקדמה

תזכורת ליצירת פרויקט והפעלתו:

חדש בשם dynamic webניצור פרויקט •JSPtest

index.jsp ניצור קובץ WebContentתחת •שעליו נבצע את רוב ההדגמות.

והפעלת warלאחר ייצוא הפרויקט לקובץ •tomcat נוכל לראות את התוצאות תחת http://

localhost:8080/JSPtest/ שם הקובץ + הרלוונטי

הקדמהJSPקוד


הטמעה


expressionsנתחיל עם דוגמא פשוטה הכותבת את התאריך והשעה •

הנוכחיים. בתוךjava של expressionsניתן לשתול •

”>% … =%<“ Dateבדוגמא קראנו ליצירה של אובייקט חדש מסוג •

)קראנו לו באופן מפורש ללא java.utilשנמצא תחת import)

ובדף נקבל:)(toString.אוטומטית תבוצע קריאה ל •

Hello! The time is now Sat May 09 20:52:26 IDT 2009 <HTML>

<BODY>

Hello! The time is now <%= new java.util.Date() %>

</BODY>

</HTML>

הקדמהJSPקוד


הטמעה


scriptlets ניתן גם html בתוך קוד ה javaחוץ מלשתול ביטויים של •

.scriptlets הנקראים javaלשתול בלוקים שלמים של קוד ב “>% … %<”נמצאים בתוך •הקריאה להדפסה מתוך•

Systemתיראה על מסך השרת – נוח לבדיקות.

יצרנו אובייקט חדש מסוג•Date למשתנה date.

•scriptletיכול גם לתרום קוד html ע"י out.println

ויכול לקבל מידע רב דרך•.requestהמשתנה

<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 2009 Your machine's address is 127.0.0.1

הקדמהJSPקוד


הטמעה


scriptlets במקום להדפיס scriptlets עם htmlניתן גם לערבב קוד •

.outאותו דרך נבנית בתוך התגיותhtmlטבלה ב •

<table< … >/table>כאשר כל תא נכנס <tr> והתגית <td<…>/td>תחת התגיות

משמשת לירידת שורה בטבלה. של טבלהhtmlבדוגמא שלפנינו "חתכנו" קוד •

.for שמבצע לולאת scripletוהכנסנו בתוכו html חתכנו והכנסנו בפנים קוד scripltאת ה •

.iשמצייר את תוכן הטבלה לפי התוצאה:•

<HTML>

<BODY>

<TABLE BORDER=2>

<%

int n=5;

for(int i=0;i<n;i++){

%>

<TR>

<TD>Number</TD>

<TD><%= i+1 %></TD>

</TR>

<%

}

%>

</TABLE>

</BODY>

</HTML>

הקדמהJSPקוד


הטמעה


directives באופן מפורש Dateבדוגמא הראשונה ביצענו קריאה ל •

הוא מעט שונה ומתבצע import, ביצוע importללא “>%@ …%<” – תחת directiveדרך

המבצע page directiveבדוגמא •import ל java.util*.

אחד ישimportכדי לבצע יותר מ •להפריד באמצעות "," לדוגמא:

@%<page import="java.util.*,java.text >% "*.

JSPניתן גם לצרף קבצים שלמים של •והקוד הופך ליותר קריא ונוח.

<%@ page import="java.util.*" %>

<HTML>

<BODY>

<%

Date date = new Date();

%>

Hello! The time is now <%= date %>

</BODY>

</HTML>

<HTML>

<BODY>

Going to include hello.jsp...<BR>

<%@ include file="hello.jsp" %>

</BODY>

</HTML>

הקדמהJSPקוד


הטמעה


declarations scriptlets שלנו מהווה למעשה מחלקה, וכל ה JSPה •

שאנו כותבים נכנסים למתודה אחת שבתוך מחלקה זו.אנו יכולים להגדיר עוד משתנים ומתודות ע"י:•

ולהשתמש בהם בתוך“>%! … %<” השונים.scrpitletsה

בדוגמא שלפנינו חישוב התאריך הפעם•מתבצע רק פעם אחת כשהדף עולה

ולא בכל פעם שמרעננים אותו.וזאת משום שזו "הכרזה" וככזו היא •

מחושבת רק כשהדף נטען.

<%@ page import="java.util.*" %>

<HTML>

<BODY>

<%!

Date theDate = new Date();

Date getDate() {

return theDate;

}

%>

Hello! The time is now <%= getDate() %>

</BODY>

</HTML>

: מדוע לא מומלץ להשתמש בשיטה זו כדי להכריז על משתנים ולהעביר מידע בין דפים?שאלהinstance שפועלים על אותו ה threads – כמה threads: מכיוון שאנו בסביבה מרובת תשובה

יכולים להפריע אחד לשני ולגרום לבעיות, הסנכרון אפשרי אך יכביד על פעולות המערכת..session או requestכדאי להעביר מידע דרך האובייקטים

הקדמהJSPקוד


הטמעה


sessionsהגיוני שהמשתמש יעבור דרך כמה דפים בהם תהיה לו •

אינטראקציה עם המערכת.כדי שנוכל לשייך מידע עבור כל משתמש נשתמש ב •

“session”s.•session ,הוא אובייקט מידע הנוצר עבור כל משתמש

וניתן להכניס בו מידע ולחלץ ממנו מידע כבכל מבנה נתונים.

מסוים המידע נמחק.timeoutלאחר •<HTML><BODY>

<FORM METHOD=POST ACTION="SaveName.jsp">

What's your name?

<INPUT TYPE=TEXT NAME=username SIZE=20>

<P><INPUT TYPE=SUBMIT>

</FORM>

</BODY></HTML>

<%

String name=request.getParameter("username");

session.setAttribute("theName",name);

%>

<HTML><BODY>

<A HREF="NextPage.jsp">Continue</A>

</BODY></HTML>

<HTML>

<BODY>

Hello, <%=session.getAttribute("theName")%>

</BODY>

</HTML>

Continue Hello, eli

index.jspindex.jsp SaveName.jspSaveName.jsp NextPage.jspNextPage.jsp

הקדמהJSPקוד


הטמעה


עיבוד טפסיםעיבוד טפסים הופך לפשוט ביותר ע"י שימוש •

getters וה settersבמחלקה בה מתודות ה בעלות שמות המתאמים לשמות השדות

בטופס.

כעת נרחיב את הדוגמא הקודמת כדי לראות •כיצד.

:index.jspנוסיף שדות לטופס שלנו בקובץ •

<HTML>

<BODY>

<FORM METHOD=POST ACTION="SaveName.jsp">

What's your name? <INPUT TYPE=TEXT NAME=username SIZE=20><BR>

What's your e-mail address? <INPUT TYPE=TEXT NAME=email SIZE=20><BR>

What's your age? <INPUT TYPE=TEXT NAME=age SIZE=4>

<P><INPUT TYPE=SUBMIT>

</FORM>

</BODY>

</HTML>

הקדמהJSPקוד


הטמעה


עיבוד טפסים ובתוכו user חדש בשם package ניצור srcתחת •

מחלקה חדשה בשםUserData.

לכל שדה בטופס נתאים•.get ו setמתודות

ageלמשל עבור השדה •נתאים במדויק את המתודות

setAge ו getAge

package user;

public class UserData {

String username;

String email;

int age;

// setters

public void setUsername( String value ){

username = value;

}

public void setEmail( String value ){

email = value;

}

public void setAge( int value ){

age = value;

}

// getters

public String getUsername() { return username; }

public String getEmail() { return email; }

public int getAge() { return age; }

}

הקדמהJSPקוד


הטמעה


עיבוד טפסיםSaveName.jspכעת נעדכן את •

…/<”jsp:tag“>ניתן לרשום הגדרות בתג אחד ע"י: •

כדי לחפש מופע של useBeanנשתמש ב •UserData בתוך ה session ונקרא לו “user” אם(

לא היה כזה אז נוצר חדש, ואם היה אז הוא מעודכן(

כדי שאוטומטית כל המידע setPropertyנשתמש ב •.user של setלמתודות ה יוכנסsessionשב

ההתאמה היא ע"פ•השמות.

<jsp:useBean id="user" class="user.UserData" scope="session"/>

<jsp:setProperty name="user" property="*"/>

<HTML>

<BODY>

<A HREF="NextPage.jsp">Continue</A>

</BODY>

</HTML>

הקדמהJSPקוד


הטמעה


עיבוד טפסיםNextPage.jspכעת נעדכן את •

כדי לחפש מופע של useBeanנשתמש שוב ב •UserData בתוך ה session.

, כבר UserDate, המופע של המחלקה userכעת •מכיל את המידע לאחר שהוכנס אוטומטית ע"י

.settersמתודות ה

לגשת אל המידע gettersוכעת ניתן ע"י מתודות ה • </"jsp:useBean id="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: [email protected]: 28

הקדמהJSPקוד


הטמעה


דוגמא חדשהכעת נראה דוגמא לדף שמפעיל משימה כלשהי •

בצד השרת, מקבל דיווח על אחוז ההתקדמות שלה בהתאם.progress barומציג

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

התקדמות המשימה.

הקדמהJSPקוד


הטמעה


המשךMyDemoTask.java:

.Runnableנממש את •

עד1 מ progress נריץ את runבמתודה •.500ms תוך כדי שינה של 100

•getProgress)( תחזיר את progress.

StartTask.jsp :

כדי למצואuseBeanנשתמש ב •MyDemoTask מופע של sessionב

.”task“שנקרא

חדש עםThreadניצור •task ונקרא להפעלתו עם start.

.forward ע"י run.jspנעביר את הדפדפן ל •

package demoTask;

public class MyDemoTask implements Runnable{

int progress;

public void run(){

progress=0;

while (progress<100){

progress++;

try {

Thread.sleep(500);

} catch (InterruptedException e) {}

}

}

public int getProgress(){return progress;}

}

<jsp:useBean id="task" class="demoTask.MyDemoTask" scope="session"/>

<% new Thread(task).start(); %>

<jsp:forward page="run.jsp"/>

הקדמהJSPקוד


הטמעה


המשך<jsp:useBean id="task" class="demoTask.MyDemoTask" scope="session"/>

<html>

<head>

<meta http-equiv="refresh" content="1;url=run.jsp">

</head>

<body>

<form action="StartTask.jsp" method="post">

<input type="submit" value="start">

</form>

<%int percent=task.getProgress(); %>

<br><%= percent %> % done.<br>

<table width="70%" border="1" cellpadding="0" cellspacing="2">

<tr>

<% for(int i=2;i<=percent;i+=2){ %>

<td width="2%" bgcolor="#00DD00"> </td>

<% } %>

<% for (int i=100;i>percent;i-=2){ %>

<td width="2%"> </td>

<% } %>

</tr>

</table>

</body></html>

run.jsp:לדף זה ייכנס המשתמש.

עם כניסתו הראשונה נוצר מופע של MyDemoTask בשם task בגלל

useBeanהשימוש ב

הקדמהJSPקוד


הטמעה



<html>

<head>


</head>

<body>



</form>




<tr>



<% } %>



<% } %>

</tr>

</table>

</body></html>




קוראת לרענון הדף metaהתגית בכל שנייה אחת.

הקדמהJSPקוד


הטמעה



<html>

<head>


</head>

<body>



</form>




<tr>



<% } %>



<% } %>

</tr>

</table>

</body></html>





StartTask.jspהטופס מפעיל את ב task של runשמריצה את

Thread חדש ומחזירה את הדפדפן לכאן.

הקדמהJSPקוד


הטמעה



<html>

<head>


</head>

<body>



</form>




<tr>



<% } %>



<% } %>

</tr>

</table>

</body></html>







לתוך taskמקבלים את העדכון מ percent ומדפיסים אותו ב html.

הקדמהJSPקוד


הטמעה



<html>

<head>


</head>

<body>



</form>




<tr>



<% } %>



<% } %>

</tr>

</table>

</body></html>







לתוך taskמקבלים את העדכון מ percent ומדפיסים אותו ב html.

תאים המקבילה 50ניצור טבלה בת נצבע percent כאשר ע"פ 100%ל

תאים ברקע ירוק.

הקדמהJSPקוד


הטמעה


תוצאה מתבצעת הפנייה ל startעם הלחיצה על •

StartTask.jsp שמריצה את run של task ב Thread נפרד וחוזרת ל run.jsp.

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

התוצאה היא שבכל שנייה עוד תא ייצבע בירוק •ויורה על אחוז ההתקדמות.

הקדמהJSPקוד


הטמעה


הטמעה שיעבור לדף הבית של אתר JSPכתבו קובץ •

הקורס )אפשר לשלוח הוראות לדפדפן ע"י (responseהמשתנה

בצעו את תרגילי ההטמעה מהשיעור הקודם •(servlet. )ללא JSPרק ע"י קובצי

שפרו את הדוגמא האחרונה כך ש:•עדכון בכל שנייה יהיה רק אם המשימה מופעלת.–הוסיפו כפתור שעוצר \ ממשיך את המשימה.–הוסיפו כפתור שמפסיק את המשימה.–

Java Server Pages

Documents

Transcript of Java Server Pages