Construyendo un puente bidireccional entre WebBrowser y…

Artículo técnico de PowerBuilder 2025 R2

Este demo muestra cómo una ventana PowerBuilder puede alojar una interfaz HTML moderna dentro del control WebBrowser, recibir comandos desde JavaScript, ejecutar lógica nativa en PowerScript y devolver resultados a la página mediante WebView2.

El proyecto combina w_demo_interop, interop.html, w_auxiliar, f_global_demo y n_v_objeto_demo para demostrar comunicación desde HTML hacia PowerBuilder y desde PowerBuilder de vuelta hacia HTML.

Arquitectura del demo

1Clic en tarjeta HTML
2  -> enviarComando()
3  -> window.chrome.webview.postMessage(JSON)
4  -> wb_1.WebMessageReceived(uri, isJson, webmessage)
5  -> despachador de comandos en PowerScript
6  -> acción nativa PB, consulta SQL, función global, ventana o NVO
7  -> wb_1.EvaluateJavascriptAsync("funcionJavaScript(...)")
8  -> actualización del DOM dentro de interop.html

La página del navegador no es un reporte estático. Funciona como una superficie de comandos. Cada tarjeta de interop.html crea un JSON con una acción, un objeto opcional, una etiqueta de cliente y una marca de tiempo.

El control WebBrowser

La ventana principal w_demo_interop contiene un control WebBrowser llamado wb_1. Este control es la frontera entre el runtime nativo de PowerBuilder y la interfaz HTML5 renderizada por Chromium WebView2.

De HTML a PowerBuilder

La función JavaScript de salida es enviarComando(tipoAccion, parametroObjeto). Construye un payload y lo envía a PowerBuilder únicamente cuando el canal WebView2 está disponible.

1var payload = {
2  accion:  tipoAccion,
3  objeto:  parametroObjeto,
4  cliente: "Navegador Chromium PB",
5  ts:      new Date().toISOString()
6};
7
8window.chrome.webview.postMessage(JSON.stringify(payload));

Este diseño mantiene limpia la capa HTML. La página no sabe cómo abrir una ventana PowerBuilder ni cómo consultar SQL Server; solo envía la intención mediante un contrato JSON pequeño.

Despachador PowerBuilder

En wb_1.WebMessageReceived, PowerBuilder lee webmessage, lo analiza con JsonParser, extrae accion y objeto, y enruta el comando con un bloque Choose Case.

1lnv_json = Create JsonParser
2lnv_json.LoadString(ls_json_crudo)
3ll_root = lnv_json.GetRootItem()
4
5ls_accion = lnv_json.GetItemString(ll_root, "accion")
6ls_objeto = lnv_json.GetItemString(ll_root, "objeto")
7
8Choose Case ls_accion
9  Case "ABRIR_VENTANA"
10  Case "LLAMAR_FUNCION_GLOBAL"
11  Case "LLAMAR_NVO"
12  Case "CONSULTAR_VISTA_SQL"
13End Choose

Matriz de comunicación por objeto

De PowerBuilder a HTML

El camino de retorno usa EvaluateJavascriptAsync(). En vez de escribir archivos o refrescar toda la página, PowerBuilder invoca directamente funciones JavaScript públicas ya definidas en interop.html.

1wb_1.EvaluateJavascriptAsync(
2  "mostrarResultadoOperacion('LLAMAR_NVO', 'Objeto NVO: n_v_objeto_demo', " +
3  "'Interés compuesto: A = P(1+r)^n', '> $10,000 x (1 + 0.085)^5', " +
4  "'$" + String(ld_resultado, "#,##0.00") + "')"
5)
6
7wb_1.EvaluateJavascriptAsync(
8  "registrarEjecucion('LLAMAR_NVO', 'Se ejecutó el método of_procesar_mensaje() del NVO n_v_objeto_demo')"
9)

La página HTML expone tres funciones de entrada importantes: mostrarResultadoOperacion() para resultados matemáticos, registrarEjecucion() para el registro de actividad y renderizarTablaVista() para filas SQL.

Viaje completo SQL

La acción SQL demuestra un viaje completo: comando HTML, evento PowerBuilder, cursor SQL Server, generación JSON, inyección JavaScript y renderizado en el DOM.

Por qué importa este patrón

Este patrón permite que PowerBuilder conserve la lógica de negocio, el acceso a base de datos, las ventanas y los NVOs, mientras HTML aporta una experiencia moderna y animada. El puente es explícito, verificable y basado en mensajes JSON.

Notas de producción

• Mantén estable el contrato JSON. Las nuevas tarjetas deben agregar acciones nuevas, no efectos secundarios ocultos.

• Escapa con cuidado las cadenas JavaScript al inyectar valores con EvaluateJavascriptAsync(), especialmente si el texto puede incluir comillas o caracteres especiales.

• El demo usa el DSN ODBC PB SQLServer V2025R2 y la base de datos PBDemoDB2025.

Conclusión

El demo es un ejemplo compacto de desarrollo híbrido en PowerBuilder: WebBrowser para la interfaz, PowerScript para la orquestación, objetos nativos para el comportamiento de negocio y JSON como capa de transporte entre ambos mundos.

Fuentes revisados: w_demo_interop.srw, w_auxiliar.srw, f_global_demo.srf, n_v_objeto_demo.sru e interop.html.