《jsp页面设计常用技术》由会员分享,可在线阅读,更多相关《jsp页面设计常用技术(29页珍藏版)》请在金锄头文库上搜索。
1、1,第9章 JSP页面设计常用技术,2,9.1 Applet,Applet为小应用程序,Java Applet就是使用Java语言编写的一些小应用程序,它们可以直接嵌入到网页中,并能够产生特殊的效果。 在Java Applet中,可以实现图形绘制、字体和颜色的控制、动画和声音的插入、人机交互以及网络交流等功能。 Applet提供了名为抽象窗口工具箱(Abstract Window Toolkit,AWT)的窗口环境开发工具。 含有Apple网页的HTML文件代码中带有和标记,当支持Java的网络浏览器遇到这对标记时,就将下载相应的小应用程序代码并在本地计算机上执行该Applet。 Applet
2、由支持Java的网页浏览器下载运行,也可以通过Java开发工具的applet viewer来运行。Applet程序离不开使用它的HTML文件,这个HTML文件中关于Applet的信息至少包含以下3点。 1.字节码文件。这个文件名为编译后的Java文件,以.class为后缀。 2.字节码文件的地址。 3.在网页上显示Applet的方式。,3,【例9-1】在JSP页面上加载Java Applet程序,在Applet显示区域中显示一幅图像,用来简单说明一下Applet在JSP中的应用方法。 1. 编写Applet程序 编写Applet程序picture.java,用来显示图像和文字。代码如下: pa
3、ckage ch8_1; 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)
4、; ,4,2编写JSP程序 编写AppletApp.jsp文件,用来加载Java Applet程序。代码如下: 嵌入APPLET小程序 ,5,显示结果如下图所示:,6,3. 代码实现分析 Applet程序picture.java 在该程序里,使用了getImage()方法得到要显示的图像,然后用setFont()方法设置了字体,setColor()设置了颜色,接着用drawImage()方法把图像画出来,最后还用drawString()写了一行文字。 JSP程序AppletApp.jsp 新建了JSP程序AppletApp.jsp,通过元素加载Java Applet程序,设置type的属性为“
5、applet”;code的属性为“ch8_1.picture.class”; height的属性为446,用来指定图像的显示高度;width的属性为580,指定图像的显示宽度。,7,9.2 文件上下传,9.2.1文件上传 1. jspSmartUpload 组件的下载 文件上传功能的实现主要依赖于JavaBean组件jspSmartUpload,此组件可以直接在网上下载,压缩包的名字是jspSmartUpload.zip。下载后,用WinZip或WinRAR将其解压缩到Tomcat的webapps目录下。解压缩后,把webapps/jspSmartUpload目录下的子目录Web-inf名字改
6、为大写的WEB-INF,这样一改jspSmartUpload类才能使用。因为Tomcat对文件名大小写敏感,它要求Web应用程序相关的类所在目录为WEB-INF,且必须是大写。接着重新启动Tomcat,这样就可以在JSP文件中使用jspSmartUpload组件了。,8,2.编写JSP程序 编写upload.htm文件,建立表单,用来选择要上传的文件;编写do_upload.jsp文件,实现文件的上传。把upload.htm和do_upload.jsp保存在webappsjspSmartUpload目录下。 (1) upload.htm代码如9-1.TXT (2) do_upload.jsp代
7、码如9-2.TXT 先显示upload.htm文件,点击相对应的“浏览”按钮,选择要上传的文件,显示结果下图所示:,9,然后点击“上传它”按钮,显示上传成功文件的相关信息,运行结果如下图所示:,10,(3) 代码实现分析 对于upload.htm文件的表单,method属性必须为“post”,enctype属性必须为“multipart/form-data”,否则上传不会成功。然后添加4个文件域,用于选择上传文件,即其type的属性为“FIFE”。 对于do_upload.jsp文件,首先需要载入“com.jspsmart.upload.*”的Java组件包,然后新建一个SmartUpload
8、对象su,进行初始化。SmartUpload还提供了一些上传限制的设定,如setMaxFileSize(),该方法可以限制每个上传文件的最大长度,为字节为单位;setTotalMaxFileSize()可以限制总上传数据的长度,同样也是为字节为单位。,11,9.2.2文件下载 上一案例上传文件后,webappsjspSmartUploadupload目录下已存在4个文件了,如下图所示:,12,编写download.htm文件,建立超链接,用来指向相应的下载文件处理程序。编写do_download.jsp文件,实现“123.doc”文件的下载。 (1)download.htm代码如下: 下载文件
9、 点击相应的链接下载 123.doc ,13,(2) do_download.jsp代码如下: ,14,先显示运行download.htm文件,显示结果如下图所示。,在页面上单击“123.doc”的超链接,出现“文件下载”对话框,显示结果如下图所示。,15,9.3 图象自由运动,本节主要利用JavaScript实现图象在浏览器窗口的自由运动,当越出边界时,从任意位置返回窗口继续自由运动。 1.编写HTML程序 编写FreeMove.htm文件,实现图象的自由运动,实现代码如 9-3.TXT,显示结果如下图所示。,16,2. 代码实现分析 (1)新建html文件,使用标记,编辑JavaScrip
10、t函数。首先声明变量,赋初值。指定生成5张图片,即no=5,并且设定每40毫秒刷新一次,即speed=40,同时还声明了一组数组,存放图片运动的坐标值。 (2)使用Math对象的random()方法产生随机数,参与生成每张图片初始位置,从而实现真正的自由轨迹。针对不同的浏览器,分别给出确定图片运动的方法。 (3) 初始化5张图片 设置图片运动的速度 setTimeout(“to_move()“, speed); (5) 在IE浏览器中由to_move()方法确定图片的运行轨迹。 (6) 在Netscape浏览器中由move()方法确定图片的运行轨迹。,17,9.4 动态日历,本节主要介绍如何利
11、用JavaBean实现一个能进行年、月查找的日历程序。 1.编写JavaBean程序 建立一个Bean程序CalendarBean.java。该Bean主要功能由getCalendar()方法实现,功能包括设置当月的天数,判断大小月以及闰年的情况,以数组存储每月的号码及1号是星期几。实现代码如9-4.TXT 2.编写JSP程序 编写Date.jsp文件,在JSP页面中调用该JavaBean的方法,实现年、月的动态查找。实现代码如9-5.TXT,18,运行Date.jsp文件,显示结果如图所示。,图9-11显示结果,19,在图9-11页面上可以看出,该日历默认的日期是2006年1月,现在点击“月
12、份“下拉列表框,选择“5月”,然后单击“提交”按钮,显示结果如图9-12所示。,图9-12显示结果,20,3代码实现分析 (1) Bean程序CalendarBean.java 调用了Calendar类的setYear()、setMonth()、get(Calendar.DAY_OF_WEEK) 等方法,其中setYear()方法和setMonth()方法用于设置用户输入的年、月。编写成员函数getCalendar()实现主要功能,并输出日历。在该成员函数中定义一个Calendar类的对象“日历”,并将日历设置为year年month月1日,注意0表示一月,依次类推,11表示12月。 (2) J
13、SP程序Date.jsp 设置userBean语句,id属性为“Calendar” ,scope属性为“request”,class属性为“ch8_3.CalendarBean”。实现代码如下: ,21,9.5 邮件发送,本例子主要介绍如何利用JavaMail API实现发送E-mail的功能。 1. JavaMail和JAF的下载 JavaMail是Sun发布的用来处理E-mail的API,但它目前还没有被加在标准的java开发工具包中,所以在使用前必须另外下载JavaMail文件。 本例以JavaMail 1.1.3为例,下载JavaMail 1.1.3工具,然后解压缩javamail1_
14、1_3.zip文件,并把mail.jar文件添加到 C:j2sdk1.4.2jrelibext目录下。安装完JavaMail 1.1.3后,再安装JavaBeans Activation Framework。,22,2.编写JSP程序 编写Email.htm文件,用来实现邮件发送的功能。编写Error.jsp文件,用来处理邮件地址输入出错等情况。编写SendOk.jsp文件,当邮件发送成功后,用来显示收信人、发信人等相关信息。 (1) Email.htm代码如9-6.TXT (2) EmailSend.jsp代码如9-7.TXT (3) Error.jsp代码如9-8.TXT (4)SendO
15、k.jsp代码如9-9.TXT,23,运行Email.htm文件,显示结果如图9-13所示。,图9-13显示结果,24,在图9-13中,输入相应的信息,点击“发送”按钮后,将显示如图9-14所示。,图9-14显示结果,25,在图9-13所显示的页面上,如果忘记输入了收件人的邮件地址,点击“发送”按钮后,将会出现如图9-15所示。,图9-15显示结果,26,在图9-13所显示的页面上,如果“收件人”、“发件人”和“抄送”对话框输入的邮件地址不正确,点击“发送”按钮后,都会出现错误信息。运行画面如图9-16所示。,图9-16 显示结果,27,3代码实现分析 (1) 新建Email.htm文件,建立
16、表单,设置action的属性为“EmailSend.jsp”,method的属性为“post”,然后添加4个单行文本框,1个多行文本域及2个按钮,实现邮件编辑界面。 在Email.htm文件中用JavaScript实现了一个判断函数,即对收件人的内容进行判断,如果收件人的内容为空,则收件人对应的单行文本框获得焦点,其中“to”为收件人对应的单行文本框的“name”。实现代码如下: Function chkForm(theForm) if (theForm.to.value=“) alert(“收件人地址不能为空“); theForm.to.focus(); return (false); ,28,(2) 编辑文件EmailSend.jsp,载入需要的java包,代码如下: 然后使用request.getParameter()取得表单输入的数据,对含有汉字的主题和内容使用getBytes(“ISO8859_1“)进行转码处理。实现代码如下: String to = request.getParameter(“to“); Str