Test the custom color picker widget

Use this sample application to view the custom color picker widget in action.

For this application to work properly, you must use the customization/colorpicker GBC customization as the GBC client. This customization first appeared as part of the GBC 5.00.10 project.

The form file

The application form file (myform.per):

# myform
LAYOUT (TEXT="A simple color picker demo")
VBOX
GRID
{
<G g1                                                            ><G g2                          >
 [" "]                                                             [" "]
 [" "]                                                             [" "]
 [" "]                                                             [" "]
 ["                    "][color          ]["                    "] [label                       ]
 [" "]                                                             [colorval                    ]
 [" "]                                                             [" "]
 [" "]                                                             [" "]
}
END -- GRID
END -- VBOX
END

ATTRIBUTES
GROUP g1 : editGroup, text = "Color picker";
GROUP g2 : labelGroup, text = "Title";

LABEL label: label, sizepolicy=fixed, justify=center, style="label", 
      text="A simple color picker demo";
LABEL colorval: colorval, sizepolicy=fixed, justify=center, style="label", 
      text="#000000";
EDIT color=formonly.color, style="colorpicker";

Note:

A "colorpicker" style is set for the EDIT form item "color".

The application source

The application source (main.4gl):

# color picker
MAIN
  OPEN WINDOW w WITH FORM "myform"
  CALL input1()
END MAIN

FUNCTION input1()
  DEFINE color, label STRING
  DEFINE l_win ui.Window
  DEFINE m_form ui.Form
  DEFINE m_label om.DomNode
  DEFINE m_colorval om.DomNode

  LET l_win = ui.Window.getCurrent()
  LET m_form = l_win.getForm()
  LET m_label = m_form.findNode("Label","label")
  LET m_colorval = m_form.findNode("Label","colorval")
  INPUT BY NAME color WITHOUT DEFAULTS ATTRIBUTES(UNBUFFERED)
    ON ACTION dialogtouched
      LET color =  fgl_dialog_getbuffer()
      CALL m_label.setAttribute("color", color)
      CALL m_colorval.setAttribute("text", color)
    ON ACTION close
      EXIT INPUT
  END INPUT
END FUNCTION

Note:

The dialogtouched action detects changes the user makes when selecting or changing text colors in the "color" field.
The fgl_dialog_getbuffer() function returns the selection in the color picker widget as a string representing the hex value of the color.
The text color in the input buffer is applied to the attribute value of the DOM nodes referencing the colorval field and the label in the form.