Vistas

Ubiquity utiliza Twig como motor de plantillas por defecto (ver Documentación de Twig).
Las vistas se encuentran en la carpeta app/views. Deben tener la extensión .html para ser interpretadas por Twig.

Ubiquity también se puede utilizar con un sistema de vistas PHP, para obtener un mejor rendimiento, o simplemente para permitir el uso de php en las vistas.

Carga

Las vistas se cargan desde los controladores:

app/controllers/Users.php

 namespace controllers;

 class Users extends BaseController{
     ...
     public function index(){
                     $this->loadView("index.html");
             }
     }
 }

Carga de la vista por defecto

Si se utiliza el método de nomenclatura de vistas por defecto :
La vista por defecto asociada a una acción en un controlador se encuentra en la carpeta views/nombre-controlador/nombre-acción:

views
     │
     └ Users
         └ info.html

app/controllers/Users.php

 namespace controllers;

 class Users extends BaseController{
     ...
     public function info(){
                     $this->loadDefaultView();
             }
     }
 }

Carga y paso de variables

Las variables se pasan a la vista con una matriz asociativa. Cada clave crea una variable del mismo nombre en la vista.

app/controllers/Users.php

 namespace controllers;

 class Users extends BaseController{
     ...
     public function display($message,$type){
                     $this->loadView("users/display.html",["message"=>$message,"type"=>$type]);
             }
     }
 }

En este caso, es útil llamar a Compact para crear un array que contenga variables y sus valores :

app/controllers/Users.php

 namespace controllers;

 class Users extends BaseController{
     ...
     public function display($message,$type){
                     $this->loadView("users/display.html",compact("message","type"));
             }
     }
 }

Mostrar en vista

A continuación, la vista puede mostrar las variables:

users/display.html

 <h2>{{type}}</h2>
 <div>{{message}}</div>

Las variables también pueden tener atributos o elementos a los que se puede acceder.

Puede utilizar un punto (.) para acceder a los atributos de una variable (métodos o propiedades de un objeto PHP, o elementos de un array PHP), o la llamada sintaxis de «subíndice» ([]):

{{ foo.bar }}
{{ foo['bar'] }}

Funciones adicionales de Ubiquity

La variable global app proporciona acceso a funciones predefinidas de Ubiquity Twig:

app es una instancia de Framework y proporciona acceso a los métodos públicos de esta clase.

Obtener la versión instalada del framework:

{{ app.version() }}

Devuelve el controlador activo y los nombres de las acciones:

{{ app.getController() }}
{{ app.getAction() }}

Devolver clases envolventes globales :

Para request:

{{ app.getRequest().isAjax() }}

Para sesión

{{ app.getSession().get('homePage','index') }}

véase Framework class in API para más información.

Carga de vistas PHP

Desactive si es necesario Twig en el archivo de configuración borrando la clave templateEngine.

Luego crea un controlador que herede de SimpleViewController, o SimpleViewAsyncController si usas Swoole o Workerman:

app/controllers/Users.php

 namespace controllers;

 use Ubiquity\controllers\SimpleViewController;

 class Users extends SimpleViewController{
     ...
     public function display($message,$type){
                     $this->loadView("users/display.php",compact("message","type"));
             }
     }
 }

Nota

En este caso, las funciones para cargar assets y temas no son compatibles.

Assets

Los Assets corresponden a archivos javascript, hojas de estilo, fuentes, imágenes para incluir en tu aplicación.
Se ubican desde la carpeta public/assets.
Es preferible separar los recursos en subcarpetas por tipo.

public/assets
     ├ css
     │   ├ style.css
     │   └ semantic.min.css
     └ js
         └ jquery.min.js

Integración de archivos css o js :

{{ css('css/style.css') }}
{{ css('css/semantic.min.css') }}

{{ js('js/jquery.min.js') }}

{{ css('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css') }}

{{ js('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js') }}

CDN con parámetros adicionales:

{{ css('https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/css/foundation.min.css',{crossorigin: 'anonymous',integrity: 'sha256-/PFxCnsMh+...'}) }}

Themes

Nota

Los temas son totalmente inútiles si sólo tienes una presentación que aplicar.

Ubiquity soporta temas que pueden tener sus propios activos y vistas de acuerdo a la plantilla del tema para ser renderizados por el controlador. Cada acción del controlador puede renderizar un tema específico, o pueden utilizar el tema por defecto configurado en el archivo config.php en templateEngineOptions => array("activeTheme" => "semantic").

Ubiquity se entrega con 3 temas por defecto : Bootstrap, Foundation** y Semantic-UI**.

Instalar un tema

Con devtools, ejecute :

Ubiquity install-theme bootstrap

El tema instalado es uno de bootstrap, foundation o semantic.

Con webtools, puede hacer lo mismo, siempre que las devtools estén instaladas y accesibles (carpeta Ubiquity añadida en la ruta del sistema) :

../_images/themesManager-install-theme.png

Crear un nuevo tema

Con devtools, ejecute :

Ubiquity create-theme myTheme

Creación de un nuevo tema a partir de Bootstrap, Semantic…

Con devtools, ejecute :

Ubiquity create-theme myBootstrap -x=bootstrap

Con webtools :

../_images/themesManager-create-theme.png

Funcionamiento y estructura del tema

Estructura

Theme view folder

Las vistas de un tema se encuentran en la carpeta app/views/themes/theme-name.

app/views
        └ themes
               ├ bootstrap
               │         └ main
               │              ├ vHeader.html
               │              └ vFooter.html
               └ semantic
                        └ main
                             ├ vHeader.html
                             └ vFooter.html

La clase base controlador se encarga de cargar las vistas para definir la cabecera y el pie de cada página :

app/controllers/ControllerBase.php

     <?php
     namespace controllers;

     use Ubiquity\controllers\Controller;
     use Ubiquity\utils\http\URequest;

     /**
      * ControllerBase.
      **/
     abstract class ControllerBase extends Controller{
             protected $headerView = "@activeTheme/main/vHeader.html";
             protected $footerView = "@activeTheme/main/vFooter.html";

             public function initialize() {
                     if (! URequest::isAjax ()) {
                             $this->loadView ( $this->headerView );
                     }
             }
             public function finalize() {
                     if (! URequest::isAjax ()) {
                             $this->loadView ( $this->footerView );
                     }
             }
     }

Theme assets folder

Los assets de un tema se crean dentro de la carpeta public/assets/theme-name.

La estructura de la carpeta de assets suele ser la siguiente :

public/assets/bootstrap
                                ├ css
                                │   ├ style.css
                                │   └ all.min.css
                                ├ scss
                                │   ├ myVariables.scss
                                │   └ app.scss
                                ├ webfonts
                                │
                                └ img

Cambio del tema activo

Cambio persistente

activeTheme se define en app/config/config.php con templateEngineOptions => array("activeTheme" => "semantic")

El tema activo puede cambiarse con devtools :

Ubiquity config:set --templateEngineOptions.activeTheme=bootstrap

También puede hacerse desde la página de inicio, o con webtools :

Desde la página de inicio:

Desde Webtools

Este cambio también puede hacerse en tiempo de ejecución :

Desde un controlador :

ThemeManager::saveActiveTheme('bootstrap');

Cambio local no persistente

Para establecer un tema específico para todas las acciones dentro de un controlador, el método más sencillo es anular el método initialize del controlador :

app/controllers/Users.php

 namespace controllers;

 use \Ubiquity\themes\ThemesManager;

 class Users extends BaseController{

         public function initialize(){
             parent::intialize();
             ThemesManager::setActiveTheme('bootstrap');
         }
     }

O si el cambio sólo debe afectar a una acción :

app/controllers/Users.php

 namespace controllers;

 use \Ubiquity\themes\ThemesManager;

 class Users extends BaseController{

         public function doStuff(){
             ThemesManager::setActiveTheme('bootstrap');
             ...
         }
     }

Cambio de tema condicional, independientemente del controlador :

Ejemplo con una modificación del tema en función de una variable pasada en la URL

app/config/services.php

use Ubiquity\themes\ThemesManager;
use Ubiquity\utils\http\URequest;

...

ThemesManager::onBeforeRender(function(){
             if(URequest::get("th")=='bootstrap'){
                     ThemesManager::setActiveTheme("bootstrap");
             }
     });

Compatibilidad con dispositivos móviles

Añadir una herramienta de detección de dispositivos móviles.
|nstalación de MobileDetect:

composer require mobiledetect/mobiledetectlib

En general, es más fácil crear vistas diferentes por dispositivo.

Crear un tema específico para la parte móvil (creando una carpeta views/themes/mobile y poniendo en ella las vistas específicas para dispositivos móviles).
Es importante en este caso utilizar los mismos nombres de archivo para la parte móvil y la parte no móvil.

También es aconsejable en este caso que todas las cargas de vistas utilicen el espacio de nombres @activeTheme:

$this->loadView("@activeTheme/index.html");

index.html debe estar disponible en este caso en las carpetas views y views/themes/mobile.

Detección global de móviles (desde services.php)

app/config/services.php

use Ubiquity\themes\ThemesManager;

...

ThemesManager::onBeforeRender(function () {
     $mb = new \Mobile_Detect();
     if ($mb->isMobile()) {
             ThemesManager::setActiveTheme('mobile');
     }
});

Detección de configuración regional (desde un controlador)

app/controllers/FooController.php

use Ubiquity\themes\ThemesManager;

...

     public function initialize() {
             $mb = new \Mobile_Detect();
             if ($mb->isMobile()) {
                     ThemesManager::setActiveTheme('mobile');
             }
             parent::initialize();
     }

Vista y carga de assets

Vistas

Para cargar una vista desde la carpeta activeTheme, puede utilizar el espacio de nombres @activeTheme :

app/controllers/Users.php

 namespace controllers;

 class Users extends BaseController{

         public function action(){
             $this->loadView('@activeTheme/action.html');
             ...
         }
     }

Si el activeTheme es bootstrap, la vista cargada es app/views/themes/bootstrap/action.html.

DefaultView

Si sigues el modelo de nomenclatura de vistas de Ubiquity, la vista cargada por defecto para una acción en un controlador cuando un tema está activo es : app/views/themes/theme-name/controller-name/action-name.html.

Por ejemplo, si el activeTheme es bootstrap, la vista por defecto para la acción display en el controlador Users debe estar localizada en app/views/themes/bootstrap/Users/display.html.

app/controllers/Users.php

 namespace controllers;

 class Users extends BaseController{

         public function display(){
             $this->loadDefaultView();
             ...
         }
     }

Nota

Los comandos devtools para crear un controlador o una acción y su vista asociada utilizan la carpeta @activeTheme si hay un tema activo.

Ubiquity controller Users -v

Ubiquity action Users.display -v

Carga de assets

El mecanismo es el mismo que para las vistas: el espacio de nombres @activeTheme hace referencia a la carpeta public/assets/theme-name/.

{{ css('@activeTheme/css/style.css') }}

{{ js('@activeTheme/js/scripts.js') }}

{{ img('@activeTheme/img/image-name.png', {alt: 'Image Alt Name', class: 'css-class'}) }}

Si el tema bootstrap está activo, la carpeta de activos es public/assets/bootstrap/.

Compilación css

Para Bootstrap o foundation, instala sass:

npm install -g sass

A continuación, ejecute desde la carpeta raíz del proyecto:

Para bootstrap:

ssass public/assets/bootstrap/scss/app.scss public/assets/bootstrap/css/style.css --load-path=vendor

Para la fundation:

ssass public/assets/foundation/scss/app.scss public/assets/foundation/css/style.css --load-path=vendor