Color Choosers

Color choosers, as the name implies, are used to allow the user to select a color. They present the user with a color spectrum from which the user can select a standard RGB color.

The following example shows a color chooser and will show the user the HTML representation of the color they have chosen.

The BXML for this example is shown below:

            
            <Window title="Color Choosers" maximized="true"
                WindowStateListener.windowOpened="init()"
                xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns="org.apache.pivot.wtk">
                <bxml:script src="color_choosers.js"/>

                <Border>
                    <BoxPane styles="{padding:4, spacing:12}">
                        <Border styles="{color:10}">
                            <ColorChooser bxml:id="colorChooser"
                                ColorChooserSelectionListener.selectedColorChanged="onColorChange()"/>
                        </Border>
                        <Form>
                            <Form.Section>
                                <Border Form.label="Selected Color" styles="{padding:1}">
                                    <Border bxml:id="sampleBorder" preferredWidth="100"
                                        preferredHeight="14" styles="{thickness:0}">
                                        <Label/>
                                    </Border>
                                </Border>

                                <TextInput bxml:id="hexInput" Form.label="HTML Notation" textSize="6"
                                    ComponentStateListener.focusedChanged="onInputFocusChange()">
                                    <componentKeyListeners>
                                        importClass(org.apache.pivot.wtk.Component);
                                        importClass(org.apache.pivot.wtk.Keyboard);

                                        function keyPressed(component, keyCode, keyLocation) {
                                            if (keyCode == Keyboard.KeyCode.TAB ||
                                                keyCode == Keyboard.KeyCode.ENTER) {
                                                Component.clearFocus();
                                            }
                                        }
                                    </componentKeyListeners>
                                </TextInput>
                            </Form.Section>
                        </Form>
                    </BoxPane>
                </Border>
            </Window>
            
        

The JavaScript for this example, which lives in an external script file, is below:

            
            /**
             * Called when the main app window is opened.
             */
            function init() {
                colorChooser.selectedColor = "#59a2b0";
            }

            /**
             * Converts a hex string into a Color instance.
             */
            function hexToColor(hex) {
                if (!hex.startsWith("#")) {
                    hex = "#" + hex;
                }

                return java.awt.Color.decode(hex);
            }

            /**
             * Converts a Color instance into a hex string.
             */
            function colorToHex(color) {
                var result = "";

                var primaries = ["red", "green", "blue"];
                for (var i = 0, n = primaries.length; i < n; i++) {
                    var value = color[primaries[i]].toString(16);
                    if (value.length == 1) {
                        // Pad the value with a leading zero
                        value = "0" + value;
                    }
                    result += value;
                }

                return result;
            }

            /**
             * Called when the selected color changes.
             */
            function onColorChange() {
                var color = colorChooser.selectedColor;
                sampleBorder.styles.put("backgroundColor", color);
                hexInput.text = colorToHex(color);
            }

            /**
             * Called when the hex input changes its focus state.
             */
            function onInputFocusChange() {
                if (!hexInput.focused) {
                    try {
                        colorChooser.selectedColor = hexToColor(hexInput.text);
                    } catch (ex) {
                        var color = colorChooser.selectedColor;
                        if (color) {
                            hexInput.text = colorToHex(color);
                        }
                    }
                }
            }
            
        

Since this example is written entirely in BXML and script, there is no associated Java source.