web2py_ajax.html

□未翻訳

□翻訳中

□翻訳完了（Omi Chiba）

■レビュー（細田謙二）

web2py_ajax.html

雛形web2pyアプリケーションの"welcom"には以下のファイルがあります。

The scaffolding web2py application "welcome" includes a file called

1.

views/web2py_ajax.html

このファイルはデフォルトの"layout.html"のヘッダー(HEAD)にあり、次のようなサービスを提供します：

This file is included in the HEAD of the default "layout.html" and it provides the following services:

  • static/jquery.jsの読み込み。

  • static/calendar.jsかstatic/calendar.cssがあれば読み込み。

  • ajax関数の定義（jQuery $.ajaxに基づく）。

  • "error"クラスのDIVや"flash"クラスのタグオブジェクトをスライドダウンさせる。

  • "integer"クラスのINPUTフィールドで無効な整数入力をエラーにする。

  • "doubles"クラスのINPUTフィールドで無効な浮動少数入力をエラーにする。

  • "date"タイプのINPUTフィールドとpopup date pickerを関連づける。

  • "datetime"タイプのINPUTフィールドとpopup datetime pickerを関連づける。

  • "time"タイプのINPUTフィールドとpopup time pickerを関連づける。

  • 13章で説明されているweb2py_ajax_componentという重要なツールを定義する。

    • Includes static/jquery.js.

    • Includes static/calendar.js and static/calendar.css, if they exist.

    • Defines an ajax function (based on jQuery $.ajax).

    • Makes any DIV of class "error" or any tag object of class "flash" slide down.

    • Prevents typing invalid integers in INPUT fields of class "integer".

    • Prevents typing invalid floats in INPUT fields of class "double".

    • Connects INPUT fields of type "date" with a popup date picker.

    • Connects INPUT fields of type "datetime" with a popup datetime picker.

    • Connects INPUT fields of type "time" with a popup time picker.

    • Defines web2py_ajax_component, a very important tool that will be described in Chapter 13.

また下位互換性のためにpopup、collapse、fade関数を読み込んでいます。

It also includes popup, collapse, and fade functions for backward compatibility.

これはエフェクトがどのように上手く連携しているかの例です。

Here is an an example of how the other effects play well together.

testアプリケーションの次のモデルを考えてみましょう：

Consider a test app with the following model:

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

db = DAL("sqlite://db.db")

db.define_table('child',

Field('name'),

Field('weight', 'double'),

Field('birth_date', 'date'),

Field('time_of_birth', 'time'))

db.child.name.requires=IS_NOT_EMPTY()

db.child.weight.requires=IS_FLOAT_IN_RANGE(0,100)

db.child.birth_date.requires=IS_DATE()

db.child.time_of_birth.requires=IS_TIME()

コントローラーの"default.py":

with this "default.py" controller:

1.

2.

3.

4.

5.

def index():

form = SQLFORM(db.child)

if form.accepts(request.vars, session):

response.flash = 'record inserted'

return dict(form=form)

ビューの"default/index.html":

and the following "default/index.html" view:

1.

2.

{{extend 'layout.html}}

{{=form}}

"index"アクションは次のフォームを作成します：

The "index" action generates the following form:

もし無効なフォームが送信されると、サーバーはエラーメッセージを含む修正されたフォームを持つページを返します。エラーメッセージは"error"クラスのDIVです。上記のweb2py_ajaxコードによって、スライドダウンのエフェクトとともにエラーが表示されます。

If an invalid form is submitted, the server returns the page with a modified form containing error messages. The error messages are DIVs of class "error", and because of the above web2py_ajax code, the errors appears with a slide-down effect:

エラーの色は"layout.html"のCSSコードで指定されています。

The color of the errors is given in the CSS code in "layout.html".

web2py_ajaxコードは入力フィールドへの無効な値の入力を防ぎます。これはサーバーサイドのバリデーションの前に発生し、追加ではあるが、サーバーサイドのそれを置き換えるものではありません。

The web2py_ajax code prevents you from typing an invalid value in the input field. This is done before and in addition to, not as a substitute for, the server-side validation.

web2py_ajaxコードは"date"クラスのINPUTフィールドにdate pickerを表示し、"datetime"クラスのINPUTフィールドにdatetime pickerを表示します。例を挙げると：

The web2py_ajax code displays a date picker when you enter an INPUT field of class "date", and it displays a datetime picker when you enter an INPUT field of class "datetime". Here is an example:

またweb2py_ajaxコードは"time"クラスのINPUTフィールドを編集時に次のtime pickerを表示します。

The web2py_ajax code also displays the following time picker when you try to edit an INPUT field of class "time":

送信時に、コントローラーアクションはresponse flashに"record inserted"のメッセージをセットします。デフォルトレイアウトはid="flash"のDIVにこのメッセージをレンダリングします。web2py_ajaxコードはページ送信時のDIVの表示、非表示の役割を担っています。

Upon submission, the controller action sets the response flash to the message "record inserted". The default layout renders this message in a DIV with id="flash". The web2py_ajax code is responsible for making this DIV appear and making it disappear when you click on it:

これらのサービスやそれ以外のエフェクトはビューの中で、また、コントローラーのヘルパー経由でプログラム的にアクセスできます。

These and other effects are accessible programmatically in the views and via helpers in controllers.