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=новый myBlade();
Эта библиотека добавляет новый набор тегов для шаблона. Теги используют именованные аргументы, поэтому их легко настроить.
@<tag>(argument1="значение" аргумент2='значение' аргумент3=значение аргумент4=$переменная аргумент5=функция(), аргумент6="ааа $ааа")
Эта библиотека использует собственные аргументы HTML, но некоторые аргументы являются особенными.
| Аргумент | Описание | пример |
|---|---|---|
| текст | Он добавляет контент между тегами. Внутреннее значение всегда не заключено в кавычки. | @tag(text="привет") -> <tag>привет</tag> |
| предварительно | Он добавляет контент перед тегом | @tag(pre="hello") -> привет<tag></tag> |
| почта | Он добавляет контент после тега | @tag(post="привет") -> <tag></tag>привет |
| между | Он добавляет контент между тегами (работает аналогично тексту). | @tag(between="привет") -> <tag>привет</tag> |
| ценить | Обычно оно работает как обычное « значение » html, но может работать и по-другому (в @textarea работает как текст ). | @tag(value="привет") -> < tag value="привет"></tag> |
| ценности | Некоторым компонентам требуется список объектов/массивов. Этот аргумент используется для установки списка значений | @tag(значения=$страны) |
| псевдоним | Некоторым компонентам требуется или используется список объектов/массивов. Этот аргумент предназначен для ссылки на любую строку внутри списка. Если значения установлены, а псевдоним отсутствует, создается новый псевдоним с именем значения+"Строка". | @tag($values=$countries alias=$country) @tag($values=$countries) принимает псевдоним=$countriesRow |
| группа опций | Тег @select может перечислять сгруппированные элементы. Этот аргумент используется для установки группировки | @tag($values=$countries alias=$country @optgroup=$country->континент) |
Скажем, следующий пример
@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="привет, мир" type="text" mycustomtag="привет" )
Преобразуется в
< 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 требуется идентификатор , назначенный в том же теге или в родительском элементе. тег (в данном случае родительским элементом является @select). Примечание 3. По стандарту идентификатор аргумента должен быть уникальным.
@item — это служебный тег, используемый внутри других тегов. Это ведет себя в зависимости от их родительского тега. Он добавляет простую строку/строку к родительскому объекту.
Пример:
@select()
@item(value='aaa' text='hello world')
@endselect
Это оказывает
<select>
<option value="aaa">hello world</option>
</select>
@items — утилитарный тег, используемый внутри некоторых тегов. Это ведет себя в зависимости от их родительского тега. Он добавляет несколько строк/строк к родительскому объекту, используя значения тега.
Примечание. Этот тег требует некоторых аргументов:
- родительский (или этот тег) требует значений тега
- родительскому элементу требуется значение тега. Он указывает текущий выбор (если есть)
- родительский элемент (или этот тег) требует псевдонима тега. Если псевдоним отсутствует, используется имя значений + «Строка», т.е. значения = продукт -> псевдоним = ProductRow.
- родительский (или этот тег) требует идентификатор тега
- Отрисованный «id» будет сгенерирован с использованием этого id+»_»+»id строки». т.е. id="idproduct" => idproduct_0, idproduct_1
- Почему? Это потому, что идентификатор должен быть уникальным (спецификации 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")
Примечание. Он также отображает скрытый файл с именем «имя» + «_файл» с исходным значением.
Он генерирует несортированный список
@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-тег.
Он отображает тело таблицы (необязательно). Каждая ячейка, добавленная внутри таблицы, отображается как HTML-тег «td».
Он отображает нижний колонтитул таблицы (необязательно). Каждая ячейка, добавленная внутри нее, отображается как «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 с тем же именем, что и предыдущий, то он игнорируется.
Он отображает все ссылки 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>.
Аргумент «готов» указывает, хотим ли мы выполнить функцию, когда документ готов.
Как добавить новый код 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}}<input{{inner}} >{{between}}< /input>{{post}} |
| nametag_empty | Система использует этот шаблон, если содержимое (between/text) пусто или не установлено (самозакрывающийся тег). Если не установлено, система использует именной тег, даже если содержимое пусто. | input_empty | {{pre}} input{{inner}} />{{post}} |
| nametag_item | Система использует этот шаблон для тегов @item и @items. | select_item | < option{{inner}} >{{between}}< /option> |
| nametag_end | Он использует этот шаблон, когда тег необходимо закрыть. | form_end | </форма> |
| переменная | объяснение | Сбежал (*) |
|---|---|---|
| {{предварительно}} | Код перед тегом: pre <tag></tag> | нет |
| {{почта}} | Код после тега: <tag></tag> post | нет |
| {{внутренний}} | Атрибуты внутри тега: <тег внутри > </тег> | да |
| {{между}} | Содержимое между тегами: <тег> между </тег> | По умолчанию это значение экранировано но его можно было бы избежать |
| {{идентификатор}} | Атрибут id (он также включен в {{inner}}): < tag id > </tag> | да |
| {{имя}} | Атрибут имени (он также включен в {{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.
если аргумент верен, то он добавляет CSS в поле CSS из CDN
Наш код
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >Он устанавливает шаблоны и классы, совместимые с начальной загрузкой 4.
если аргумент верен, то он добавляет CSS в поле CSS из CDN
Наш код
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >Он устанавливает шаблоны и классы, совместимые с начальной загрузкой 3.
если аргумент верен, то он добавляет CSS в поле CSS из CDN
$ 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Пользовательский атрибут всегда удаляет кавычки и двойные кавычки, поэтому, если наше значение «привет» -> привет
Можно добавить новый шаблон, расширив класс 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 и средство выбора даты один раз в наш код.
