WebSnap项目开发技术(26页)

26-1 WebSnap技术导论
• 我们可以看到有三种服务项目， 其功能分别为：
项目名称 WebSnap Application WebSnap Data Module
WebSnap Page Module
说明 建立一个新的 WebSnap项目
新增一个Data Module模块到 WebSnap项目中，Data Module 也就是WebSnap 项目里负责数 据的模块 新增一个 Page Module模块到 WebSnap项目中，Page
WebSnap范例加入新的页面到项目里 3
• 笔者在Page设定的Name设定为SecondPage，按下OK以后，项目里 将 会多出一个PageModule并且这个Module已经有了一个 PageProducer 组件，整个模块在项目里命名为Unit3。同样的，我们 也可以在html页签编辑样本网页，笔者在此随便加上一行叙述”This is the second page”，用来和第一页区别。
– 首先在编辑画面左边窗口的地方新增一个组件AdapterForm，然后在 AdapterForm组件下再新增两个组件：AdapterCommandGroup和 AdapterFieldGroup。
– 指定AdapterFieldGroup的Adapter属性为DataSetAdapter1，而 AdapterCommandGroup1的DisplayComponent属性为AdapterFieldGroup1。
• 当我们点选了Default URL所列 出的网页时，将会开启IE浏览器 用来浏览ServerInfo网页，这个 网页将会列出目前被注册的项目 有哪些，在下拉选单里选出刚刚 执行的项目，然后按下Go按键。 如图所示
WebSnap范例加入新的页面到项目里 1
• 当一个项目刚建立时，我们只会有一个首页，也就是网站的 第一个页面。当然我们在建构网站的时候，会不断的增加新 的网页。这个时候，我们就会需要利用WebSnap项目分类里 的WebSnap Page Module了，新增了一个module到整个项 目里，就好像新增了一个网页到网站里一样。
• 要执行这个动作，可以到工具列里的File，选择New选项，然 后是 Others选项，在New Items对话窗口里，找到WebSnap 页签，然后就可以看到三个WebSnap的图标选项了，这次我 们要选的是WebSnap Page Module。
WebSnap范例-
加入新的页面到项目里 2
• 新增了一个Page Module的第一 步，就是要设定这个新页面。当 我们点选了图标选项时，如图这 个相当熟息的设定画面就会出现。
– Page Dispatcher:
• 在模块的最外围，负责接收使用者的要求，进而根据使用者要求和其 它信息，来决定应该要用哪个页面响应。 – Adapter Dispatcher:
• 和Page Dispatcher类似，也是在外围负责针对使用者的要求来决定对 应的Action。 – Dispatch Actions: • 将客户端的要求直接转给对应的Action处理。 – Locate File Service: • 负责处理服务器端的档案资源。 – Sessions Service: • 负责处理Session相关的资源。 – User List Service: • 负责使用者的个人信息和权限。
WebSnap范例加入数据库存取 5
• 将项目存盘，并且按下F9进行编 译和执行的动作。
• 我们再次利用工具列Tools的 Web App Debugger来看结果， 我们可以发现多出了一个 ThirdPage的超级链接，点进去 看就可以看到成功的结果了，如 图：
26-3 移植项目型态
• 由前面两节的介绍，我们可以知道如何利用WebSnap技术去 建构一个网站，而WebSnap是一个特殊的项目型态，并非平 常常见的网页格式。
• 为了让DataSetAdapter1可以读取到DataModule的ADODataSet1组件所 提供的数据库数据，在菜单的File下的Include Unit Hdr加入Data Module 的单元名称，在此笔者的data module为Unit4。做完这个动作以后，我们 就可以在DataSetAdapter1的DataSet属性选择ADODataSet1了。
26-2 WebSnap技术应用
• 本节将会以范例的方式, 说明如 何运用WebSnap的流程来开发 网站
• WebSnap项目的建立 – 首先我们开始建立一个新的项目，
在工具列的File选单里，选择 Other然后就可以找到WebSnap 页签，这个时候我们选择第一个 图标选项WebSnap Application， 然后就可以看到如右的画面了。 – Application Module Component 是用来设定本项目是要使用哪一 种的application module，以及该 选定的模块将要包含哪些组件。
我们决定产生出来的网页是否要 公开 – 至于Login Required当然就是决 定是否在读取网页的时候会要求 使用者输入账号密码
WebSnap范例 3
• 当项目建立后，首先我们可以看到会有两个项目窗体，其一为 Form1，Unit1，也就是普通的Application项目窗体，另外一个 就是WelcomePage窗体，也就是Unit2，如图所示
• WebSnap并不只有是一种组件的分类集合，而是独立的项目 型态。所以说，WebSnap我们可以看成是一种特殊的发展流程 ，就好像写Console程序或是写窗口程序一样，是独立的架构 。
26-1 WebSnap技术导论
• 现在开始来看看WebSnap项目吧， 要建立一个新的项目，先到菜单的 File选单选择New，然后点选Other 选项，在卷标对话盒里在WebSnap 卷标按下鼠标左键，这时我们就可 以看到如右的画面。
• 设定画面里，唯一陌生的选项就 是Module Options里面的 Creation，下拉选单里可以让我 们选择On Demand或者是 Always。这里的On Demand指 的是当这个页面模块被系统要求 的时候才会产生，而如果是选择 Always的话，就是这个应用程序 被启动的时候，页面就会产生了。
• 按下ok后，就可以看到一个简单的设定画面
– 别设定数据模块存取的时机以及是否作 /view23/M00/23/3D/wKh2HWKYIECARZG
WebSnap范例加入数据库存取 2
• 范例想是使用Data Module连结Access的mdb档案数据库，所以在 Data Module里加入了ADOConnection组件和ADODataSet组件。利 用ADOConnection1组件连结范例数据库course.mdb，并且将 ADODataSet的connection属性指定为ADOConnection1，然后在 CommandText属性的编辑方框里编辑如下：
• WebSnap是一个新的项目型态，针 对的是一整个网站的架构，也就是 说我们可以利用WebSnap技术来开 发整个网站，并且可以利用BCB所 提供的模块和功能，当然了， InternetExpress的存取方式也是支 持的，因为WebSnap可以说是从 InternetExpress技术衍生来的
WebSnap范例 4
• 在开发的过程中，要如何真的跑 跑看我们开发的项目执行的结果 呢？我们需要执行整个项目，也 就是按下F9，接着当Form1窗口 出现以后，就在菜单的Tools下 选择Web App Debugger选项， 如图所示的对话窗口就会出现了。
WebSnap范例 5
• 当我们按下Start时，Default URL所示的URL地址将会变成可 以点选的，这个时候BCB帮我们 建立一个Port为1024的暂时Web Server，用来让我们执行项目， 观看结果。
– Select * form CourseInfo
• 这样一来Data Module已经可以连结范例数据库，并且把所有的字段 都传递出去
WebSnap范例加入数据库存取 3
• 有了数据模块提供数据，我们还需要另外 一个页面模块来显示数据，所以这时我们 还要在新增一个WebSnap Page Module， 命名为ThirdPage，并且在型态的部分， 设定为AdapterPageProducer。
WebSnapponents的设定 后，接下来就进入Application Module Options的选单，我们可 以看到如图的设定画面
• 在Producer的设定里，我们可以 设定Producer的格式和产生每个 Page所使用的script语言。
• 最重要的就是最下面有两个选框 – 第一个是Published，作用是让
WebSnap范例加入新的页面到项目里 4
• 好了，按下F9执行项目，然后再使用Tools选单里的Web App Debugger来看看项目执行的结果。我们可以看到，项目的首页画面 多了一个SecondPage的连结了
WebSnap范例加入数据库存取 1
• 首先在项目里要加入一个新的WebSnap Data Module，就到New Items页签下点选Web Snap Data Module图标选项
• 现在ThirdPage也藉由刚刚的动作取得了数据库的信息了，现在我们就在 AdapterPageProduce组件上双击鼠标左键，就可以看到似曾相似的编辑 画 面，没错，这就是和InternetExpress的InetXPageProducer相同的编辑画 面，我们要利用这个编辑画面将数据库的信息显示出来。
26-1 WebSnap技术导论
• 我们在前一章介绍过了InternetExpress技术，而这章的 WebSnap技术会让读者们觉得和InternetExpress所差无几。 没错，其实WebSnap的架构可以说是由InternetExpress的架 构衍生而来的。然而WebSnap应用技术，除了拥有 InternetExpress技术的基本精神之外，还提供了更完整的扩 充模块，并且支持了更多进阶的功能。
WebSnap项目开发技术
当体会到了Internet Express系列组件所带来的 便捷后，接着就是要介绍WebSnap技术了。当 跳脱数据库存取的枷锁，BCB6.0给我们 WebSnap技术让我们更轻松的管理和开发整个 网”站”。
大纲
• 26-1 WebSnap技术导论 • 26-2 WebSnap技术应用 • 26-3 移植项目型态 • 本章习题
• 虽然WebSnap是一个完整的网页开发环境，但是毕竟和其它 的网也格式和架构差异太大，有的时候要进行维护比较麻烦， 所以我们也许会需要将WebSnap项目转换成为一般比较常见 的网页程序，如CGI。
移植项目型态范例-1
• 首先，我们需要建立一个格式为CGI的空白项目，所以在新 增项目时，选择WebSnap的WebSnap Application Module， 选择的格式为CGI Standalone executable。
• 这个时候，我们必须要把这个项目的Application Module部分 拿掉，因为要套用上一节范例的模块。到工具列的Project选 单选择Remove from Project，然后把Unit1.cpp移除，其它的 是和项目相关的，所以都保留。
WebSnap范例 1
• Components的按钮，用鼠标按下后就会出现该模块有提供哪些组件，
如图所示： • 在这里看到了一共八个组件，预设的有三个，其中这些组件的功能有：
– Application Adapter: • 最基本的组件，用来纪录整个应用模块的大部分信息。
– End User Adapter: • 负责远程使用者的权限管理。
• 当这个新的模块建立好以后，会有一个 AdpaterPageProducer的组件，这个是用 来显示页面的组件，我们需要使用这个组 件将数据库的数据整理好显示出来，但是 首先必须要取得数据库的数据，这个时候 将还需要另外一个组件，就是WebSnap页 签的DataSetAdapter组件。
WebSnap范例加入数据库存取 4