JSP页面设计常用技术.ppt

《JSP页面设计常用技术.ppt》由会员分享，可在线阅读，更多相关《JSP页面设计常用技术.ppt（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、19.1 AppletlApplet为小应用程序，Java Applet就是使用Java语言编写的一些小应用程序，它们可以直接嵌入到网页中，并能够产生特殊的效果。l在Java Applet中，可以实现图形绘制、字体和颜色的控制、动画和声音的插入、人机交互以及网络交流等功能。lApplet提供了名为抽象窗口工具箱(Abstract Window Toolkit，AWT)的窗口环境开发工具。l含有Apple网页的HTML文件代码中带有和标记，当支持Java的网络浏览器遇到这对标记时，就将下载相应的小应用程序代码并在本地计算机上执行该Applet。lApplet由支持Java的网页浏览器下载运行，也

2、可以通过Java开发工具的applet viewer来运行。Applet程序离不开使用它的HTML文件，这个HTML文件中关于Applet的信息至少包含以下3点。1.字节码文件。这个文件名为编译后的Java文件，以.class为后缀。2.字节码文件的地址。3.在网页上显示Applet的方式。2【例例9-19-1】在JSP页面上加载Java Applet程序，在Applet显示区域中显示一幅图像，用来简单说明一下Applet在JSP中的应用方法。l1.编写编写AppletApplet程序程序 编写Applet程序picture.java，用来显示图像和文字。代码如下：package ch8_1;

3、import java.awt.*;import java.applet.*;public class picture extends Applet public void paint(Graphics g)Image pic=getImage(getCodeBase(),1.jpg);Font font=new Font(宋体,Font.BOLD,30);g.setFont(font);g.setColor(Color.blue);g.drawImage(pic,0,0,this);g.drawString(美丽的大学校园！,30,30);3l2编写编写JSPJSP程序程序 编写Applet

4、App.jsp文件，用来加载Java Applet程序。代码如下：嵌入APPLET小程序 4显示结果如下图所示：5l3.代码实现分析代码实现分析AppletApplet程序程序picture.javapicture.java 在该程序里，使用了在该程序里，使用了getImage()getImage()方法得到要显示的图像，然后用方法得到要显示的图像，然后用setFontsetFont()()方法设置了字体，方法设置了字体，setColor()setColor()设置了颜色，接着用设置了颜色，接着用drawImage()drawImage()方方法把图像画出来，最后还用法把图像画出来，最后还用d

5、rawString()drawString()写了一行文字。写了一行文字。JSPJSP程序程序AppletApp.jsp AppletApp.jsp 新建了新建了JSPJSP程序程序AppletApp.jspAppletApp.jsp，通过，通过元素加载元素加载Java Java AppletApplet程序，设置程序，设置typetype的属性为的属性为“applet”applet”；codecode的属性为的属性为“ch8_1.picture.class”ch8_1.picture.class”；heightheight的属性为的属性为446446，用来指定图像的，用来指定图像的显示高度；

6、显示高度；widthwidth的属性为的属性为580580，指定图像的显示宽度。，指定图像的显示宽度。69.2 文件上下传文件上下传l 文件上传文件上传 1.jspSmartUpload jspSmartUpload 组件的下载组件的下载 文件上传功能的实现主要依赖于JavaBean组件jspSmartUpload，此组件可以直接在网上下载，压缩包的名字是jspSmartUpload.zip。下载后，用WinZip或WinRAR将其解压缩到Tomcat的webapps目录下。解压缩后，把webapps/jspSmartUpload目录下的子目录Web-inf名字改为大写的WEB-INF，这样一

7、改jspSmartUpload类才能使用。因为Tomcat对文件名大小写敏感，它要求Web应用程序相关的类所在目录为WEB-INF，且必须是大写。接着重新启动Tomcat，这样就可以在JSP文件中使用jspSmartUpload组件了。7l2.2.编写编写JSPJSP程序程序 编写upload.htm文件，建立表单，用来选择要上传的文件；编写do_upload.jsp文件，实现文件的上传。把upload.htm和do_upload.jsp保存在webappsjspSmartUpload目录下。(1)upload.htm (1)upload.htm代码如代码如9-1.TXT9-1.TXT (2)

8、do_upload.jsp(2)do_upload.jsp代码如代码如9-2.TXT9-2.TXT 先显示upload.htm文件，点击相对应的“浏览”按钮，选择要上传的文件，显示结果下图所示：8 然后点击“上传它”按钮，显示上传成功文件的相关信息，运行结果如下图所示：9 (3)(3)代码实现分析代码实现分析 对于对于upload.htmupload.htm文件的表单，文件的表单，methodmethod属性必须为属性必须为“post”“post”，enctypeenctype属性必须为属性必须为“multipart/form-data”“multipart/form-data”，否则上传不会

9、成功。然后添加，否则上传不会成功。然后添加4 4个文件域，用于选择上个文件域，用于选择上传文件，即其传文件，即其typetype的属性为的属性为“FIFE”“FIFE”。对于对于do_upload.jspdo_upload.jsp文件，首先需要载入文件，首先需要载入“com.jspsmart.upload.*”“com.jspsmart.upload.*”的的JavaJava组件包，然后新建一组件包，然后新建一个个SmartUploadSmartUpload对象对象susu，进行初始化。，进行初始化。SmartUploadSmartUpload还提供还提供了一些上传限制的设定，如了一些上传限制

10、的设定，如setMaxFileSize()setMaxFileSize()，该方法可，该方法可以限制每个上传文件的最大长度，为字节为单位；以限制每个上传文件的最大长度，为字节为单位；setTotalMaxFileSizesetTotalMaxFileSize()()可以限制总上传数据的长度，同样也是为字节为单位。可以限制总上传数据的长度，同样也是为字节为单位。10l文件下载文件下载 上一案例上传文件后，上一案例上传文件后，webappsjspSmartUploadupload目录下已存目录下已存在在4个文件了，如下图所示：个文件了，如下图所示：11编写编写download.htmdownloa

11、d.htm文件，建立超链接，用来指向相应的下载文件处理程文件，建立超链接，用来指向相应的下载文件处理程序。编写序。编写do_download.jspdo_download.jsp文件，实现文件，实现“123.doc”“123.doc”文件的下载。文件的下载。(1)download.htm代码如下代码如下：下载文件 点击相应的链接下载 123.doc 12(2)do_download.jsp代码如下：代码如下：13 先显示运行先显示运行download.htmdownload.htm文件，显示结果如下图所示。文件，显示结果如下图所示。在页面上单击在页面上单击“123.doc”“123.doc”的

12、超链接，出现的超链接，出现“文件下载文件下载”对话框，显示对话框，显示结果如下图所示。结果如下图所示。149.3 图象自由运动图象自由运动本节主要利用本节主要利用JavaScriptJavaScript实现图象在浏览器窗口的自由运动，实现图象在浏览器窗口的自由运动，当越出边界时，从任意位置返回窗口继续自由运动。当越出边界时，从任意位置返回窗口继续自由运动。1.编写编写HTML程序程序 编写FreeMove.htm文件，实现图象的自由运动，实现代码如 9-3.TXT，显示结果如下图所示。152.代码实现分析代码实现分析(1)新建html文件，使用标记，编辑JavaScript函数。首先声明变量，

13、赋初值。指定生成5张图片，即no=5，并且设定每40毫秒刷新一次，即speed=40，同时还声明了一组数组，存放图片运动的坐标值。(2)使用Math对象的random()方法产生随机数，参与生成每张图片初始位置，从而实现真正的自由轨迹。针对不同的浏览器，分别给出确定图片运动的方法。(3)初始化5张图片(4)设置图片运动的速度(5)setTimeout(to_move(),speed);(5)在IE浏览器中由to_move()方法确定图片的运行轨迹。(6)在Netscape浏览器中由move()方法确定图片的运行轨迹。169.4 动态日历动态日历本节主要介绍如何利用本节主要介绍如何利用JavaB

14、ean实现一个能进行年、月查实现一个能进行年、月查找的日历程序。找的日历程序。1.编写编写JavaBean程序程序 建立一个建立一个BeanBean程序程序CalendarBean.javaCalendarBean.java。该。该BeanBean主要功能由主要功能由getCalendargetCalendar()()方法实现，功能包括设置当月的天数，判断大小月以及闰年的情方法实现，功能包括设置当月的天数，判断大小月以及闰年的情况，以数组存储每月的号码及况，以数组存储每月的号码及1 1号是星期几。实现代码如号是星期几。实现代码如9-4.TXT9-4.TXT2.编写编写JSP程序程序 编写编写D

15、ate.jsp文件，在文件，在JSP页面中调用该页面中调用该JavaBean的方法，实现年、的方法，实现年、月的动态查找。实现代码如月的动态查找。实现代码如9-5.TXT9-5.TXT 17运行Date.jsp文件，显示结果如图所示。图9-11显示结果18在图9-11页面上可以看出，该日历默认的日期是2006年1月，现在点击“月份“下拉列表框，选择“5月”，然后单击“提交”按钮，显示结果如图9-12所示。图9-12显示结果193代码实现分析代码实现分析(1)Bean程序程序CalendarBean.java 调用了调用了Calendar类的类的setYear()、setMonth()、get(

16、Calendar.DAY_OF_WEEK)等方法，其中等方法，其中setYear()方法和方法和setMonth()方法用于设置用户输入的年、月。编写成员函数方法用于设置用户输入的年、月。编写成员函数getCalendar()实现实现主要功能，并输出日历。在该成员函数中定义一个主要功能，并输出日历。在该成员函数中定义一个Calendar类的对象类的对象“日历日历”，并将日历设置为，并将日历设置为year年年month月月1日，注意日，注意0表示一月，依表示一月，依次类推，次类推，11表示表示12月。月。(2)JSP程序程序Date.jsp 设置设置userBean语句，语句，id属性为属性为“

17、Calendar”，scope属性为属性为“request”，class属性为属性为“ch8_3.CalendarBean”。实现代码如下：。实现代码如下：209.5 邮件发送 本例子主要介绍如何利用本例子主要介绍如何利用JavaMail API实现发送实现发送E-mail的功能。的功能。l1.JavaMail和和JAF的下载的下载 JavaMail是Sun发布的用来处理E-mail的API，但它目前还没有被加在标准的java开发工具包中，所以在使用前必须另外下载JavaMail文件。本例以JavaMail 1.1.3为例，下载JavaMail 1.1.3工具，然后解压缩javamail1_1

18、_3.zip文件，并把mail.jar文件添加到 C:j2sdk1.4.2jrelibext目录下。安装完JavaMail 1.1.3后，再安装JavaBeans Activation Framework。21l2.编写编写JSP程序程序 编写编写Email.htm文件，用来实现邮件发送的功能。编写文件，用来实现邮件发送的功能。编写Error.jsp文文件，用来处理邮件地址输入出错等情况。编写件，用来处理邮件地址输入出错等情况。编写SendOk.jsp文件，文件，当邮件发送成功后，用来显示收信人、发信人等相关信息。当邮件发送成功后，用来显示收信人、发信人等相关信息。(1)Email.htm代码

19、如代码如9-6.TXT (2)EmailSend.jsp代码如代码如9-7.TXT (3)Error.jsp代码如代码如9-8.TXT (4)SendOk.jsp代码如代码如9-9.TXT 22运行运行Email.htm文件，显示结果如图文件，显示结果如图9-13所示。所示。图9-13显示结果23在图在图9-13中，输入相应的信息，点击中，输入相应的信息，点击“发送发送”按钮后，将显按钮后，将显示如图示如图9-14所示。所示。图9-14显示结果24在图在图9-13所显示的页面上，如果忘记输入了收件人的邮件地所显示的页面上，如果忘记输入了收件人的邮件地址，点击址，点击“发送发送”按钮后，将会出现

20、如图按钮后，将会出现如图9-15所示。所示。图9-15显示结果25在图9-13所显示的页面上，如果“收件人”、“发件人”和“抄送”对话框输入的邮件地址不正确，点击“发送”按钮后，都会出现错误信息。运行画面如图9-16所示。图9-16 显示结果263代码实现分析代码实现分析(1)新建新建Email.htm文件，建立表单，设置文件，建立表单，设置action的属性为的属性为“EmailSend.jsp”，method的属性为的属性为“post”，然后添加，然后添加4个单行个单行文本框，文本框，1个多行文本域及个多行文本域及2个按钮，实现邮件编辑界面。个按钮，实现邮件编辑界面。在在Email.htm

21、文件中用文件中用JavaScript实现了一个判断函数，即对收件人实现了一个判断函数，即对收件人的内容进行判断，如果收件人的内容为空，则收件人对应的单行文本的内容进行判断，如果收件人的内容为空，则收件人对应的单行文本框获得焦点，其中框获得焦点，其中“to”为收件人对应的单行文本框的为收件人对应的单行文本框的“name”。实。实现代码如下：现代码如下：Function chkForm(theForm)if(theForm.to.value=)alert(收件人地址不能为空收件人地址不能为空);theForm.to.focus();return(false);27(2)编辑文件编辑文件EmailS

22、end.jsp，载入需要的，载入需要的java包，代码如下：包，代码如下：然后使用然后使用request.getParameter()取得表单输入的数据，对含有汉字取得表单输入的数据，对含有汉字的主题和内容使用的主题和内容使用getBytes(ISO8859_1)进行转码处理。实现代码进行转码处理。实现代码如下：如下：String to=request.getParameter(to);String from=request.getParameter(from);String cs=request.getParameter(cs);byte subjectTemp=request.getPar

23、ameter(subject).getBytes(ISO8859_1);String subject=new String(subjectTemp);byte messageTextTemp=request.getParameter(body).getBytes(ISO8859_1);String messageText=new String(messageTextTemp);28 对输入邮件地址的有效性进行判断，若不符合常规，则使用forward 语句指向出错处理程序Error.jsp，这样EmailSend.jsp文件后面的程序段将不再执行。实现代码如下：if(to.trim().indexOf()=-1)|(to.trim().length()%若输入信息无误，则使用getProperties()得到一个属性对象，设置邮件的服务器以及协议名，如果邮件服务器需要进行身份验证，则要添加：props.put(mail.smtp.auth,true);做好这些准备后，建立一个MimeMessage对象，填入适当信息，即可生成完整的电子邮件。29