Twack
v2.3.3
Wiederverwendbare Komponenten für Ihre Prozesswire-Templates!
Willkommen bei Twack! TWack hilft Ihnen, gut strukturierte und wartbare Prozesswireprojekte aufzubauen. Inspiriert von Angular.
| Processwire-Modul: | https://modules.processwire.com/modules/twack/ |
| Support-Forum: | https://processwire.com/talk/topic/23549-twack/ |
| Repository: | https://github.com/sebiworld/twack |
| Wiki: | https://github.com/sebiworld/twack/wiki/ |
TWACK kann wie jedes andere Modul in Processwire installiert werden. Überprüfen Sie die folgende Anleitung für detaillierte Informationen: Anleitungen zur Installation oder Deinstallation von Modulen
Die Voraussetzungen sind php> = 5.5.0 und eine Prozesswireversion> = 3.0.0 . Dies wird jedoch auch während der Installation des Moduls überprüft. Keine weiteren Abhängigkeiten.
Twack verwendet Komponenten, um die Website in logische Komponenten zu unterteilen. Eine typische Komponente kann für sich selbst stehen und hat keine Abhängigkeiten, die es wiederverwendbar und leicht zu warten machen. Die meisten Komponenten bestehen aus einem Controller und einer Ansicht.
Wenn Sie nicht fertig sind, erstellen Sie das Verzeichnis site/templates/components . Hier werden wir alle unsere zukünftigen Komponenten platzieren. Fügen Sie eine neue Datei hinzu hello_world.view.php im Verzeichnis. Erstellen Sie site/templates/services bei denen alle unsere Serviceklassen ein Zuhause finden.
Öffnen Sie die Datei und füllen Sie den folgenden Inhalt aus:
<?php
namespace ProcessWire ;
?>
<h2>Hello World!</h2>Es ist fertig! Wir haben unsere erste funktionierende Komponente. Zugegeben, die Komponente besteht nur aus einer Ansicht, aber selbst für einfache Komponenten gibt es viele nützliche Zwecke. Wir werden in einem Moment Datenhandling und Funktionen hinzufügen. Lassen Sie uns zunächst lernen, wie Sie unsere Komponente in einem unserer Prozesswire-Templates verwenden.
Wenn wir eine Controller-Klasse für unsere Ansicht hätten, würde die Klasse HelloWorld genannt. Mehr dazu im nächsten Kapitel. Um unsere Komponente in einem Prozesswire-Template zu verwenden, müssen wir das Twack-Module darum bitten und es wird es für uns finden und initialisieren.
<?php
namespace ProcessWire ;
// Get a new instance of our HelloWorld-component:
$ myComponent = wire ( ' twack ' )-> getNewComponent ( ' HelloWorld ' );
?>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<?php
// Render the component`s view:
echo $ myComponent -> render ();
?>
</body>
</html>Wie Sie sehen, ist ein Twack-Komponenten in traditionellen Prozesswire-Templates recht einfach. Sie können die komplette HTML in Twack-Views erstellen und ihr volles Potenzial ausschöpfen, müssen Sie dies jedoch nicht. Es ist möglich, einzelne Teile der Seite schrittweise zu ersetzen.
Kehren wir zu unserer Komponente zurück. Sie haben Ihre Helloworld-Komponente mit nichts als einer Ansicht erstellt, die eine mutige "Hallo Welt!" Ausgibt. Die meisten Komponenten benötigen mehr als nur einen Ausgang. Wir brauchen einen Controller , um die Ansicht dynamischer zu gestalten.
Erstellen Sie eine neue Verzeichnis- site/templates/components/hello_world/ und verschieben Sie unsere Aussichtsfile auf dieses Ziel. Erstellen Sie zusätzlich eine Controller -Datei mit dem Namen hello_world.class.php in diesem neuen Verzeichnis.
Ein Twack-Controller benötigt ein Stück Kesselplattencode, um korrekt zu funktionieren. Kopieren Sie den folgenden Code in Ihre Controller-Datei ( hello_world.class.php ):
<?php
namespace ProcessWire ;
class HelloWorld extends TwackComponent {
public function __construct ( $ args ) {
parent :: __construct ( $ args );
}
} Jeder Twack-Controller muss unseren allgemeinen Twackcomponent erweitern, der unseren Controller viel Hintergrundfunktionalität verleiht. Mit parent::__construct($args); Wir lassen den übergeordneten TwackComponent seine allgemeine Initialisierungs -Code ausführen, bevor der Code unserer benutzerdefinierten Komponente ausgeführt wird.
In unserem Konstruktor definieren wir Variablen, fügen Kinderkomponenten hinzu und erledigen alle logischen Arbeiten für die Ansicht.
Ein etwas fortschrittlicherer Controller kann so aussehen:
<?php
namespace ProcessWire ;
class HelloWorld extends TwackComponent {
public function __construct ( $ args ) {
parent :: __construct ( $ args );
$ this -> title = ' Hello World! ' ;
if ( isset ( $ args [ ' title ' ])) {
$ this -> title = $ args [ ' title ' ];
}
// Add and initialise a child-component
$ testChildArgs = [
' myTestValue '
];
$ this -> addComponent ( ' TestChild ' , $ testChildArgs );
}
} $this->title wird "Hello World!" sein, solange wir keinen Wert für $args['title'] aus dem $args -Parameter unseres Konstruktors erhalten. Wenn wir die Komponente mit $twack->getNewComponent('HelloWorld', ['title' => 'My new Title.']); Wir würden es auf diesen neuen Wert setzen.
Jedes Attribut des Controllers ist auch in der Ansicht zugänglich. Sie müssen sich nicht um die Übertragung von Werten kümmern.
Eine untergeordnete Komponente kann über $this->addComponent() hinzugefügt werden. In unserem Beispiel fügen wir die Komponente "testchild" hinzu, die sich unter site/templates/components/hello_world/test_child/test_child.class.php befinden muss. TWACK sucht automatisch im Verzeichnis der aktuellen Komponente nach Unterverzeichnissen. Es ist ebenfalls möglich, einen anderen Pfad anzugeben. Ich habe ein Array $testChildArgs erstellt, um das Übergeben zusätzlicher Parameter an das TestChild zu demonstrieren, das an seinen Konstruktor übergeben wird.
Unsere neue Aussicht könnte so aussehen:
<?php
namespace ProcessWire ;
?>
<div class="hello_world_component">
<?php
if (! empty ( $ this -> showTitle )){
echo " <h2> { $ this -> showTitle } </h2> " ;
}
?>
<p>Lorem ipsum</p>
<div class="children_wrapper">
<?php
foreach ( $ this -> childComponents as $ childComponent ) {
echo ( string ) $ childComponent ;
}
?>
</div>
</div> Wie Sie sehen, zeigen wir nur den Titel, wenn $this->title einen Wert hat. Unter $this->childComponents haben wir eine Liste aller Komponenten, die über $this->addComponent() im Controller hinzugefügt wurden.
Wir haben jetzt eine grundlegende Twack-Komponente erstellt und Sie jetzt die allgemeinen Konzepte, wie TWack funktioniert. Aber TWACK hat viele großartige Funktionen, die Ihren Entwicklungsprozess verbinden und vereinfachen.
lang -Params, fügen Sie viele Langugage -Codes hinzu, die als Verknüpfung verwendet werden könnenlang -Param hinzu, um eine Sprache in Multilang -Umgebungen auszuwählenwire('twack') gemacht. (Danke an @bernhardbaumrock) Wir verwenden Semver für die Versionierung. Die verfügbaren Versionen finden Sie in den Tags in diesem Repository.
Dieses Projekt ist unter der Mozilla Public Lizenz Version 2.0 lizenziert - Einzelheiten finden Sie in der lizenz.md -Datei.
➡️ Fahren Sie mit 2: Benennung von Konventionen und Komponentenvarianten fort
