WebSnap项目开发技术课件

1、WebSnap项目开发技术当体会到了Internet Express系列组件所带来的便捷后，接着就是要介绍WebSnap技术了。当跳脱数据库存取的枷锁，BCB6.0给我们WebSnap技术让我们更轻松的管理和开发整个网”站”。大纲26-1 WebSnap技术导论26-2 WebSnap技术应用26-3 移植项目型态本章习题26-1 WebSnap技术导论我们在前一章介绍过了InternetExpress技术，而这章的WebSnap技术会让读者们觉得和InternetExpress所差无几。没错，其实WebSnap的架构可以说是由InternetExpress的架构衍生而来的。然而WebSnap

2、应用技术，除了拥有InternetExpress技术的基本精神之外，还提供了更完整的扩充模块，并且支持了更多进阶的功能。WebSnap并不只有是一种组件的分类集合，而是独立的项目型态。所以说，WebSnap我们可以看成是一种特殊的发展流程，就好像写Console程序或是写窗口程序一样，是独立的架构。26-1 WebSnap技术导论现在开始来看看WebSnap项目吧，要建立一个新的项目，先到菜单的File选单选择New，然后点选Other选项，在卷标对话盒里在WebSnap卷标按下鼠标左键，这时我们就可以看到如右的画面。WebSnap是一个新的项目型态，针对的是一整个网站的架构，也就是说我们可以

3、利用WebSnap技术来开发整个网站，并且可以利用BCB所提供的模块和功能，当然了，InternetExpress的存取方式也是支持的，因为WebSnap可以说是从InternetExpress技术衍生来的26-1 WebSnap技术导论我们可以看到有三种服务项目，其功能分别为：项目名称说明WebSnap Application建立一个新的 WebSnap项目WebSnap Data Module新增一个Data Module模块到WebSnap项目中，Data Module也就是WebSnap 项目里负责数据的模块WebSnap Page Module新增一个 Page Module模块到W

4、ebSnap项目中，Page Module是负责建立网页的模块。WebSnap范例 1Components的按钮，用鼠标按下后就会出现该模块有提供哪些组件，如图所示：在这里看到了一共八个组件，预设的有三个，其中这些组件的功能有：Application Adapter:最基本的组件，用来纪录整个应用模块的大部分信息。End User Adapter:负责远程使用者的权限管理。Page Dispatcher:在模块的最外围，负责接收使用者的要求，进而根据使用者要求和其它信息，来决定应该要用哪个页面响应。Adapter Dispatcher:和Page Dispatcher类似，也是在外围负责针对使

5、用者的要求来决定对应的Action。Dispatch Actions:将客户端的要求直接转给对应的Action处理。Locate File Service:负责处理服务器端的档案资源。Sessions Service:负责处理Session相关的资源。User List Service:负责使用者的个人信息和权限。WebSnap范例 2处理完Module Components的设定后，接下来就进入Application Module Options的选单，我们可以看到如图的设定画面在Producer的设定里，我们可以设定Producer的格式和产生每个Page所使用的Script语言。最重要的

6、就是最下面有两个选框第一个是Published，作用是让我们决定产生出来的网页是否要公开至于Login Required当然就是决定是否在读取网页的时候会要求使用者输入账号密码WebSnap范例 4在开发的过程中，要如何真的跑跑看我们开发的项目执行的结果呢？我们需要执行整个项目，也就是按下F9，接着当Form1窗口出现以后，就在菜单的Tools下选择Web App Debugger选项，如图所示的对话窗口就会出现了。WebSnap范例 5当我们按下Start时，Default URL所示的URL地址将会变成可以点选的，这个时候BCB帮我们建立一个Port为1024的暂时Web Server，用

7、来让我们执行项目，观看结果。当我们点选了Default URL所列出的网页时，将会开启IE浏览器用来浏览ServerInfo网页，这个网页将会列出目前被注册的项目有哪些，在下拉选单里选出刚刚执行的项目，然后按下Go按键。如图所示WebSnap范例- 加入新的页面到项目里 1当一个项目刚建立时，我们只会有一个首页，也就是网站的第一个页面。当然我们在建构网站的时候，会不断的增加新的网页。这个时候，我们就会需要利用WebSnap项目分类里的WebSnap Page Module了，新增了一个module到整个项目里，就好像新增了一个网页到网站里一样。要执行这个动作，可以到工具列里的File，选择Ne

8、w选项，然后是Others选项，在New Items对话窗口里，找到WebSnap页签，然后就可以看到三个WebSnap的图标选项了，这次我们要选的是WebSnap Page Module。WebSnap范例- 加入新的页面到项目里 3笔者在Page设定的Name设定为SecondPage，按下OK以后，项目里将会多出一个PageModule并且这个Module已经有了一个PageProducer组件，整个模块在项目里命名为Unit3。同样的，我们也可以在html页签编辑样本网页，笔者在此随便加上一行叙述”This is the second page”，用来和第一页区别。WebSnap范例-

9、 加入新的页面到项目里 4好了，按下F9执行项目，然后再使用Tools选单里的Web App Debugger来看看项目执行的结果。我们可以看到，项目的首页画面多了一个SecondPage的连结了WebSnap范例- 加入数据库存取 2范例想是使用Data Module连结Access的mdb档案数据库，所以在Data Module里加入了ADOConnection组件和ADODataSet组件。利用ADOConnection1组件连结范例数据库course.mdb，并且将ADODataSet的connection属性指定为ADOConnection1，然后在CommandText属性的编辑方

10、框里编辑如下：Select * form CourseInfo这样一来Data Module已经可以连结范例数据库，并且把所有的字段都传递出去WebSnap范例- 加入数据库存取 3有了数据模块提供数据，我们还需要另外一个页面模块来显示数据，所以这时我们还要在新增一个WebSnap Page Module，命名为ThirdPage，并且在型态的部分，设定为AdapterPageProducer。当这个新的模块建立好以后，会有一个AdpaterPageProducer的组件，这个是用来显示页面的组件，我们需要使用这个组件将数据库的数据整理好显示出来，但是首先必须要取得数据库的数据，这个时候将还需

11、要另外一个组件，就是WebSnap页签的DataSetAdapter组件。WebSnap范例- 加入数据库存取 4为了让DataSetAdapter1可以读取到DataModule的ADODataSet1组件所提供的数据库数据，在菜单的File下的Include Unit Hdr加入Data Module的单元名称，在此笔者的data module为Unit4。做完这个动作以后，我们就可以在DataSetAdapter1的DataSet属性选择ADODataSet1了。现在ThirdPage也藉由刚刚的动作取得了数据库的信息了，现在我们就在AdapterPageProduce组件上双击鼠标左键

12、，就可以看到似曾相似的编辑画面，没错，这就是和InternetExpress的InetXPageProducer相同的编辑画面，我们要利用这个编辑画面将数据库的信息显示出来。首先在编辑画面左边窗口的地方新增一个组件AdapterForm，然后在AdapterForm组件下再新增两个组件：AdapterCommandGroup和AdapterFieldGroup。指定AdapterFieldGroup的Adapter属性为DataSetAdapter1，而AdapterCommandGroup1的DisplayComponent属性为AdapterFieldGroup1。WebSnap范例- 加

13、入数据库存取 5将项目存盘，并且按下F9进行编译和执行的动作。我们再次利用工具列Tools的Web App Debugger来看结果，我们可以发现多出了一个ThirdPage的超级链接，点进去看就可以看到成功的结果了，如图：26-3 移植项目型态由前面两节的介绍，我们可以知道如何利用WebSnap技术去建构一个网站，而WebSnap是一个特殊的项目型态，并非平常常见的网页格式。虽然WebSnap是一个完整的网页开发环境，但是毕竟和其它的网也格式和架构差异太大，有的时候要进行维护比较麻烦，所以我们也许会需要将WebSnap项目转换成为一般比较常见的网页程序，如CGI。移植项目型态范例-1首先，我们需要建立一个格式为CGI的空白项目，所以在新增项目时，选择WebSnap的WebSnap Application Module，选择的格式为CGI Standalone executable。这个时候，我们必须要把这个项目的Application Module部分拿掉，因为要套用上一节范例的模块。到工具列的Project选单选择Remove from Project，然后把Unit1.cpp移除，其它的是和项目相关的，所以都保留。接着我们要把上一节范例的模块拿进来，所以再到Project选单下选