Todas las entradas de: admin

S-007 – Ejemplo de CRUD con Svelte 5 y componentes de SVAR -Actualización-

He publicado la versión APP4, que no tenía prevista pero al revisar el código para cambiar interfaz de la solución he visto que el ejemplo tenía:

  • Estilos que me había dado la IA y que no se utilizaban (App.svelte).
  • El código de MovieGrid.svelte, que es el modelo, estaba desordenado, no teniendo perfectamente delimitado las secciones de: DataGrid, Editor, Filtros, Eliminación, etc. Así que lo he ordenado.
  • En principio creí que la parte de Editor era muy simple y que estaba limitado a pocas funcionalidades.
    No es así, el problema es que la IA (Copilot) conoce muy poco el componente y de ahí en código que tenía. Ahora lo he mejorado, incluyendo mensajes de Notificaciones en caso de error y controlando perfectamente las validaciones y acciones (botones). En la documentación de los componentes «está la sabiduría«.
  • He mejorado la estética del ejemplo, solamente con modificaciones de CSS. Está en App.svelte.

DEMO: https://fhumanes.com/my-svar-app4/

Si estás interesado en esto, acceder al artículo de este enlace.

S-007 – Ejemplo de CRUD con Svelte 5 y componentes de SVAR -versión 2-

Este ejemplo, como indica el título, es una ampliación de la versión del artículo S-006, pues lo que deseo explicar son otras formas de establecer búsquedas más completas, en el GRID del ejemplo.

Los componentes de SVAR tienen muchas posibilidades de búsquedas y filtros. Mi idea no es hacer ejercicios sobre todas las posibilidades, sería un trabajo muy aburrido y poco práctico, pero sí que consideraba que las búsquedas de los ejercicios anteriores eran muy «justitos» y que era necesario ofrecer algún ejemplo que se pudiera comparar con la solución de PHPRunner, que todos los que las hemos usado, entendemos que son muy potentes.

Objetivo

Ampliar las posibilidades de búsqueda y filtros de los DataGrid de los desarrollos de Svelte SVAR y ampliar funcionalidad ofreciendo la exportación de los datos del GRID, aplicado los filtros/búsquedas que se haya definido.

Hay 2 demos, que explicaré sus diferencias en el apartado de «Solución Técnica».

https://fhumanes.com/my-svar-app2/

https://fhumanes.com/my-svar-app3/

 

Si estas interesado en este tema o requieres acceder a los fuentes, sigue leyendo el artículo.

S-006 – Ejemplo de CRUD con Svelte 5 y componentes de SVAR

Una vez finalizadas las vacaciones de verano, retomo este tema y espero que os guste.

Para la elaboración de la codificación me he ayudado de las  IA’s, en concreto Copilot. En el caso concreto de Svelte 5 y de los componentes de SVAR, ninguna de las que he probado conocen bien la plataforma (ChatGPT, Gemini, Deep Seek), siempre con versiones de no pago. Esto me hace pensar que los productos del último año, y más, los de los últimos meses, no están en sus bases de datos y aunque les facilites URL’s para que se ilustren, no me ha dado buen resultado.

Los componentes de SVAR,  cuando entiendes  cómo funcionan, el resultado es bueno y  todo empieza a clarificarse y a verse «relativamente» sencillo.

Objetivo

Mostrar un CRUD de un tabla con campos de texto, numérico, fecha , combos t especial (estrellas).

Demo: https://fhumanes.com/my-svar-app/

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

S-005 – Componentes SVELTE 5 de SVAR – Excelente para todo tipo de desarrollo

Como habréis observado en el artículo S-003 os mostré las posibilidades de DataGrid y os hablé que estaba revisando las posibilidades de Gantt y eso es lo que he hecho. Al ver todas las posibilidades que ofrece el fabricante SVAR, mi sorpresa ha sido grande y en este artículo lo que vengo a mostrar en los ejemplos, son todas las posibilidades que ofrece de forma gratuita.

Como podréis comprobar casi hay soluciones para cualquier necesidad que podamos tener en el desarrollo de una aplicación de gestión.

Objetivo

Preparar los ejemplos que tiene el fabricante para en caso e desarrollos en Svelte 5 y facilitar los ejemplos para que se disponga de código para toda la casuística que se contempla en estos ejemplos.

Os facilito todos los ejemplos, que he codificado con «demo» y termina con el nombre del producto.

DEMOS:

https://fhumanes.com/demo-core
Tipos de campos, etc.
https://fhumanes.com/demo-datagrid
Páginas de tipo LIST
https://fhumanes.com/demo-filter
Filtros estáticos y dinámicos
https://fhumanes.com/demo-editor
Formularios
https://fhumanes.com/demo-filemanager
Gestor de ficheros
https://fhumanes.com/demo-gantt
Gráficos de Gantt
https://fhumanes.com/demo-menu
Menús de acciones, de formularios, etc.
https://fhumanes.com/demo-toolbar
Menús de otro tipo de acciones
https://fhumanes.com/demo-uploader
Gestor de carga de ficheros

(1) Menú donde vais a poder ver muchas opciones. Se pueden combinar todas ella para obtener la solución que requiere tu aplicación.

(2) Temas que se pueden utilizar directamente. Se pueden definir temas personalizados.

(3) Espacio en donde se muestra el resultado de la selección del punto (1)

Si te interesa este artículo, accede a él en este enlace.

S-004 – Alternativas para Data-Calendar

Disponer de una solución  de «data-Calendar», es decir, poder representar datos en un calendario es básico en casi todos los desarrollo, dado que mucha de nuestras informaciones están asociadas a una echa.

La solución «histórica» de Open Source es FullCalendar que es la que hemos utilizado en PHPRunner en mis ejemplos y en los Templates de XlineSoft.

Este producto, también, ha creado una «saga» de seguidores y de creadores de solución similar en diversas plataformas.

Objetivo

Disponer de solución para incorporar FullCalendar en plataforma Svelte 5 y disponer de una alternativa nativa de Svelte, que disponga de la funcionalidad de FullCalendar (svelte-calendar).

DEMOS:

Estos ejemplos simples los he hecho son la IA Gemini. Me ha costado mucho llegar a ellos, porque en esta sesión Gemini nada más que hacía deducir erróneamente los parámetros de configuración  por más información de la documentación que le facilitaba, no era capaz de interpretar adecuadamente los contenidos de los manuales.

Si te interesa este tema y deseas acceder a los fuentes, lee el artículo completo en este enlace.