Phalcon

PhalconのViewヘルパ

更新日:

今日は、PhalconのViewヘルパーについて調べてみたいと思います。

Viewヘルパ

HTMLマークアップを書いて、維持することは、迅速にあるため命名規則と考慮に入れなければならない多数の属性の面倒な作業になります。Phalconは、Phalcon\Tagを提供することで、この複雑さに対処し、順番にHTMLマークアップを生成するための、ビューヘルパーを提供しています、。

このコンポーネントは、単純なHTML + PHPビューまたはVoltテンプレートで使用することができます。

このガイドは、利用可能なヘルパーとその引数の完全なドキュメントであることを意図されていません。完全な参照のためにPhalcon\TagのAPIページを、ご覧ください。

このガイドは、利用できるヘルパーと彼らの議論の完全なドキュメンテーションであることを目的としません。
完全な参照のためにAPIにおけるPhalcon\Tagページを訪問してください。

コンテンツのドキュメントタイプ

Palconは、コンテンツのドキュメントタイプを設定するのに、Phalcon\Tag::setDoctype()ヘルパーを提供します。ドキュメントタイプの設定は、他のタグヘルパーによって生成されたHTML出力に影響を与えます。たとえば、XHTMLドキュメントタイプファミリーを設定した場合、ヘルパーは、HTMLタグをリターンしたり、有効なXHTML標準に従うために、自己終了タグを生成します。

Phalcon\Tagの名前空間で利用可能なドキュメントタイプ定数は、次のとおりです。

定数 ドキュメントタイプ
HTML32 HTML 3.2
HTML401_STRICT HTML 4.01 Strict
HTML401_TRANSITIONAL HTML 4.01 Transitional
HTML401_FRAMESET HTML 4.01 Frameset
HTML5 HTML 5
XHTML10_STRICT XHTML 1.0 Strict
XHTML10_TRANSITIONAL XHTML 1.0 Transitional
XHTML10_FRAMESET XHTML 1.0 Frameset
XHTML11 XHTML 1.1
XHTML20 XHTML 2.0
XHTML5 XHTML 5

ドキュメントタイプを設定します。

<?php $this->tag->setDoctype(\Phalcon\Tag::HTML401_STRICT); ?>

ドキュメントタイプを取得する。

<?= $this->tag->getDoctype() ?>
 <html>
 <!-- your HTML code -->
 </html>

以下のHTMLが生成される。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <!-- your HTML code -->
 </html>

Volt構文は下記の通りです。

{{ get_doctype() }}
 <html>
 <!-- your HTML code -->
 </html>

リンクの作成

任意のWebアプリケーションやWebサイトでの本当の一般的なタスクは、私たちはあるページから別のページに移動できるようにリンクを生成することである。彼らは内部のURLがある場合、我々は次のようにしてそれらを作成することができます。

<!-- for the default route -->
 <?= $this->tag->linkTo("products/search", "Search") ?>
<!-- with CSS attributes -->
 <?= $this->tag->linkTo(array('products/edit/10', 'Edit', 'class' => 'edit-btn')) ?>
<!-- for a named route -->
 <?= $this->tag->linkTo(array(array('for' => 'show-product', 'title' => 123, 'name' => 'carrots'), 'Show')) ?>

実際には、すべてのURLの生成がPhalcon\Mvc\Urlコンポーネントによって生成されています。(またはサービス"URL"失敗)

ボルトで生成された同じリンク:

<!-- for the default route -->
 {{ link_to("products/search", "Search") }}
<!-- for a named route -->
 {{ link_to(['for': 'show-product', 'id': 123, 'name': 'carrots'], 'Show') }}
<!-- for a named route with class -->
 {{ link_to(['for': 'show-product', 'id': 123, 'name': 'carrots'], 'Show','class'=>'edit-btn') }}

フォームの作成

ウェブアプリケーションのフォームは、ユーザー入力を取得するに不可欠な役割を果たしている。次の例は、ビューヘルパーを使用して単純な検索フォームを実装する方法を示しています。

<!-- Sending the form by method POST -->
 <?= $this->tag->form("products/search") ?>
 <label for="q">Search:</label>
 <?= $this->tag->textField("q") ?>
 <?= $this->tag->submitButton("Search") ?>
 </form>
<!-- Specyfing another method or attributes for the FORM tag -->
 <?= $this->tag->form(array("products/search", "method" => "get")); ?>
 <label for="q">Search:</label>
 <?= $this->tag->textField("q"); ?>
 <?= $this->tag->submitButton("Search"); ?>
 </form>

この最後のコードは次のHTMLが生成されます。

<form action="/store/products/search/" method="get">
 <label for="q">Search:</label>
 <input type="text" id="q" value="" name="q" />
 <input type="submit" value="Search" />
 </endform>

ボルトで生成されたフォーム:

<!-- Specyfing another method or attributes for the FORM tag -->
 {{ form("products/search", "method": "get") }}
 <label for="q">Search:</label>
 {{ text_field("q") }}
 {{ submit_button("Search") }}
 </form>

Phalconは、いつでもオブジェクト指向の方法でフォームを作成するためにform builderを提供しています。

フォーム要素を生成するヘルパー

Phalconは、テキストフ​​ィールド、ボタンなど多くのフォーム要素を生成するためにヘルパーのシリーズを提供します。各ヘルパーの最初のパラメータは常に生成される要素の名前です。フォームが送信されると、名前がフォームデータと一緒に渡されます。コントローラでは、getPost()とgetQuery()リクエストオブジェクトは、($this->request)メソッドを使用してこれらの値を得ることができます。

<?php echo $this->tag->textField("username") ?>
<?php echo $this->tag->textArea(array(
 "comment",
 "This is the content of the text-area",
 "cols" => "6",
 "rows" => 20
 )) ?>
<?php echo $this->tag->passwordField(array(
 "password",
 "size" => 30
 )) ?>
<?php echo $this->tag->hiddenField(array(
 "parent_id",
 "value"=> "5"
 )) ?>

Volt構文は、下記の通りです。

{{ text_field("username") }}
{{ text_area("comment", "This is the content", "cols": "6", "rows": 20) }}
{{ password_field("password", "size": 30) }}
{{ hidden_field("parent_id", "value": "5") }}

セレクトボックスの作成

セレクトボックスの生成は、関連するデータが、PHPの連想配列に格納されている場合は特に、簡単です。セレクト要素のヘルパーはPhalcon\Tag::select() とPhalcon\Tag::selectStatic()である。Phalcon\Tag::select()は、Phalcon\Mvc\Modelで働くように特別に設計された、同時に、Phalcon\Tag::selectStatic()PHPの配列を持っています。

<?php
// Using data from a resultset
 echo $this->tag->select(
 array(
 "productId",
 Products::find("type = 'vegetables'"),
 "using" => array("id", "name")
 )
 );
// Using data from an array
 echo $this->tag->selectStatic(
 array(
 "status",
 array(
 "A" => "Active",
 "I" => "Inactive",
 )
 )
 );

下記のHTMLが生成されます:

<select id="productId" name="productId">
 <option value="101">Tomato</option>
 <option value="102">Lettuce</option>
 <option value="103">Beans</option>
 </select>
<select id="status" name="status">
 <option value="A">Active</option>
 <option value="I">Inactive</option>
 </select>

あなたは、生成されたHTMLに「空」のオプションを追加することができます。

<?php
// Creating a Select Tag with an empty option
 echo $this->tag->select(
 array(
 "productId",
 Products::find("type = 'vegetables'"),
 "using" => array("id", "name"),
 "useEmpty" => true
 )
 );
 <select id="productId" name="productId">
 <option value="">Choose..</option>
 <option value="101">Tomato</option>
 <option value="102">Lettuce</option>
 <option value="103">Beans</option>
 </select>
 <?php
// Creating a Select Tag with an empty option with default text
 echo $this->tag->select(
 array(
 'productId',
 Products::find("type = 'vegetables'"),
 'using' => array('id', "name"),
 'useEmpty' => true,
 'emptyText' => 'Please, choose one...',
 'emptyValue' => '@'
 )
 );
 <select id="productId" name="productId">
 <option value="@">Please, choose one..</option>
 <option value="101">Tomato</option>
 <option value="102">Lettuce</option>
 <option value="103">Beans</option>
 </select>

下記は、Volt構文の例です。

{# Creating a Select Tag with an empty option with default text #}
 {{ select('productId', products, 'using': ['id', 'name'],
 'useEmpty': true, 'emptyText': 'Please, choose one...', 'emptyValue': '@') }}

HTML属性の割り当て

すべてのヘルパーは彼らの最初のパラメータとして配列を受け入れる追加のHTMLが生成された要素の属性を含めることができます。

<?php $this->tag->textField(
 array(
 "price",
 "size" => 20,
 "maxlength" => 30,
 "placeholder" => "Enter a price",
 )
 ) ?>

Voltを使った場合

{{ text_field("price", "size": 20, "maxlength": 30, "placeholder": "Enter a price") }}

次のHTMLが生成されます。

<input type="text" name="price" id="price" size="20" maxlength="30"
 placeholder="Enter a price" />

ヘルパーへの値の設定

コントローラで設定する

MVCフレームワークはビューでフォーム要素のための特定の値を設定するための良いプログラミングの原則です。あなたはPhalcon\Tag::setDefault()メソッドを使用してコントローラから直接これらの値を設定することができます。このヘルパーは、ビュー中に存在する任意のヘルパーの値を事前に読み込みます。ビュー内の任意のヘルパーが事前読み込みされた値と一致する名前を持っている場合、値を直接ビューでヘルパーに割り当てられていない限り、ヘルパーは、その値を使用します。

<?php
class ProductsController extends \Phalcon\Mvc\Controller
 {
public function indexAction()
 {
 $this->tag->setDefault("color", "Blue");
 }
}

ビューでは、selectStaticヘルパーは値を事前に設定するために使用したのと同じインデックスと一致します。この場合では、「色」です:

<?php
echo $this->tag->selectStatic(
 array(
 "color",
 array(
 "Yellow" => "Yellow",
 "Blue" => "Blue",
 "Red" => "Red"
 )
 )
 );

これは、選択された値「Blue」と、次のselectタグを生成します。

<select id="color" name="color">
 <option value="Yellow">Yellow</option>
 <option value="Blue" selected="selected">Blue</option>
 <option value="Red">Red</option>
 </select>

リクエストから設定する

Phalcon\Tagヘルパーは、リクエスト間のフォームヘルパーの値を保持する特別な特徴を持っています。この方法は、あなたが入力されたデータを失うことなく、簡単に検証メッセージを表示することができます。

直接値を設定する

すべてのフォームヘルパーは "value"パラメーターをサポートしています。それを使用すると、直接ヘルパーの値を指定することができます。このパラメータが存在する場合、setDefault()メソッドまたは、リクエストを経由した任意の設定値は、無視されます。

ドキュメントのタイトルを動的に変更する

Phalcon\Tagは、コントローラから動的に文書のタイトルを変更するためにヘルパーを提供しています。次の例は、まさにそれを示しています。

<?php
class PostsController extends \Phalcon\Mvc\Controller
 {
public function initialize()
 {
 $this->tag->setTitle("Your Website");
 }
public function indexAction()
 {
 $this->tag->prependTitle("Index of Posts - ");
 }
}
 <html>
 <head>
 <?php echo $this->tag->getTitle(); ?>
 </head>
 <body>
</body>
 </html>

次のHTMLが生成されます:

<html>
 <head>
 <title>Index of Posts - Your Website</title>
 </head>
 <body>
</body>
 </html>

静的コンテンツヘルパー

Phalcon\Tagは、またそのようなスクリプト、リンクまたはイメージなどのタグを生成するヘルパーを提供します。彼らは迅速かつ簡単に、あなたのアプリケーションの静的リソースの生成を支援します。

画像

<?php
// Generate <img src="/your-app/img/hello.gif">
 echo $this->tag->image("img/hello.gif");
// Generate <img alt="alternative text" src="/your-app/img/hello.gif">
 echo $this->tag->image(
 array(
 "img/hello.gif",
 "alt" => "alternative text"
 )
 );

Volt構文

{# Generate <img src="/your-app/img/hello.gif"> #}
 {{ image("img/hello.gif") }}
{# Generate <img alt="alternative text" src="/your-app/img/hello.gif"> #}
 {{ image("img/hello.gif", "alt": "alternative text") }}

スタイルシート

<?php
// Generate <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rosario" type="text/css">
 echo $this->tag->stylesheetLink("http://fonts.googleapis.com/css?family=Rosario", false);
// Generate <link rel="stylesheet" href="/your-app/css/styles.css" type="text/css">
 echo $this->tag->stylesheetLink("css/styles.css");

Volt構文

{# Generate <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rosario" type="text/css"> #}
 {{ stylesheet_link("http://fonts.googleapis.com/css?family=Rosario", false) }}
{# Generate <link rel="stylesheet" href="/your-app/css/styles.css" type="text/css"> #}
 {{ stylesheet_link("css/styles.css") }}

JavaScript

<?php
// Generate <script src="http://localhost/javascript/jquery.min.js" type="text/javascript"></script>
 echo $this->tag->javascriptInclude("http://localhost/javascript/jquery.min.js", false);
// Generate <script src="/your-app/javascript/jquery.min.js" type="text/javascript"></script>
 echo $this->tag->javascriptInclude("javascript/jquery.min.js");

Volt構文

{# Generate <script src="http://localhost/javascript/jquery.min.js" type="text/javascript"></script> #}
 {{ javascript_include("http://localhost/javascript/jquery.min.js", false) }}
{# Generate <script src="/your-app/javascript/jquery.min.js" type="text/javascript"></script> #}
 {{ javascript_include("javascript/jquery.min.js") }}

HTML5 の要素 - 一般的なHTMLヘルパー

Phalconは、HTML要素のいかなる種類の生成をも可能にする一般的なHTMLヘルパーを提供しています。これは、ヘルパーに有効なHTML要素名を生成するのは開発者次第です。

<?php
// Generate
 // <canvas id="canvas1" width="300" class="cnvclass">
 // This is my canvas
 // </canvas>
 echo $this->tag->tagHtml("canvas", array("id" => "canvas1", "width" => "300", "class" => "cnvclass"), false, true, true);
 echo "This is my canvas";
 echo $this->tag->tagHtmlClose("canvas");

Volt構文

{# Generate
 <canvas id="canvas1" width="300" class="cnvclass">
 This is my canvas
 </canvas> #}
 {{ tag_html("canvas", ["id": "canvas1", width": "300", "class": "cnvclass"], false, true, true) }}
 This is my canvas
 {{ tag_html_close("canvas") }}

タグサービス

Phalcon\Tagはこれを使用すると、サービス·コンテナが置かれているアプリケーションのどの部分からでもアクセスできることを意味し、「タグ」サービスを介して提供されています:

<?php echo $this->tag->linkTo('pages/about', 'About') ?>

あなたは簡単にサービスコンテナ内のサービスタグの交換でカスタムコンポーネントに新しいヘルパーを追加することができます。

<?php

class MyTags extends \Phalcon\Tag
 {
 //...
//Create a new helper
 static public function myAmazingHelper($parameters)
 {
 //...
 }
//Override an existing method
 static public function textField($parameters)
 {
 //...
 }
 }

次にサービス「タグ」の定義を変更します。

<?php
$di['tag'] = function() {
 return new MyTags();
 };

独自ヘルパーの作成

あなたは、Phalcon\Tagを簡単に拡張して、あなた自身のヘルパーを実装する独自のヘルパーを作成することができます。以下は、カスタムヘルパーの簡単な例を示します。

<?php
class MyTags extends \Phalcon\Tag
 {
/**
 * Generates a widget to show a HTML5 audio tag
 *
 * @param array
 * @return string
 */
 static public function audioField($parameters)
 {
// Converting parameters to array if it is not
 if (!is_array($parameters)) {
 $parameters = array($parameters);
 }
// Determining attributes "id" and "name"
 if (!isset($parameters[0])) {
 $parameters[0] = $parameters["id"];
 }
$id = $parameters[0];
 if (!isset($parameters["name"])) {
 $parameters["name"] = $id;
 } else {
 if (!$parameters["name"]) {
 $parameters["name"] = $id;
 }
 }
// Determining widget value,
 // \Phalcon\Tag::setDefault() allows to set the widget value
 if (isset($parameters["value"])) {
 $value = $parameters["value"];
 unset($parameters["value"]);
 } else {
 $value = self::getValue($id);
 }
// Generate the tag code
 $code = '<audio id="'.$id.'" value="'.$value.'" ';
 foreach ($parameters as $key => $attributeValue) {
 if (!is_integer($key)) {
 $code.= $key.'="'.$attributeValue.'" ';
 }
 }
 $code.=" />";
return $code;
 }
}

本日は、以上です。

本日のまとめ

  1. ドキュメントタイプ
    1. setDocTypeでコンテンツのドキュメントタイプを指定できる。
      $this->tag->setDocType
    2. getDocTypeでコンテンツのドキュメントタイプを取得できる。
      $this->tag->getDocType
    3. Voltでは、
      {{ get_doctype() }}
  2. リンクの作成
    1. linkTo('リンク先','名前')で、リンクの生成
      $this->tag->linkTo('リンク先','名前')
      $this->tag->linkto(['リンク先','名前',['CSS属性'=>'値']);
    2. Voltでは、
      1. {{ link_to('リンク先','名前')
      2. {{ link_to(['for':'show-product','id':123,'name':'carrots'],'Show') }}
  3. フォームの作成
    1. form() で、フォームの開始タグの生成
      1. $this->tag->form('index')
      2. $this->tag->form(['index','method'=>'get']);
      3. Voltでは
        {{ form('index','method':'get') }}
    2. textField()で、テキストフィールドの生成
      1. $this->tag->textField()
      2. Volt では
        {{ text_field() }}
    3. submitButton()で、サブミットボタンの生成
      1. $this->tag->submitButton()
      2. Volt では
        {{ submit_button() }}
  4. フォーム要素を生成するヘルパー
    1. textField()でテキストフィールドの作成
      1. $this->tag->textField()
      2. Volt では
        {{ text_field() }}
    2. textArea()でテキストエリアの作成
      1. $this->tag->textArea()
      2. Volt では
        {{ text_area() }}
    3. passwordField()で、パスワードフィールドの作成
      1. $this->tag->passwordField()
      2. Volt では
        {{ password_field() }}
    4. hiddenField()で、隠しフィールドの作成
      1. $this->tag->hiddenField()
      2. Volt では
        {{ hidden_field() }}
  5. セレクトボックスの作成
    1. select()で、セレクトボックスの作成
      $this->tag->select()
    2. Voltでは
      {{ select() }}
  6. ヘルパーへの値の設定
    1. コントローラのsetDefaultでデフォルト値をセット
      $this->tag->setDefault('color','Blue')
    2. ビューのselectStaticで取得
      $this->tag->selectStatic(['color',['Yellow'=>'Yellow','Blue'=>'Blue]])
      で、Blueのoptionタグにselected属性が設定される
    3. Phalcon\Tagヘルパーは、フォームヘルパーの値を保持する
    4. valueパラメーターを指定すると、setDefaultは無視される
  7.  ドキュメントのタイトルを動的に変更する
    1. initialize()で、コントローラデフォルトのタイトルをセットできる
      $this->tag->setTitle('Mysite');
    2. 個別のアクションで、タイトルを変更できる
      $this->tag->prependTitle('Action's Title');
  8. 静的コンテンツヘルパー
    1. 画像
      1. $this->tag->image('img/hello.gif');
      2. $this->tag->image(['img/hello.gif,'alt'=>'My family's photo']);
    2. 画像のVolt構文
      1. {{ image('imag/helle.gif') }}
      2. {{ image('image/hello.gif,'alt':''My family's photo') }}
    3. スタイルシート
      1. $this->tag->stylesheetLink('css/bootstrap.min.css');
    4. スタイルシートのVolt構文
      1. {{ stylesheet_link('css/bootstrap.min.css') }}
    5. JavaScript
      1. $this->tag->favascriptInclude('js/jquery.min.js');
    6. JavaScriptのVolt構文
      1. {{ javascript_include('js/jquery.min.js') }}
  9. 独自ヘルパーの作成
    1. Phalcon\Tagを拡張して、独自のヘルパーを作成することができる。

-Phalcon

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.