BladeOneHtml
2.4
Es una biblioteca PHP que permite crear formularios (ver) de forma fácil, limpia y sin afectar el rendimiento. Utiliza la biblioteca BladeOne para representar la vista. Esta biblioteca solo usa una única dependencia, un archivo y nada más.
Esta biblioteca funciona de dos maneras:
El compositor requiere 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=nueva miBlade();
Esta biblioteca agrega un nuevo conjunto de etiquetas para la plantilla. Las etiquetas utilizan argumentos con nombre, por lo que son fácilmente configurables.
@<etiqueta>(argumento1="valor" argumento2='valor' argumento3=valor argumento4=$variable argumento5=función(), argumento6="aaa $aaa")
Esta biblioteca utiliza los argumentos html nativos, pero algunos argumentos son especiales.
| Argumento | Descripción | ejemplo |
|---|---|---|
| texto | Agrega un contenido entre las etiquetas. El valor interno siempre no está entre comillas. | @tag(text="hola") -> <tag>hola</tag> |
| pre | Agrega un contenido antes de la etiqueta. | @tag(pre="hola") -> hola<tag></tag> |
| correo | Agrega un contenido después de la etiqueta. | @tag(post="hola") -> <tag></tag>hola |
| entre | Agrega un contenido entre las etiquetas (funciona similar al texto) | @tag(entre="hola") -> <tag>hola</tag> |
| valor | Por lo general, funciona como el " valor " normal de html, pero también podría funcionar de manera diferente (en @textarea funciona como texto ) | @tag(valor="hola") -> < etiqueta valor="hola"></tag> |
| valores | Algunos componentes necesitan una lista de objetos/matrices. Este argumento se utiliza para establecer la lista de valores. | @tag(valores=$países) |
| alias | Algunos componentes necesitan o utilizan una lista de objetos/matriz. Este argumento es para hacer referencia a cualquier fila dentro de la lista. Si se establecen valores y falta el alias , se crea un nuevo alias llamado valores+"Fila". | @tag($valores=$alias de países=$país) @tag($values=$countries ) asume alias=$countriesRow |
| grupo opt | La etiqueta @select podría enumerar elementos agrupados. Este argumento se utiliza para establecer la agrupación. | @tag($valores=$alias de países=$país @optgroup=$país->continente) |
Digamos el siguiente ejemplo.
@input(value="hello world" type="text" )
Se representa como
<input value="hello world" type="text" />
Si la etiqueta usa una variable de función, entonces esta vista
@input(value=$hello type="text" )
se convierte en
<input value="<?php echo $this->e($hello);?>" type="text" />
El método $this->e se utiliza para escapar del método.
Nota: Esta biblioteca permite cualquier etiqueta, incluso etiquetas personalizadas (pero solo si no entran en conflicto con las etiquetas especiales, consulte la tabla)
@input(valor="hola mundo" tipo="texto" mycustomtag="hola" )
se convierte en
< input value =" hello world " type =" text " mycustomtag =" hi " /> Muestra un HTML de entrada.
Ejemplo básico:
@input(id="id1" value="hello world$somevar" type="text" )
Genera un campo oculto.
Ejemplo básico:
@hidden(name="id1" value="hello world$somevar" )
Muestra una etiqueta html
@label(for="id1" text="hello world:")
Muestra una imagen
@image(src="https://via.placeholder.com/350x150")
Muestra un objeto html seleccionado (lista desplegable)
Ejemplo:
@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 requiere los valores de los argumentos en el padre (@select) y el valor de los argumentos (el valor seleccionable) y el texto (el valor visible) Nota 2: @items requiere una identificación , asignada en la misma etiqueta o en el padre etiqueta (en este caso, el padre es @select) Nota 3: por norma, el argumento id debe ser único.
@item es una etiqueta de utilidad que se utiliza dentro de otras etiquetas. Esto se comporta dependiendo de su etiqueta principal. Agrega una línea/fila simple al objeto principal.
Ejemplo:
@select()
@item(value='aaa' text='hello world')
@endselect
Representa
<select>
<option value="aaa">hello world</option>
</select>
@items es una etiqueta utilitaria que se utiliza dentro de algunas etiquetas. Esto se comporta dependiendo de su etiqueta principal. Agrega múltiples líneas/filas al objeto principal utilizando los valores de etiqueta
Nota: esta etiqueta requiere algunos argumentos:
- el padre (o esta etiqueta) requiere los valores de la etiqueta
- el padre requiere el valor de la etiqueta Indica la selección actual (si corresponde)
- el padre (o esta etiqueta) requiere el alias de etiqueta. Si falta el alias, entonces usa el nombre de valores + "Fila", es decir, valores = producto -> alias = fila de producto
- el padre (o esta etiqueta) requiere la identificación de la etiqueta
- La "id" representada se generará usando esta id+"_"+"id de la fila". es decir, id="idproduct" => idproduct_0, idproduct_1
- ¿Por qué? Es porque la identificación debe ser única (especificaciones html)
Ejemplo, si $countries es una lista de objetos entonces:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country->id text=$country->name)
@endselect
Si $countries es una lista de matrices entonces:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country['id'] text=$country['name'])
@endselect
Dentro de los elementos de la etiqueta, puedes usar las siguientes variables
| variable (donde valores es la variable utilizada) | Especificación |
|---|---|
| $valoresGrupo de opciones | Almacena el grupo de opciones actual (si lo hay). Ejemplo: $productOptGroup |
| Clave de valores $ | Indica la clave actual de la fila actual. Ejemplo: $clavedelproducto |
| $alias (si no se establece un alias, se utiliza la fila $values ) | La fila actual de la variable. Ejemplo: $productRow |
Inicia un grupo opcional (seleccionar)
Ejemplo:
@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 etiqueta debe terminar con la etiqueta @endoptgroup
Agrega una sola casilla de verificación.
Ejemplo:
@checkbox(id="idsimple" value="1" checked="1" post="it is a selection")
Agrega un solo botón de opción.
Ejemplo:
@radio(id="idsimple" value="1" checked="1" post="it is a selection")
Dibuja un área de texto.
Ejemplo:
@textarea(id="aaa" value="3333 3333 aaa3333 ")
dibuja un boton
Ejemplo:
@button(value="click me" type="submit" class="test" onclick='alert("ok")')
Agrega un hipervínculo
Ejemplo:
@link(href="https://www.google.cl" text="context")
Muestra una lista de casillas de verificación.
@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
Muestra una lista de botones de opción.
@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
Genera un valor de entrada de archivo.
@file(name="file" value="123.jpg" post="hello world")
Nota: también muestra un archivo oculto con el nombre "nombre"+"_archivo" con el valor original
Genera una lista desordenada
@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
Genera una 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
Genera una paginación. Requiere bootstrap3, bootstrap4 o bootstrap5.
Puede encontrar un ejemplo en ejemplos/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
]);Plantilla
@pagination(numpages=$totalpages current=$current pagesize=$pagesize urlparam='_page')Nota: La página es base 1. Nota: el argumento urlparam se utiliza para construir el enlace (domain.dom/web.php?_page=999)
Puede cambiar el nombre de los botones anterior y siguiente de la siguiente manera:
$ this -> setTranslation ([ ' pagination ' =>[ ' prev ' => ' <<> ' , ' next ' => ' > ' ]]);
Representa una tabla
@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
Representa el encabezado de la tabla (opcional). Cada celda agregada dentro de ella se representa como la etiqueta HTML "th"
Representa el cuerpo de la tabla (opcional). Cada celda agregada dentro de la tabla se representa como una etiqueta HTML "td"
Representa el pie de página de la tabla (opcional). Cada celda agregada dentro de ella se representa como la etiqueta HTML "th"
Genera una fila dentro del cuerpo.
Representa una celda dentro del encabezado de la tabla, el cuerpo de la tabla (filas de la tabla) o el pie de la tabla.
Se renderiza y se agrega CSS al cuadro.
< head >
@cssbox
</ head > Usando el método addCss($css,$nombre)
$ this -> addCss ( ' <link rel="stylesheet" href="mystyle.css"> ' , ' mystyle ' );
$ this -> addCss ( ' css/stylename.css ' ); $css podría ser un enlace o una etiqueta de enlace
$name es opcional pero evita agregar duplicados. Si agregamos un nuevo CSS con el mismo nombre que uno anterior, entonces se ignora.
Representa todos los enlaces de JavaScript agregados al cuadro.
< body >
<!-- our page -->
@jsbox
</ body > Usando el método addJs($script,$nombre)
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); < body >
<!-- our page -->
@jsbox <!-- we could load jquery here -->
@jscodebox(ready)
</ body >Este código agrega las etiquetas <script> automáticamente.
El argumento listo indica si queremos ejecutar la función cuando el documento esté listo.
¿Cómo agregar un nuevo código JavaScript en jscodebox ?
$ blade -> addJsCode ( ' alert("hello"); ' );BladeOneHtml permite modificar las etiquetas utilizadas y establecer clases predeterminadas para cada clase.
Puede configurar una clase y etiquetas predeterminadas para Bootstrap 3/4/5 usando el siguiente método (elija solo uno).
// 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 ); O puedes crear tus propias etiquetas y clases.
$ blade -> defaultClass [ $ tagname ]= ' default class ' ; $ blade -> pattern [ ' nametag ' ]= ' pattern ' ;Donde la etiqueta de nombre podría ser la siguiente
| Nombre | Descripción | Ejemplo | Código |
|---|---|---|---|
| etiqueta de nombre | Utiliza el patrón a utilizar cuando se utiliza la etiqueta. | aporte | {{pre}}<entrada{{inner}} >{{entre}}< /entrada>{{post}} |
| etiqueta_nombre_vacía | El sistema utiliza este patrón si el contenido (entre/texto) está vacío o no está configurado (una etiqueta de cierre automático). Si no se configura, el sistema utiliza una etiqueta de nombre incluso si el contenido está vacío. | entrada_vacia | {{pre}}< entrada{{inner}} />{{post}} |
| elemento_etiqueta_nombre | El sistema utiliza este patrón para las etiquetas @item y @items. | seleccionar_elemento | < opción{{interior}} >{{entre}}< /opción> |
| nombretag_end | Utiliza este patrón cuando la etiqueta debe estar cerrada. | fin_formulario | < /formulario> |
| variable | explicación | Escapó (*) |
|---|---|---|
| {{pre}} | El código antes de la etiqueta: pre <tag ></tag> | No |
| {{correo}} | El código después de la etiqueta: <etiqueta></etiqueta> publicación | No |
| {{interno}} | Los atributos dentro de la etiqueta: <etiqueta dentro > </tag> | Sí |
| {{entre}} | El contenido entre la etiqueta: <etiqueta> entre </tag> | Por defecto, este valor tiene carácter de escape. pero podría no ser escapado |
| {{identificación}} | El atributo id (también se incluye en {{inner}}): < tag id > </tag> | Sí |
| {{nombre}} | El atributo de nombre (también se incluye en {{inner}}): < nombre de etiqueta > </tag> | Sí |
Ejemplo de una etiqueta normal:
$ blade -> pattern [ ' input ' ]= ' {{pre}}<input{{inner}} >{{between}}</input>{{post}} ' ;Nota :(*) ¿Qué se escapa?. Por ejemplo, el texto "", si escapó, se muestra como "<hola>"
Es posible agregar un atributo personalizado que podría usarse dentro de un patrón.
Por ejemplo, agreguemos la etiqueta personalizada llamada etiqueta personalizada
$ blade -> customAttr [ ' customtag ' ]= ' This attr is missing! ' ;
$ blade -> pattern [ ' alert ' ]= ' {{pre}}<div {{inner}}><h1>{{customtag}}</h1>{{between}}</div>{{post}} ' ;y en la vista
@alert(text="hi there" class="alert-danger" customtag="it is a custom tag") < br >
@alert(text="hi there" class="alert-danger" ) < br > La biblioteca tiene una serie de métodos que podrían usarse para inicializar y configurar la biblioteca. Son opcionales.
Establece los patrones y clases para que sean compatibles con bootstrap 4.
si el argumento es verdadero, entonces agrega el CSS al cuadro CSS del CDN
Nuestro código
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >Establece los patrones y clases para que sean compatibles con bootstrap 4.
si el argumento es verdadero, entonces agrega el CSS al cuadro CSS del CDN
Nuestro código
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >Establece los patrones y clases para que sean compatibles con bootstrap 3.
si el argumento es verdadero, entonces agrega el CSS al cuadro CSS del CDN
$ blade -> useBootstrap3 ( true ); Agrega un CSS al cuadro CSS.
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' ); Agrega un enlace de JavaScript al cuadro js.
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' );Agrega un código javascript al cuadro js.
$ blade -> addJsCode ( ' alert("hello"); ' );Es la lista de campos públicos de la clase. Los campos son públicos porque por motivos de rendimiento (en lugar de usar setter y getters)
Almacena la lista de patrones utilizados por el código.
$ this -> pattern [ ' sometag ' ]= ' {{pre}}<tag {{inner}}>{{between}}</tag>{{post}} ' ;Nota: consulte "Variable de patrón dentro del código" para ver la lista de variables de patrón
La clase CSS predeterminada agregada a una etiqueta específica.
$ this -> defaultClass [ ' sometag ' ]= ' classred classbackgroundblue ' ;Agrega complementos personalizados que podrían usarse junto con $this->pattern
$ this -> customAttr [ ' customtag ' ]= ' XXXXX ' ; // So we could use the tag {{customtag}}. 'XXXXX' is the default valueEl atributo personalizado siempre elimina las comillas y las comillas dobles, por lo que si nuestro valor es "hola" -> hola
Es posible agregar un nuevo patrón extendiendo la clase PHP.
$this->pattern['mynewtag']='<mycustomtag {{inner}}>{{between}}</mycustomtag>';
Podrías crear una nueva clase o rasgo de PHP y ampliar nuestra clase. Dentro de esta nueva estructura, debes agregar un nuevo método con la siguiente estructura.
Usando una nueva clase
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.
}
}Usar un rasgo (recomendado, ¿por qué? Es porque los rasgos son más flexibles)
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 crear un método principal, debe insertar un nuevo valor dentro de $this->htmlItem. Puedes almacenar lo que quieras.
$ 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 );
}Nuestro objetivo es renderizar código PHP, no evaluar un código. Por ejemplo, si $args['somearg']=$variable, entonces nuestro valor es $variable (como texto), sin importar el valor real de la variable.
También debemos crear un método para finalizar el contenedor, y también debemos agregar un nuevo patrón.
$ 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
}Nuestros artículos podrán saber si están dentro de una etiqueta con la siguiente operación
$ parent = end ( $ this -> htmlItem );Podríamos crear un componente que requiera CSS y JavaScript.
Por ejemplo, un selector de fechas.
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: Es mejor agregar la biblioteca de jQuery y el selector de fecha una vez en nuestro código.
