Este artículo muestra cómo de sencillo es utilizar Web Components de terceros en la parte de visualización de cualquier página.

La parte de edición, para ser integrada en PHPRunner es más compleja, pero en el siguiente artículo vamos a realizar algunos ejemplos, aunque soy consciente de que para los usuarios que son noveles en PHPRunner va a ser más difícil, si no hay alguien que le facilita la labor, escribiendo plugins de PHPRunner, que facilita su utilización. Voy a realizar un ejemplo, para ver si alguien se anima a construirlo para el colectivo de usuarios, porque yo no dispongo de tiempo para hacer esta labor.

Los Web Components que voy a utilizar el el ejemplo son los de Awesome. Seguro que hay otros muchos, pero estos, tienen buena documentación y son sencillos de utilizar.

Objetivo

Utilizar web components de Awesome para mostrar en un ejemplo básico cómo se pueden utilizar estos para variar el interface / UI de usuario de una aplicación de PHPRunner. En este caso vamos a modificar la visualización de contenidos.

Antes de entrar en la codificación, se ha hecho un ejemplo de HTML, para ver la sencillez de utilización de estos componentes. Los podéis revisar y para ver qué se ha escrito, podéis «ver el código fuente de la página» para que observéis lo simple que es.

DEMO: https://fhumanes.com/web_components/

La integración con PHPRunner se ha hecho cambiando la visualización de 2 campos:

• Campo «Status», que es un campo de tipo checkBox y se muestra cómo Switch
• Campo «Images», que muestra como Carrousel de miniaturas y de tamaño completo.

DEMO: https://fhumanes.com/wc_test1/

Solución Técnica

Cuando escojáis una librería de Web Components, a mi me gusta, probar su funcionamiento con ejemplos hechos en HTML. De esta forma se reafirma que lo que has leído es correcto y probar, verificar, corregir y ampliar se desarrolla rápido.

En primer ejercicio es el resultado de esas pruebas, por ello es todo HTML y el CSS y JS de la librería de Awesome.

La integración con PHPRunner la hecho para que sea un ejemplo simple (el de Check) y otro un poco más complejo (el del Carrusel). En ambos casos se ha modificado la visualización de estos campos, no así la edición, que se ha dejado la de PHPRunner.

He escogido la versión 10.91 de PHPRunner, porque creo que es la más utilizada y simple, pero de igual forma funcionaría con versiones anteriores y posteriores a esta.

Para incluir el fichero JS y CSS de la librería de Awesome he utilizado la modificación de la cabecera de las páginas.

<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>

En este caso, porque la librería carga dinámicamente las partes según se estén utilizando. Si no fuera así, se podría cargar con SNIPPET, en las páginas en donde se incluyeran los Web Components.

Los cambios de visualización de los campos se han hecho definiendo «custom view», la visualización de los campos e incluyendo codificación.

• Campo «Status»

if ( $value === '0') {
  $checked = '';
 } else  {
  $checked = 'checked';
}
$html=<<<EOT

<wa-switch size="l" disabled $checked></wa-switch>

EOT;
$value=$html;

• Campo «Images»

$id = $data['id'];
// get information about uploaded files
$fileArray = my_json_decode($value);

$html = "<div id=\"image_$id\" style=\"width: 250px\"><wa-carousel pagination navigation mouse-dragging loop>";
$dialog = <<<EOT
<wa-dialog label="Muestra las Imaganes del registros: $id" id="dialog-$id" class="dialog-width" style="--width: 75%; --height: 100vh" >
<wa-carousel pagination navigation mouse-dragging loop>
EOT;
// rename each file. In this example - convert to lowercase.
for($i = 0; $i < count($fileArray); $i++)
{
$fileTH = $fileArray[$i]["thumbnail"]; // URL miniatura
$fileNM = $fileArray[$i]["name"]; // URL fichero grande
$html .= <<<EOT
<wa-carousel-item>
    <img
      alt="fichero miniatura de la imagen cargada"
      src="./$fileTH"
    />
  </wa-carousel-item>
EOT;

$dialog .= <<<EOT
<wa-carousel-item>
    <img
      alt="fichero de la imagen cargada"
      src="./$fileNM"
    />
  </wa-carousel-item>
EOT;
}
$html .= "</wa-carousel><wa-button  id=\"visualizar-$id\" appearance=\"filled\">Visualizar</wa-button></div>";

$dialog .= "</wa-carousel><wa-button appearance=\"filled\" slot=\"footer\" variant=\"brand\" data-dialog=\"close\">Cerrar</wa-button></wa-dialog>";
$html .= <<<EOT

<script>
  const dialog_$id = document.querySelector('#dialog-$id');
  /* const openButton_$id = dialog_$id.nextElementSibling; */
  const openButton_$id = document.querySelector('#visualizar-$id');

  openButton_$id.addEventListener('click', () => (dialog_$id.open = true));
</script>

EOT;

$value=$dialog.$html;

En este caso utilizamos 2 web components «wa-carousel» y «wa-dialog«.

«wa-carousel» se utiliza para mostrar el carrusel de las miniaturas y las imágenes completas.

«wa-dialog», para mostrar una venta modal con las imágenes en grande.

Una parte importante a observar, es que se ha dado «id» a las partes del HTML construido, requerido para el JavaScript que interactúa entre ellos. Como debe ser un «id» único, se ha utilizado el campos «id» del registro que obligatoriamente es único.

Espero que este ejemplo os sirva para entender el funcionamiento y analizar las posibilidades de modernización del interface de PHPRunner. Si no en todas las páginas, en las que se considere imprescindible en vuestras aplicaciones.

Para lo que necesitéis, podéis contactar a través del email.

Como siempre, os dejo los fuentes del ejemplo para que lo podáis modificar y probar, todo lo que necesitéis.