[Eslopes]

PowerDemo3: doce formularios que muestran el diseño responsivo

PowerDemo3 incluye ahora doce formularios de ejemplo que recorren todo lo que el diseño responsivo de PowerRustCOBOL sabe hacer: anclajes, acoplamiento, contenedores Flex, Grid y Flow, puntos de ruptura, escalado de fuentes, anidamiento, control desde COBOL, límites de la ventana y el modo de escalado heredado de PowerCOBOL. Cada uno es un formulario completo y funcional, con su código COBOL, y sirve a la vez de demostración y de referencia para copiar.

Dónde están. Abra el proyecto examples/PowerDemo3, ejecútelo y, en el menú lateral, entre en General: los doce aparecen como Responsive: …. Los archivos están en forms/General/responsive-*.cfrm.

Cómo usarlos. Cambie el tamaño de la ventana: más estrecha, más ancha, más baja, más alta. En la parte inferior de cada formulario una barra de estado muestra en todo momento el tamaño de la ventana, el punto de ruptura activo y el factor de escala de las fuentes, tal como los calcula el motor. Los manejadores onLoad, onResize y onBreakpointChanged la actualizan leyendo me::Width, me::Height, me::Breakpoint y me::FontScale.

[HR][/HR]

1. Responsive: anchors and limits — responsive-anchors-form

Muestra todas las combinaciones de anclaje (Anchor) y los límites de tamaño.

• El escenario: un panel anclado a los cuatro bordes que contiene nueve bloques, uno por cada combinación horizontal × vertical: Top,Left, Top, Top,Right, Left, ninguno, Right, Bottom,Left, Bottom y Bottom,Right. Un bloque mantiene la distancia a cada borde que nombra su leyenda; sin ningún borde en un eje, conserva su centro en la misma fracción del contenedor.
• El bloque vivo: cuatro casillas (Top, Bottom, Left, Right) construyen desde COBOL el texto del anclaje y lo asignan al bloque mientras el formulario corre. Con Left y Right marcadas, el bloque se estira; sin ninguna, flota de forma proporcional. Así se prueban las 16 combinaciones posibles.
• Estiramiento y límites: un campo Top,Left,Right que se estira, otro con MaxWidth 560 que deja de crecer y se queda a la izquierda, otro con MinWidth 240 que la ventana no puede comprimir, un botón Top,Right que sigue al borde y un bloque proporcional.

           MOVE WS-ANCHOR TO A-LIVE::Anchor
      *> por ejemplo "Top,Right," - una cadena vacía es "ningún borde"

2. Responsive: docking — responsive-dock-form

El acoplamiento (Dock) clásico de una aplicación de escritorio.

• Una cabecera Dock = Top, una barra de estado Dock = Bottom, la navegación Dock = Left, un inspector Dock = Right y el área principal Dock = Fill, que se queda con lo que sobra. El orden de dibujo decide quién toma cada borde primero.
• El acoplamiento es recursivo: dentro de la navegación, un título Top y una lista Fill; dentro del inspector, un título Top, un botón Bottom y un texto Fill; dentro del área principal, una barra de herramientas Top (que a su vez es una fila Flex con un buscador que crece), un pie Bottom y una cuadrícula de datos Fill.
• Un botón no acoplado, anclado Bottom,Right, flota sobre el contenido: los controles anclados se colocan respecto al área completa del formulario, no respecto a lo que dejan los acoplados.
• Tres botones cambian el acoplamiento desde COBOL: la cabecera pasa abajo, la navegación pasa a la derecha y el inspector se oculta (un panel oculto no ocupa borde y el área principal crece).

           MOVE "Right" TO PNL-NAV::Dock
           MOVE 0 TO PNL-INSPECT::Visible

3. Responsive: flex — responsive-flex-form

Seis pestañas, una por cada tema de los contenedores Flex (una línea —o varias— de elementos que se reparten el espacio):

• Direction: FlexDirection Row, RowReverse, Column y ColumnReverse, lado a lado.
• Justify content: Start, Center, End, SpaceBetween, SpaceAround y SpaceEvenly.
• Align items: Stretch, Start, Center y End con elementos de alturas distintas; AlignSelf por elemento; una columna centrada.
• Wrap and align content: NoWrap (los elementos se encogen), Wrap, WrapReverse y cada AlignContent, además de RowGap y ColumnGap distintos.
• Grow, shrink, basis: FlexGrow 0/1/2/3 repartiendo el espacio libre; FlexBasis en píxeles, porcentaje y Auto; FlexShrink 0/1/3 (estreche la ventana: el 0 conserva sus 300 px); y cómo MinWidth/MaxWidth limitan el reparto.
• Order - and from COBOL: cinco bloques diseñados A B C D E que Order muestra como D C B E A, y doce botones que cambian en vivo la dirección, la justificación, el espacio, el orden y el crecimiento.

           MOVE "Column" TO OR-LIVE::FlexDirection
           MOVE "SpaceEvenly" TO OR-LIVE::JustifyContent
           MOVE 1 TO OR-3::FlexGrow

4. Responsive: grid — responsive-grid-form

Cinco pestañas sobre los contenedores Grid (filas y columnas que se reparten el espacio):

• Track sizes: pistas en px, %, fr y Auto, MinMax(150px, 1fr), Repeat(3, 1fr 60px) y filas 30px 1fr Auto.
• Auto-fill gallery: Repeat(AutoFill, MinMax(170px, 1fr)) — tantas columnas como quepan; la galería pasa de seis columnas a tres al estrechar la ventana.
• Placement and spans: celdas explícitas (GridRow, GridColumn), ColumnSpan y RowSpan, elementos colocados automáticamente en las celdas libres, una fila fuera de GridRows que amplía la cuadrícula implícita y un elemento automático de dos columnas que baja a la fila siguiente.
• Alignment: JustifyItems y AlignItems (Stretch, Start, Center, End) y, por elemento, JustifySelf y AlignSelf.
• A data-entry form: un formulario de alta real en cuatro columnas (etiqueta, campo, etiqueta, campo) que, por debajo de 1024 px, pasa a dos columnas gracias a un punto de ruptura que sobrescribe GridColumns y los ColumnSpan.

5. Responsive: flow — responsive-flow-form

El panel que distribuye sus elementos como palabras en un párrafo, tal como lo conocen los programadores de PowerCOBOL y WinForms.

• Cada FlowDirection: LeftToRight, RightToLeft, TopDown y BottomUp.
• WrapContents = false: una sola línea, recortada.
• FlowBreak: el elemento marcado termina su línea.
• Una barra de botones cambia en vivo la dirección, el ajuste, el espacio y el salto del primer grupo.
• El propio formulario tiene LayoutMode = Flex (una columna): título, texto, barra y cuadrícula son sus elementos.

6. Responsive: breakpoints — responsive-breakpoints-form

Un formulario, cinco disposiciones. La tabla de puntos de ruptura es propia: Phone (0 px), Tablet (600), Laptop (900), Desktop (1200, el diseño) y Wide (1600), con FontScaling = Stepped, de modo que cada uno tiene su propio factor de letra.

• Phone: desaparece la barra lateral, aparece un botón de menú, una sola columna de tarjetas, dos tarjetas se ocultan (y se tratan como ausentes), el título se reduce y el botón Contact us pasa de la esquina a una barra a todo lo ancho (cambian su anclaje, su posición y su tamaño).
• Tablet: la barra lateral se convierte en una fila acoplada arriba (Dock y FlexDirection sobrescritos) y el contenido pasa a dos columnas.
• Laptop: barra lateral más estrecha y dos columnas.
• Wide: barra lateral más ancha, cuatro columnas, más espacio y un título mayor.

Desde COBOL se puede fijar un punto de ruptura, volver al automático o sustituir la tabla entera:

           MOVE "Phone" TO me::Breakpoint
           MOVE SPACES TO me::Breakpoint
           MOVE "Narrow:0:1;Broad:800:1.15" TO me::Breakpoints

Las sobrescrituras de nombres que la tabla nueva no tiene se conservan, inactivas, hasta que esos nombres vuelven.

7. Responsive: font scaling — responsive-fonts-form

El texto sigue a la ventana.

• FontScaling = Fluid: cada letra se multiplica por ancho de la ventana ÷ ancho diseñado, entre MinFontScale (0,8) y MaxFontScale (1,6).
• Por control: ScaleFont desactivado (siempre 16 pt), MinFontSize (nunca menos de 14), MaxFontSize (nunca más de 18) y una etiqueta AutoSize medida al tamaño con el que se pinta.
• Botones para cambiar a None, Fluid o Stepped, fijar el factor total y cambiar los límites.

           MOVE "Stepped" TO me::FontScaling
           MOVE 1.4 TO me::FontScale
           MOVE 0 TO me::FontScale
      *> 0 devuelve el factor al cálculo automático

8. Responsive: nested containers — responsive-nested-form

Cinco niveles de contenedores, cada uno con su propio modo:

• El formulario es una Grid (cabecera que ocupa dos columnas, contenido y barra de estado).
• En una celda, un grupo Flow; en la otra, una columna Flex con relleno distinto por lado (PaddingLeft).
• Dentro de la columna, una TabControl con controles anclados en una página y, en la otra, una Grid de cuatro grupos Flex.
• Por debajo de 1024 px desaparece el grupo Flow y la columna de la derecha ocupa toda la fila. Tres botones hacen lo mismo desde COBOL (una escritura de COBOL prevalece sobre la del punto de ruptura), quitan el relleno y pasan la cuadrícula interior a una sola columna.

9. Responsive: from COBOL — responsive-runtime-form

Todas las propiedades de diseño se pueden escribir mientras el formulario corre, y el diseño se recalcula en el mismo fotograma. Dieciséis botones actúan sobre un escenario con cinco bloques:

• Cambiar el modo del contenedor: Absolute, Flex en fila o en columna, Grid de 3 × 2, Flow.
• Cambiar la justificación, el espacio, el crecimiento y el ancho máximo de un bloque.
• Mover un bloque 20 px: en un formulario responsivo una escritura de geometría es en pantalla, de modo que lo que COBOL escribe es lo que vuelve a leer.
• Leer la geometría: X, Y, Width y Height devuelven el rectángulo ya calculado, no el diseñado.
• Desactivar y activar el diseño responsivo (me::Responsive) y cambiar el tamaño mínimo de la ventana (me::MinFormWidth).

           MOVE "Grid" TO RT-STAGE::LayoutMode
           MOVE "Repeat(3, 1fr)" TO RT-STAGE::GridColumns
           MOVE RT-1::X TO WS-NUM
           ADD 20 TO WS-NUM
           MOVE WS-NUM TO RT-1::X
           MOVE 0 TO me::Responsive

10. Responsive: collision limits — responsive-collide-form

La ventana se detiene antes de que dos controles separados en el diseño lleguen a tocarse.

• Al estrechar: un campo anclado a la izquierda y un botón anclado a la derecha; la ventana no baja de unos 725 px, donde se encontrarían.
• Al ensanchar: un campo que se estira hacia un bloque fijo; la ventana no pasa de unos 1019 px.
• Al alargar: unas notas ancladas arriba y abajo que crecen hacia una línea fija.
• Junto a ellos, un mínimo declarado (MinFormWidth 640, MinFormHeight 540): en altura manda el declarado, en anchura manda la colisión.

11. Responsive: obsolete scaling — responsive-obsolete-form

Para quien migra desde PowerCOBOL: un formulario de alta clásico, sin anclajes y sin diseño responsivo, que sigue a la ventana en proporción gracias a ObsoleteScalingStyle.

• Ocho botones aplican los estilos 0 a 7 en vivo: 1 redimensiona, 2 recoloca, 4 escala la letra, y se suman (7 = todo).
• La barra de herramientas, acoplada arriba, y la línea de estado, anclada abajo, quedan fuera del escalado: un control con anclaje o acoplamiento propio conserva ese comportamiento.
• Una etiqueta con ScaleFont desactivado mantiene sus 13 pt con cualquier estilo, y un GroupBox escala con sus hijos.

           MOVE 7 TO me::ObsoleteScalingStyle

12. Responsive: dashboard — responsive-dashboard-form

Todo junto en una pantalla de aplicación real:

• Una cabecera acoplada arriba que es una fila Flex: logotipo, título que crece, buscador que se encoge hasta su mínimo y dos botones.
• Una navegación acoplada a la izquierda (columna Flex con un espaciador que empuja Settings al fondo) y una barra de estado abajo.
• El área principal es una Grid de cuatro columnas con cuatro tarjetas de indicadores (con barra de progreso), un gráfico de barras, uno de líneas, una lista de clientes, una cuadrícula de pedidos y un gráfico circular; los datos de los gráficos se cargan en onLoad.
• Letra fluida entre 0,85 y 1,3.
• Medium (600-1023 px): navegación más estrecha, dos columnas, sin gráfico de líneas, sin gráfico circular ni lista de clientes. Compact (menos de 600 px): sin navegación ni buscador y con un título menor.

[HR][/HR]

Tres comportamientos que conviene conocer (los formularios se construyeron teniéndolos en cuenta, y la Guía los explica):

• Una pista fr nunca es más estrecha que el elemento más ancho tal como se dibujó. Escriba MinMax(160px, 1fr) para indicar hasta dónde puede estrecharse la columna.
• Un formulario o contenedor cuyo LayoutMode es una columna Flex toma la altura de su contenido: dibuje a su altura mínima útil el elemento que debe llenar el espacio y dele FlexGrow 1.
• Un Flow con WrapContents desactivado recorta en una sola línea; sus elementos no limitan el tamaño de la ventana.

Documentación completa, con la tabla de los doce formularios: PowerRustCOBOL Developer's Guide, sección Responsive examples in PowerDemo3.

Anthropic Claude Codex Agent