BladeOneHtml
2.4
Es handelt sich um eine PHP-Bibliothek, die es ermöglicht, Formulare (Ansichten) einfach, sauber und ohne Leistungseinbußen zu erstellen. Zum Rendern der Ansicht wird die Bibliothek BladeOne verwendet. Diese Bibliothek verwendet nur eine einzige Abhängigkeit, eine Datei und nichts weiter.
Diese Bibliothek funktioniert auf zwei Arten:
Composer benötigen 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();
Diese Bibliothek fügt einen neuen Satz von Tags für die Vorlage hinzu. Die Tags verwenden benannte Argumente und sind daher leicht konfigurierbar.
@<tag>(argument1="value" argument2='value' argument3=value argument4=$variable argument5=function(), argument6="aaa $aaa")
Diese Bibliothek verwendet die nativen HTML-Argumente, einige Argumente sind jedoch speziell
| Argument | Beschreibung | Beispiel |
|---|---|---|
| Text | Es fügt einen Inhalt zwischen den Tags hinzu. Der innere Wert wird immer nicht in Anführungszeichen gesetzt. | @tag(text="hello") -> <tag>Hallo</tag> |
| vor | Es fügt einen Inhalt vor dem Tag hinzu | @tag(pre="hello") -> hallo<tag></tag> |
| Post | Es fügt einen Inhalt nach dem Tag hinzu | @tag(post="hello") -> <tag></tag>Hallo |
| zwischen | Es fügt einen Inhalt zwischen den Tags hinzu (funktioniert ähnlich wie Text). | @tag(between="hello") -> <tag>Hallo</tag> |
| Wert | Normalerweise funktioniert es wie der normale „ Wert “ von HTML, es könnte aber auch anders funktionieren (in @textarea funktioniert es wie Text ). | @tag(value="hello") -> < tag value="hello"></tag> |
| Werte | Einige Komponenten benötigen eine Liste von Objekten/Arrays. Dieses Argument wird verwendet, um die Werteliste festzulegen | @tag(values=$countries) |
| alias | Einige Komponenten benötigen oder verwenden eine Liste von Objekten/Arrays. Dieses Argument soll auf eine beliebige Zeile innerhalb der Liste verweisen. Wenn Werte festgelegt sind und der Alias fehlt, wird ein neuer Alias mit dem Namen „Werte + „Zeile““ erstellt. | @tag($values=$countries alias=$country) @tag($values=$countries ) nimmt alias=$countriesRow an |
| optgroup | Das Tag @select könnte gruppierte Elemente auflisten. Mit diesem Argument wird die Gruppierung festgelegt | @tag($values=$countries alias=$country @optgroup=$country->continent) |
Sagen wir das nächste Beispiel
@input(value="hello world" type="text" )
Es wird gerendert als
<input value="hello world" type="text" />
Wenn das Tag eine Funktionsvariable verwendet, dann diese Ansicht
@input(value=$hello type="text" )
Wird umgewandelt in
<input value="<?php echo $this->e($hello);?>" type="text" />
Die Methode $this->e wird verwendet, um der Methode zu entgehen.
Hinweis: Diese Bibliothek erlaubt alle Tags, auch benutzerdefinierte Tags (jedoch nur, wenn sie nicht im Konflikt mit den speziellen Tags stehen, siehe Tabelle).
@input(value="hello world" type="text" mycustomtag="hi" )
Wird umgewandelt in
< input value =" hello world " type =" text " mycustomtag =" hi " /> Es zeigt ein Eingabe-HTML.
Einfaches Beispiel:
@input(id="id1" value="hello world$somevar" type="text" )
Es generiert ein verstecktes Feld
Einfaches Beispiel:
@hidden(name="id1" value="hello world$somevar" )
Es zeigt ein Label-HTML
@label(for="id1" text="hello world:")
Es zeigt ein Bild
@image(src="https://via.placeholder.com/350x150")
Es zeigt ein ausgewähltes (Dropdown-Listen-)HTML-Objekt
Beispiel:
@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
Hinweis 1: @items erfordert die Argumentwerte im übergeordneten (@select) sowie den Argumentwert (den auswählbaren Wert) und den Text (den sichtbaren Wert). Hinweis 2: @items erfordert eine ID , die im selben Tag oder im übergeordneten Tag zugewiesen wird Tag (in diesem Fall ist das übergeordnete Element @select) Hinweis 3: Standardmäßig muss die Argument- ID eindeutig sein.
@item ist ein Utility-Tag, das in anderen Tags verwendet wird. Dies verhält sich abhängig von ihrem übergeordneten Tag. Es fügt dem übergeordneten Objekt eine einfache Zeile/Zeile hinzu.
Beispiel:
@select()
@item(value='aaa' text='hello world')
@endselect
Es rendert
<select>
<option value="aaa">hello world</option>
</select>
@items ist ein nützliches Tag, das in einigen Tags verwendet wird. Dies verhält sich abhängig von ihrem übergeordneten Tag. Es fügt unter Verwendung der Tag -Werte mehrere Zeilen/Zeilen zum übergeordneten Objekt hinzu
Hinweis: Für dieses Tag sind einige Argumente erforderlich:
- Das übergeordnete Element (oder dieses Tag) benötigt die Tag -Werte
- Das übergeordnete Element benötigt den Tag- Wert. Es zeigt die aktuelle Auswahl an (falls vorhanden).
- Das übergeordnete Tag (oder dieses Tag) erfordert das Tag- Alias . Wenn Alias fehlt, wird der Name von Werten + „Zeile“ verwendet, z. B. Werte=Produkt -> Alias=Produktzeile
- Das übergeordnete Element (oder dieses Tag) erfordert die Tag- ID
- Die gerenderte „id“ wird mithilfe dieser ID+„_“+„ID der Zeile“ generiert. dh id="idproduct" => idproduct_0, idproduct_1
- Warum? Dies liegt daran, dass die ID eindeutig sein muss (HTML-Spezifikationen).
Beispiel: Wenn $countries eine Liste von Objekten ist, dann:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country->id text=$country->name)
@endselect
Wenn $countries eine Liste von Arrays ist, dann:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country['id'] text=$country['name'])
@endselect
Innerhalb der Tag-Elemente können Sie die folgenden Variablen verwenden
| Variable (wobei „values“ die verwendete Variable ist) | Spezifikation |
|---|---|
| $values OptGroup | Es speichert die aktuelle Optgroup (falls vorhanden). Beispiel: $productOptGroup |
| $values- Schlüssel | Es gibt den aktuellen Schlüssel der aktuellen Zeile an. Beispiel: $productKey |
| $alias (wenn kein Alias festgelegt ist, wird die $values- Zeile verwendet) | Die aktuelle Zeile der Variablen. Beispiel: $productRow |
Es startet eine optionale Gruppe (auswählen)
Beispiel:
@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
Hinweis: Dieses Tag muss mit dem Tag @endoptgroup abgeschlossen werden
Es fügt ein einzelnes Kontrollkästchen hinzu
Beispiel:
@checkbox(id="idsimple" value="1" checked="1" post="it is a selection")
Es fügt ein einzelnes Optionsfeld hinzu
Beispiel:
@radio(id="idsimple" value="1" checked="1" post="it is a selection")
Es zeichnet einen Textbereich.
Beispiel:
@textarea(id="aaa" value="3333 3333 aaa3333 ")
Es zeichnet einen Knopf
Beispiel:
@button(value="click me" type="submit" class="test" onclick='alert("ok")')
Es fügt einen Hyperlink hinzu
Beispiel:
@link(href="https://www.google.cl" text="context")
Es zeigt eine Liste von Kontrollkästchen
@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
Es zeigt eine Liste von Optionsfeldern
@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
Es generiert einen Dateieingabewert
@file(name="file" value="123.jpg" post="hello world")
Hinweis: Außerdem wird eine versteckte Datei mit dem Namen „name“+„_file“ mit dem Originalwert gerendert
Es wird eine unsortierte Liste generiert
@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
Es wird eine sortierte Liste erstellt
@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
Es erzeugt eine Paginierung. Es erfordert Bootstrap3, Bootstrap4 oder Bootstrap5.
Ein Beispiel finden Sie unter examples/examplepagination.php
PHP-Code
$ current = isset ( $ _GET [ ' _page ' ]) ? $ _GET [ ' _page ' ] : 1 ;
echo $ blade -> run ( " examplepagination " ,
[ ' totalpages ' => count ( $ products )
, ' current ' => $ current
, ' pagesize ' => 10
, ' products ' => $ items
]);Vorlage
@pagination(numpages=$totalpages current=$current pagesize=$pagesize urlparam='_page')Hinweis: Die Seite ist Basis 1. Hinweis: Das Argument urlparam wird zum Erstellen des Links verwendet (domain.dom/web.php?_page=999).
Sie können den Namen der Schaltflächen prev und next wie folgt ändern:
$ this -> setTranslation ([ ' pagination ' =>[ ' prev ' => ' <<> ' , ' next ' => ' > ' ]]);
Es rendert eine Tabelle
@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
Es rendert den Header der Tabelle (optional). Jede darin hinzugefügte Zelle wird als „th“ HTML-Tag gerendert
Es rendert den Hauptteil der Tabelle (optional). Jede in der Tabelle hinzugefügte Zelle wird als HTML-Tag „td“ gerendert
Es rendert die Fußzeile der Tabelle (optional). Jede darin hinzugefügte Zelle wird als „th“ HTML-Tag gerendert
Es erzeugt eine Reihe innerhalb des Körpers
Es rendert eine Zelle im Tabellenkopf, Tabellenkörper (Tabellenzeilen) oder Tabellenfuß
Es wird gerendert und CSS in die Box eingefügt
< head >
@cssbox
</ head > Mit der Methode addCss($css,$name)
$ this -> addCss ( ' <link rel="stylesheet" href="mystyle.css"> ' , ' mystyle ' );
$ this -> addCss ( ' css/stylename.css ' ); $css könnte ein Link oder ein Link-Tag sein
$name ist optional, vermeidet jedoch das Hinzufügen von Duplikaten. Wenn wir ein neues CSS mit demselben Namen wie das vorherige hinzufügen, wird es ignoriert.
Es rendert alle der Box hinzugefügten JavaScript-Links
< body >
<!-- our page -->
@jsbox
</ body > Mit der Methode addJs($script,$name)
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); < body >
<!-- our page -->
@jsbox <!-- we could load jquery here -->
@jscodebox(ready)
</ body >Dieser Code fügt die Tags <script> automatisch hinzu.
Das Argument ready gibt an, ob wir die Funktion ausführen möchten, wenn das Dokument fertig ist.
Wie füge ich einen neuen JavaScript-Code zur jscodebox hinzu?
$ blade -> addJsCode ( ' alert("hello"); ' );BladeOneHtml können Sie die verwendeten Tags ändern und für jede Klasse eine Standardklasse festlegen.
Mit der nächsten Methode können Sie eine Standardklasse und Tags für Bootstrap 3/4/5 festlegen (wählen Sie nur eine aus).
// 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 ); Oder Sie können Ihre eigenen Tags und Klassen erstellen
$ blade -> defaultClass [ $ tagname ]= ' default class ' ; $ blade -> pattern [ ' nametag ' ]= ' pattern ' ;Wobei das Namensschild wie folgt aussehen könnte
| Name | Beschreibung | Beispiel | Code |
|---|---|---|---|
| Namensschild | Es verwendet das zu verwendende Muster, wenn das Tag verwendet wird | Eingang | {{pre}}<input{{inner}} >{{between}}< /input>{{post}} |
| nametag_empty | Das System verwendet dieses Muster, wenn der Inhalt (between/text) leer oder nicht festgelegt ist (ein selbstschließendes Tag). Wenn nicht festgelegt, verwendet das System das Namensschild auch dann, wenn der Inhalt leer ist | input_empty | {{pre}}< input{{inner}} />{{post}} |
| nametag_item | Das System verwendet dieses Muster für die Tags @item und @items | select_item | < option{{inner}} >{{between}}< /option> |
| nametag_end | Dieses Muster wird verwendet, wenn das Tag geschlossen werden muss | form_end | < /form> |
| Variable | Erläuterung | Entkommen (*) |
|---|---|---|
| {{pre}} | Der Code vor dem Tag: pre <tag ></tag> | NEIN |
| {{Post}} | Der Code nach dem Tag: < tag ></tag> post | NEIN |
| {{innere}} | Die Attribute innerhalb des Tags: < tag inside > </tag> | Ja |
| {{zwischen}} | Der Inhalt zwischen dem Tag: <tag> zwischen </tag> | Standardmäßig ist dieser Wert maskiert aber es könnte nicht entkommen sein |
| {{Ausweis}} | Das id-Attribut (es ist auch in {{inner}} enthalten): < tag id > </tag> | Ja |
| {{Name}} | Das Namensattribut (es ist auch in {{inner}} enthalten): < tag name > </tag> | Ja |
Beispiel eines normalen Tags:
$ blade -> pattern [ ' input ' ]= ' {{pre}}<input{{inner}} >{{between}}</input>{{post}} ' ;Hinweis: (*) Was wird maskiert? Wenn beispielsweise der Text „“ maskiert ist, wird er als „<hello>“ angezeigt.
Es ist möglich, ein benutzerdefiniertes Attribut hinzuzufügen, das innerhalb eines Musters verwendet werden kann.
Fügen wir beispielsweise das benutzerdefinierte Tag namens „customtag“ hinzu
$ blade -> customAttr [ ' customtag ' ]= ' This attr is missing! ' ;
$ blade -> pattern [ ' alert ' ]= ' {{pre}}<div {{inner}}><h1>{{customtag}}</h1>{{between}}</div>{{post}} ' ;Und in der Aussicht
@alert(text="hi there" class="alert-danger" customtag="it is a custom tag") < br >
@alert(text="hi there" class="alert-danger" ) < br > Die Bibliothek verfügt über eine Reihe von Methoden, die zum Initialisieren und Konfigurieren der Bibliothek verwendet werden können. Sie sind optional.
Es legt die Muster und Klassen so fest, dass sie mit Bootstrap 4 kompatibel sind.
Wenn das Argument wahr ist, wird das CSS vom CDN zur CSS-Box hinzugefügt
Unser Code
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >Es legt die Muster und Klassen so fest, dass sie mit Bootstrap 4 kompatibel sind.
Wenn das Argument wahr ist, wird das CSS vom CDN zur CSS-Box hinzugefügt
Unser Code
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >Es legt die Muster und Klassen so fest, dass sie mit Bootstrap 3 kompatibel sind.
Wenn das Argument wahr ist, wird das CSS vom CDN zur CSS-Box hinzugefügt
$ blade -> useBootstrap3 ( true ); Es fügt der CSS-Box ein CSS hinzu
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' ); Es fügt der js-Box einen Javascript-Link hinzu
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' );Es fügt der js-Box einen Javascript-Code hinzu
$ blade -> addJsCode ( ' alert("hello"); ' );Es ist die Liste der öffentlichen Felder der Klasse. Die Felder sind aus Leistungsgründen öffentlich (im Gegensatz zur Verwendung von Setter und Getter).
Es speichert die Liste der vom Code verwendeten Muster
$ this -> pattern [ ' sometag ' ]= ' {{pre}}<tag {{inner}}>{{between}}</tag>{{post}} ' ;Hinweis: Unter „Mustervariable im Code“ finden Sie eine Liste der Mustervariablen
Die einem bestimmten Tag hinzugefügte Standard-CSS-Klasse.
$ this -> defaultClass [ ' sometag ' ]= ' classred classbackgroundblue ' ;Es fügt eine benutzerdefinierte Funktion hinzu, die zusammen mit $this->pattern verwendet werden kann
$ this -> customAttr [ ' customtag ' ]= ' XXXXX ' ; // So we could use the tag {{customtag}}. 'XXXXX' is the default valueDas benutzerdefinierte Attribut entfernt immer die Anführungszeichen und doppelten Anführungszeichen, wenn unser Wert also „Hallo“ ist -> Hallo
Es ist möglich, durch Erweiterung der PHP-Klasse ein neues Muster hinzuzufügen.
$this->pattern['mynewtag']='<mycustomtag {{inner}}>{{between}}</mycustomtag>';
Sie könnten eine neue PHP-Klasse oder ein neues PHP-Merkmal erstellen und unsere Klasse erweitern. Innerhalb dieser neuen Struktur müssen Sie mit der nächsten Struktur eine neue Methode hinzufügen
Verwendung einer neuen Klasse
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.
}
}Verwendung eines Merkmals (empfohlen, warum? Das liegt daran, dass Merkmale flexibler sind)
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
}Um eine übergeordnete Methode zu erstellen, müssen Sie einen neuen Wert in $this->htmlItem einfügen. Sie können speichern, was Sie möchten.
$ 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 );
}Unser Ziel ist es, PHP-Code zu rendern, nicht einen Code auszuwerten. Wenn beispielsweise $args['somearg']=$variable ist, dann ist unser Wert $variable (als Text), unabhängig vom tatsächlichen Wert der Variablen.
Sie müssen auch eine Methode zum Beenden des Containers erstellen und wir müssen auch ein neues Muster hinzufügen.
$ 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
}Beim nächsten Vorgang könnten unsere Artikel erkennen, ob sie sich in einem Tag befinden
$ parent = end ( $ this -> htmlItem );Wir könnten eine Komponente erstellen, die CSS und JavaScript erfordert.
Zum Beispiel eine Datumsauswahl.
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 );
}Hinweis: Es ist besser, die jQuery-Bibliothek und die Datumsauswahl einmal in unserem Code hinzuzufügen
