用户直接使用集成的动态HTML语言简称DHTML来开发基于.ppt

《用户直接使用集成的动态HTML语言简称DHTML来开发基于.ppt》由会员分享，可在线阅读，更多相关《用户直接使用集成的动态HTML语言简称DHTML来开发基于.ppt（22页珍藏版）》请在三一办公上搜索。

1、在VB里，用户直接使用集成的动态HTML语言（简称DHTML）来开发基于HTML语言的应用程序。DHTML将文档中的每一个元素都看成一个对象，通过对象的属性、事件和方法来操纵对象以改变浏览器中显示的内容。DHTML的编程与VB编程有所不同，前者以窗体为基本界面，后者则使用Web页，但还是有很大的相似性。VB使用DHTML应用程序设计器来开发DHTML类型的应用程序。单击“新建工程”中的“DHTML应用程序”即可打开DHTML页面设计器界面，参见图15-1（为例15-1的设计界面）。,图15-1 DHTML页面设计器,第15章 VB与Internet 编程初步,15.1 DHTML页面设计器,1

2、5.2 DHTML页面设计示例,15.3 VB 应用程序的 Internet 扩展,DHTML页面设计器有两个窗格，即左边的“树形视图”窗口和右边的“细表”窗口，在“树形视图”窗口显示HTML页面里所有元素的分层结构。页面设计器为每一个元素列出其ID、控件类型，并且在某些情况下列出元素开始的内容。如果某个元素不包含ID，就在属性窗口为它指定一个。具有ID的元素以粗体显示。在“细表”窗口显示页面的可视化界面，在其上创建新的页面或编辑已有页面。在DHTML页面设计器窗体的上方，有一个与Microsoft Word的格式工具栏相似的格式化工具栏，可以设置页面的元素格式编排、字体属性和对齐方式等内容。

3、在格式化工具栏的下方有一排工具按钮，分别是DHTML页面设计器属性、执行编辑器、在选项首尾添加标记、在选项首尾添加标记、将选项转化为链接、表操作、显示表边界、显示细节、绝对位置、锁定、绝对位置模式和顺序按钮。在创建DHTML工程的同时将创建modDHTML模块，其中包含两个函数：PutProperty函数和GetProperty函数。,15.1 DHTML页面设计器,DHTML对象模型将DHTML中的每个元素部作为对象访问，每一个对象有自己的属性、方法和事件，在创建应用程序时，能够通过VB代码对HTML页面的布局、位置、每个元素的特性和容器进行动态的修改。主要的DHTML对象有BaseWind

4、ow和Document。DHTML对象的事件和VB事件基本相似，但每个事件都带有前缀on。表15-1列出了DHTML中的部分事件。,表15-1 DHTML中的部分事件,15.1.1 DHTML对象模型,表15-2 HTML工具箱内的控件,可以采用下面列出的方法之一，通过VB为DHTML应用程序创建页面：（1）通过将VB工具箱中的HTML对象加入到页面设计器中来创建页面。（2）通过外部的HTML编辑器来创建页面。（3）采用组合的方法创建页面。单击DHTML页面设计器内的“HTML页面设计器属性”工具按钮，可打开如图15-2的DHTMLPage属性对话框。如果选择“保存HTML于外部文件中”，可以

5、显示“新建”和“打开”按钮。单击“新建”按钮可以在DHTML页面设计器内建立新的HTML文档保存网页内容。单击“打开”按钮可以将其他外部编辑器建立的HTML文档导入到DHTML页面设计器中。如果选择“保存HTML作为VB工程的一部分”，则所设计网页的HTML代码将保存在Dsx文件中。,15.1.2 设计DHTML页面的方法,图15-2 树形视图窗口,例15-1：设计如图15-3所示网页。（1）新建工程时选择“DHTML应用程序”，打开图15-1所示的DHTML页面设计器，双击工程资源管理器中“设计器”文件夹中的“DHTMLPage1”打开中间两个窗口。（2）在“细表”窗口输入“蓝天出版社欢迎您

6、”、“新书介绍”、“读者园地”、“联系方式”四行文字，每输入一行回车。（3）格式化四行文字，如将“蓝天出版社欢迎您”字体设置为“华文彩云”，字号为6号。（4）如有必要，在属性窗口设置每行文本的颜色（Color）属性，如将“蓝天出版社欢迎您”设置为红色（red）。,15.2 DHTML页面设计示例,（5）单击HTML工具箱中的image控件，在第一行文本的左边画出一定大小的图像框，右键单击该图像框，从快捷菜单中选择“属性”，打开该图像框的“属性”对话框，单击其中“图像源”栏右边的按钮，查找合适的图片，关闭“属性”对话框。在属性窗口将align属性为左对齐（left）。在树形视图窗口的BODY标记

7、中列出了正在工作的HTML网页的原始内容。BODY标记包含了控制Web网页内容的基本图形外观和动作的指令，参见图15-2。（6）单击DHTML页面设计器内的“HTML页面设计器属性”工具按钮，可打开如图15-3的DHTMLPage属性对话框。单击“保存HTML于外部文件中”按钮，输入文件名“c:myhtml1.htm”。（7）单击“文件”菜单中的“保存”或“另存为”命令，保存所有文件，首先保存的是代码文件.bas，取文件名为myhtml1.bas，其次保存的是类似于窗体文件的设计师文件.dsr，取文件名为myhtml1.dsr，最后保存工程文件.vbp，取名为myhtml1.vbp。设计师文件

8、是包含HTML页面全部格式和控件的文件，有SourceFile和BuildFile属性，分别用来指定设计阶段导入的外部HTML文件和最后形成的HTML文件。代码文件则包含浏览器包所提供的PutProperty和GetProperty操作的函数。程序运行效果参见图15-4。注意地址栏中的显示内容，这是VB在内存中编译DHTML应用程序时，在硬盘上建立的、用于存储程序的一个临时文件。,图15-3 DHTMLPage属性对话框 图15-4 在浏览器中浏览页面,例15-2：图15-4所示为利用Microsoft FrontPage制作的的网页。在例15-1的工程中，添加该网页，并创建两个网页的链接。（

9、1）在例15-1的设计窗口单击“工程”中的“添加DHTML Page”命令，加入第二个页面设计器DHTMLPage2。（2）打开DHTMLPage2属性对话框，选择“保存HTML于外部文件中”按钮，单击“打开”按钮，浏览并选择图15-5网页的文件名“c:myhtml2.htm”。（3）选定DHTMLPage1中的“新书介绍”文本，单击工具条中的“将选项转化为链接”按钮将该文本格式化为超链接。（4）打开如图15-6所示“新书介绍”文本超链接的属性页，单击“浏览”按钮，浏览并选择图15-5网页的文件名“c:myhtml2.htm”。或者单击“树形视图”窗口中的Hyperlink标记，然后在属性窗口

10、的href属性栏内输入链接目标。,也可以为任意一个事件或元素编写代码来创建网页之间的漫游，如：Private Function Hyperlink1_onclick()As BooleanBaseWindow.navigate myhtml2.htmEnd Function这里使用相对URL，也可以使用绝对URL：“c:myhtml2.htm”。采用上述方法，两个网页共用一个浏览器中打开。如果希望在不同的浏览器窗口显示不同的网页，可以使用BaseWindow对象的Open方法，由Open方法指定第二个页面的URL实现链接：Private Function Hyperlink1_onclick(

11、)As BooleanBaseWindow.open myhtml2.htmEnd Function,图15-6 属性页,图15-5 在浏览器中浏览myhtml2网页,例15-3：用SAPN标记符标记图15-1中的“蓝天出版社”文本，用DIV标记符标记图15-1中的“联系方式”文本。程序运行时，当鼠标移动到“蓝天出版社”文本上时显示一幅图片，鼠标移出“蓝天出版社”文本上时不显示图片。当单击“联系方式”文本上后其字体颜色变为红色。实现图片的显示与隐藏的代码为：Private Sub NUM1_onmouseout()Image2.Style.visibility=hidden 在DHTMLPag

12、e_Load事件过程中应加入同样的代码End SubPrivate Sub NUM1_onmouseover()Image2.Style.visibility=visibleEnd SubPrivate Sub num3_onmouseover()NUM3.Style.Color=redEnd Sub改变“联系方式”字体颜色的代码为：Private Sub NUE3_onclick()NUM3.Style.Color=blueEnd Sub,例15-4：编写代码，实现当加载例15-1的网页时，播放一个WAV格式的音乐文件，如“c:welcome.wav”。（1）利用“部件”对话框在工具箱中加载

13、Multimedia MCI控件。（2）将Multimedia MCI控件添加到网页中，并拖曳到页面的左边缘上。注：将某个控件拖曳到页面的左边缘上可以使该控件隐含，如果要重新显示该控件，可以在树形窗口中选定该控件，然后利用方向键移动到页面窗体内。（3）编写代码：Private Sub DHTMLPage_Load()MMControl1.Notify=FALSE：MMControl1.Wait=TRUE MMControl1.Shareable=FALSE：MMControl1.DeviceType=WaveAudio MMControl1.FileName=c:welcome.wav MMC

14、ontrol1.Command=Open:MMControl1.Command=playEnd Sub,例15-5：页面之间的数据传递在例15-1中，当单击“新书介绍”时，打开第二个网页，单击“放入购书栏”，然后单击第三个网页中的“增书”按钮，则将该行读书放入购书栏（即添加到第三个网页的List1控件中）。参见图15-7。,图15-7 页面间的数据传递,（1）在例15-1中添加第三个网页，在页面上添加一个List1控件和Button控件（Value属性值为“增书”）。（2）为第二个网页的每个书名加上ID属性值（依次为Book1、Book2、Book3等）。（3）为每个“放入购书栏”所在单元格加

15、上ID属性值（依次为purchase1、purchase2、purchase3等）。（4）为使用Internet Explorer属性包，在“引用”对话框中选中“Microsoft Internet Controls”对象库SHDOCVW.DLL。,（5）在模块文件中加上如下代码（一般会自动添加这些代码）：Public objWebBrowser As WebBrowser 声明浏览器对象变量Public Sub PutProperty(strName As String,vntValue As Variant)检查是否有一个浏览器实例，若没有则打开浏览器 If objWebBrowser I

16、s Nothing Then Set objWebBrowser=New WebBrowser 调用浏览器的 PutProperty 方法来存储控件对象的值 objWebBrowser.PutProperty strName,vntValueEnd SubPublic Function GetProperty(strName As String)As Variant If objWebBrowser Is Nothing Then Set objWebBrowser=New WebBrowser 调用浏览器的 GetProperty 方法来检索控件对象的值 GetProperty=objWeb

17、Browser.GetProperty(strName)End Function浏览器Internet Explorer属性包中的PutProperty函数和GetProperty函数用来在Web页面之间传递数据PutProperty函数储信息到属性包的临时区域，参数vntValue 为存储的值，参数strName指示该存储值的变量名称。GetProperty函数通过变量名称从属性包中检索信息，如果变量名称没有找到，则返回空字符串。,（6）为每个“放入购书栏”单元格单击事件编写如下类似的代码：Private Function purchase1_onclick()As Boolean If p

18、urchase1.innerHTML 已购 Then purchase1.innerHTML=已购 PutProperty ch1,book1.innerHTML End IfEnd Function（7）为第三个网页的Button1控件的单击事件编写如下代码：Private Function Button1_onclick()As Boolean Dim e As HTMLOptionElement Set e=Document.createElement(OPTION)e.Text=GetProperty(ch1)e.Value=ListItemValue List1.Options.Ad

19、d eEnd Function（8）为打开第三个网页，编写如下代码：Private Sub DHTMLPage_Load()BaseWindow.open myhtml03.htmEnd Sub,15.3 VB 应用程序的 Internet 扩展,Visual Basic6.0提供了许多控件用于Internet编程，这些控件是：（1）Internet Transfer 控件。（2）WebBrowser控件。（3）WinSock控件。这里仅就 Internet Transfer 控件作简单的介绍。使用 Internet Transfer 控件可以通过 OpenURL 或 Execute 方法连接

20、到任何使用这三个协议的站点并检索文件。其基本操作如下：（1）在“部件”对话框中选中“Microsoft Internet Transfer Controls”选项。（2）将 AccessType 属性设置为合法的代理服务器。AccessType 属性设置值为：0-icUseDefault：控件使用注册表中的缺省设置访问Internet。1-icDirect：控件可以直接连接到Internet。2-icNamedProxy：控件使用Proxy属性确定代理服务器。（3）用合法的 URL 调用 OpenURL 方法（4）用合法的 URL 和协议支持的命令调用 Execute 方法。（5）用 GetC

21、hunk 方法从缓冲区获取数据。,OpenURL 方法用于打开并返回指定 URL 的文档。文档以变体型返回。该方法完成时，URL 的各种属性（以及该 URL 的一些部分，如协议）将被更新，以符合当前的 URL。语法object.OpenUrl url,datatype例如下面的 URL 将返回在 中找到的 HTML 文档：Text1.Text=Inet1.OpenURL(http:/)在这种情况下，缺省操作返回的是 URL 定位的 HTML 文档。然而，如果 URL 被改为指向文本文件，则将获得实际的文件。例如，下面的代码：Text1.Text=Inet1.)将获得文件的实际文本。,15.3.

22、1 OpenURL 方法,如果需要将通过 OpenURL 方法获取的数据保存到文件，可以使用 Open、Put 和 Close 语句，如下面的代码所示。该示例先将获得的二进制文件传入 Byte 数组，然后将该数据保存到磁盘中：Dim strURL As StringDim bData()As Byte 数据变量Dim intFile As Integer 可用文件变量strURL=ftp:/xeintFile=FreeFile()将 intFile 设置为未使用的文件 OpenURL 方法的结果首先传入 Byte 数组，然后将 Byte 数组保存到磁盘。bData()=Inet1.OpenUR

23、L(strURL,icByteArray)Open C:TempSoftlib.e xe For Binary Access Write _ As#intFilePut#intFile,bData()Close#intFile可用类似的过程将文本文件写入磁盘中，不同的只是不再需要 Byte 数组了，数据可以直接保存到文件中：Dim strURL As String URL 字符串Dim intFile As Integer 可用文件变量IntFile=FreeFile()strURL=http:/Open c:tempMSsource.txt For Output _As#IntFileWri

24、te#IntFile,Inet1.OpenURL(strURL)Close#IntFile,可以用包含附加数据的 URL 调用 OpenURL 方法。例如，很多 Web 站点提供了搜索数据库的能力。要搜索数据库，则需要在发送的 URL 中包含搜索条件。例如下面的代码用条件“find=Maui”调用名为“search.exe”的搜索引擎。Dim strURL As StringstrURL=xe?find=mauiText1.Text=Inet1.OpenURL(strURL)如果搜索引擎找到了符合条件的内容，将合成一个 HTML 文档并携带适当的信息返回。下面的示例使用 OpenURL 属性来

25、检索 FTP 服务器的目录。在窗体中放置一个 Internet Transfer 控件和一个 RichTextBox 控件。然后，把这段代码粘贴到声明部分。Private Sub Form_DblClick()Inet1.AccessType=icUseDefault RichTextBox1.Text=Inet1.OpenURL _(InputBox(URL,ftp:/)End Sub,Execute 方法执行对远程服务器的请求命令，这些命令可以是接受文件、发送文件甚至是删除远程服务器的目录，以异步方式工作，其语法格式为：object.Execute url,operation,data,r

26、equestHeaders例如，要从远程计算机中得到一个文件，可用下面的代码：Inet1.Execute FTP:/,GET test.txt C:Temptest.txt如果正在用 FTP 从匿名 FTP 服务器中获取文件，就应熟悉在服务器目录树中漫游的特定命令，以及将其中文件获取到本地的硬盘中的命令。例如，要用 FPT 协议改变目录，应使用带有希望改变到的目录路径的“CD”。对绝大多数通用操作，如将文件传入服务器，以及从服务器获取文件，Internet 传输控件在 Execute 方法中使用了（与 FTP）相同或相近的命令。例如，下面的代码将“CD”命令作为 Execute 方法的参数以改

27、变路径：Inet1.Execute mytxtURL.Text,CD&mytxtRemotePath.Text 其中，mytxtURL 文本框包含了要打开的路径，mytxtRemotePath 文本框包含了要改变到的路径。下面的操作得到名为“test.txt”的文件，并将其复制到C:Temptest.txt：Inet1.Execute,GET test.txt C:Temptest.txt,15.3.2 Execute 方法,在从远程计算机下载数据时，将建立异步连接。下面的示例在 StateChanged 事件中用 GetChunk 方法来检索一块数据。Private Sub Inet1_St

28、ateChanged(ByVal State As Integer)State=12 时，使用 GetChunk 方法检索服务器的响应，该示例假定数据为文本类型。Select Case State.其它情况略 Case icResponseReceived Dim vtData As Variant Dim strData As String:strData=Dim bDone As Boolean:bDone=False vtData=Inet1.GetChunk(1024,icString)取得第一块数据 DoEvents Do While Not bDone strData=strData&vtData DoEvents vtData=Inet1.GetChunk(1024,icString)取得下一块数据 If Len(vtData)=0 Then bDone=True End If Loop txtData.Text=strData End SelectEnd Sub,15.3.3 GetChunk 方法,