Twack
v2.3.3
Composants réutilisables pour vos Templates Processwire!
Bienvenue à Twack! TWACK vous aide à construire des projets de fil Processwire bien structurés et maintenables. Inspiré par Angular.
| Module ProcessWire: | https://modules.processwire.com/modules/twack/ |
| Support-Forum: | https://processwire.com/talk/topic/23549-Twack/ |
| Dépôt: | https://github.com/sebiworld/twack |
| Wiki: | https://github.com/sebiworld/twack/wiki/ |
TWACK peut être installé comme tous les autres modules de Processwire. Consultez le guide suivant pour des informations détaillées: Installer ou désinstaller des modules
Les conditions préalables sont PHP> = 5.5.0 et une version ProcessWire> = 3.0.0 . Cependant, cela est également vérifié lors de l'installation du module. Aucune autre dépendance.
TWACK utilise des composants pour subdiviser le site Web en composants logiques. Un composant typique peut représenter les siens et n'a pas de dépendances, ce qui le rend réutilisable et facile à entretenir. La plupart des composants sont constitués d'un contrôleur et d'une vue.
Si vous n'avez pas fait, créez le répertoire site/templates/components . Ici, nous placerons tous nos composants futurs. Ajoutez un nouveau fichier hello_world.view.php à l'intérieur du répertoire. Créez site/templates/services où toutes nos cours de service trouveront une maison.
Ouvrez le fichier et remplissez le contenu suivant:
<?php
namespace ProcessWire ;
?>
<h2>Hello World!</h2>C'est fait! Nous avons notre premier composant fonctionnel. Certes, le composant se compose d'une seule vue, mais même pour des composants simples, il existe de nombreuses fins utiles. Nous ajouterons des données et des fonctions dans un instant. Mais d'abord, apprenons à utiliser notre composant dans l'un de nos Templates ProcessWire.
Si nous avions une classe de contrôleur pour notre point de vue, la classe s'appellerait HelloWorld . Plus à ce sujet dans le chapitre suivant. Pour utiliser notre composant dans un template ProcessWire, nous devons le demander au module TWACK et il le trouvera et l'initialisera pour nous.
<?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>Comme vous le voyez, y compris un TWACK composant dans le processus traditionnel ProcessWire-Templates est assez simple. Vous pouvez construire le HTML complet dans TWACK-Views et utiliser son plein potentiel, mais vous n'êtes pas obligé. Il est possible de remplacer progressivement les parties individuelles de la page.
Revenons à notre composant. Vous avez créé votre composant Helloworld avec rien d'autre qu'une vue qui offre un "Hello World!" Audacieux. La plupart des composants ont besoin de plus qu'une simple sortie. Nous avons besoin d'un contrôleur pour rendre la vue plus dynamique.
Créez un nouveau site/templates/components/hello_world/ et déplacez notre fichier de vue vers cette destination. Créez en outre un fichier de contrôleur avec le nom hello_world.class.php dans ce nouveau répertoire.
Un contrôleur TWACK a besoin d'un peu de code de chaudière pour fonctionner correctement. Copiez le code suivant sur votre contrôleur-fichier ( hello_world.class.php ):
<?php
namespace ProcessWire ;
class HelloWorld extends TwackComponent {
public function __construct ( $ args ) {
parent :: __construct ( $ args );
}
} Chaque contrôleur TWACK doit étendre notre TwackComponent général, ce qui apporte beaucoup de fonctionnalité des antécédents à notre contrôleur. Avec parent::__construct($args); Nous avons laissé le parent TwackComponent terminer ses fonctions d'initialisation générale avant que le code de notre composant personnalisé ne soit exécuté.
Dans notre constructeur, nous définirons les variables, ajouterons des enfants-composants et ferons tout travail logique pour la vue.
Un contrôleur un peu plus avancé peut ressembler à ceci:
<?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 sera "Hello World!", Tant que nous n'obtenons aucune valeur pour $args['title'] du paramètre $args de notre constructeur. Si nous avions initialisé le composant avec $twack->getNewComponent('HelloWorld', ['title' => 'My new Title.']); , nous le définissons sur cette nouvelle valeur.
Chaque attribut du contrôleur est également accessible dans la vue, vous n'avez pas à vous soucier du transfert de valeurs.
Un composant enfant peut être ajouté via $this->addComponent() . Dans notre exemple, nous ajoutons le composant «testchild», qui doit être situé sous site/templates/components/hello_world/test_child/test_child.class.php . Twack semble automatiquement dans le répertoire du composant actuel pour les sous-répertoires. La spécification d'un autre chemin est également possible. J'ai créé un tableau $testChildArgs pour démontrer le passage des paramètres supplémentaires au TestChild , qui sera transmis à son constructeur.
Notre nouvelle vue pourrait ressembler à ceci:
<?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> Comme vous le voyez, nous affichons le titre, si $this->title a une valeur. Sous $this->childComponents nous avons une liste de tous les composants qui ont été ajoutés via $this->addComponent() dans le contrôleur.
Nous avons maintenant créé un TWACK composant de base et vous êtes maintenant les concepts généraux comment fonctionne Twack. Mais Twack a beaucoup plus de fonctionnalités qui modifieront et simplifieront votre processus de développement.
lang en option, ajoutez de nombreux codes de langugage qui peuvent être utilisés comme raccourcilang en option pour sélectionner une langue dans des environnements multimalinwire('twack') . (Merci à @bernhardbaumrock) Nous utilisons Semver pour le versioning. Pour les versions disponibles, consultez les balises de ce référentiel.
Ce projet est sous licence en vertu de la version 2.0 de la licence publique de Mozilla - voir le fichier licence.md pour plus de détails.
➡️ Continuez avec 2: Conventions de dénomination et variantes des composants
