Page Comparison

...

Below are screen shots of the Universal Display File (COLORSD) being created the Universal Designer. There are 3 record formats representing the parts of an HTML page, the Header, Body, and Footer. The middle image shows CONAME and COHEX as the bound fields. CONAME (color name) is the variable containing names of colors, the example CONAME is defined as CHAR(30). COHEX (color hex) is the variable containing the hex values of CONAME's colors, the example CONAME is defined as CHAR(7) and the records include the '#' along with the hex color value (i.e. #FF0022). If you would prefer, you can use valid CSS color names instead of the hex color value and the example will still work. You will need to make sure your fields are properly defined for the length and type of field. Our Universal Display File will access the information in these bound fields and display them in our program. Please refer to the  for the Adding Dynamic Content Using Fields of the Using the Universal Display File Editor documentation page for more information with this step. 

...

The following is the resulting JSON object of the exactly what was shown above:

{
     "success":true,
     "response":[
new Option("WHITE","#FFFFFF")
,
new Option("SILVER","#C0C0C0")
,
new Option("GRAY","#808080")
,
new Option("BLACK","#000000")
,
new Option("RED","#FF0000")
,
new Option("MAROON","#800000")
,
new Option("YELLOW","#FFFF00")
,
new Option("OLIVE","#808000")
,
new Option("LIME","#00FF00")
,
new Option("GREEN","#008000")
,
new Option("AQUA","#00FFFF")
,
new Option("TEAL","#008080")
,
new Option("BLUE","#0000FF")
,
new Option("NAVY","#000080")
,
new Option("FUCHSIA","#FF00FF")
,
new Option("PURPLE","#800080")
     ]
}

...

Below is a screen shot of the layout of the SHOWCOLORD rich display file.There are 3 bound fields. Two for OK and EXIT  buttons, and one for the color bound field. Once you click the OK button  button after selecting a color name in the List Box, the background color of the label underneath will change to the corresponding color. The COLOR bound field is bound to the background color attribute of the label widget, and is also bound to the value property of the List Box; this is how the label is able to change colors accordingly. 

...

To run the program, login to a Genie session and use EDTLIBL or ADDLIBLE to make sure the libraries where the program files are stored are in the library list. Then you may run the command CALL YOURLIBRARY/SHOWCOLORR to run your program and you can display the colors after highlighting a color name and pressing the Okthe OK button, double-clicking the color, or selecting a color and pressing the 'Enter' key on your keyboard. 

...