AcuToWeb uses Cascading style sheets (CSS) to change the COBOL display to an HTML.
AcuToWeb connects (through AcuConnect) to a runtime executing the COBOL program and drives the information to the Gateway engine, at which point the display is transformed by CSS. As such, the CSS is not interactive, but is responding to information coming from the runtime.
You can customize the CSS so that it changes certain aspects of controls; for example, if you use the flat style for push button on your screens, through CSS you can change how that flat style appears. Essentially, CSS is a language that describes the style of an HTML document and how the HTML elements should be displayed. You can also compliment these changes with the ACUTOWEB_TAB_TITLE configuration variable, allowing you to add a title to your application.
AcuToWeb implements a default CSS (styles.css), which is located in the Web\_CSS sub-directory (of the install-dir\AcuToWeb directory), but should not be edited. If you want to use your own customizations, you should implement a theme by creating your own style sheets from scratch, or copying/editing one of the supplied style sheets, which are located in the Web\_CSS\examples sub-directory. That directory contains:
| Style sheet | Notes: |
|---|---|
| ThemeFX.css | Demonstrates how to change the window color of your applications. |
| defaultCustomCSS.css | Demonstrates how to change certain controls; for example, it includes a push button that uses rounded corners, and changes color when you place the cursor over it. |
| DBCS_fixed_table.css | Use this style sheet for character mode applications that display screens containing double-byte characters: it ensures that screen elements are placed as you expect (that is, not affected by the presence of double-byte characters). |
To use a customized style sheet in your applications, implement it as a theme by associating it with the Gateway service. When you add more than one theme to the Gateway Service, they are available on the Gateway Connection screen, allowing you to choose one each time you run an application. It is the &theme=<theme-name> syntax within your connection URL that determines the style sheet that is used.