很多开发人员都使用诸如Dreamweaver或FrontPage来设计自己的Web网页。由于需要的所有功能都集中于WYSIWY工具,这些工具显得相当优秀。然而,有些时候这些工具能够提供更多的功能与特性。
例如,假设你想为用户提供建立一个基于特定模板的数据入口窗体。即这一入口窗体工作方式类似于报表自定义(Report Builder)。这样,你可以构建自己的窗体自定义(Form Builder)工具,以能够自动地与数据源产生关联,并可以为终端用户提供数据入口窗体。在本文中,我将建立一个简单的网页,以引导读者能够通过一个<INPUT>元素和一个<SELECT>元素建立一个Web网页,并建立一个数据入口窗体。
首先,确定数据流向的目标地点。在我们的例子中,数据将流向SQL Server上的名为SALES的简单列表。这一列表的相关域为售货员(Salesperson)和数量(金钱)。Salesperson域不太适合与另一列表SALES_STAFF的关键字相联系。SALES_STAFF表包含售货员的first_name和last_name。由于SALES_STAFF表为参考列表,本文作者将使用<SELECT>来选择这一表的域,而数量域将作为一个简单的<INPUT>元素。
现在,你必须弄清楚构建这些元素的原理。我们希望作者能够选择表中的域,然后选择适合的元素。接着,作者能够将一些属性配置给这些元素。对于<SELECT>表,作者可以分配size属性和建立一系列可选择的尺寸值。对于<INPUT>元素,他们也可以分配size尺寸。除此之外,作者将可以设置一些style属性,比如在窗体上放置元素的位置。同样,作者将可以将数据域分配给元素。表A给出了页面布局的代码。
这些HTML元素位于屏幕的左边。当用户在屏幕上放置一个元素时,他们将可在屏幕下底端的属性列表中看到这些元素的属性。属性列表与相应的XML属性数据相关联。当用户改变属性列表的数据时,就会生成新的元素属性。
用户可以使用光标改变位置属性,以确定<DIV>的元素位置,或者用户可以在属性列中的输入新的值。为了使用光标在<DIV>改变位置,我将添加一个HTC以提供这一功能。表B包含了HTC的代码。
为了“绑定”数据以达到每一属性都列于表格中,我将列表“绑定”到一个单一属性的XML岛。每一次操作我都将会激活其它元素,并将元素的XML载入到数据岛,这样就可以将表中的数据关联起来。当元素失去“激活”时,新的元素XML属性就会被载入。
为了建立元素,我将在Web页面中包含JavaScript以处理这些元素,可查看表C。
同样,通过一些转换操作可以完成列表之间的关系。我将一个<IMG>键添加到行,并使用它的onload事件获得rowIndex属性。然后,我使用这些属性值以获得相关的属性节点。通过这一方式,我可以设置是否将<SELECT>元素显示到所有的数据域。
一旦你建立了所有的元素,XML数据就会被存储在一个文件或数据库中。然后,使用一个XSLT表单重新设置输出的格式,并且生成新的HTML窗体。数据将通过与页面关联的XML数据自动连接到数据域,并且XML数据将被传送以增加或更新原来的内部数据。