Constructor visual AI No-Code con PowerBuilder, Ollama y WebView2

Este artículo técnico fue preparado por Luis Avilan a partir de un demo reproducible de la carpeta articulo_appeon.

La IA es opcional. El usuario puede construir todo el HTML manualmente desde la paleta y el inspector. Si desea una idea inicial más completa, puede solicitarla a Ollama y continuar modificándola visualmente. PowerBuilder siempre conserva el control del modelo.

Qué construye este demo

El proyecto convierte PowerBuilder 2025 R2 en un estudio visual para diseñar interfaces HTML sin escribir manualmente el documento final. El usuario puede agregar títulos, texto libre, indicadores, paneles, tablas, botones y entradas; moverlos sobre una cuadrícula de doce columnas; cambiar tamaño, tipografía, colores y degradados; guardar el proyecto; exportar HTML y abrir una vista previa con el código formateado. Todas estas operaciones funcionan sin conectarse a un modelo de inteligencia artificial.

Como alternativa opcional, la generación asistida utiliza Ollama en http://localhost:11434/api/generate y el modelo minimax-m3:cloud. El usuario puede describir la pantalla para recibir una propuesta inicial más completa. PowerBuilder valida el contrato JSON, muestra el resultado y permite continuar modificando cada componente con las mismas herramientas manuales.

Ventana principal real: paleta y árbol a la izquierda, lienzo WebView2 al centro, inspector y prompt de IA a la derecha, y trazabilidad en la parte inferior.

Arquitectura: una autoridad y dos colaboradores

La imagen representa la ruta opcional con IA. Sin Ollama, el usuario crea los componentes directamente y PowerBuilder utiliza el mismo modelo central y el mismo lienzo WebView2.

Preparación del entorno

• PowerBuilder 2025 R2 y Microsoft Edge WebView2 Runtime.

• Opcional: Ollama instalado, iniciado y con acceso a minimax-m3:cloud si se desea utilizar la generación asistida.

• Opcional: verificación del modelo desde consola con ollama run minimax-m3:cloud.

• El proyecto Demo_Generador_html_pb.pbw abierto con su PBL principal.

• Para probar dw_demo, una configuración válida de SQLCA y la ejecución previa de CONNECT USING SQLCA;.

Paso 1: convertir una descripción en un contrato JSON

Este paso solo se ejecuta cuando el usuario decide utilizar Generar con Ollama. Para construir el HTML manualmente puede omitirlo y agregar los componentes directamente desde la paleta.

nvo_cliente_ollama.of_construir_prompt no solicita HTML libre. Exige file_type, schema_version, project, canvas y components. Cada componente debe declarar tipo, texto, colores, degradado y posición CSS Grid. Los tipos permitidos son titulo, texto, indicador, panel, tabla, boton y entrada.

Esta restricción reduce respuestas ambiguas y evita que el modelo inyecte HTML, JavaScript, credenciales, rutas o URL. El resultado es una descripción declarativa que PowerBuilder puede revisar antes de renderizar.

Paso 2: enviar UTF-8 a Ollama

El cliente usa HttpClient, un tiempo de espera de 300 segundos, JSON generado por PowerBuilder y un cuerpo Blob codificado con EncodingUTF8!.

La petición establece stream=false, por lo que PowerBuilder espera una respuesta completa. Después valida el código HTTP, analiza el cuerpo con JSONParser y toma la propiedad response. Finalmente, of_limpiar_json extrae únicamente el primer objeto JSON completo.

Paso 3: validar, normalizar y generar HTML

nvo_gestor_diseno_ui.of_cargar_json comprueba el tipo de archivo y la versión del esquema. También normaliza valores opcionales o nulos: colores, dirección del degradado, tipografía, alineación y coordenadas de la cuadrícula. La geometría se limita a las doce columnas disponibles.

Una vez aceptado el modelo, of_generar_html crea un documento autocontenido con estilos CSS, cuadrícula, componentes y JavaScript de edición. Para la vista previa se omiten las herramientas visuales; para el diseñador se incorporan celdas guía, selección, movimiento y redimensionamiento.

Paso 4: sincronizar PowerBuilder y WebView2

NavigateToString mantiene la comunicación interactiva. Una URI HTML Base64 queda como respaldo cuando WebView2 rechaza la operación principal.

Cada regeneración inserta un token en <body>. Al terminar, JavaScript envía designerReady con el token, la cantidad de componentes y el primer ID. PowerBuilder solo informa “Diseño aplicado” si los tres valores corresponden al modelo actual; de lo contrario, vuelve a enviar el documento.

La comunicación inversa utiliza WebMessageReceived. Los mensajes componentSelected, componentMoved, componentResized, gridAreaCreated y canvasStyleChanged se validan y convierten en llamadas cortas al gestor. Después se regenera el HTML desde el modelo central.

Cómo se agregó el lienzo y cómo se manejan sus componentes

El lienzo no es un control de dibujo independiente. nvo_gestor_diseno_ui.of_generar_estilos construye un elemento HTML llamado canvas-main y lo configura como una cuadrícula CSS de doce columnas. Las filas miden 58 píxeles, existe una separación de 12 píxeles y una capa absoluta llamada rejilla-guia dibuja las celdas utilizadas durante la edición.

1"#canvas-main{position:relative;display:grid;" + &
2   "grid-template-columns:repeat(12,minmax(0,1fr));" + &
3   "grid-auto-rows:58px;gap:12px;min-height:720px;padding:18px;}" + &
4".rejilla-guia{position:absolute;inset:18px;display:grid;" + &
5   "grid-template-columns:repeat(12,minmax(0,1fr));" + &
6   "grid-template-rows:repeat(10,58px);gap:12px;}" + &
7".pb-componente{position:relative;z-index:3;cursor:move;}"

Cada componente recibe atributos data-col, data-row, data-span y data-rowspan. Esos valores conectan el elemento visual con las propiedades columna, fila, ancho y alto almacenadas en PowerBuilder. El tirador tirador-redimension cambia el modo de la operación de move a resize.

1document.addEventListener('mousedown', e => {
2   const c = e.target.closest('.pb-componente');
3   if (!c || e.target.closest('button')) return;
4   seleccionar(c);
5   operacion = {
6      c,
7      modo: e.target.classList.contains('tirador-redimension') ? 'resize' : 'move',
8      col: +c.dataset.col, row: +c.dataset.row,
9      ancho: +c.dataset.span, alto: +c.dataset.rowspan
10   };
11});
12
13enviar(operacion.modo === 'move' ? 'componentMoved' : 'componentResized', {
14   component_id: c.id,
15   column: +c.dataset.col, column_span: +c.dataset.span,
16   row: +c.dataset.row, row_span: +c.dataset.rowspan
17});

JavaScript actualiza la posición en pantalla mientras se mueve el mouse. Al soltarlo envía la geometría final a PowerBuilder. La ventana analiza el mensaje, obtiene los cuatro valores y delega la actualización a una función breve. El gestor limita la geometría y luego of_refrescar_lienzo vuelve a generar todo el documento.

1Case "componentMoved", "componentResized"
2   ll_columna = Long(lnv_json.GetItemNumber(ll_payload, "column"))
3   ll_ancho = Long(lnv_json.GetItemNumber(ll_payload, "column_span"))
4   ll_fila = Long(lnv_json.GetItemNumber(ll_payload, "row"))
5   ll_alto = Long(lnv_json.GetItemNumber(ll_payload, "row_span"))
6   of_actualizar_cuadricula_desde_web( &
7      ls_id, ll_columna, ll_ancho, ll_fila, ll_alto)

Paso 5: diseñar con el mouse y el inspector

Cuadrícula visual

Arrastrar sobre varias celdas crea una sección. Los componentes se mueven manteniendo presionado el mouse y se redimensionan desde el tirador inferior derecho.

Estilo completo

El inspector controla contenido, color y muestra visual, degradado, segundo color, dirección, fuente, tamaño, negrita, alineación y geometría.

Fondo del documento

La barra superior permite elegir color plano o degradado para todo el HTML, con segundo color y dirección horizontal, vertical o diagonal.

Paso 6: usar un DataWindow como tabla HTML

Al agregar una tabla, el demo pregunta si debe utilizar un DataWindow. Si la respuesta es afirmativa, sugiere dw_demo, crea un DataStore, asigna el DataObject, enlaza SQLCA y ejecuta Retrieve(). Las columnas visibles y sus filas se convierten en una tabla HTML persistida dentro del modelo.

El DataWindow sigue siendo una capacidad nativa de PowerBuilder; el constructor transforma su resultado en contenido HTML para el lienzo y la exportación.

Paso 7: vista previa, código y eventos

La ventana adicional presenta el resultado, el HTML formateado y un ejemplo de uso desde PowerBuilder. El botón permite copiar el documento completo.

Los botones generados pueden publicar un mensaje hacia PowerBuilder. w_vista_previa_html recibe el evento, analiza su JSON y muestra un MessageBox. Así el artículo y el propio demo enseñan que una interfaz HTML no queda aislada: sus eventos pueden activar lógica de ventana, servicios NVO, transacciones y DataWindows.

Cómo probar el demo

• Ejecute el proyecto y elija Nuevo para comenzar manualmente o Plantilla para partir del ejemplo local.

• Agregue componentes desde la paleta, seleccione áreas de la cuadrícula y configure texto, colores, degradados y tipografía desde el inspector.

• Si desea una propuesta asistida, inicie Ollama, verifique minimax-m3:cloud y escriba: “Crea un dashboard ejecutivo de ventas con cuatro indicadores, una tabla, filtros, texto descriptivo y un fondo degradado azul”.

• Pulse Generar con Ollama y utilice el resultado como punto de partida, no como diseño definitivo.

• Seleccione los componentes generados o manuales, cambie sus propiedades y muévalos con el mouse.

• Agregue una tabla y pruebe dw_demo con SQLCA conectado.

• Abra Vista previa, pruebe el botón HTML y revise el ejemplo PowerScript.

• Guarde el proyecto JSON o exporte el HTML autocontenido, independientemente de cómo se creó.

Decisiones técnicas que hacen confiable el diseño

• PowerBuilder, no WebView2 ni la IA, es la autoridad del modelo.

• El contrato de Ollama acepta solo componentes conocidos y una cuadrícula controlada.

• Las peticiones y archivos preservan acentos mediante UTF-8.

• La confirmación de render evita anunciar éxito cuando WebView2 conserva un documento anterior.

• El diseño manual y la plantilla local permiten trabajar aun cuando Ollama no esté instalado o disponible.

• Las responsabilidades están divididas en funciones breves y NVO especializados.

Conclusión

Este demo muestra una forma práctica de modernizar una aplicación PowerBuilder sin abandonar sus fortalezas. El usuario puede construir el documento completo por sí mismo con la paleta, la cuadrícula y el inspector. Cuando necesita inspiración o una estructura inicial más elaborada, Ollama y minimax-m3:cloud pueden traducir su intención en una propuesta visual que continúa siendo totalmente editable.

El resultado no es solamente un generador de HTML. Es una arquitectura reutilizable para incorporar IA generativa a herramientas empresariales manteniendo reglas, datos, trazabilidad y control dentro de PowerBuilder 2025 R2.