你好,欢迎来到电脑编程技巧与维护杂志社! 杂志社简介广告服务读者反馈编程社区  
合订本订阅
 
 
您的位置:杂志经典 / 跟高手学编程
1.6 网站特定功能设计
 

一个动态网站总要设计一些特定功能模块,方便客户端的用户与网站进行交互,这些特定的功能动态性强,针对某方面需求,完成专门的任务,是网站的重要内容。在前面的教学在线网站中就设计到文件的上传和下载、多媒体操控、滚动消息等特定功能模块。在这一讲中就以这几个动态网站常见功能设计为基础,向大家介绍利用IntraWeb设计和开发它们的技术与方法。

对于网站的开发人员来讲,经常会使用CuteFtp上传和下载一些文件,那么用IntraWeb如何实现客户端的文件上传呢?实际上,IntraWeb组件已经封装了许多方法,只要使用这些方法就可以很快开发出具有文件上传功能的网站。要实现这两个重要而又常用的功能,只要使用IntraWeb的两个接受和发送文件的函数,编写相应的代码就可以了。

一、文件上传

上传功能的页面,主要有三个基本功能:一是将要创建的页面与主页面中的导航菜单相连,也就是实现点击导航菜单“教学互动”中的“作业上传”菜单项事件,在网站中通过点击这个菜单来调用,如图1所示;二是可以通过浏览按钮选择本地磁盘所要上传的文件;三是实现作业提交和浏览的功能。

1.上传页面

利用已经介绍过的页面创建方法,新建一个名为:f_iwFileUploadApplication Form,在其上放置一个TIWEdit控件,三个TIWLabel控件,一个TIWButton按钮和一个TIWFile 控件。其中TIWfile控件就是封装网络文件上传等功能的一个控件,并将该窗体的单元文件以u_FileUpload命名存盘。页面上各部分的设置及功能如表1所示,调整后的布局样式如图2所示。

      

     图1  上传页面的关联菜单

                                 

          

 

 

     图2 上传页面设计样式

 


 

1 上传页面属性设置

编号

控件类型

控件名称

属性项

参数

1

TIWLabel

IWLabel1

Caption

你可以将所有资料方便地传送到教师的计算机中...

IWLabel2

Caption

点击"Browse"按钮选择要上传的文件...

IWLabel3

Caption

空缺(OnReceivedFile事件显示相关信息)

Visible

False

2

TIWFile

IWFile1

Events

OnReceivedFile(详见代码部分)

3

TIWButton

IWButton1

Caption

开始上传

 

.相关代码

在这个页面中所需的代码相当少,只需三个简单事件。其中有主菜单下显示上传页面代码、IWFile1上传文件控件的OnRecieveFile触发的控件和IWButton1控件的开始上传OnClick事件,且该事件仅仅是触发“网页提交”,并不需要实质性的代码设计,而是由OnRecieveFile事件完成整个上传功能。

通过主菜单显示上传页面事件的实现代码如下:

procedure TframMenu.Fileupload1Click(Sender: TObject);

begin

  Move(Tf_iwFileUpload); //通过主菜单TIWFrame所定义的页面显示函数

end;

//IWFile  OnRecieveFile事件

procedure Tf_iwFileUpload.IWFile1ReceivedFile(ASender: TObject;

  const AFilename: string);

begin

IWFIle1.SaveToFile(ExtractFilePath(ParamStr(0)) +'Upload\'+ IWFile1.FileName);

//上传至服务器的Upload目录(该目录需在服务器端实现创建)

  IWLabe3.Caption := '你已经将所要上传的文件 ' + IWFile1.Filename + #13#10 +

    '存入到服务器: ' + ExtractFilePath(ParamStr(0))+'Upload';

  IWLabe3.Visible := True; //使状态显示标识IWLabel3可见

end;

IWButton1 OnClick事件:

procedure Tf_iwFileUpload.IWButton1Click(Sender: TObject);

begin

  //上传文件已有OnRecieveFile事件挷定

  //这个按钮仅仅触发网页“提交”功能

end;

二、课件下载

1.下载页面

下载任务是网站将能够提供的资源放到相应位置,供广大客户端用户下载使用的交互接口,在IntraWeb中是通过WebApplication的一个文件发送过程来实现客户端选择到相应网络资源。在本实例中通过课件资源介绍一个文件下载功能的设计过程。途径是通过图1中“课件下载”菜单事件打开一个下载页面与用户交互。同样需要再次新建一个Application Form。

按照上传页面设计的方法创建新的Application Form窗体,创建好的页面窗体文件用f_iwFileDownload命名单元文件用u_FileDownload命名,在页面放置一个TIWRegon控件,一个TIWLabel控件和一个IWButon按钮控件,调整并设置好可控件的位置和属性,其结果见图3所示、各控件属性和功能见表2所示。

 


3 下载页面样式

 

2 下载页面各控件属性和功能

编号

控件类型

控件名称

属性项

(功能)参数

1

TIWLabel

IWLabel1

Caption

课件下载..

2

TWListbox

IWListbox1

缺省

课件资源文件列表

3

TIWRegion

IWRegion1

Events

包容IWLabel1IWButton1

4

TIWButton

IWButton1

Caption

开始上传

 

.相关代码

代码编写分三部分完成,一是主菜单打开下载下面;二是列出服务器端可供下载课件资源,通常网站下载为了提高下载效率,往往将下载文件压缩打包,在此所有课件也是经过Winara3.2压缩软件打包后,形成*.RAR文件存放在服务器端的DonwLoads目录下;最后是下载页面TIWButton1按钮事件。下载代码如下:

procedure TframMenu.Fileupload1Click(Sender: TObject);

begin

  Move(TF_ F_FileDownload); //通过主菜单TIWFrame所定义的页面显示函数

end;

可供下载的课件资源列表的代码如下:

procedure TF_FileDownload.IWAppFormCreate(Sender: TObject);

ar

  i,j: Integer;

  LSrch: TSearchRec; //定义一个 TSerachRec变量

begin

 FPath := WebApplication.ApplicationPath  + 'Downloads\';

//操作定位到服务器Downloads目录

  i := FindFirst(FPath + '*.RAR', faAnyFile, LSrch); //过滤掉所有非Winrar文档

 try

    while i = 0 do begin

      if (LSrch.Attr and faDirectory) = 0 then //如果文件和目录可用

        IWListBox1.Items.Add(LSrch.Name); //课件列表清单

      i := FindNext(LSrch);

    end;

  finally

FindClose(LSrch);

end;

其中TSerachRecDelphi的一个记录文件类型,功能是与FindFirstFindClose配合使用查找出当前目录的指定文件,要定义这样类型,单元文件中引用SysUtils ,其原型如下:

type

   TSearchRec = record

    Time: Integer;

    Size: Integer;

    Attr: Integer;

    Name: TFileName;

    ExcludeAttr: Integer;

    FindHandle: THandle;

    FindData: TWin32FindData;

end;

三、多媒体操控

多媒体资源操作和共享使用现在非常流行,媒体类型也很多,网络上流行的视频类型就有Java AppleFlashMpegQuickTimeRMVB等电影文件,音频文件有WAVMp3Wma等,尽管这样一些富有动感的素材不完全属动态网站动态性概念,但却材料丰富着网站的内容。在设计的在线教学过程也用样有一些课程内容需要多媒体手段来活化课堂内容,使教学过程生动起来。当然了,要做到这样IntraWeb同样是可以并且不复杂。正是针对这样的应用在Delphi IDE IW Standard 页面IntraWeb封装了TIWAppletTIWActiveXTIWFlashTIWMepgTIWQuicktime等常用操作和控制组件(控件详细内容见第一讲),使用时需要什么样媒体就选用相应的控件类型即可。

在这里通过在线教学网站的一个教学视频的播放和控制来完成多媒体流等设计与使用,在主菜单中设计的媒体界面如图4所示。


4 多媒体播放菜单

 

.播放页面

本部分以播放和操作Mpeg电影文件为例,同样需要创建一个名为:f_IWMpegApplication Form(创建过程参照下载部分,在此不再赘述),单元文件保存为u_playMPEG。在其上添加一个TIWLable控件,一个TIWListbox控件,一个TIWButton控件和一个TIWMpeg控件,设计布局好的播放界面如图5所示。各控件属性设置见表3


 

5 多媒体播放页面

 

3 下载页面各控件属性和功能

编号

控件类型

控件名称

属性项

(功能)参数

1

TIWLabel

IWLabel1

Caption

教学视频资源..

2

TWListbox

IWListbox1

缺省

Mpeg文件列表

3

TIWMpeg

IWMpeg1

Visible

False/视频控制播放区

4

TIWButton

IWButton1

Caption

播放…

.相关代码

该部分代码除了通过主菜单显示播放界面外,还有两个部分代码需要编写,一是播放的媒体文件在控件TWListbox中列表,二是按钮播放功能。

通过主菜单显示播放页面事件的代码如下:

procedure TframMenu.Fileupload1Click(Sender: TObject);

begin

  Move(TF_ playMpeg);  //通过主菜单TIWFrame所定义的页面显示函数

end;

Mpeg媒体文件列表的代码如下:

procedure TF_MpegFormCreate(Sender: TObject);

ar

  i,j: Integer;

  LSrch: TSearchRec; //定义一个 TSerachRec变量

begin

  FPath := WebApplication.ApplicationPath  + 'Files\'; //操作定位到服务器Files目录

  i := FindFirst(FPath + '*.Mpeg', faAnyFile, LSrch); // 选择所有Mpeg文件

 try

    while i = 0 do begin

      if (LSrch.Attr and faDirectory) = 0 then //如果文件和目录可用

        IWListBox1.Items.Add(LSrch.Name); //Mpeg列表显示

      i := FindNext(LSrch);

    end;

  finally

FindClose(LSrch);

end;

按钮播放功能:

procedure Tf_IWMPEG.IWButton1Click(Sender: TObject);

begin

 if IWListBox1.ItemIndex > -1 then

  begin

  IWMPEG1.MPEGFile.Filename:= IWListBox1.text; //制定媒体文件

  IWMPEG1.RenderEMBED :=true; //开始播放

  IWMPEG1.Visible :=true;  //显示可见

 end;

end;

四、滚动消息

滚动消息是网站,特别是动态网站的一个亮点,流动的文字能够及时吸引住用户的眼球,一些特别重要或得到及时更新的网站内容以这种方式呈现出来,将用户的视线和鼠标都拉拢过来了。一些人认为IntraWeb根本无法设计这样的效果,或者是非常不容易。事实不是这样的,利用IntraWebTIWText控件支持一般网页HTML语言,将HTML语言相关内容嵌入进来,同样可以完成各种各样的滚动效果。在此有必要介绍一下HTML语言方面的基本常识,也就是说HTML是如何工作的:

使用标记:<marquerr>——可以是文字移动,制定不同属性可以得到不同移动效果;属性direction值指定移动方向:left(向左)、right(向右)、up(向上)、down(下);属性behavior的值指定移动的行为:srcoll(循环)、alternate(来回)、slide(单次);属性loop的值指定移动次数,默认循环不停;属性scrollamount=10指定每次移动的距离为10像素;属性scrolldelay=500指定每次移动后间隙时间为500毫秒;属性 height=40,width=50%指定移动区域的范围高度40像素,显示宽度为宽的50%等。

例如有这样一个文字移动方式的实例:

<HTML>

<body>

   <marquee bgcolor=aaaaeee>随风而动</marquee><br/>

<marquee direction=left>随风而动:从右向左移动</marquee><br/>

<marquee direction=right>随风而动:从左向右移动</marquee><br/>

<marquee direction=left>随风而动:从右向左移动</marquee><br/>

<marquee behavior=scroll>随风而动:循环不断</marquee><br/>

<marquee behavior=slide>随风而动:只移动一次</marquee><br/>

<marquee behavior=alternate>随风而动:来回移动</marquee><br/>

<marquee loop=3 width=50% behavior=scroll>随风而动:移动三次</marquee><br/>

<marquee scrollamount=20>随风而动:走得快点</marquee><br/>

<marquee scrolldelay=500 scrollamount=100>随风而动:走一走停一停</marquee><br/>

<marquee height=40 width=50% bgcolor=aaeeaal>随风而动:在指定区域内移动</marquee><br/>

<body>

</HTML>

接下来就是利用TIWText控件实现滚动消息的设计了。在网站需要用滚动方式显示动态信息的页面上,如在页面上(F_iwMainForm)加入TIWText控件,利用该控件实现一个滚动通知文字的效果。要完成这个设计,可参考上述HTML语言内容,在控件的lines属性项加入以下文本信息:

<DIV>

<TABLE borderColor=#000000 cellSpacing=0 cellPadding=5 bgColor=#6699ff border=1>

<TBODY>

<TR>

<TD>

<marquee

 scrollamount=1 scrolldelay=10 direction=up width=360 height=100 >

重要通知:

<br>

1.在线教学网站注册网站已经开通,成功注册了的同学可获赠《环境信息系统基础》教材一本。

<br>

2.课件的正常使用必须先安装Adobe arcobat6.0!,该软件可在“常用工具下载”菜单中点击下载...

<br>

</marquee>

    设计完成后,运行的主页面通知区显示动态滚动效果如图6所示。如读者需要更为复杂或个性化滚动效果可参考相应的HTML语句来实现,其实TIWtext支持的网页格式还不止HTML一种,还可以支持ASP语句和JSP语句等,显然这不是本次讲座的重点,有兴趣可自行去尝试。

 


 

6 滚动文字的效果

 

 

 

  推荐精品文章

·2024年12月目录 
·2024年11月目录 
·2024年10月目录 
·2024年9月目录 
·2024年8月目录 
·2024年7月目录 
·2024年6月目录 
·2024年5月目录 
·2024年4月目录 
·2024年3月目录 
·2024年2月目录 
·2024年1月目录
·2023年12月目录
·2023年11月目录

  联系方式
TEL:010-82561037
Fax: 010-82561614
QQ: 100164630
Mail:gaojian@comprg.com.cn

  友情链接
 
Copyright 2001-2010, www.comprg.com.cn, All Rights Reserved
京ICP备14022230号-1,电话/传真:010-82561037 82561614 ,Mail:gaojian@comprg.com.cn
地址:北京市海淀区远大路20号宝蓝大厦E座704,邮编:100089