首页  编辑  

WebSnap入门

Tags: /超级猛料/Web.互联网开发技术/   Date Created:

WebSnap 入门

John Kaster   翻译: grhunter

作者简介: John Kaster Borland 公司开发人员关系部门职员

摘 要: 如何使用 WebSnap 平台构架一个功能完备、基于浏览器的 关键字: WebSnap,web 服务器 ,Delphi6 类 别: 网络

CoDelphi.com 版权所有,未经允许,不得进行任何形式转载

WebSnap 基础

WebSnapTM D6 企业版中的一种新的基于组件的组件平台,用于快速开发 Web 服务器应用。本文将介绍如何创建一个简单的 WebSnap 服务器,为包括图像字段的数据集提供完备的编辑和浏览界面。在本文中你将可以看到,根本无需写一行代码,就可以完全实现需要的功能。

创建 WebSnap 服务器

首先,我们需要找到 WebSnap 工具栏。在 D6 企业版 IDE 工具栏上右击,显示 Internet 工具栏,如下所示:

WebSnap 工具栏

第一个图标(地球下面一只手那个)用于创建新的 WebSnap 应用程序。点一下, WebSnap 向导出现了。我们要指定 web 页面的名称,还要将程序设置为 Web App Debugger 应用,这样,我们就能利用 D6 专业版和企业版中的 web 服务器(用 Delphi 构建)。假设我们把服务器称作 BasicDemo

WebSnap Application Wizard

点击 OK 按钮后,将得到一个标准的 Delphi 窗体(可以用来监测 web 服务器何时处于运行状态)和一个 WebModule ,包括了 web 页面要用的组件。这些组件用以接收页面请求,当用户点击特定链接或者按钮时分派浏览器客户端请求。

Home 页面模块

创建数据模块

现在要创建一个 WebSnap 数据模块,用来从数据集发布信息。点击 WebSnap 工具栏的第三个按钮(地球前面有一个数据集那个)。然后,从组建面板 Data Access 页拖一个 TclientDataSet 到上面,在 FileName 属性中,指定旧 Paradox Biolife 表的 MyBase XML 数据集版本。应该是在\ Program Files\Common Files\Borland Shared\Data 目录下的 biolife.xml 文件。这个数据集包含图像字段和备注字段,还有普通的数值、文字字段。这些字段都可以用 WebSnap 来发布和编辑。

支持无状态服务器

指定 ClientDataSet 的文件名后,转到 Object TreeView ,展开 ClientDataset ,在 Fields 上点击,右击添加所有字段到树形视图。 WebSnap 为数据库操作创建无状态服务器,我们要为数据集指定一个主键,这样才能进行客户端的浏览和操作请求。用 Species No 作为主键。第一步,在 Object Treeview 中选择这个字段:

WebDataModule Object Treeview

然后,在 Object inspector 中修改 ProviderFlags 属性,将 pfInKey 设置为 True ,指定 Species No 为数据集主键。

注:如果没有找到这个数据集,也可以通过 BDE Paradox 表。唯一不同之处:需要直接放置一个 BDE session 组件,将 AutoSessionName 属性设置为 True ,然后用一个 Ttable 组件指向 DBDEMOS biolife.db 表。其它步骤一样。

Species No Object Inspector 中显示的属性

发布数据到浏览器

设置好数据集主键后,在 WebSnap 组件面板选择 DataSetAdapter ,如下图:

WebSnap 组件面板

DataSetAdapter 放到 DataModule 上。现在, DataModule 看起来应该象这个样子:

WebDataModule :包括 Dataset DataSetAdapter

现在把这个 adapter dataset 连结起来。如下图所示, Object Inspector 提供了组件参考的行内扩展支持。注意,数据集属性用不同的颜色和缩进来表示:

Object Inspector 中的组件参考

下一步不是必需的。为了描述清晰起见,仍要说明一下。回到 Object Treeview ,展开 adapter 的属性,为数据集添加所有命令适配器 (adapter) 和字段适配器(右击 Actions Fields )。可以看到,所有的标准数据集操作都受到支持(导航和数据修改)。字段适配器为任意数据集中的数据提供显示和编辑支持,包括含有文字或图像的 Blob 字段。

Object Treeview 中添加适配器

DataSetAdapter 显示数据表格

WebSnap 工具栏的第二个按钮(地球前面的文档那个按钮)为 web 服务器创建另一个页面,称之为 "Grid" 页。除了 Type 设置为 AdapterPageProducer 外,其它用缺省的设置。如果 Published 被选中,主页就会出现指向 Grid 的链接。

WebSnap Page Module 向导

在这个单元中 Use 先前的 WebDataModule Unit3 ),这样,就可以看到 DataSetAdapters 的声明。然后,在 Object Treeview 中,右击 AdapterPageProducer WebPageItems ,添加一个 AdapterForm 组件,在给它添加一个 AdapterGrid

添加 AdapterGrid

AdapterGrid Adapter 属性设置为 WebDataModule 的数据集适配器( WebDataModule3.DataSetAdapter1 ),然后点击编辑器中的 preview (预览)页,察看数据集中的数据。

预览 Grid

现在 grid 看起来不那么爽,因为 Notes 字段使每行数据显得太大了。好,我们来重载缺省的显示,添加需要显示的字段。在 Object Treeview 中右击 AdapterGrid ,选择 "Add Columns (添加栏) " ,如下图所示:

添加指定的栏

Object Treeview 看起来会像这样:

更新 Object TreeView

现在预览视图中值显示选择了的栏位:

新的 grid

编辑数据

用同一个向导( WebSnap 工具栏的第二个按钮)创建编辑页面。使用如下图所示的属性值:

WebSnap 向导创建 EditPage

和创建 Delphi 图形界面程序一样,这里我们也用同样的数据模块创建基于 WebSnap 的编辑界面。别忘了 Use Unit3 。在 Object Treeview 中右击,添加以下组件:

添加组件

连结 AdapterFieldGroup AdapterErrorList DataSetAdapter Adapter 属性)。指定 AdapterCommandGroup DisplayGroup 属性为 AdapterFieldGroup 。如果预览视图当前处于活动状态,你会看到一条关于需要属性的警告信息,帮助你正确设置组件参考。 AdapterFieldGroup 可以把数据显示为浏览模式或编辑模式。 AdapterErrorList 显示用户操作引起的任何数据确认错误。

设置页面链接

我们已经为指定的记录做好了编辑 / 浏览页面。支持在编辑和浏览模式之间直接跳转、操作 grid 中的记录,应该会是一个好主意。选择 Unit4 Grid ),在 Object Treeview 中右击 AdapterGrid1 ,添加一个 AdapterCommandColumn 。可以看到, command column 缺省地在一行中显示所有按钮。首先,把 AdapterCommandGroup Display columns 属性设置为 1 。这样,按钮就能够垂直排列了。我们只需要其中的四个按钮,所以,右击 AdapterCommandColumn ,添加需要在 grid 中显示的命令。

grid 上添加命令

grid 现在看起来好些了:

grid 预览

Object Treeview 中,选择 CmdEditRow CmdBrowseRow CmdNewRow ,把它们的 PageName 属性设置为 "EditPage" 。这将会为这些按钮设置 " 按页面名称 " 链接。

一切就绪,准备测试。保存所有文件,运行程序。

Web App Debugger

Web App Debugger 包括在 D6 专业版和企业版中。我们可以利用它来高效地调试 WebSnap 应用。可以在 web 服务器程序中设置断点。从 Tools 菜单运行 Web App Debugger ,点击 Start 按钮。如下图所示:

Web App Debugger

要察看 Web App Debugger 是否注册,点击 Server info 链接。在下面的列表中,可以注意到我已经注册了 D6 企业版的所有 WebSnap demo 。在列表中部,是刚才创建和注册的 WebSnap 服务器。

注册的 WebApp Debugger servers

点击 "View Details" 链接,可以察看详细信息。

服务器细节

点击 ServerInfo 列表视图的 "Go" 按钮,显示我们的服务器页面。或者点击细节视图中的链接。如下所示:

浏览器中的主页

点击 Grid 链接,显示数据表格:

数据表格

在表格中选择一行,点击 EditRow 按钮。可以在页面中编辑记录。注意,我们甚至可以改变图像,只要简单地点击 browse 按钮,选择一个新图像文件,然后点击 Apply 按钮。

编辑模式

要确定是在同一页编辑,点击 BrowseRow ,可以看到图像。在编辑模式也可以显示图像。目前,所有的适配器字段的 ViewMode 属性都设置为 vmDefault ,表示从 AdapterFieldGroup 的当前 ViewMode 取得设置值。如果想 总是 显示图像,可以在 field group 中添加一个 AdapterDisplayField ,指定给图像字段,将 ViewMode 属性设置为 vmDisplay

浏览模式

点击 EditRow 按钮,切换回编辑状态,输入一些非法数据。试着保存更改,会看到下面的样子:

错误捕获

如果点击 Cancel ,改动将不会保存。

通过上面的介绍,我们可以了解到 WebSnap 最初级的应用。 WebSnap 是一个具备高度灵活性和扩展性的基于组件的 Web 服务器开发平台,还有许多需要发掘的内容。这都有待在以后的文章中继续探讨了。

img_11272.bmp (507.1KB)
img_11707.bmp (324.3KB)
img_12461.bmp (270.6KB)
img_12773.bmp (167.1KB)
img_16081.bmp (299.6KB)
img_17255.bmp (385.1KB)
img_17509.bmp (601.5KB)
img_18339.bmp (658.0KB)
img_18349.bmp (467.0KB)
img_19114.bmp (79.7KB)
img_20324.bmp (596.9KB)
img_22362.bmp (516.4KB)
img_22788.bmp (601.5KB)
img_24548.bmp (539.7KB)
img_25763.bmp (385.1KB)
img_26076.bmp (270.6KB)
img_26652.bmp (567.3KB)
img_26840.bmp (175.1KB)
img_27174.bmp (549.3KB)
img_28736.bmp (596.9KB)
img_30390.bmp (567.3KB)
img_30847.bmp (553.9KB)
img_32398.bmp (115.6KB)
img_8018.bmp (186.0KB)
img_9183.bmp (539.7KB)
img_9329.bmp (248.6KB)
img_9763.bmp (596.9KB)