Guía 99 – Crea un Plugin PHPRunner desde un Web Components

Veces vista: 5

Como había indicado en el artículo anterior, he creado un plugin de View y de Edit, desde un Web Components de Awesome, en concreto del «Switch».

Hago un pequeño resumen de lo que hasta ahora hemos visto:

Y con este artículo, completo el ciclo, pues lo que nos quedaría son ejemplos concretos o aplicación de lo que hemos aprendido.

Objetivo

Creación de un plugin  de PHPRunner (View y Edit) de un Web Components de tercero (Awesome).

DEMO: https://fhumanes.com/wc_test2/

Para realizar las pruebas de integración realizar las operaciones CRUD, tanto de página completa como en INLINE.

Solución Técnica

Por utilizar los Web Components de Awesome, que el fabricante indica que en modo web se debe utiliza utilizar estos enlaces:

<link rel="stylesheet" href="https://ka-f.webawesome.com/[email protected]/styles/webawesome.css" />
<script type="module" src="https://ka-f.webawesome.com/[email protected]/webawesome.loader.js"></script>

No he podido integrar la carga de estos ficheros en los Plugins y hay que definirlos en la cabecera de todas las páginas.
De esta forma, siempre que se utilicen los plugines que derivan de los Web Components de Awesome, no habrá que incluir nuevas librerías y además, de forma externa, se pueden ir actualizando las versiones sin tener que modificar los plugines. De cualquier forma el interfaz que facilita PHPRunner no permite añadir librerías de JavaScript de Type «module».

El código del plugin de PHPRunner del tipo View tiene este código.

(1) sample.php(2) ViewWaSwitch.php(3) ViewWaSwitch.js
$this->settings["button_size"] = "m";           // Type 'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large' Default 'm' 
$this->settings["button_color"] = "#0071ec";    // Button color active "default=#0071ec","black","red","green", "orange", .. or "#ffaabb"
$this->settings["button_thumb"] = "#ffffff";    // Color buttom of Switch active
<?php
class ViewWaSwitch extends ViewUserControl
{

  public function initUserControl()
  {
                $this->button_size = ($this->settings["button_size"]?$this->settings["button_size"]:"m");
                $this->button_color = ($this->settings["button_color"]?$this->settings["button_color"]:"#0071ec");
                $this->button_thumb = ($this->settings["button_thumb"]?$this->settings["button_thumb"]:"#ffffff");
  }

  public function showDBValue(&$data, $keylink, $html = true)
  {
            $id_field = explode('=',$keylink);  // Nombre del Campo
            $switch = $data[$this->field];      // Valor del campo
            $checked= $switch > 0 ? 'checked' : '' ;
            $b_size = $this->button_size;
            $b_color = $this->button_color;
            $b_thumb = $this->button_thumb;
            
            $field_value = '<wa-switch disabled '.'size="'.$b_size.'" '.$checked
            . ' style="--wa-color-surface-default: '.$b_thumb.'; --wa-form-control-activated-color: '.$b_color.';"'
            .($mode == MODE_SEARCH ? 'autocomplete="off" ' : '')
            .(($mode==MODE_INLINE_EDIT || $mode==MODE_INLINE_ADD) && $this->is508==true ? 'alt="'.$this->strLabel.'" ' : '')
            .' name="switch_'.$id_field[1].'" '.$this->pageObject->pSetEdit->getEditParams($this->field)
            .' ></wa-switch>';
            
            return $field_value;
        }

        public function addJSFiles() { }
                                                           
        public function addCSSFiles() { }                                                              
}
?>
Runner.viewControls.ViewWaSwitch = Runner.extend(Runner.viewControls.ViewControl,{

  /**
   * Override constructor
   * @param {Object} cfg
   */
  constructor: function(cfg){		
    // call parent
    Runner.viewControls.ViewWaSwitch.superclass.constructor.call(this, cfg);
    
  },

  init: function(){
      //	put your initialization code here
                        }


});

Los plugins de View son muy sencillos, en este caso es de los más sencillo, por lo que espero que lo entendáis sin problemas.

En (1), se definen los parámetros que puede tener el plugin o las opciones de personalización.

En (2), se define el código HTML que se tiene que generar para su correcto funcionamiento, teniendo en cuenta el valor del campo y los parámetros de personalización.

En (3), se define el código de JS que se tiene que generar, en este caso, no es necesario nada.

Los plugins de Edit son un poco más complejos, no obstante, en este caso es bastante sencillo.

(1) sample.pphp(2) EditWaSwitch.php(3) EditWaSwitch.js
$this->settings["disabled"] = false;                   // Disable or Enable; false or true
$this->settings["button_size"] = "m";           // Type 'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large' Default 'm' 
$this->settings["button_color"] = "#0071ec";    // Button color active "default=#0071ec","black","red","green", "orange", .. or "#ffaabb"
$this->settings["button_thumb"] = "#ffffff";    // Color buttom of Switch active

<?php 
class EditWaSwitch extends UserControl
{
  function initUserControl() {

                $this->disabled = ($this->settings["disabled"]?$this->settings["disabled"]:false);
                $this->button_size = ($this->settings["button_size"]?$this->settings["button_size"]:"m");
                $this->button_color = ($this->settings["button_color"]?$this->settings["button_color"]:"#0071ec");
                $this->button_thumb = ($this->settings["button_thumb"]?$this->settings["button_thumb"]:"#ffffff");
  }
 
  
  function buildUserControl($value, $mode, $fieldNum = 0, $validate, $additionalCtrlParams, $data) {  
            
            $id_field = $this->cfield;  // Nombre del Campo
            $switch = $value;           // Valor del campo
            $checked= $switch > 0 ? 'checked' : '' ;
            $disabled = $this->settings["disabled"] === true ? ' disabled ' : '' ;
            $b_size = $this->button_size;
            $b_color = $this->button_color;
            $b_thumb = $this->button_thumb;
            
            
            $field_value  = $this->getSetting("label");  // Información del Label del campo
            
            $field_value .= '<wa-switch '.$disabled.' size="'.$b_size.'" '.$checked
            . ' style="--wa-color-surface-default: '.$b_thumb.'; --wa-form-control-activated-color: '.$b_color.';"'
            .($mode == MODE_SEARCH ? 'autocomplete="off" ' : '')
            .(($mode==MODE_INLINE_EDIT || $mode==MODE_INLINE_ADD) && $this->is508==true ? 'alt="'.$this->strLabel.'" ' : '')
            .' name="'.$id_field.'" id="'.$id_field.'"  '.$this->pageObject->pSetEdit->getEditParams($this->field)
            .' ></wa-switch>';
            
            echo $field_value;		
        }
  
  function getUserSearchOptions()	{ return array(EQUALS, STARTS_WITH, NOT_EMPTY, NOT_EQUALS); }

  function addJSFiles() { 
                                }                                
  function addCSSFiles() { 
                                  }
}
?>
Runner.controls.EditWaSwitch = Runner.extend(Runner.controls.Control,{

  constructor: function(cfg){		
    this.addEvent(["change", "keyup"]);		
    Runner.controls.EditWaSwitch.superclass.constructor.call(this, cfg);
          }           
  , 

  getForSubmit: function(){
                // console.log("function: "+this.appearOnPage() );
    if (!this.appearOnPage()){ return []; }
                var realCb = document.getElementById(this.valContId); //  Acceso por JavaScript (no JQUERY)
                // console.log("Campo: ",realCb );
                var cbClone = document.createElement('input');
                $(cbClone).attr('type', 'hidden');
                $(cbClone).attr('id', realCb.id);
                $(cbClone).attr('name', realCb.name);
                $(cbClone).val(realCb.checked ? 1 : 0);  // También se podría acceder al "value" con "realCb.value"
                return [cbClone];
  }
});

Runner.controls.constants["EditWaSwitch"] = "EditWaSwitch";

La tipología de los ficheros se ajustan al mismo significado que los del plugin de View (Parámetros, generación de HTML, Generación de JavaScript).

En (1) están los parámetros de personalización del plugin (estos son los que yo he decidio, pero podría disponer de otros muchos).

En (2), se divide en las siguientes acciones:

  • Revisión de los parámetros y si no están definidos las opciones por defecto.
  • La creción del HTML que se debe generar para el funcionamiento del control. Es obligatorio definir los atributos «id» y «name» con el idetificativo que le ha asignado PHPRunner.
  • La definición de los operadores que puede tener este campo sn las búsquedas.
  • Las librerías de JS y CSS, que se deben añadir para que funcione.

En (3), se define que código de JavaScript en la construcción del control. En este caso no se define nada. y después, se escribe el código JavaScript, que se tiene que ejecutar cuando en el formulario se ejecuta el «Submit». En este caso, para que funcione el formulario, se crea un nuevo campo «ficticio» y «oculto», que servirá para enviar el contenido de este campo al server. Este es el punto más «interesante» de todo el código y la forma de solucionar la integración de los Web Components.

Como siempre, os dejo los fuentes para que podáis probar en vuestros equipos y cualquier duda que tengáis, os ruego que me la comuniquéis a través de mi email.

Adjuntos

Archivo Tamaño de archivo Descargas
zip PHPRunner 10.91 - ejemplo 34 KB 0
zip Backup de base de datos del ejemplo 2 KB 0
zip Plugins WaSwitch (View y Edit) 6 KB 0

Blog personal para facilitar soporte gratuito a usuarios de React y PHPRunner