ECN-4484 New control properties for AcuToWeb styles

RPI Number: 626320

Product: ACUCOBOL-GT

Module: Compiler

Machines Affected: All

DESCRIPTION:

Two new properties for controls and windows have been introduced to allow you to control their appearance when run through AcuToWeb. The two properties are able to correspond with a class or ID set in the cascading style sheet used as a theme when running through the AcuToWeb gateway.

The two new properties are:

ATW-CSS-CLASS - Set to a string value that corresponds to a class in the cascading style sheet used as the current theme in AcuToWeb. This property can be applied to more than one control in your program.
ATW-CSS-ID - Set to a string value that corresponds to an ID in a cascading style sheet used as the current theme in AcuToWeb. This property must have a unique value and be applied to just one control in your program.

These properties take a string as their value and can be applied to the control or window through editing the source code, or via the Properties pane in AcuBench.

The following excerpt contains a screen with two push buttons. The first button (Pb-1) has specified the class basicpbclass, and the second button (Pb-2) has specified the ID runpbid.

...
01 Screen1.
   03 Pb-1, Push-Button, COL 38.30, LINE 15.00, 
      LINES 3.50 CELLS, SIZE 14.00 CELLS, ATW-CSS-CLASS "basicpbclass" ID IS 1, CANCEL-BUTTON, TITLE "Exit". 
   03 Pb-2, Push-Button,COL 1.80, LINE 10.10, 
      LINES 3.50 CELLS, SIZE 28.40 CELLS,EXCEPTION-VALUE 81, ID IS 2, ATW-CSS-ID "runpbid"
      TITLE "Run".
...

If you run the full program through AcuToWeb whilst using a theme containing definitions for both the class and ID, these push buttons will be styled appropriately; for example:

.basicpbclass{
       border-width: 1px;
       border-radius: 2px;
       background-color:  #ff2247 !important;
             }
#runpbid{
       border-width: 1px;
       border-radius: 4px;
       background-color:  #21ff43 !important;
        }