VisualInterDev

一,概述

VID(Visual InterDev)是非常强大的ASP脚本和HTML网页设计编辑工具。Visual InterDev的主要功能包括:站点和网页编辑设计,数据库集成,数据库管理,调试,站点管理以及项目小组开发(版本控制)。

版本历史:1996年(1997.3?) 1.0版 原名 Internet Studio。1998年10月07日 6.0版,作为Visual Studio 6 的一部份而发布的。2001年还出了最后一个版本。然后就演变成着名的VS2003,VS2005。

二,开发环境

1, Web服务器:Web server,FrontPage Server Extensions, Active Server Framework, Active Server Objects and Components, Visual SourceSafe, Visual InterDev Server Extensions(安装之后才可以进行ASP调试,安装文件位于VS6 CD2或者单独的VID6的VID_SS目录下)

2, 开发人员工作站:Visual InterDev, FrontPage(非必需)

3, 数据库服务器:DBMS,通过ODBC对外连接

三,创建网站项目

1, 创建命名新的Web项目:

项目(Project):在对新的或者已有的应用进行开发时, 开发人员必须首先在自己的工作站上生成一个Project。它是一组引用宿主Web应用程序的文件,如果多个开发人员合作开发一个应用程序, 每一位都要在自己的工作站上生成一个独立的Project。

解决方案(Solution):一个Solution中含有一个或多个Project, 当你生成一个新的Project时, 就会为该Project自动生成一个Solution, 在一个Solution中,Project可以由象Visual J++ 和Visual InetDev那样的不同的工具来生成。

操作:打开Visual InetDev|File|New Project|Visual InerDev Project|New Web Project|将Name改为FirstProject|打开。

2,指定服务器和工作模式:(注意,Web服务器必须是装有FrontPage服务器扩展的IIS 4以上版本,且对其需要有管理权限)。设置Web Project Wizard对话框共四步

第一步,选择或者输入你要连结的Web服务器地址(IP地址或者域名)|选择Master Mode|Next

工作模式:Master模式(宿主模式,本地和远程宿主会自动同步,并自动使用远程服务器进行调试), Local(本地模式,本地和远程宿主不会自动同步)和脱机模式(Work Offline,脱机模式表示没有远程连接,此时即使选择了Maste模式也无法自动同步步,此时不能改变站点结构或者移动文件。)。操作:Project | Web Project | Working Mode | Local Mode等

可为一个已有的应用程序生成一个Project, 然后只需要从宿主Web上得所需要的文件的工作拷贝,然后对所拷入的文件进行修改和测试,当工作做完以后,就发布该文件的工作拷贝到宿主Web。

第二步,选择Create a new Web application(或者连结一个已有的Web站点)选项,在Name栏中输入Chapter2|Next按钮|

第三步,此时不需要选择版面配置,直接点击Next;

第四步,此时不需要选择风格,直接点击Finish。

Web Project Wizard将为你生成一系列文件,包括你所选择的排版,视觉风格,搜寻页面,应用程序和ScriptLibrary

四,数据库设计与连接

如下以一个图书馆书籍借阅管理系统为实例:

1, 数据库设计:

首先在Access中创建如下三个表:   表: Books       列名称 类型 长度   BookID 长整型 4 (关键字)   Title 文本 50   Author 文本 50       表: Loans       列名称 类型 长度   BookID 长整型 4   UserID 长整型 4   LoanDate 文本 50       表: Users       列名称 类型 长度   UserID 长整型 4 (关键字)   Name 文本 50   Location 文本 50   Phone 文本 50   Email 文本 50

2, 连接到数据库:

创建一个数据连接:在创建完数据库之后,要先在控制面板的ODBC处创建一个名为LibraryDSN的系统DSN(本机可访问)(文件DSN则为全局可访问)。然后点击Project | Add Data Connection命令(或在Project Explorer 中用鼠标右击工程名并选择Add Data Connection菜单命令)|DataEnvironment(数据环境)对象将在Global.asa节点下出现,在DataEnvironment下,你可以找到这个数据连接。

五,站点设计与创建网页

1, 设计站点

使用Visual InterDev提供的强大工具,你可以专注于设计你的Web功能,而诸如文件管理,连接修改,浏览的细节都可以交给Visual InterDev去代劳,Visual InterDev所包含的站点设计工具可以帮助你轻松的规划页面,组织连接,并且在网站使用同一的风格。

themes 定义了一组图形和风格页, 他们允许你在自己的站点定义一组网页并感受其外观效果, Layout(页面布局) 定义了你的页面上导航条的外貌和位置, 它使用的是站点示意图所定义的信息。

(1),使用Site Diagram(站点示意图)规划站点总体结构(原型):可运用简单易用的可视化设计元素,定义网站浏览结构,定义网页间链接(父子等级)关系。

A, 创建站点示意图:操作:从菜单栏Project|Add item|选择Site Diagram图标|可以改变其名字|按下Open 按钮。

B,创建页面矩形示意图:

如上图所示分别创建三行十九个用户界面页面矩形(点击Site Diagram工具栏上的New Html/ASP Page按钮),在矩形上键入字符串(最好用英文,采用Camel命名规则)即为相应页面的文件名。

然后把顶行的default.htm,Books.htm,CheckIn.htm,Checkout.htm,Users.htm和Loans.asp页面添加到全局导航菜单上(点击Add to Global Navigation Bar按钮)

在第二行中的AddBook.htm,DisplayBook.asp,Response.asp,DeleteBook.htm,ListBooks.asp和Searchooks.htm页面用来管理书籍信息。

在第三行中的AddUser.htm,DisplayUser.asp,ChangeUser.htm,UserRecord.asp,DeleteUser.htm,ListUsers.asp和SearchUsers.htm页面用来管理用户信息。

C,套用theme和layout:当这个示意图建成之后,选择它的所有页面并应用Expedition theme和TopandButtom4 layout。TopandButtom4布局在页面顶部有一个标题,底部有一个全局导航条。

D, 站点示意图上的19个页面为这个应用提供用户界面。另有六个附加的ASP文件对页面输入进行处理,它们是AddBook.asp、DeleteBook.asp、CheckIn.asp、Checkout.asp、AddUser.asp和

DeleteUser.asp。它们不提供用户界面。因此,不要对它们套用theme和layout。

以上为各页面之间关系,具体的源代码请点击此处下载:[http://www.deepcast.net/deepcast/UserFiles/2006-10/12/2006101203817263.rar code.rar]

2, 新增一个Web页面:

操作,选择Project>Add Web Item>Active Server Page在弹出的对话框中的Name框内输入first.asp,然后点击“打开”按钮,first.asp被自动生成。

Visual InterDev提供了Design(设计视图, 所见即所得),Source(源码视图,显示源代码)和Quick View(快速预览,显示HTML代码及非服务器端ASP的运行结果)三种查看HTML及ASP页面的方法,并且支持DTC,除错,自动完成陈述及对象浏览功能。可以在Design或者Source窗口中创建页面,也可以从ToolBox或数据环境中直接输入内容或拖拉项目到页面上,结合Properties窗口可以设置属性。如果要使用浏览器查看结果,可在Project Expolor窗口中用鼠标右键点中first.asp,然后在弹出来的菜单中选择View in Browser。

3, 站点的进一步设计与管理:

(1)使用Layout来定义页面布局

(2), 使用Theme来定义外观主题

一旦用Site Diagram建立完浏览结构,你可以在网页上增加导航条,你可以使用Layouts来快速定义包含母文件,子文件及其同根文件组合的导航条,例如,主页可以连接到几个子文件,而子文件又可以连接到同根文件中去。

你可以通过Themes方便的给网页添加一致的可视化效果,由于Themes和Layouts可以扩展且按规格定制,因而你可以为Web应用程序所有页面创建不同的风格,把它们应用在你的部分站点上,当使用Site diagrams,Layouts及Themes来开发Web站点时,实际的文件结构及导航条都将自动生成,在你开发了Web应用程序后,为了方便维护工作,Site Diagrams允许你在更新Site Diagram时使导航条处于当前状态。

(3), PageNavBar DTC用站点结构文件来产生显示页面上导航条的代码,随Visual InterDev 提供的layout就是使用该DTC 来产生导航条的, 你也可以直接将该DTC 放在一个页面里来使用它的功能。

(4), 模板(TEMPLATES)

(5), 重新计算链接:改变站点示意图或者PagrNavBar DTC 后,当你查看页面时,可能并不会马

上在横幅或者导航条上看到这种修改。在这种情况下,可以从菜单条上选择Project |Web Project | Recalculate Links,当然也可以在Project Explorer中选择项目名并在上下文菜单中选择Recalculate Links,选择该选项后就可以使用关于站点结构的最新信息。

PageNavbarDTC需要一个构件,该构件通常与FrontPage 98 Server Extensions一起安装。如果你看到字符串[FrontPage VINavbar Component]而不是你所期望的横幅栏或导航条,那么检查该构件的安装,查找Vinavbar文件夹,它的缺省位置是:C:\Program Files\Microsoft FrontPage\version 3.0\bots.如果它不存在,就要重新安装FrontPage 98 Server Extensions并象以前所讲述的那样重新计算连接

(6),使用链接图管理链接:右击Project Explorer 中的一个文件。出现了一个上下文菜单。选择View Links 选项。接着一个对应于该文件的链接图被创建并显示出来。

4, 创建可重用的Data Command对象

新的数据环境提供了简单的命令来使Web应用程序成为数据驱动的,复杂的SQL语句不是深藏在一个.asp文件中的,取而代之的是在Global.asa文件下数据环境中的Application层上进行的显示,维护和重用,你不必修改每一页中的查询,只是修改Data Command即可,而这些改变将在引用该数据命令的文件中体现,同时,可以直接从Command中拖拽字段(fields)到HTML或ASP页面中去。

创建一个Data Command(在数据连接的DataEnvironment下新增的可以重复使用的SQL语句):Project | Add Data Command命令(或在工程上单击鼠标右键并选择Add Data Command)|在属性页中为这个Data Command填写它的数据源。

5, 创建与数据库集成的动态网页:

创建带有数据的互动网页很简单,只需通过拖放DTC控件(数据绑定控件),设置其属性即可,甚至不需要编程就可显示数据。要生成一个使用数据控件创建的简单数据输入页面的步骤如下:

(1), 在创建一个新的数据连接后,将Recordset控件从设计时期控件的Toolbox拖到页面上,通过设置控件的属性将这个Recordset控件绑定到对应的数据连接上,你也可以把一个Data Command拖拉到页面上,并将Recordset控件和它绑定在一起;

(2), 将一个TextBox控件拖到页面上,开启其属性并将其绑定到Recordset控件上,你也可以直接从DataEnvironment中拖拉一个字段到页面上。每个字段被插入到页面上时,DTC也同时被插入。

(3), 将一个RecordsetNavbar控件放置到页面上,设置属性并将其绑定到Recordset控件上。

(4), 确认PageObject控件是页面上的第一个控件并发布这个页面,就可随意浏览数据库纪录。

(5), 切换使用控件的HTML的类型,打开Recordset控件的属性窗口并切到Implementation Tab,无论选择一般HTML(基于ASP)或IE4HTML(基于DHTML)均可重新发布这一页。

(6), 现在到Source窗口,当Outline Tab被显示时可以看到对象模型被每一个设计时期控件显露出来。(Visual InterDev提供了一个完整的对象模型,可让你调整应用程序,进行用户确认并控制Web应用程序,也支持DHTML及IE4HTML数据控制以获得更丰富的用户界面。)

6, 结合数据库高级管理来创建动态网页:以创建Loans.asp为实例操作:

首先,使用QueryDesigner生成一条可获取每一借出记录的数据的SQL语句。使用该工具为Loans表中的每条记录从Books和Users表中选择数据,这个工具的四个面板如图19-5所示。可注意到Books表和Users表的列被输出了。Loans表中的LoanDate列被输出了。输出项按LoanDate的降序排列。将该SQL语句复制到剪切板,然后关闭QueryDesigner。

其次,打开Loans.asp并到页面编辑器的Design标签。将RecordsetDTC拖到该页面,显示其属性页,用General标签指明一条SQL语句是数据源,将剪切板中的SQL语句粘贴到该标签底部的文本区中,按Close按钮以提交该对话框。

第三,将GridDTC拖至该页面,显示其属性页,用Data标签指明Recordset1是数据源,选择Title,Author,Name,Phone和LoanDate作为输出。建立一个以Email为标题的无界列。输入在ListUsers.asp中看到的相同的表达式来定义到借出者的电子邮箱地址的超链接。

最后,转到Source视图,在GridDTC的前面插入<center>标记以使运行时的输出在中间。

六,数据库管理

1,直接操作数据库:使用微软的可视数据库工具,只需项目中创建一个数据库连接,便可以操作数据库对象及查询数据库了。

(1)可以在Data View(数据视图)窗口(点击View|Other Windows|Data View)通过展开数据库对象来查看浏览所连接的数据库的表和视图,可以使用Data View创建,更新或删除数据库对象,诸如表格,视图和存储过程;打开表格新增数据或选择设计表格,并通过改变列的数据类型完成复杂的数据库操作;

(2)可使用Database Diagram设计数据库:创建新的Database Diagram时,在你选择存储你的设计之前,不会影响到数据库;为了查看并存储Database Diagram中对SQL代码所做的改变,你可以提交改变的脚本给数据库管理者,用来复查受控的数据库环境执行情况。

(3)可使用Query工具条(查询工具条,SQL Query Designer, SQL查询设计器)执行SQL语句。使用Query Designer可以通过四种不同的方法来构建并执行与ODBC兼容的数据库的任一查询。

(4)可进一步使用Database Designer ( 数据库设计器)工具来创建和使用数据库示意图及存储过程、触发器等。 假如你所使用的数据库服务器是微软的SQL Server,还可以利用可视化的数据库工具(Visual Database Tools)可视地设计和修改数据库模式,并为Microsoft SQL Server6.5和Oracle7.3.3+数据库创建存储过程以及其他数据库对象,新增和浏览数据库的表格及察看数据,直观地为任何ODBC或OLE DB兼容的如据库创建SQL查询。

2,专项管理:专门的DBA(数据库管理员)创建数据库项目访问和全面修改数据库。主要是使用数据库设计器等工具。

七,调试除错

1, 在Visual InterDev中对服务器端及客户端除错

开始除错时需要先设置一个起始页面,你可以用鼠标右键在Project Explorer窗口中点击要运行的文件,在弹出的菜单中选择Set as Start Page。

对这个文件出错就像对一些表单或函数除错一样,首先察看运行中的文件,然后设置断点,再预览这个文件,在客户端或服务器上的断点将被激活,你可以单步跟踪你的脚本或检查进程状态。

2, 远程调试:服务器上必须安远程机器调试和Visual InterDev服务器两个组件,且有服务器的管理权限,必须在服务器上配置Distributed Component Object Model(DCOM),以便远程用户能将其调试器关联到服务器进程上。然后使用服务器端或者客户端的Visual InterDev进行除错都可以。

3,调试存储过程和触发器:要求在服务器和客户机上安装有特定的组件。为了调试存储过程或触发器, 你需要到Data View 并右击它。在上下文菜单中有一个Debug 项,许多在本章前面学过的技术如断点是可用的。Locals窗口和观察窗口也是可用的。

八,部署

测试完你的应用后,你就能将它配置在产品服务器或你目前正在使用的服务器上其它的目录中了。在Project Explorer中选择该项目的名称,再从菜单栏中选择Project|Web Project|Copy Web Application,一个标题为Copy Project的对话框就会出现,它允许你将Master Web或Local Web拷贝到目标Web服务器上,在目标服务器上要求有FrontPage服务器扩展,你可以将你的项目文件加到该目标的已有站点上或创建一个新的站点。

九,源代码控制

VisualSourceSafe

VSS(Visual SourceSafe)在一个源代码报告文件处完整的保持了对应用程序中每一个源文件的所有的修改记录(修改人,日期和时间, 注释和具体修改)。程序员可以查看修改记录,恢复误删代码,比较不同版本的文件差异,将两个不同版本的修改合并。

1, 使用VSS进行项目小组开发:如果宿主Web安装了VSS,就可使用VSS的文件Check-in和Check-out功能来实现Web应用版本控制,进行基于小组的Web开发,开发人员可以分别负责运行和测试项目的各个部分,从源文件存放处Check-out(通常是独占排它式的,也可设置成允许多人共同Check-out)一个需要修改文件的可写版本,使用本地模式进行修改和测试, 完成后就可以将新版代码check-in,发布到Web服务器上。在小组开发时可刷新工程(在Project Toolbar上选择Refresh)以看到其他成员的更改状况。

2, 使用VSS控制数据库Project源文件(SQL脚本)

操作: Project Explorer窗口 | 右击该Project | 选择Add to SourceControl

3, 使用VSS控制存储过程源文件

操作: DataView窗口 | 右击该存储过程 | 选择AddtoSourceControl

参见

Visual InterDev 6.0 调试资源

Special Edition Using Microsoft Visual InterDev Visual InterDev 6开发使用手册

BRADLEY大学InterDev相关网校资源

Learn MICROSOFT VISUAL INTERDEV

InterDev 6.0 编辑器源、快速视图和设计选项卡丢失解决方法

no such interface supported不支持此接口解决方法

关于Visual InterDev 6.0 调试ASP工程的个人方法

如果在添加某个项目到VSS时出错提示”Cannot establish source control for the Web Application. The server does not have a source control system installed on it, or the user name is not recognized.” ,可以尝试把IUSR_machinenamet(Internet来宾帐号)添加成为VSS的user。

code2006101203817263.rar