TurboGears – ToscaWidgets 表格

任何 Web 应用程序最重要的方面之一就是为用户呈现用户界面。HTML 提供了一个 <form> 标签，用于设计界面。可以适当使用文本输入、单选、选择等表单元素。用户输入的数据通过 GET 或 POST 方法以 Http 请求消息的形式提交到服务器端脚本。

服务器端脚本必须从 http 请求数据重新创建表单元素。因此，在这种情况下，表单元素必须定义两次——一次在 HTML 中，另一次在服务器端脚本中。

使用 HTML 表单的另一个缺点是很难（如果不是不可能的话）动态呈现表单元素。HTML 本身不提供验证用户输入的方法。

托斯卡小部件2

TurboGears 依赖于 ToscaWidgets2，一个灵活的表单渲染和验证库。使用 ToscaWidgets，我们可以在 Python 脚本中定义表单字段并使用 HTML 模板呈现它们。还可以对 tw2 字段应用验证。

ToscaWidgets 库是许多模块的集合。下面列出了一些重要的模块 -

  • tw2.core - 它提供核心功能。此模块中的小部件并不可供最终用户使用。

  • tw2.forms - 这是一个基本的表单库。它包含字段、字段集和表单的小部件。

  • tw2.dynforms - 这包含动态表单功能。

  • tw2.sqla - 这是 SQLAlchemy 数据库的接口。

tw2.forms

它包含一个 Form 类，该类充当自定义表单的基础。有一个 TableForm 类在呈现两列表中的字段时非常有用。ListForm 在无序列表中显示其字段。

先生。 字段和描述
1

文本域

单行文本输入字段
2

文本区

多行文本输入字段
3

复选框

呈现一个带有标签的可检查矩形框
4

复选框列表

多选组 pf 复选框
5

单选按钮

用于选择/取消选择的切换按钮
6

单选按钮列表

一组互斥的单选按钮
7

密码字段

与 Textfield 类似，但不显示输入键
8

日历日期选择器

让用户选择日期
9

提交按钮

提交表单的按钮
10

图像按钮

顶部有图像的可点击按钮
11

单选字段

允许从列表中选择单个项目
12

多重选择字段

允许从列表中选择多个项目
13

文件字段

上传文件的字段
14

电子邮件字段

电子邮件输入字段
15

URL字段

用于输入 URL 的输入字段
16

数字字段

数字旋转盒
17 号

范围场

数字滑块

在以下示例中，构建了使用其中一些小部件的表单。虽然大多数这些小部件是在 tw2.forms 中定义的，但 CalendarDateField 是在 tw2.Dynforms 模块中定义的。因此，这两个模块以及 tw2.core 都是在开始时导入的 -

import tw2.core as twc
import tw2.forms as twf
import tw2.dynforms as twd

ToscaWidgets 表单是从tw2.forms.form基类派生的类。所需的小部件放置在布局对象内。在这个例子中，使用了TableLayout 。小部件呈现在两列表格中。第一列显示标题，第二列显示输入或选择字段。

使用以下构造函数创建 TextField 对象 -

twf.TextField(size, value = None)

如果没有提及，TextField 对象采用默认大小并且最初为空白。在声明TextArea对象时，可以提及行数和列数。

twf.TextArea("",rows = 5, cols = 30)

NumberField 对象是一个只能接受数字的 TextField。右边框上生成向上和向下箭头，以增加或减少其中的数字。初始值也可以指定为构造函数中的参数。

twf.NumberField(value)

在 CalendarDatePicker 框的右侧，显示一个日历按钮。按下时会弹出日期选择器。用户可以在框中手动键入日期或从日期选择器中进行选择。

twd.CalendarDatePicker()

EmailField 对象呈现一个 TextField，但其中的文本必须是电子邮件格式。

EmailID = twf.EmailField()

下面的表单也有一个RadioButtonList。此类的构造函数包含一个 List 对象作为 options 参数的值。将呈现每个选项的单选按钮。默认选择是用 value 参数指定的。

twf.RadioButtonList(options = ["option1","option2"],value = option1)

CheckBoxList 呈现列表中每个选项的复选框。

twf.CheckBoxList(options = [option1, option2, option3])

下拉列表在此 ToscaWidgets 库中称为 SingleSelectfield。List 对象中与选项参数对应的项目形成下拉列表。可见标题设置为prompt_text 参数的值。

twf.SingleSelectField(prompt_text = 'text', options=['item1', 'item2', 'item3'])

默认情况下，表单显示一个“提交”按钮，其标题为“保存”。为了显示另一个标题，请创建一个 SubmitButton 对象并将其指定为 value 参数。

twf.SubmitButton(value = 'Submit')

表单被提交到一个 URL，该 URL 被指定为表单的操作参数值。默认情况下，表单数据通过http POST方式提交。

action = 'URL'

在下面的代码中，使用上面解释的小部件设计了一个名为AdmissionForm的表单。在 root.py 中的 RootController 类之前添加此代码。

class AdmissionForm(twf.Form):
   class child(twf.TableLayout):
      NameOfStudent = twf.TextField(size = 20)
      AddressForCorrespondance = twf.TextArea("", rows = 5, cols = 30)
      PINCODE = twf.NumberField(value = 431602)
      DateOfBirth = twd.CalendarDatePicker()
      EmailID = twf.EmailField()
      Gender = twf.RadioButtonList(options = ["Male","Female"],value = 'Male')
      Subjects = twf.CheckBoxList(options = ['TurboGears', 'Flask', 'Django', 'Pyramid'])

      MediumOfInstruction = twf.SingleSelectField(prompt_text = 'choose',
         options = ['English', 'Hindi', 'Marathi', 'Telugu'])
			
      action = '/save_form'
      submit = twf.SubmitButton(value ='Submit')

现在将此代码保存为模板目录中的twform.html -

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:py = "http://genshi.edgewall.org/"
   lang = "en">
   
   <head>
      <title>TurboGears Form Example</title>
   </head>
   
   <body>
      <div id = "tw form">
         ${form.display(value = dict(title = 'default title'))}
      </div>
   </body>
   
</html>

在 RootController 类（在 root.py 中）中，添加以下控制器函数 -

@expose('hello.templates.twform')
def twform(self, *args, **kw):
   return dict(page = 'twform', form = MovieForm)

在AdmissionForm类中，我们规定/save_form作为操作URL。因此在 RootController 中添加save_form()函数。

@expose()
def save_movie(self, **kw):
   return str(kw)

确保服务器正在运行（使用变速箱服务）。在浏览器中输入 http://localhost:8080/twform 。

形式

按提交按钮会将这些数据发布到save_form() URL，该 URL 将以字典对象的形式显示表单数据。

{
   'EmailID': u'lathkar@yahoo.com', 
   'NameOfStudent': u'Malhar Lathkar', 
   'Gender': u'Male', 
   'PINCODE': u'431602', 
   'DateOfBirth': u'2015-12-29', 
   'Subjects': [u'TurboGears', u'Flask', u'Django'], 
   'MediumOfInstruction': u'', 
   'AddressForCorrespondance': u'Shivaji Nagar\r\nNanded\r\nMaharashtra'
}