BladeOneHtml
2.4
パフォーマンスを落とすことなく、簡単に、きれいに、フォーム（ビュー）を作成できるPHPライブラリです。ライブラリ BladeOne を使用してビューをレンダリングします。このライブラリは 1 つの依存関係、1 つのファイルのみを使用し、それ以外は何も使用しません。
このライブラリは次の 2 つの方法で動作します。
コンポーザーにはeftec/ BladeOneHtmlが必要です
include " vendor/autoload.php " ;
use eftec bladeone BladeOne ;
use eftec BladeOneHtml BladeOneHtml ;
class myBlade extends BladeOne {
use BladeOneHtml ;
}
$ blade = new myBlade ();
// for our example:
$ myvalue =@ $ _REQUEST [ ' myform ' ];
echo $ blade -> run ( " exampleview " , [ ' myvalue ' => $ myvalue ]); < body >
@form()
@input(type="text" name="myform" value=$myvalue)
@button(type="submit" value="Send")
@endform()
</ body >$blade=new myBlade();
このライブラリは、テンプレートに新しいタグのセットを追加します。タグは名前付き引数を使用するため、簡単に構成できます。
@<タグ>(引数1="値" 引数2='値' 引数3=値 引数4=$変数 引数5=関数(), 引数6="aaa $aaa")
このライブラリはネイティブ HTML 引数を使用しますが、一部の引数は特殊です
| 口論 | 説明 | 例 |
|---|---|---|
| 文章 | タグの間にコンテンツを追加します。内部値は常に引用符で囲まれません。 | @tag(text="hello") -> <tag>こんにちは</tag> |
| 前 | タグの前にコンテンツを追加します | @tag(pre="hello") -> hello<tag></tag> |
| 役職 | タグの後にコンテンツを追加します | @tag(post="hello") -> <tag></tag>こんにちは |
| 間 | タグの間にコンテンツを追加します (テキストと同様に機能します) | @tag(between="hello") -> <tag>hello</tag> |
| 価値 | 通常、これは html の通常の「値」として機能しますが、別の方法で機能することもあります ( @textarea ではtextのように機能します)。 | @tag(value="hello") -> < tag value="hello"></tag> |
| 価値観 | 一部のコンポーネントにはオブジェクト/配列のリストが必要です。この引数は、値のリストを設定するために使用されます。 | @tag(値=$countries) |
| エイリアス | 一部のコンポーネントでは、オブジェクト/配列のリストが必要または使用されます。この引数は、リスト内の任意の行を参照します。値が設定されており、エイリアスが欠落している場合は、values+"Row" という新しいエイリアスが作成されます。 | @tag($values=$countries エイリアス=$country) @tag($values=$countries ) alias=$countriesRow と仮定します |
| オプトグループ | @select タグを使用すると、グループ化された要素をリストできます。この引数はグループ化を設定するために使用されます。 | @tag($values=$countries alias=$country @optgroup=$country->continent) |
次の例を言ってみましょう
@input(value="hello world" type="text" )
次のようにレンダリングされます
<input value="hello world" type="text" />
タグが関数の変数を使用している場合、このビューは
@input(value=$hello type="text" )
に変換されます
<input value="<?php echo $this->e($hello);?>" type="text" />
メソッド $this->e は、メソッドをエスケープするために使用されます。
注: このライブラリでは、カスタム タグを含むあらゆるタグが許可されます (ただし、特別なタグと競合しない場合に限ります。表を参照してください)。
@input(value="hello world" type="text" mycustomtag="hi" )
に変換されます
< input value =" hello world " type =" text " mycustomtag =" hi " /> 入力されたHTMLを表示します。
基本的な例:
@input(id="id1" value="hello world$somevar" type="text" )
隠しフィールドを生成します
基本的な例:
@hidden(name="id1" value="hello world$somevar" )
ラベル html が表示されます
@label(for="id1" text="hello world:")
画像を表示します
@image(src="https://via.placeholder.com/350x150")
選択 (ドロップダウン リスト) HTML オブジェクトが表示されます
例：
@select(id="aaa" value=$selection values=$countries alias=$country)
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@items( id="chkx" value=$country->id text=$country->name)
@endselect
注 1: @items には、親 (@select) の引数の値、引数の値(選択可能な値) およびテキスト(表示される値) が必要です。 注 2: @items には、同じタグまたは親に割り当てられたidが必要です。タグ (この場合、親は @select です) 注 3: 標準では、引数ID は一意である必要があります。
@item は、他のタグ内で使用されるユーティリティ タグです。これは、親タグに応じて動作します。単純な行/行を親オブジェクトに追加します。
例：
@select()
@item(value='aaa' text='hello world')
@endselect
レンダリングします
<select>
<option value="aaa">hello world</option>
</select>
@items は、いくつかのタグ内で使用される実用的なタグです。これは、親タグに応じて動作します。タグ値を使用して、複数の行/行を親オブジェクトに追加します。
注: このタグにはいくつかの引数が必要です。
- 親(またはこのタグ)にはタグ値が必要です
- 親にはタグ値が必要です 現在の選択内容を示します (存在する場合)
- 親 (またはこのタグ) にはタグのエイリアスが必要です。エイリアスが欠落している場合は、値の名前 + "Row" が使用されます。つまり、values=product -> alias= productRow
- 親(またはこのタグ)にはタグIDが必要です
- レンダリングされる「id」は、この id+「_」+「行の id」を使用して生成されます。例: id="idproduct" => idproduct_0、idproduct_1
- なぜ？ IDが一意である必要があるためです（HTMLの仕様）
たとえば、$countries がオブジェクトのリストの場合、次のようになります。
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country->id text=$country->name)
@endselect
$countries が配列のリストの場合:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country['id'] text=$country['name'])
@endselect
タグ項目内では、次の変数を使用できます。
| 変数 (values は使用される変数です) | 仕様 |
|---|---|
| $valuesオプトグループ | 現在の optgroup (存在する場合) が保存されます。例: $productOptGroup |
| $valuesキー | 現在の行の現在のキーを示します。例: $productKey |
| $alias (エイリアスが設定されていない場合は、 $values Row が使用されます) | 変数の現在の行。例: $productRow |
オプションのグループを開始します（選択）
例：
@select(id="aaa" value=$selection values=$countries alias=$country)
@optgroup(label="group1")
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@endoptgroup
@endselect
注: このタグは @endoptgroup タグで終了する必要があります
チェックボックスを 1 つ追加します
例：
@checkbox(id="idsimple" value="1" checked="1" post="it is a selection")
ラジオボタンを 1 つ追加します
例：
@radio(id="idsimple" value="1" checked="1" post="it is a selection")
テキスト領域を描画します。
例：
@textarea(id="aaa" value="3333 3333 aaa3333 ")
ボタンを描画します
例：
@button(value="click me" type="submit" class="test" onclick='alert("ok")')
ハイパーリンクを追加します
例：
@link(href="https://www.google.cl" text="context")
チェックボックスのリストが表示されます
@checkboxes(id="checkbox1" value=$selection alias=$country)
@item(id="aa1" value='aaa' text='hello world' post="<br>")
@item(id="aa2" value='aaa' text='hello world2' post="<br>")
@items(values=$countries value='id' text='name' post="<br>")
@endcheckboxes
ラジオボタンのリストを表示します
@radios(id="radios1" name="aaa" value=$selection alias=$country)
@item(value='aaa' text='hello world' post="<br>")
@item(value='aaa' text='hello world2' post="<br>")
@items(values=$countries value='id' text='name' post="<br>")
@endradios
ファイル入力値を生成します
@file(name="file" value="123.jpg" post="hello world")
注: また、「name」+「_file」という名前の隠しファイルも元の値でレンダリングされます。
ソートされていないリストを生成します
@ul(id="aaa" value=$selection values=$countries alias=$country)
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@items(value=$country->id text=$country->name)
@endul
ソートされたリストを生成します
@ol(id="aaa" value=$selection values=$countries alias=$country)
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@items(value=$country->id text=$country->name)
@endol
ページネーションを生成します。 bootstrap3、bootstrap4、または bootstrap5 が必要です。
例は、example/examplepagination.php にあります。
PHPコード
$ current = isset ( $ _GET [ ' _page ' ]) ? $ _GET [ ' _page ' ] : 1 ;
echo $ blade -> run ( " examplepagination " ,
[ ' totalpages ' => count ( $ products )
, ' current ' => $ current
, ' pagesize ' => 10
, ' products ' => $ items
]);テンプレート
@pagination(numpages=$totalpages current=$current pagesize=$pagesize urlparam='_page')注: ページはベース 1 です。 注: 引数 urlparam はリンクの構築に使用されます (domain.dom/web.php?_page=999)
次のように、 「前へ」ボタンと「次へ」ボタンの名前を変更できます。
$ this -> setTranslation ([ ' pagination ' =>[ ' prev ' => ' <<> ' , ' next ' => ' > ' ]]);
テーブルをレンダリングします
@table(class="table" values=$countries alias=$country border="1")
@tablehead
@cell(text="id")
@cell(text="cod")
@cell(text="name")
@endtablehead
@tablebody(id='hello world' )
@tablerows(style="background-color:azure")
@cell(text=$country->id style="background-color:orange")
@cell(text=$country->cod )
@cell(text=$country->name)
@endtablerows
@endtablebody
@tablefooter
@cell(text="id" colspan="3")
@endtablefooter
@endtable
テーブルのヘッダーをレンダリングします (オプション)。内部に追加された各セルは、「番目」の HTML タグとしてレンダリングされます。
テーブルの本体をレンダリングします (オプション)。テーブル内に追加された各セルは、「td」HTML タグとしてレンダリングされます。
テーブルのフッターをレンダリングします (オプション)。内部に追加された各セルは、「番目」の HTML タグとしてレンダリングされます。
本体内に行を生成します
テーブルヘッド、テーブルボディ（テーブル行）、またはテーブルフッター内のセルをレンダリングします。
レンダリングされ、CSSがボックスに追加されます
< head >
@cssbox
</ head > addCss($css,$name) メソッドの使用
$ this -> addCss ( ' <link rel="stylesheet" href="mystyle.css"> ' , ' mystyle ' );
$ this -> addCss ( ' css/stylename.css ' ); $css はリンクまたはリンク タグにすることができます
$nameはオプションですが、重複の追加を避けます。以前の CSS と同じ名前の新しい CSS を追加した場合、それは無視されます。
ボックスに追加されたすべての JavaScript リンクをレンダリングします。
< body >
<!-- our page -->
@jsbox
</ body > addJs($script,$name) メソッドの使用
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); < body >
<!-- our page -->
@jsbox <!-- we could load jquery here -->
@jscodebox(ready)
</ body >このコードは、タグ < script > を自動的に追加します。
引数readyは、ドキュメントの準備ができたときに関数を実行するかどうかを示します。
新しい JavaScript コードをjscodeboxに追加するにはどうすればよいですか?
$ blade -> addJsCode ( ' alert("hello"); ' );BladeOneHtml使用すると、使用するタグを変更したり、各クラスのデフォルト クラスを設定したりできます。
次の方法を使用して、Bootstrap 3/4/5 のデフォルトのクラスとタグを設定できます (1 つだけ選択します)。
// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox
$ blade -> useBootstrap5 ( true );
// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox
$ blade -> useBootstrap4 ( true );
// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox
$ blade -> useBootstrap3 ( true ); または、独自のタグとクラスを作成することもできます
$ blade -> defaultClass [ $ tagname ]= ' default class ' ; $ blade -> pattern [ ' nametag ' ]= ' pattern ' ;nametag は次のようになります。
| 名前 | 説明 | 例 | コード |
|---|---|---|---|
| 名札 | タグが使用されるときに使用するパターンを使用します | 入力 | {{pre}}<input{{inner}} >{{between}}< /input>{{post}} |
| 名札_空 | コンテンツ (間/テキスト) が空であるか、設定されていない (自己終了タグ) 場合、システムはこのパターンを使用します。設定されていない場合、システムはコンテンツが空であってもネームタグを使用します。 | 入力_空 | {{pre}}< input{{inner}} />{{post}} |
| ネームタグ_アイテム | システムは、@item および @items タグにこのパターンを使用します。 | select_item | < オプション{{内部}} >{{間}}< /オプション> |
| 名札_終了 | タグを閉じる必要がある場合にこのパターンを使用します | フォームエンド | < /form> |
| 変数 | 説明 | 逃げた(*) |
|---|---|---|
| {{前}} | タグの前のコード: pre <tag ></tag> | いいえ |
| {{役職}} | タグの後のコード: < tag ></tag> post | いいえ |
| {{内側}} | タグ内の属性: < タグ内部> </tag> | はい |
| {{間}} | タグ間のコンテンツ: < タグ > </tag>の間 | デフォルトでは、この値はエスケープされます しかしそれは逃れられないかもしれない |
| {{id}} | id 属性 ({{inner}} にも含まれます): < タグID > </tag> | はい |
| {{名前}} | name 属性 ({{inner}} にも含まれます): < タグ名> </tag> | はい |
通常のタグの例:
$ blade -> pattern [ ' input ' ]= ' {{pre}}<input{{inner}} >{{between}}</input>{{post}} ' ;注:(*) エスケープとは何ですか?たとえば、テキスト「」をエスケープすると、「<hello>」と表示されます。
パターン内で使用できるカスタム属性を追加することができます。
たとえば、 customtagというカスタム タグを追加してみましょう。
$ blade -> customAttr [ ' customtag ' ]= ' This attr is missing! ' ;
$ blade -> pattern [ ' alert ' ]= ' {{pre}}<div {{inner}}><h1>{{customtag}}</h1>{{between}}</div>{{post}} ' ;そしてその景色の中で
@alert(text="hi there" class="alert-danger" customtag="it is a custom tag") < br >
@alert(text="hi there" class="alert-danger" ) < br > ライブラリには、ライブラリの初期化と構成に使用できるメソッドが多数あります。これらはオプションです。
ブートストラップ 4 と互換性があるようにパターンとクラスを設定します。
引数が true の場合、CDN からCSS ボックスに CSS を追加します。
私たちのコード
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >ブートストラップ 4 と互換性があるようにパターンとクラスを設定します。
引数が true の場合、CDN からCSS ボックスに CSS を追加します。
私たちのコード
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >パターンとクラスがブートストラップ 3 と互換性を持つように設定されます。
引数が true の場合、CDN からCSS ボックスに CSS を追加します。
$ blade -> useBootstrap3 ( true ); CSSボックスにCSSを追加します
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' ); JavaScript リンクをjs ボックスに追加します。
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' );JavaScriptコードをjsボックスに追加します。
$ blade -> addJsCode ( ' alert("hello"); ' );クラスのパブリックフィールドのリストです。フィールドはパフォーマンス目的のためパブリックです (セッターとゲッターを使用するためではありません)。
コードで使用されるパターンのリストを保存します
$ this -> pattern [ ' sometag ' ]= ' {{pre}}<tag {{inner}}>{{between}}</tag>{{post}} ' ;注: パターン変数のリストについては、「コード内のパターン変数」を参照してください。
特定のタグに追加されるデフォルトの CSS クラス。
$ this -> defaultClass [ ' sometag ' ]= ' classred classbackgroundblue ' ;$this->pattern と一緒に使用できるカスタムを追加します
$ this -> customAttr [ ' customtag ' ]= ' XXXXX ' ; // So we could use the tag {{customtag}}. 'XXXXX' is the default valueカスタム属性は常に引用符と二重引用符を削除するため、値が「hello」の場合 -> hello
PHPクラスを拡張することで新たなパターンを追加することが可能です。
$this->pattern['mynewtag']='<mycustomtag {{inner}}>{{between}}</mycustomtag>';
新しい PHP クラスまたはトレイトを作成し、クラスを拡張することができます。この新しい構造内に、次の構造を持つ新しいメソッドを追加する必要があります。
新しいクラスの使用
use eftec bladeone BladeOne ;
use eftec BladeOneHtml BladeOneHtml ;
class MyBlade extends BladeOne {
use BladeOneHtml ;
}
class MyClass extends MyBlade {
protected function compileMyNewTag ( $ expression ) { // the method must be called "compile" + your name of tag.
$ args = $ this -> getArgs ( $ expression ); // it separates the values of the tags
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
// your custom code here
return $ this -> render ( $ args , ' mynewtag ' , $ result ); // we should indicate to use our pattern.
}
}トレイトの使用 (推奨されます。その理由は、トレイトの方が柔軟性があるためです)
trait MyTrait {
protected function compileMyNewTag ( $ expression ) { // the method must be called "compile" + your name of tag.
$ args = $ this -> getArgs ( $ expression ); // it separates the values of the tags
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
// your custom code here
return $ this -> render ( $ args , ' mynewtag ' , $ result ); // we should indicate to use our pattern.
}
}
class MyClass extends BladeOne {
use BladeOneHtml ;
use MyTrait; // <-- our trait
}親メソッドを作成するには、$this->htmlItem 内に新しい値をプッシュする必要があります。収納したいものは何でも収納できます。
$ this -> pattern [ ' mynewtag ' ]= ' <mycustomtag {{inner}}>{{between}} ' ; protected function compileMyNewTag ( $ expression ) {
$ args = $ this -> getArgs ( $ expression ); // it loads and separates the arguments.
$ this -> htmlItem [] = [ ' type ' => ' mynewtag ' , ' value ' => @ $ args [ ' value ' ]
];
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
//unset($args['value']); // we could unset values that we don't want to be rendered.
return $ this -> render ( $ args , ' select ' , $ result );
}私たちの目的は、コードを評価することではなく、PHP コードをレンダリングすることです。たとえば、$args['somearg']=$variable の場合、変数の実際の値に関係なく、値は $variable (テキストとして) になります。
コンテナを終了するメソッドも作成する必要があり、新しいパターンも追加する必要があります。
$ this -> pattern [ ' mynewtag_end ' ]= ' </mycustomtag> ' ; protected function compileEndNewTag () {
$ parent = @ array_pop ( $ this -> htmlItem ); // remove the element from the stack
if ( is_null ( $ parent ) || $ parent [ ' type ' ]!== ' newtag ' ) { // if no element in the stack or it's a wrong one then error
$ this -> showError ( " @endnewtag " , " Missing @initial tag " , true );
}
// our code
return $ this -> pattern [ $ parent [ ' type ' ] . ' _end ' ]; // renders the element of the stack
}私たちのアイテムは、次の操作でタグ内にあるかどうかを知ることができます
$ parent = end ( $ this -> htmlItem );CSS と JavaScript を必要とするコンポーネントを作成できます。
たとえば、日付ピッカーです。
protected function compileDatePicker ( $ expression ) {
$ args = $ this -> getArgs ( $ expression ); // it loads and separates the arguments.
array_push ( $ this -> htmlItem , [ ' type ' => ' mynewtag ' , ' value ' => @ $ args [ ' value ' ]]);
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
if (! isset ( $ args [ ' id ' ])) {
$ this -> showError ( " @datepicker " , " Missing @id tag " , true );
}
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); // our script needs jquery (if it is not loaded)
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' );
$ this -> addjscode ( ' $(. ' . $ args [ ' id ' ]. ' ).datepicker(); ' );
//unset($args['value']); // we could unset values that we don't want to be rendered.
return $ this -> render ( $ args , ' select ' , $ result );
}注: jQuery と日付ピッカーのライブラリをコードに一度追加することをお勧めします。
