BladeOneHtml
2.4
它是一个 PHP 库，允许轻松、干净地创建表单（视图），并且不会影响性能。它使用 BladeOne 库来渲染视图。该库仅使用单个依赖项、一个文件，仅此而已。
该库以两种方式工作：
作曲家需要 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") -> 你好<tag></tag> |
| 邮政 | 它在标签后添加内容 | @tag(post="hello") -> <tag></tag>你好 |
| 之间 | 它在标签之间添加内容（其工作方式与文本类似） | @tag（之间=“你好”） - > <标签>你好</标签> |
| 价值 | 通常它的工作方式与 html 的正常“值”相同，但它也可以以不同的方式工作（在 @textarea 中工作方式类似于text ） | @tag(value="hello") -> < 标签 value="hello"></tag> |
| 价值观 | 某些组件需要对象/数组列表。该参数用于设置值列表 | @tag(值=$国家) |
| 别名 | 某些组件需要或使用对象/数组列表。该参数用于引用列表内的任何行。如果设置了值并且缺少别名，则会创建一个名为值+“行”的新别名。 | @tag($值=$国家别名=$国家) @tag($values=$countries )它假设 alias=$countriesRow |
| 选择组 | 标签@select可以列出分组的元素。该参数用于设置分组 | @tag($值=$国家别名=$国家@optgroup=$国家->大陆) |
我们来说下一个例子
@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是一些标签内使用的实用标签。这取决于其父标签的行为。它使用标签值向父对象添加多行/行
注意：此标签需要一些参数：
- 父级（或此标签）需要标签值
- 父级需要标签值它指示当前选择（如果有）
- 父级（或此标签）需要标签别名如果缺少别名，则它使用值的名称+“行”，即值=产品->别名=产品行
- 父级（或此标签）需要标签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选项组 | 它存储当前的 optgroup（如果有）。示例：$productOptGroup |
| $values键 | 它表示当前行的当前键。示例：$productKey |
| $alias（如果未设置别名，则使用$values行） | 变量的当前行。示例：$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结束
它添加了一个复选框
例子：
@checkbox(id="idsimple" value="1" checked="1" post="it is a selection")
它添加了一个单选按钮
例子：
@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
它呈现表的标题（可选）。添加到其中的每个单元格都会呈现为“th”HTML 标签
它呈现表格的主体（可选）。表格内添加的每个单元格均呈现为“td”HTML 标记
它呈现表格的页脚（可选）。添加到其中的每个单元格都会呈现为“th”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 设置默认类和标签。
// 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 ' ;其中名称标签可以如下所示
| 姓名 | 描述 | 例子 | 代码 |
|---|---|---|---|
| 名牌 | 它使用标签使用时使用的模式 | 输入 | {{pre}}<输入{{内部}} >{{之间}}</输入>{{post}} |
| 姓名标签_空 | 如果内容（之间/文本）为空或未设置（自关闭标记），系统将使用此模式。如果未设置，则即使内容为空，系统也会使用名称标签 | 输入_空 | {{pre}}<输入{{inner}} />{{post}} |
| 名牌_项目 | 系统将此模式用于标签 @item 和 @items | 选择项目 | <选项{{内部}} >{{之间}}</选项> |
| 姓名标签结束 | 当标签必须关闭时，它使用此模式 | 表单结束 | </表格> |
| 多变的 | 解释 | 逃脱 (*) |
|---|---|---|
| {{前}} | 标签前的代码： pre <tag></tag> | 不 |
| {{邮政}} | 标签后的代码：<tag></tag> post | 不 |
| {{内}} | 标签内的属性：<tag inside ></tag> | 是的 |
| {{之间}} | 标签之间的内容：<tag>之间</tag> | 默认情况下该值被转义 但它可能无法逃脱 |
| {{ID}} | id 属性（它也包含在 {{inner}} 中）： < tag id > </tag> | 是的 |
| {{姓名}} | name 属性（也包含在 {{inner}} 中）： < tag name > </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 > 该库有一些可用于初始化和配置库的方法。它们是可选的。
它将模式和类设置为与 bootstrap 4 兼容。
如果参数为 true，则它将 CSS 从 CDN 添加到css 框中
我们的代码
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >它将模式和类设置为与 bootstrap 4 兼容。
如果参数为 true，则它将 CSS 从 CDN 添加到css 框中
我们的代码
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >它将模式和类设置为与 bootstrap 3 兼容。
如果参数为 true，则它将 CSS 从 CDN 添加到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"); ' );它是该类的公共字段列表。这些字段是公共的，因为出于性能目的（而不是使用 setter 和 getter）
它存储代码使用的模式列表
$ 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（推荐，为什么？因为trait更灵活）
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 库和日期选择器
