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.
Next: Table Views