Contact Page 作成

私達はPRADOコマンドラインツールを使っているデフォルトページHome.pageを作成しました。それが動的な内容を含んでいないので、ページは相対的に静的です。このセクションの中で、私達は"Contact"と名付けられたインタラクティブなページを作成します。
Contact Page の目的は、私達のブログシステムのWebユーザーからのフィードバックを収集することです。この目標を達成するために、私達は、入力フィードバックフォームをユーザーに提供することを計画します。
このフォームにおいて、私達は、彼らの名前、電子メールアドレス、およびフィードバック内容を明かすことをユーザーに要求します。フォームが入力されて、提出された後に、フィードバックを含んでいるEメールはサイト管理者に送られるでしょう。 Contactページを作成するために、私達はページディレクトリの下で2つのファイルが必要です。 ページテンプレートファイルContact.pageとページクラスファイルContact.php です。
directories2.gif
情報
1つのページはテンプレートファイル(拡張子.page)またはクラスファイルのどちらか、もしくはその両方を持たなければなりません:
  • テンプレートのみのページは通常、私達がすでに作成した Home.page のような静的な内容を持つ1ページです;
  • クラスのみのページは単にクラスメソッドの実行に基づいた内容を作り出します;
  • テンプレートとクラスの両方を持つ1つのページは両方の有利さを結合します: 容易にページレイアウトを編成するために、それはテンプレートを使い、動的な内容を作り出している必要なロジックを含むために、それはクラスを使います。

作成ページテンプレート

私達は最初にContact page のためにテンプレートファイルを作成します。
フィードバックフォームの表象的なレイアウトを計画するために、私達はテンプレートを使います。テンプレートの中で、ユーザーの名前、Eメール、およびフィードバックを収集するために、私達は textboxes を使います。そして、フィードバックフォームを提出する前に、ユーザーがこれらのすべての情報を提供すると保証するために、私達はバリデータを使います。テンプレート全体は次の通りです。
<html>
<head><title>My Blog - Contact</title></head>
<body>
<h1>Contact</h1>
<p>Please fill out the following form to let me know your feedback on my blog.  Thanks!</p>

<com:TForm>

<span>Your Name:</span>
<com:TRequiredFieldValidator ControlToValidate="Name"
   ErrorMessage="Please provide your name."
   Display="Dynamic" />
<br/>
<com:TTextBox ID="Name" />

<br/>
<span>Your Email:</span>
<com:TRequiredFieldValidator ControlToValidate="Email"
   ErrorMessage="Please provide your email address."
   Display="Dynamic" />
<com:TEmailAddressValidator ControlToValidate="Email"
   ErrorMessage="You entered an invalid email address."
   Display="Dynamic" />
<br/>
<com:TTextBox ID="Email" />

<br/>
<span>Feedback:</span>
<com:TRequiredFieldValidator ControlToValidate="Feedback"
   ErrorMessage="Please provide your feedback."
   Display="Dynamic" />
<br/>
<com:TTextBox ID="Feedback"
   TextMode="MultiLine"
   Rows="10"
   Columns="40" />

<br/>
<com:TButton Text="Submit" OnClick="submitButtonClicked" />

</com:TForm>

</body>
</html>
テンプレートが正常なHTMLページと非常に似ているようみえますが、主要な違いは、テンプレートがいくつかの<com:>タグを含んでいることです。各<com:>タグは、プロパティがタグの中のネームバリューペアによって初期設定されているコントロールを参照します。 例えば<com:TButton>は、フィードバックフォームを提出するためにユーザーがクリックできるボタンを表示するTButtonコントロールを参照します。完全なテンプレートシンタックスのために、どうぞ、クイックスタートチュートリアルを参照してください。
情報
PRADOはすべてのタイプのHTMLインプットのためにコントロールを提供します。 例えば、TTextBoxはテキスト入力フィールドを表示し、TDropDownListはcomboboxを表示します。各コントロールは、コンフィギュレーション可能なプロパティによってオブジェクトとしてコードの中でアクセスされるかもしれないコンポーネントです。
TTextBoxコントロールのほかに、テンプレートはまた、ユーザーのインプットが具体的な認証規則を満たしていると保証する多くのバリデータコントロールを使います。例えば、合法な電子メールアドレスが提供されると保証するために、以下に例示するように「Eメール」テキスト・ボックスを有効にするために、私達は2つのバリデータを使います:
<span>Your Email:</span>
<com:TRequiredFieldValidator
   ControlToValidate="Email"
   ErrorMessage="Please provide your email address."
   Display="Dynamic" />
<com:TEmailAddressValidator
   ControlToValidate="Email"
   ErrorMessage="You entered an invalid email address."
   Display="Dynamic" />
<br/>
<com:TTextBox ID="Email" />
<br/>
以下では、ページテンプレートの中で使われるコントロールを要約します:
  • TFormはHTMLフォームを表示します。どのようなインプットコントロールでもそれの中で同封されなければなりません。そして、最も重要なこととして、TFormは1ページにおいて一つしか設置できません。
  • TTextBoxは入力されたユーザーテキストを収集するためにテキスト・ボックスを表示します。
  • TRequiredFieldValidatorは、フィードバックが提出される時に、関連したテキスト・ボックスが空でないと保証します。
  • TEmailAddressValidatorは、フィードバックが提出される時に、textboxが有効な電子メールアドレスを含んでいると保証します。
秘訣
プレーンテキストエディタを持つテンプレートを書くことは、デザイナーにとって退屈で直観的ないかも知れません。この状況を和らげるために、PRADOは、Dreamweaverの中で自動的にPRADOタグ(例えばコントロールを含むことは名付ける、プロパティは名付ける、イベントは名付けるなどします)を完成するのをサポートするAdobe Dreamweaver エクステンションをリリースしています。

ページクラスの作成

私達は現在ページクラスContact.phpを作成します。私達がページのクラスが必要である理由は、私達が、ユーザーが提出するフィードバックに反応する必要があるためです。
私達が以下のラインを持っていることにテンプレートの中で気づいてください。テンプレートは本質的に、ユーザーがボタンをクリックする時に、それがsubmitButtonClicked()メソッドを呼び出すべきであることを示しています。 ここで、OnClickはユーザークリックイベントの名前であり、メソッドはページクラスにおいて定義されなければなりません。
<?php
class Contact extends TPage
{
   /**
    * Event handler for the OnClick event of the submit button.
    * @param TButton the button triggering the event
    * @param TEventParameter event parameter (null here)
    */
   public function submitButtonClicked($sender, $param)
   {
       if ($this->IsValid)  // check if input validation is successful
       {
           // obtain the user name, email, feedback from the textboxes
           $name = $this->Name->Text;
           $email = $this->Email->Text;
           $feedback = $this->Feedback->Text;

           // send an email to administrator with the above information
           $this->mailFeedback($name, $email, $feedback);
       }
   }

   protected function mailFeedback($name, $email, $feedback)
   {
       // implementation of sending the feedback email
   }
}
?>
上記のコードは主として自明でしょう。実のところ、私達はただイベントドリブンプログラミングスキームを示しています。 イベントハンドラsubmitButtonClicked()において、私達はユーザーのインプットを取り出します。 例えば、$this->Name->テキストは、ユーザーの名前の情報を収集しているtextboxである名前コントロールのテキスト資産値を戻します。
情報
ページクラス名はファイル名と同じでなければなりません。これはまた、どのようなPRADOにでもコンポーネントクラスを書くことのための要件です。

felix補足

ユーザー定義関数である mailFeedback の内容が書き込まれていませんが、個々はサーバーにあわせてメール送信を書けという部分だと考えます。ただし、メール送信の追加機能を作っている方がいるようです。(日本語の解説をしてくれている方のページ) 

テスト

私達の新しく作成された接触はURL http://hostname/blog/index.php?page=Contact経由でテストされることができます。情報を入力せずに、私達が提出ボタンをクリックするならば、私達はエラーメッセージが対応するtextboxesの隣で出現するのを見ます。 私達がすべての必要とされている情報を入力するならば、メソッドmailFeedback()はもたらされるでしょう。
output.gif
このページへのさらなる向上は、ユーザーがフィードバックを提出した後にページのある確認メッセージを示すことです。そして、ことによると、提出が成功しているならば、ブラウザは別のページにリダイレクトされるかもしれません。 私達はこれらの仕事を私たちの読者に任せます。
情報
各バリデータは認証規則を表しています。 1つのインプットコントロールは複数のバリデータと関連することができます。 バリデータはクライアント側とサーバー側の両方の上の認証を実行します。 クライアント側、すなわちブラウザ上で、認証はjavascriptを使ってされています; サーバー側の上で、認証はPHPコードを使ってされています。 クライアント側の認証は消されることができる一方、サーバ側の認証はできません。 これは、ユーザーインプットがいつも指定された認証規則によってチェックされると保証します。