The premise for this demo program is to provide a graphical front-end to the Colors.bbj utility class that's installed in the <BBjHome>/utils/ directory. In BBj 20.10 and higher, Colors is a BBj Custom Class that provides commonly-used routines to convert and format colors in a variety of models including Java Color, BBjColor, and RGB, HSL, and hexadecimal representation.
The program lets you define a color in RGB, HEX, HSL, or HSB format using edit boxes for the component values or sliders to adjust the component values within the applicable range. It automatically converts the defined color into all the supported color formats and displays the color in eight different output formats (the original four plus versions defining the alpha transparency value). Clicking on one of the color output formats copies the color definition into your clipboard.
Additionally, the demo shows how to integrate freely-available, third-party JavaScript libraries to augment BBj applications. The program makes use of two such libraries: clipboard.js and notyf.js.
The following image is a screenshot of the ColorConverter demo.
Figure 1: The ColorConverter Demo
This demo program runs in BUI (Browser User Interface) and GUI, but many of the special CSS effects for the BBjSliders can only be applied in BUI. It would be possible, however, to register the demo application as a BUI app and then run the entire application in a simple GUI program consisting of a BBjTopLevelWindow and a BBjHtmlView control.
The demo should run well on most BUI devices. It uses the BBMig Layout Manager to resize and position the controls so that it fits well on the target display, regardless of device orientation.
To see the program in action, launch the ColorConverter demo from the BBx BUI Showcase page.
This section covers the demo's reliance on external dependencies, such as 3rd Party JARs, Web Services, Developer API keys, and other BBj programs such as utilities, external custom class definitions, and setup programs.
BASIS Utilities:
BBUtils (for SSL status for Jetty, determining touch capability, etc.)BBMigPane (for the BBMig layout manager)Colors (for the color conversion and manipulation)Java Libraries:
JavaScript Libraries:
clipboard.js (which is used to copy text into the clipboard. Website: https://clipboardjs.com/)notyf.js (which is used to display a notification that the color information has been copied into the clipboard. Website: https://carlosroso.com/notyf/)BBj Programs:
ColorConverter.bbj (the demo program)Other Files:
Third-party JAR Files for Custom BBj or Java code:
To run the BUI demo, you must first register the demo as a BUI application. You can do this several different ways, with two options listed below:
The easiest method is to run the ColorConvert.bbj program in GUI (or from the Eclipse IDE), then immediately exit the app by closing the window or selecting the Exit button. The demo is set to register itself, so the quick GUI run ensures that it's properly registered. Assuming no errors, you should be able to browse to http://localhost:8888/apps/ColorConverter to run the BUI app.
If you wish to register the application yourself, run Enterprise Manager and register the ColorConverter program as a BUI application. For more information on registering a BUI application, see the Enterprise Manager - BUI: Applications documentation page. Ensure that the CSS property is set to the ColorConverter file in this directory. You can also set the Shortcut Icon to the ColorConverter Icon.png file in this directory. Another important aspect that's automated by the first method is that all the font files in the demo's images directory must be accessible to client browsers. Therefore, you will need to copy those files to the <BBjHome>/htdocs/Demos/ColorConverter directory so that the Jetty web server can make them available to browser clients.
<BBjHome>/utils/ directory is in your prefix so that the demo program can find and use the distributed BASIS utilities.