Todas las entradas de: admin

Guía R-004 – React y FullCalendar

Esta biblioteca de JavaScript para definir la información de Calendario es un clásico y la hemos usado mucho en los desarrollos de PHPRunner.

En React, está toda ella disponible y sirve todo lo que hemos aprendido de su uso en PHPRunner y es, todavía, más sencillo explotar todas sus funcionalidades desde el entorno de React.

En este artículo facilito 2 ejemplos (de la propia biblioteca), pero adaptados a la última versión de React.

Aunque espero que ya conozcáis cómo se puede saber las librerías instaladas utilizando el fichero «package.json«, voy a explicar qué es lo que he instalado en cada caso.

Objetivo

Comprobar la integración de FullCalendar en el entorno de React.

Demo1:    https://fhumanes.com/fullcalendar-react/

Demo2: https://fhumanes.com/scheduler-react/

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

Guía R-003 – Caso práctico de React con AnyChart

Como había indicado en la Guía anterior he realizado este ejemplo utilizando la funcionalidad de este otro artículo de mostrar la integración de AnyChart con los Snippet de PHPRunner.

El ejemplo es muy sencillo, porque así entiendo que es más sencillo para la comprensión de los desarrolladores que empiezan a utilizar React, pero creo que explica con detalle la integración y potencia de la utilización de esta biblioteca gráfica de JavaScript (AnyChart).

Objetivo

Integrar en una misma página varios gráficos producidos por AnyChart ( Semi-donut y Mapas Temáticos), produciendo los cambios de datos por la selección de un campo Lookup.

DEMO: (versión React) https://fhumanes.com/map_anychart-react
DEMO: (versión PHPRunner) https://fhumanes.com/map_anychart

Si estas interesado en este artículo, mediante este enlace tendrás la explicación y los fuentes.

Guía R-002 – Incorporar toda la potencia de Anychart a REACT

Aquel que conozca un poco mis gustos en la informática, sabrá que la biblioteca de Anychart, además de ser completísima, tiene multitud de ejemplos completos y con posibilidades de modificación, excelente documentación y un soporte técnico que rápidamente responde con una o varias soluciones, es mi preferida para representar gráficos de todos los tipos.

Objetivo

Estudiar cómo la misma solución de gráficos que tiene PHPrunner se puede utilizar en React.

Demo: https://fhumanes.com/anychart-react/

Si este artículo es de tu interés, sigue leyendo en este enlace.

Guía R-001 – Mostrar Grid de tarjetas («card»)

En las aplicaciones de móvil es muy frecuente que las listas de los grid (rejillas) no se vean bien, por el espacio tan escaso que se dispone en la visualización de los móviles en vertical.

Por esta razón, he estado revisando en el ejemplo de «compra-react» alternativas para la visualización de los «listados» de «compras» y «productos».

Objetivo

Mejorar la visualización de los GRID en las aplicaciones para los móviles.

DEMO: https://fhumanes.com/compra2-react/

Comparte base de datos y usuarios con la aplicación de «compra«.

Si estas interesado en este artículo, sigue leyendo haciendo clic en este enlace.

Guía 90 – Utilización de HotKeys en PHPRunner

Alan, en su desarrollo, requiere establecer acciones cuando se pulsa una combinación de teclas.  Me facilitó como referencia el artículo : https://asprunner.com/forums/topic/28756-Keyboard-Shortcuts-for-your-application que estaba muy bien descrita la solución, no obstante tuve problemas para localizar la biblioteca de JavaScript y no había un ejemplo completo.

Buscando, localicé esta solución https://raw.githack.com/jaywcjlove/hotkeys/b3cb4a3/index.html, que principalmente viene explicado para REACT (lo mismo encontré con otras bibliotecas), pero que también dispone de su versión para WEB https://unpkg.com/browse/[email protected]/dist/.

Objetivo

Incorporal a los desarrollos de PHPRunner la funcionalidad de HotKeys, con la configuración única para todo el proyecto.

DEMO: https://fhumanes.com/hotkeys/

// JavaScript file customization example for programming the "Hotkey" keys from the browser
hotkeys('ctrl+a,ctrl+b,ctrl+alt+t,ctrl+alt+v,ctrl+alt+s', function (event, handler){
  switch (handler.key) {
    case 'ctrl+a': alert('you pressed ctrl+a!');
      break;
    case 'ctrl+b': alert('you pressed ctrl+b!');
      break;
   case 'ctrl+alt+t': location.href = 'tabla_list.php';
      break;
   case 'ctrl+alt+v': location.href = 'view_list.php';
      break;
   case 'ctrl+alt+s': $('a[id^="saveButton"]').click(); // This JQUERY button SAVE
      break;
    default: alert(event);
  }
});

Si está interesado en esta solución, accede al artículo en este enlace.