BladeOneHtml
2.4
É uma biblioteca PHP que permite criar formulários (visualizar) de forma fácil, limpa e sem prejudicar o desempenho. Ele usa a biblioteca BladeOne para renderizar a visualização. Esta biblioteca usa apenas uma única dependência, um arquivo e nada mais.
Esta biblioteca funciona de duas maneiras:
compositor requer 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 minhaBlade();
Esta biblioteca adiciona um novo conjunto de tags para o modelo. As tags usam argumentos nomeados, por isso são facilmente configuráveis.
@<tag>(argumento1="valor" argumento2='valor' argumento3=valor argumento4=$variável argumento5=função(), argumento6="aaa $aaa")
Esta biblioteca usa argumentos html nativos, mas alguns argumentos são especiais
| Argumento | Descrição | exemplo |
|---|---|---|
| texto | Ele adiciona um conteúdo entre as tags. O valor interno é sempre sem aspas. | @tag(text="olá") -> <tag>olá</tag> |
| pré | Adiciona um conteúdo antes da tag | @tag(pre="olá") -> olá<tag></tag> |
| publicar | Adiciona um conteúdo após a tag | @tag(post="olá") -> <tag></tag>olá |
| entre | Adiciona um conteúdo entre as tags (funciona de forma semelhante ao texto) | @tag(between="olá") -> <tag>olá</tag> |
| valor | Geralmente funciona como o " valor " normal do html mas também pode funcionar de forma diferente (em @textarea funciona como text ) | @tag(value="hello") -> < tag value="hello"></tag> |
| valores | Alguns componentes precisam de uma lista de objetos/matrizes. Este argumento é usado para definir a lista de valores | @tag(valores=$países) |
| apelido | Alguns componentes precisam ou usam uma lista de objetos/array. Este argumento serve para fazer referência a qualquer linha dentro da lista. Se valores forem definidos e o alias estiver faltando, ele criará um novo alias chamado valores+"Linha". | @tag($valores=$países alias=$país) @tag($values=$countries ) assume alias=$countriesRow |
| grupo de opções | A tag @select poderia listar elementos agrupados. Este argumento é usado para definir o agrupamento | @tag($valores=$países alias=$país @optgroup=$país->continente) |
Digamos o próximo exemplo
@input(value="hello world" type="text" )
É renderizado como
<input value="hello world" type="text" />
Se a tag usa uma variável de função, então esta visualização
@input(value=$hello type="text" )
É convertido em
<input value="<?php echo $this->e($hello);?>" type="text" />
O método $this->e é usado para escapar do método.
Nota: Esta biblioteca permite qualquer tag, até mesmo tags personalizadas (mas somente se não entrarem em conflito com as tags especiais, veja tabela)
@input(value="hello world" type="text" mycustomtag="hi" )
É convertido em
< input value =" hello world " type =" text " mycustomtag =" hi " /> Ele mostra um HTML de entrada.
Exemplo básico:
@input(id="id1" value="hello world$somevar" type="text" )
Ele gera um campo oculto
Exemplo básico:
@hidden(name="id1" value="hello world$somevar" )
Mostra um rótulo html
@label(for="id1" text="hello world:")
Ele mostra uma imagem
@image(src="https://via.placeholder.com/350x150")
Ele mostra um objeto HTML selecionado (lista suspensa)
Exemplo:
@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
Nota 1: @items requer os valores dos argumentos no pai (@select) e o valor dos argumentos (o valor selecionável) e texto (o valor visível) Nota 2: @items requer um id , atribuído na mesma tag ou no pai tag (neste caso, o pai é @select) Nota 3: Por padrão, o argumento id deve ser único.
@item é uma tag utilitária usada dentro de outras tags. Isso se comporta dependendo de sua tag pai. Ele adiciona uma linha/linha simples ao objeto pai.
Exemplo:
@select()
@item(value='aaa' text='hello world')
@endselect
Ele renderiza
<select>
<option value="aaa">hello world</option>
</select>
@items é uma tag utilitária usada dentro de algumas tags. Isso se comporta dependendo de sua tag pai. Ele adiciona múltiplas linhas/linhas ao objeto pai usando os valores da tag
Nota: Esta tag requer alguns argumentos:
- o pai (ou esta tag) requer os valores da tag
- o pai requer o valor da tag Indica a seleção atual (se houver)
- o pai (ou esta tag) requer o alias da tag Se o alias estiver faltando, ele usará o nome de valores + "Linha", ou seja, valores = produto -> alias = productRow
- o pai (ou esta tag) requer o ID da tag
- O "id" renderizado será gerado usando este id+"_"+"id da linha". ou seja, id="idproduto" => idproduto_0, idproduto_1
- Por que? É porque o ID deve ser único (especificações HTML)
Exemplo, se $countries for uma lista de objetos, então:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country->id text=$country->name)
@endselect
Se $countries for uma lista de arrays então:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country['id'] text=$country['name'])
@endselect
Dentro dos itens da tag, você pode usar as próximas variáveis
| variável (onde valores é a variável usada) | Especificação |
|---|---|
| $valores Grupo de opções | Ele armazena o optgroup atual (se houver). Exemplo: $productOptGroup |
| $valores Chave | Indica a chave atual da linha atual. Exemplo: $productKey |
| $alias (se nenhum alias estiver definido, ele usará a linha $values ) | A linha atual da variável. Exemplo: $produtoRow |
Inicia um grupo opcional (selecione)
Exemplo:
@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
Nota: esta tag deve terminar com a tag @endoptgroup
Adiciona uma única caixa de seleção
Exemplo:
@checkbox(id="idsimple" value="1" checked="1" post="it is a selection")
Ele adiciona um único botão de opção
Exemplo:
@radio(id="idsimple" value="1" checked="1" post="it is a selection")
Ele desenha uma área de texto.
Exemplo:
@textarea(id="aaa" value="3333 3333 aaa3333 ")
Ele desenha um botão
Exemplo:
@button(value="click me" type="submit" class="test" onclick='alert("ok")')
Adiciona um hiperlink
Exemplo:
@link(href="https://www.google.cl" text="context")
Mostra uma lista de caixas de seleção
@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
Ele mostra uma lista de botões de opção
@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
Ele gera um valor de entrada de arquivo
@file(name="file" value="123.jpg" post="hello world")
Nota: também renderiza um arquivo oculto com o nome "nome"+"_arquivo" com o valor original
Ele gera uma lista não classificada
@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
Ele gera uma lista ordenada
@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
Ele gera uma paginação. Requer bootstrap3, bootstrap4 ou bootstrap5.
Você pode encontrar um exemplo em exemplos/examplepagination.php
Código PHP
$ current = isset ( $ _GET [ ' _page ' ]) ? $ _GET [ ' _page ' ] : 1 ;
echo $ blade -> run ( " examplepagination " ,
[ ' totalpages ' => count ( $ products )
, ' current ' => $ current
, ' pagesize ' => 10
, ' products ' => $ items
]);Modelo
@pagination(numpages=$totalpages current=$current pagesize=$pagesize urlparam='_page')Nota: A página é base 1. Nota: o argumento urlparam é usado para construir o link (domain.dom/web.php?_page=999)
Você pode alterar o nome dos botões anterior e próximo da seguinte forma:
$ this -> setTranslation ([ ' pagination ' =>[ ' prev ' => ' <<> ' , ' next ' => ' > ' ]]);
Ele renderiza uma tabela
@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
Renderiza o cabeçalho da tabela (opcional). Cada célula adicionada dentro dela é renderizada como "th" tag HTML
Renderiza o corpo da tabela (opcional). Cada célula adicionada dentro da tabela é renderizada como tag HTML "td"
Renderiza o rodapé da tabela (opcional). Cada célula adicionada dentro dela é renderizada como "th" tag HTML
Ele gera uma linha dentro do corpo
Ele renderiza uma célula dentro do tablehead, tablebody (tablerows) ou tablefooter
Ele renderiza e css adicionado na caixa
< head >
@cssbox
</ head > Usando o método addCss($css,$name)
$ this -> addCss ( ' <link rel="stylesheet" href="mystyle.css"> ' , ' mystyle ' );
$ this -> addCss ( ' css/stylename.css ' ); $css pode ser um link ou uma tag de link
$name é opcional, mas evita adicionar duplicatas. Se adicionarmos um novo CSS com o mesmo nome do anterior, ele será ignorado.
Ele renderiza todos os links JavaScript adicionados à caixa
< body >
<!-- our page -->
@jsbox
</ body > Usando o método addJs($script,$name)
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); < body >
<!-- our page -->
@jsbox <!-- we could load jquery here -->
@jscodebox(ready)
</ body >Este código adiciona as tags < script > automaticamente.
O argumento ready indica se queremos executar a função quando o documento estiver pronto.
Como adicionar um novo código JavaScript ao jscodebox ?
$ blade -> addJsCode ( ' alert("hello"); ' );BladeOneHtml permite modificar as tags usadas e definir classes padrão para cada classe.
Você pode definir uma classe e tags padrão para Bootstrap 3/4/5 usando o próximo método (escolha apenas um).
// 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 ); Ou você pode criar suas próprias tags e classes
$ blade -> defaultClass [ $ tagname ]= ' default class ' ; $ blade -> pattern [ ' nametag ' ]= ' pattern ' ;Onde o crachá pode ser o seguinte
| Nome | Descrição | Exemplo | Código |
|---|---|---|---|
| crachá | Ele usa o padrão a ser usado quando a tag é usada | entrada | {{pré}}<input{{inner}} >{{between}}< /input>{{post}} |
| nametag_empty | O sistema usa esse padrão se o conteúdo (entre/texto) estiver vazio ou não definido (uma tag de fechamento automático). Se não for definido, o sistema usará o nametag mesmo se o conteúdo estiver vazio | entrada_vazia | {{pré}}< entrada{{inner}} />{{post}} |
| item_tag_de_nome | O sistema usa esse padrão para tags @item e @items | selecione_item | < opção{{inner}} >{{entre}}< /option> |
| nametag_end | Ele usa esse padrão quando a tag deve ser fechada | formulário_end | </form> |
| variável | explicação | Escapou (*) |
|---|---|---|
| {{pré}} | O código antes da tag: pre <tag </tag> | não |
| {{publicar}} | O código após a tag: < tag </tag> post | não |
| {{interno}} | Os atributos dentro da tag: < tag inside > </tag> | sim |
| {{entre}} | O conteúdo entre a tag: < tag > entre </tag> | Por padrão, este valor é escapado mas poderia ser sem escape |
| {{eu ia}} | O atributo id (também está incluído em {{inner}}): < tag id > </tag> | sim |
| {{nome}} | O atributo name (também está incluído em {{inner}}): < tag name > </tag> | sim |
Exemplo de uma tag normal:
$ blade -> pattern [ ' input ' ]= ' {{pre}}<input{{inner}} >{{between}}</input>{{post}} ' ;Nota :(*) O que escapou? Por exemplo, o texto "", se tiver escapado, será exibido como "<hello>"
É possível adicionar um atributo customizado que pode ser usado dentro de um padrão.
Por exemplo, vamos adicionar a tag personalizada chamada customtag
$ blade -> customAttr [ ' customtag ' ]= ' This attr is missing! ' ;
$ blade -> pattern [ ' alert ' ]= ' {{pre}}<div {{inner}}><h1>{{customtag}}</h1>{{between}}</div>{{post}} ' ;E na vista
@alert(text="hi there" class="alert-danger" customtag="it is a custom tag") < br >
@alert(text="hi there" class="alert-danger" ) < br > A biblioteca possui vários métodos que podem ser usados para inicializar e configurar a biblioteca. Eles são opcionais.
Ele define os padrões e classes para serem compatíveis com o bootstrap 4.
se o argumento for verdadeiro, ele adiciona o CSS à caixa css do CDN
Nosso código
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >Ele define os padrões e classes para serem compatíveis com o bootstrap 4.
se o argumento for verdadeiro, ele adiciona o CSS à caixa css do CDN
Nosso código
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >Ele define os padrões e classes para serem compatíveis com o bootstrap 3.
se o argumento for verdadeiro, ele adiciona o CSS à caixa css do CDN
$ blade -> useBootstrap3 ( true ); Adiciona um CSS à caixa CSS
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' ); Adiciona um link javascript à caixa js
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' );Adiciona um código javascript à caixa js
$ blade -> addJsCode ( ' alert("hello"); ' );É a lista de campos públicos da classe. Os campos são públicos porque para fins de desempenho (em vez de usar setter e getters)
Ele armazena a lista de padrões usados pelo código
$ this -> pattern [ ' sometag ' ]= ' {{pre}}<tag {{inner}}>{{between}}</tag>{{post}} ' ;Nota: consulte "Variável padrão dentro do código" para ver a lista de variáveis padrão
A classe CSS padrão adicionada a uma tag específica.
$ this -> defaultClass [ ' sometag ' ]= ' classred classbackgroundblue ' ;Ele adiciona um acréscimo personalizado que pode ser usado junto com $this->pattern
$ this -> customAttr [ ' customtag ' ]= ' XXXXX ' ; // So we could use the tag {{customtag}}. 'XXXXX' is the default valueO atributo customizado sempre remove as aspas e aspas duplas, portanto se nosso valor for "hello" -> hello
É possível adicionar um novo padrão estendendo a classe PHP.
$this->pattern['mynewtag']='<mycustomtag {{inner}}>{{between}}</mycustomtag>';
Você poderia criar uma nova classe ou característica PHP e estender nossa classe. Dentro desta nova estrutura, você deve adicionar um novo método com a próxima estrutura
Usando uma nova classe
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.
}
}Usando uma característica (recomendado, por quê? É porque as características são mais flexíveis)
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
}Para criar um método pai, você deve inserir um novo valor dentro de $this->htmlItem. Você pode armazenar o que quiser.
$ 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 );
}Nosso objetivo é renderizar código PHP, não avaliar um código. Por exemplo, se $args['somearg']=$variable, então nosso valor é $variable (como texto), não importa o valor real da variável.
Você também deve criar um método para finalizar o contêiner, e também devemos adicionar um novo padrão.
$ 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
}Nossos itens poderão saber se estão dentro de uma tag na próxima operação
$ parent = end ( $ this -> htmlItem );Poderíamos criar um componente que requer CSS e JavaScript.
Por exemplo, um seletor de data.
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 );
}Nota: É melhor adicionar a biblioteca jQuery e o seletor de data uma vez em nosso código
