Twack
v2.3.3
¡Componentes reutilizables para sus plantillas de cable de proceso!
¡Bienvenido a Twack! Twack te ayuda a construir proyectos de cable bien estructurados y mantenibles. Inspirado por Angular.
| Processwire-Module: | https://modules.processwire.com/modules/twack/ |
| Soporte-Forum: | https://processwire.com/talk/topic/23549-twack/ |
| Repositorio: | https://github.com/sebiworld/twack |
| Wiki: | https://github.com/sebiworld/twack/wiki/ |
Twack se puede instalar como cualquier otro módulo en ProcessWire. Consulte la siguiente guía para obtener información detallada: cómo instalar o desinstalar módulos
Los requisitos previos son PHP> = 5.5.0 y una versión de cable de proceso> = 3.0.0 . Sin embargo, esto también se verifica durante la instalación del módulo. No hay más dependencias.
Twack utiliza componentes para subdividir el sitio web en componentes lógicos. Un componente típico puede defenderlo y no tiene dependencias, lo que lo hace reutilizable y fácil de mantener. La mayoría de los componentes consisten en un controlador y una vista.
Si no ha hecho, cree el directorio site/templates/components . Aquí colocaremos todos nuestros componentes futuros. Agregue un nuevo archivo hello_world.view.php dentro del directorio. Crear site/templates/services donde todas nuestras clases de servicio encontrarán un hogar.
Abra el archivo y complete el siguiente contenido:
<?php
namespace ProcessWire ;
?>
<h2>Hello World!</h2>¡Está hecho! Tenemos nuestro primer componente de funcionamiento. Es cierto que el componente consta de una sola vista, pero incluso para componentes simples hay muchos propósitos útiles. Agregaremos manejo de datos y funciones en un momento. Pero primero, aprendamos cómo usar nuestro componente en uno de nuestros empleados de proceso.
Si tuviéramos una clase de controlador para nuestra opinión, la clase se llamaría HelloWorld . Más sobre eso en el próximo capítulo. Para usar nuestro componente en una plantilla de cable de procesos, tenemos que pedirle el módulo TWACK y lo encontrará e inicializará para nosotros.
<?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>Como puede ver, incluir un componente Twack en los plantillas tradicionales de cable de procesos es bastante simple. Puede construir el HTML completo en las vistas de Twack y usar todo su potencial, pero no es necesario. Es posible reemplazar gradualmente las partes individuales de la página.
Volvamos a nuestro componente. Creaste tu componente Helloworld con nada más que una vista que genera un audaz "¡Hola mundo!". La mayoría de los componentes necesitan más que una simple salida. Necesitamos un controlador para que la vista sea más dinámica.
Cree un nuevo site/templates/components/hello_world/ y mueva nuestro archivo de vista a este destino. Además, cree un archivo de controlador con el nombre hello_world.class.php en este nuevo directorio.
Un controlador Twack necesita un poco de código básico para funcionar correctamente. Copie el siguiente código en su archivo de controlador ( hello_world.class.php ):
<?php
namespace ProcessWire ;
class HelloWorld extends TwackComponent {
public function __construct ( $ args ) {
parent :: __construct ( $ args );
}
} Cada controlador de dos años tiene que extender nuestro general TwackComponent, lo que aporta mucha funcionalidad de fondo a nuestro controlador. Con parent::__construct($args); Dejamos que el padre TwackComponent finalice su inicentilización general antes de que se ejecute el código de nuestro componente personalizado.
En nuestro constructor definiremos variables, agregaremos componentes infantiles y haremos todo el trabajo lógico para la vista.
Un controlador un poco más avanzado puede verse así:
<?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 será "¡Hola mundo!", Siempre y cuando no obtengamos valor por $args['title'] del parámetro $args de nuestro constructor. Si hubiéramos inicializado el componente con $twack->getNewComponent('HelloWorld', ['title' => 'My new Title.']); , lo estableceríamos en este nuevo valor.
En la vista también se puede acceder a cada atributo del controlador, no tiene que preocuparse por la transferencia de valores.
Se puede agregar un componente infantil a través de $this->addComponent() . En nuestro ejemplo, agregamos el componente 'TestChild', que se ubicará en site/templates/components/hello_world/test_child/test_child.class.php . Twack se ve automáticamente en el directorio del componente actual para subdirectorios. También es posible especificar una otra ruta. Creé una matriz $testChildArgs para demostrar pasar parámetros adicionales al TestChild , que se pasará a su constructor.
Nuestra nueva vista podría verse así:
<?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> Como puede ver, solo mostramos el título, si $this->title tiene un valor. Bajo $this->childComponents tenemos una lista de todos los componentes que se agregaron a través de $this->addComponent() en el controlador.
Ahora hemos creado un componente básico de Twack y ahora usted los conceptos generales de cómo funciona Twack. Pero Twack ha son muchas características más excelentes que se enmendarán y simplificarán su proceso de desarrollo.
lang opcional, agregue muchos códigos de Languguge que se pueden usar como atajolang Param opcional para seleccionar un idioma en entornos multilangwire('twack') . (Gracias a @bernhardbaumrock) Usamos Semver para versiones. Para las versiones disponibles, consulte las etiquetas en este repositorio.
Este proyecto tiene licencia bajo la versión de Licencia Pública de Mozilla 2.0 - consulte el archivo License.md para obtener más información.
➡️ Continuar con 2: convenciones de nombres y variantes de componentes
