UI Blocks - A component-based framework for building modular, nestable graphical user interfaces in ProcessWire using MVC principals. Similar to Vue or React components, but server-side.
Developed by Mike Spooner (thetuningspoon) for Solution Innovators
- Install the module in the ProcessWire admin
- Create a /site/templates/ui directory. This is where you will put your UI Blocks, which represent the individual components of your user user interface. Each UI Block has a controller and a view file.
- Create a /site/templates/models directory. This is where you will put your data model classes, most of which will extend ProcessWire's Page class.
- For each UI block you want to create, add a directory under /site/templates/ui/ with the format "MyBlockName"
- Edit your MyBlockNameUI.php and add the class definition for MyBlockNameUI, extending the UI class. Make sure you add the ProcessWire namespace at the top of the file.
- Typically, you will create a single router.php or main.php template file under /site/templates/ that ProcessWire can use to direct all requests through. In your template settings, set the "Alternate template file name" to use your router template file.
- In your template file, you can call a block using (new MyBlockNameUI($props))->render()
- Pass a variable from your controller to your view using $this->view->foo = $foo;
See examples in /move-to-your-templates-folder/
UI Blocks also provides a clean methodology for organizing your ajax calls and their endpoints. Instead of creating separate files to handle your ajax calls, the endpoint methods that apply to each UI block are included in each UI block's controller.
- Add a method to your controller prepended with "ajax_". For example, "ajax_myMethodName".