TurboGears – ToscaWidgetsフォーム

Webアプリケーションの最も重要な側面の1つは、ユーザーにユーザーインターフェイスを提示することです。 HTMLは、インターフェースの設計に使用される<form>タグを提供します。テキスト入力、ラジオ、選択などのフォームの要素適切に使用できます。ユーザーが入力したデータは、GETまたはPOSTメソッドのいずれかにより、サーバー側スクリプトにHttp要求メッセージの形式で送信されます。

サーバー側のスクリプトは、http要求データからフォーム要素を再作成する必要があります。そのため、この効果では、フォーム要素を2回定義する必要があります（HTMLで1回、サーバー側スクリプトで1回）。

HTMLフォームを使用する別の欠点は、フォーム要素を動的にレンダリングすることが（不可能ではないにしても）難しいことです。 HTML自体は、ユーザーの入力を検証する方法を提供しません。

ToscaWidgets2

TurboGearsは、柔軟なフォームレンダリングおよび検証ライブラリであるToscaWidgets2に依存しています。 ToscaWidgetsを使用して、Pythonスクリプトでフォームフィールドを定義し、HTMLテンプレートを使用してそれらをレンダリングできます。 tw2フィールドに検証を適用することもできます。

ToscaWidgetsライブラリは、多くのモジュールのコレクションです。いくつかの重要なモジュールは以下のとおりです-

tw2.core -コア機能を提供します。このモジュールのウィジェットは、エンドユーザーが利用できるようには意図されていません。
tw2.forms -これは基本的なフォームライブラリです。フィールド、フィールドセット、フォーム用のウィジェットが含まれています。
tw2.dynforms -これには動的フォーム機能が含まれます。
tw2.sqla -これはSQLAlchemyデータベースのインターフェースです。

tw2.forms

これには、カスタムフォームのベースとして機能するFormクラスが含まれています。 2列テーブルのフィールドのレンダリングに役立つTableFormクラスがあります。 ListFormは、フィールドを順不同リストで表示します。

次の表は、tw2.formsモジュールで最も一般的に使用されるフィールドのタイプを示しています-

Sr.No.	Fields & Description
1	TextField 単一行のテキスト入力フィールド
2	TextArea 複数行のテキスト入力フィールド
3	CheckBox ラベル付きのチェック可能な長方形のボックスを提示します
4	CheckBoxList 複数選択可能なグループpfチェックボックス
5	RadioButton 選択/選択解除するトグルボタン
6	RadioButtonList 相互に排他的なラジオボタンのグループ
7	PasswordField テキストフィールドに似ていますが、入力キーは表示されません
8	CalendarDatePicker ユーザーが日付を選択できるようにします
9	SubmitButton フォームを送信するボタン
10	ImageButton 画像が上部にあるクリック可能なボタン
11	SingleSelectField リストから単一の項目を選択できるようにします
12	MultipleSelectField リストから複数のアイテムを選択できるようにします
13	FileField ファイルをアップロードするためのフィールド
14	EmailField メール入力フィールド
15	URLField URLを入力する入力フィールド
16	NumberField 番号スピンボックス
17	RangeField 数値スライダー

次の例では、これらのウィジェットの一部を使用したフォームが構築されます。これらのウィジェットのほとんどは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 が使用されます。ウィジェットは2列のテーブルに表示されます。最初の列はキャプションを示し、2番目の列は入力または選択フィールドを示します。

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があります。このクラスのコンストラクターには、optionsパラメーターの値としてListオブジェクトが含まれます。各オプションのラジオボタンが表示されます。デフォルトの選択は、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オブジェクトを作成し、値パラメーターとして指定します。

twf.SubmitButton(value = 'Submit')

フォームはURLに送信されます。URLは、フォームのアクションパラメーターの値として指定されます。デフォルトでは、フォームデータはhttp POSTメソッドによって送信されます。

action = 'URL'

次のコードでは、AdmissionFormという名前のフォームが上記のウィジェットを使用して設計されています。このコードをRootControllerクラスの前のroot.pyに追加します。

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')

次に、このコードを twforml としてテンプレートディレクトリに保存します-

<!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クラスには、アクションURLとして stipulated/save_form があります。したがって、RootControllerに* save_form（）*関数を追加します。

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

サーバーが実行されていることを確認します（ギアボックスサービスを使用）。ブラウザに http：//localhost：8080/twform と入力します。

フォーム

[送信]ボタンを押すと、このデータが* save_form（）* URLに投稿され、辞書データの形式でフォームデータが表示されます。

{
   'EmailID': u'[email protected]',
   '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'
}

Turbogears-toscawidgets-forms

TurboGears – ToscaWidgetsフォーム

ToscaWidgets2

tw2.forms