S-003 – Excelente DataGrid para Svelte 5

Algo que en todas las aplicaciones se usa mucho, mucho es un DataGrid, Cuadrícula o Rejilla, que de muchas formas se llama dependiendo del país en donde nos hayamos educado.

Consultando las IA’s me comentaron de la solución de la empresa SVAR y como podréis ver tiene excelente solución para los DataGrid y Gantt, en el entorno Svelte.

Estuve intentando trabajar con Gemini, ChatGPT, Deep Seek y Copìlot, y en este caso os tengo que decir que fue un tremendo fracaso. Se inventan las cosas «Alucinaciones en el argot» y cansado de ellas me puse a analizar la información en metodología clásica y el resultado, a mi entender, me parece estupendo.

Objetivo

Disponer de una solución de DataGrid para aplicar a mis proyectos de Svelte. Además, de que tiene que ser sin coste (Free), debe disponer de muchísimas funcionalidad y disponer de buena documentación y ejemplos.

DEMO: https://fhumanes.com/demo-datagrid

Si estás interesado en este tema sigue este enlace para leer todo el artículo.

S-002 – Típico CRUD con Bootstrap 5+ y Server SLIM PHP

Creo que este ejemplo os va a mostrar lo fácil o difícil, que es trabajar en esta plataforma, de acuerdo a vuestros conocimientos.

Es un ejemplo típico de LIST, ADD, EDIT, VIEW y DELETE, de una tabla «Películas», con la, también, gestión de las talas auxiliares de «Temas» y «Soportes».

El desarrollo lo ha hecho GEMINI (la IA de Google), con mi revisión. El proceso que he seguido es facilitarle el modelo de datos, que he hecho con MySQL Workbench y le he especificado que de backend quería que utilizara SLIM 4.0 y MySQL. Y como Frontend quería Svelte 5 y Sveltestrap (que utiliza internamente Bootstrap 5.3. Hay que solicitar que establezca las FASES que vamos a utilizar para construir la solución y tener mucha paciencia, pues aunque el resultado final es bueno, son muchas las confusiones y pérdidas de información que tiene, con lo que hay que recordarle continuamente las soluciones que se van adoptando, porque tiende al olvidar muchos de los detalles.

Objetivo

Obtener una aplicación CRUD completa con la arquitectura de Svelte 5 + Bootstrap 5.3 + SLIM 4.0 + MySQL.

DEMO: https://fhumanes.com/my-movie-app1

Si te interesa este tema, haz clic en este enlace.

S-001 Aplicación de ejemplos de Svelte

Este, mi primer ejemplo de código de Svelte, es una recopilación de algunos de los ejemplos del tutorial de Svelte, más los 3 últimos ejemplos que son un ejemplo de mantenimiento de una gestión de películas.

Como os he indicado, en muchos de estos ejemplos he utilizado las IA’s (ChatGPT, Geminis y DeepSeek). La de DeepSeek, es la que más se confunde, pero en todos los casos, los resultados son bastantes buenos.

Objetivo

Disponer de una App, que me permita recordar los ejemplos del tutorial y algunos ejemplos adicionales, de cara a que me sirva de recordatorio rápido.

Demo: https://fhumanes.com/my-svelte-demo/

Si estás interesado en este tema y deseas acceder al código del ejemplo, sigue este enlace.

Guía 96 – Mejorar la presentación de los Lookup simples o múltiples

En los casos en que en la presentación de la información de una tabla cambiamos un «id» por un «nombre o clave», en la visualización vemos un texto que normalmente es simple pero suficiente. Cuando en vez de tener un sólo valor en el campo tenemos múltiples valores, la presentación de esos textos, uno detrás de otro, separados por una coma, normalmente es insuficiente.

Objetivo

Mejorar la visualización de los campos «Lookup» resaltando los valores, tanto en el Lookup estándar como si se utiliza algún Plugin (Los plugins ya tienen versión para PHPRunner v11)

DEMO: https://fhumanes.com/test_lookup/

Si estás interesado en este articulo o deseas obtener el código, sigue este enlace.

Migración de Plugin a versión 11 de PHPRunner

Actualización - 31/05/2025

Una copia de este mensaje la publiqué en el foro de XlineSoft, pero por alguna circunstancia ha sido borrada.

Mi objetivo era indicar a los usuarios que han utilizado algún plugin de esta web que ya tienen versión para PHPRunner v11 y para aquellos que hayan podido desarrollar algún plugin, cuáles son los problemas que yo he encontrado.

Ya he terminado la revisión y los problemas que he encontrado son:

  • Se ha controlado más los nombre de los ficheros, por ejemplo antes funcionaba como nombre de fichero editcalculator.php y ahora tiene que ser EditCalculator.php.

 

  • En versión 10, se puede utilizar la función «$this->addJSSetting()«, en las 2 funciones que se escriben para la lógica de los plugins, «function initUserControl()» y «function buildUserControl()«, que son las funciones de inicialización y construcción del plugin.
    En versión 11, sólo se puede utilizar, con resultado correcto, en la «function initUserControl()» y no en «function buildUserControl()«. No da error, pero la información que se pretender llevar al JavaScript, no llega.

 

  • En la Build 43439 de versión 11, persiste un error de refresco de información en las actualizaciones «inline» y «popup» (en las que se actualiza la información de LIST por Ajax) y eso repercute en los plugines en los que para visualizar los datos se utiliza el LOOKUP estándar de PHPRunner.

(1) Así aparece la información cuando se ejecuta el LIST.
(2) Así aparece (no se hace la conversión del ID, por el NAME), después de un EDIT o ADD.

Por ahora, mientras no se resuelva el problema, lo podéis cambiar por codificación indicando que en VIEW se utiliza el tipo «CUSTOM», con un código similar a este:

$in = $value;

if ( $value <> '' ) {
    $rs = DB::Query(
    "SELECT group_concat(
           concat('<span class=\"badge \">',name,'</span>')
           order by name ASC
           separator ' , ') names
    FROM prueba_plugin_lv
    WHERE idprueba_lv IN ( $in )"
    );
    while( $data = $rs->fetchAssoc() )
    {
    $value = $data['names'];
    }
}

Y en CUSTOM CSS:

.badge {
  /* Bordes más cuadrados (reduce el radio de borde) */
  border-radius: 3px !important; /* Valor original en BS3 es 10px */
  
  /* Opcional: ajustar padding para más "cuadratura" */
  padding: 3px 6px !important; /* Ajusta según necesites */
  
  /* Opcional: otros estilos para parecerse más a una etiqueta */
  font-weight: normal !important;
  font-size: 85% !important;
  background-color: #777 !important; /* Color de fondo estándar */
  color: white !important;
}

DEMO: https://fhumanes.com/plugines_v11/

En la Demo no he aplicado el «work around» que os he indicado para resolver el problema 3

En la página de plugins está todos los plugins para versión 11 y los anteriores para versión 10.
Los de versión 11 tendrán los prefijos Edit_ y View_ de cada uno de los plugins.

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