Calendario híbrido: PowerScript gobierna una interfaz moderna

La interfaz HTML no reemplaza a PowerBuilder. WebView2 presenta el calendario y captura la interacción; PowerScript recibe mensajes JSON, ejecuta la lógica y devuelve resultados confirmados al scheduler.

Qué demuestra el proyecto

PB Hybrid Calendar Studio presenta vistas de mes, semana, día y agenda dentro del control WebBrowser basado en WebView2. El usuario puede buscar, filtrar, crear, editar, duplicar y eliminar eventos, distinguir su origen mediante colores y abrir un panel contextual sin abandonar la ventana principal de PowerBuilder.

El demo admite dos rutas de trabajo. En modo local, los eventos pueden mantenerse en una base SQLite portable y continuar disponibles sin Internet. En modo conectado, nvo_google_calendario utiliza OAuth 2.0 y Google Calendar API v3 para leer y modificar el calendario principal. La vista híbrida reúne ambos orígenes y muestra estados pendientes, sincronizados o en conflicto.

Vista mensual real del demo: shell nativo PowerBuilder, scheduler WebView2, calendarios locales y Google, filtros y estado de sincronización.

Arquitectura de interacción

Del calendario hacia PowerBuilder

Cada tarjeta del scheduler tiene un identificador. Un clic abre el panel de detalles; un doble clic llama mostrarEventoPowerBuilder, que envía el título y la hora mediante window.chrome.webview.postMessage.

1function mostrarEventoPowerBuilder(id) {
2  const evento = estado.eventos.find(item => item.id === id);
3  if (!evento) return;
4  enviarPB({
5    evento: "mostrarEventoPowerBuilder",
6    id: evento.id,
7    titulo: evento.titulo,
8    hora: evento.hora
9  });
10}
Copiar

El evento webmessagereceived de la ventana entrega webmessage a of_procesar_mensaje. PowerBuilder usa JsonParser, reconoce el contrato y delega el resultado a of_mostrar_evento_calendario.

1Case "mostrarEventoPowerBuilder"
2   ls_valor = lnv_json.GetItemString(ll_raiz, "titulo")
3   ls_hora = lnv_json.GetItemString(ll_raiz, "hora")
4   of_mostrar_evento_calendario(ls_valor, ls_hora)
Copiar

La función construye un texto breve y abre un MessageBox nativo. Este recorrido prueba que una acción visual en HTML puede activar ventanas, NVO, transacciones, DataWindows o cualquier servicio PowerBuilder.

Un clic abre los detalles; el doble clic sobre el bloque envía nombre y hora a una función PowerScript. El mismo panel ofrece editar, duplicar y eliminar.

De PowerScript hacia el calendario

La comunicación también funciona en sentido contrario. Los botones Crear evento local y Crear evento Google publican una orden hacia la ventana. PowerBuilder genera el título con la hora actual, construye el objeto y ejecuta JavaScript con EvaluateJavascriptAsync.

Acciones explícitas para demostrar la creación iniciada por PowerScript, tanto local como remota.

1ls_titulo = of_generar_titulo_evento("LOCAL")
2Return of_agregar_evento_web(
3   ls_titulo, "LOCAL", "local", "#18b8ff")
Copiar

of_agregar_evento_web prepara fecha, hora, identificador, origen, color y descripción. Después invoca window.calendarioPB.agregarEventoPowerBuilder(...). JavaScript incorpora el evento, cambia la fecha visible y vuelve a renderizar el calendario.

Creación real en Google Calendar

of_crear_evento_google_powerbuilder comprueba inv_google.of_esta_conectado(). Si no existe un token, muestra un mensaje nativo y detiene la operación. Si la cuenta está conectada, PowerScript genera el título, y nvo_google_calendario.of_crear_evento_google construye las fechas RFC 3339, el JSON UTF-8 y ejecuta Events.insert.

Editar, duplicar y eliminar siguen el mismo principio: el scheduler envía la intención; PowerBuilder ejecuta PATCH, POST o DELETE; y la interfaz cambia únicamente después de una respuesta satisfactoria.

Creación y edición local

Editor local con título, fecha, hora, duración, calendario, ubicación, descripción y color.

El formulario web recopila los datos, calcula la hora final y crea un registro con origen LOCAL. En una instalación completa, este contrato se persiste en SQLite y queda disponible sin Internet. Los estados Pendiente y Sincronizado permiten incorporar una cola para publicar cambios más tarde.

SQLite mantiene el demo portable: la base puede viajar como pb_hybrid_calendar.db en la raíz de la aplicación, sin depender de un servidor corporativo. PowerBuilder sigue siendo responsable de abrir la base, validar transacciones y entregar a WebView2 únicamente el JSON necesario para representar el rango visible.

Local

Trabaja sin Internet, utiliza SQLite, conserva calendarios privados y permite crear o editar eventos inmediatamente.

Google

Usa OAuth 2.0, un token de acceso y Calendar API v3. Respeta la confirmación y los identificadores remotos.

Híbrido

Combina ambos orígenes, distingue colores y estados y deja preparada una cola de sincronización offline.

Cómo obtener las credenciales de Google

La conexión necesita un cliente OAuth 2.0, no la contraseña de Gmail. Los pasos actuales de Google Cloud son:

• Cree o seleccione un proyecto en Google Cloud Console.

• Abra APIs & Services → Library, busque Google Calendar API y pulse Enable.

• En Google Auth platform, configure Branding, Audience y Data Access. Para una prueba externa, agregue la cuenta que autorizará el demo como usuario de prueba.

• Abra Google Auth platform → Clients, pulse Create Client y seleccione Desktop app.

• Copie el Client ID y el Client Secret. No los publique ni los incluya en el repositorio.

Referencias oficiales: habilitar APIs de Google Workspace, crear credenciales OAuth y scopes de Google Calendar.

Conectar el demo con Google

La configuración se realiza desde la propia ventana: Client ID, Client Secret, URI de redirección, scope y código devuelto por Google.

• Pulse el botón Google de la barra superior.

• Pegue Client ID y Client Secret. Conserve la URI mostrada por el demo y el scope https://www.googleapis.com/auth/calendar.events.

• Pulse Guardar credenciales. El NVO las guarda en la configuración portable; el secreto no se devuelve a JavaScript al reabrir el formulario.

• Pulse Abrir autorización, elija la cuenta y acepte el permiso solicitado.

• Pegue el código o la URL de retorno en Código de autorización y pulse Conectar cuenta.

• Finalmente pulse Sincronizar. PowerBuilder consulta el calendario principal y entrega la respuesta JSON al scheduler.

Flujo completo de sincronización

Cómo probar el demo

• Ejecute la aplicación y confirme que aparece la vista mensual con eventos locales.

• Pulse Crear evento local y verifique que el título incluye la hora generada por PowerScript.

• Haga doble clic sobre el evento y compruebe que PowerBuilder muestra nombre y hora en un MessageBox.

• Abra un evento con un clic y pruebe Editar, Duplicar y Eliminar.

• Configure OAuth, conecte una cuenta de prueba y pulse Crear evento Google.

• Abra Google Calendar y confirme que el evento existe en el calendario principal.

• Pulse Sincronizar y compruebe que los eventos remotos se combinan con los locales.

Conclusión

PB Hybrid Calendar Studio demuestra una integración práctica y reutilizable. HTML, CSS y JavaScript aportan una experiencia visual fluida; PowerBuilder conserva la lógica, la seguridad, la persistencia y la interoperabilidad empresarial. La comunicación bidireccional convierte cada clic del scheduler en una posible acción PowerScript y permite que cualquier función de PowerBuilder actualice la interfaz sin recargar la ventana.

El resultado es un calendario que puede comenzar completamente local con SQLite y evolucionar hacia una experiencia híbrida conectada con Google Calendar, sin abandonar la arquitectura ni las capacidades existentes de PowerBuilder 2025 R2.