Properties Panel - Properties Tab

Description

This view displays a table of properties and values, a toolbar and a description area at the bottom.

The table of properties and values is synchronised with the selected node in the Structure tree or the selected control in the composer. Similar properties are grouped together. In our example, these groups are Standard, Style and Advanced.

Properties and Values

Each property displays a default value or setting. In our example, the main frame properties Centered and Resizable are checked and the value of the Title property is "Prototype Title" by default.

Since there are several types of properties, each type has a contextual way of editing the value. In our example, the values main-frame and 640, 480 of the Id and Dimension properties are not editable. The value of Centered property is a check box. But the value of Titlebar Icon is an icon selected through an Icon Chooser dialog when you click the drop down button in the value field.

Properties Toolbar

The properties toolbar allows you to display the properties in various ways.

	Displays the properties by category
	Displays the properties in alphabetical order
	Toggles the display of the description at the bottom of the docking
	Expands the categories in category view
	Collapses the categories in category view
	Toggles the display of the advanced properties

(See How to edit in the Title Property)

Table of Properties

Property	Description	Items with this property	Value Type
Approve Button	Set the name of the Approve Button when the Type is 'custom'	File Chooser	Text field (non-editable)
Author	Set the name of the prototype author	Prototype	Text field
Auto Completion	Set the typing to auto completion	Combo Box	Check box
Background	Set the background color of the item	Menu, Menu Item, Check Box Menu Item, Radio Button Menu Item, Toolbar Button, Toolbar Toggle Button, Label, Text Field, Button, Toggle Button, Radio Button, Check Box, Panel, Password Field, Text Area, Editor Pane, Tab, Card Panel, JX Titled Separator, Multiline Label	Color Palette selector
Background Image	Set the background image to display	Panel, Tab, Card Panel	Choose Icon selector
Border Painted	Set whether the border should be painted or not	Toolbar Button, Toolbar Toggle Button, Button, Toggle Button, Progress Bar	Check box
Border Type	Set the border type	Bevel Border, Etched Border	Combo box
Centered	Center the form on the screen	Frame, Dialog	Check box
Closed Icon	Select a closed icon for the tree	Tree	Choose Icon selector
Color	Set the color	Color Chooser, Line Border, Matte Border, Titled Border	Color Palette selector
Columns	Set the number of columns	Text Area	Text field
Content Area Filled	Set whether the button should paint the content area or leave it transparent	Button	Check box
Content Type	Set the content type of the editor	Editor Pane	Combo box
Continuous Layout	Set the value to continuous layout or not	Split Pane	Check box
Corner Size	Set the size of the corner	Drop Shadow Border	Text field
Created On	Display the date created	Prototype	Text field (non-editable)
Cursor	Set the cursor to display	Button	Combo box
Current Directory	Select the directory to display by default in the File Chooser	File Chooser	Directory selector
Default Button	Set the form default button	Frame, Dialog	Text field
Description	Set the description of the prototype	Prototype	Text editor
Dimension	Display the dimension of the form	Frame, Dialog	Text field (non-editable)
Disabled Icon	Set the icon to display when the button is disabled	Toolbar Button, Toolbar Toggle Button, Toggle Button	Choose Icon selector
Disabled Selected Icon	Set the icon to display when the selected toggle button is disabled	Toolbar Toggle Button, Toggle Button	Choose Icon selector
Display Root Handles	Display or hide the root node handles	Tree	Check box
Divider Location	Set the divider location value	Split Pane	Text field (non-editable)
Divider Size	Set the divider size value	Split Pane	Text field
Editable	Set whether this item should be editable or not	Text Field, Combo Box, Password Field, Text Area, Editor Pane, Table, Tree	Check box
Enabled	Set whether this item should be enabled or not	Menu, Menu Item, Check Box Menu Item, Radio Button Menu Item, Toolbar Button, Toolbar Toggle Button, Label, Button, Toggle Button, Radio Button, Check Box	Check box
Escape Dispose	Escape key disposes the form	Frame, Dialog	Check box
Focus Painted	Set whether focus should be painted or not	Button	Check box
Font	Set the font of the item	Menu, Menu Item, Check Box Menu Item, Radio Button Menu Item, Toolbar Button, Toolbar Toggle Button, Label, Text Field, Button, Toggle Button, Radio Button, Check Box, Text Area, Editor Pane, JX Titled Separator, Multiline Label, Titled Border	Font selector
Foreground	Set the foreground color of the item	Menu, Menu Item, Check Box Menu Item, Radio Button Menu Item, Toolbar Button, Toolbar Toggle Button, Label, Text Field, Button, Toggle Button, Radio Button, Check Box, Panel, Password Field, Text Area, Editor Pane, Tab, Card Panel, JX Titled Separator, Multiline Label	Color Palette selector
Gradient	Set the item to gradient or not	Panel, Tab, Card Panel, JX Titled Separator	Check box
Gradient Coordinates	Set the gradient coordinates. The gradient property needs to be selected to display.	Panel, Tab, Card Panel, JX Titled Separator	Coordinates selector
Hide Text	Hide the text of the item	Toolbar Button, Toolbar Toggle Button	Check box
Highlight	Set the item highlight color	Bevel Border, Etched Border	Color Palette selector
Highlight Inner	Set the item inner highlight color	Bevel Border	Color Palette selector
Horizontal Alignment	Set the horizontal alignment	Toolbar Button, Toolbar Toggle Button, Label, Text Field, Button, Toggle Button, Password Field, JX Titled Separator	Combo box
Horizontal Text Position	Set the horizontal text position	Toolbar Button, Toolbar Toggle Button, Label, Button, Toggle Button, JX Titled Separator	Combo box
Icon	Set the icon to display	Menu, Menu Item, Toolbar Button, Toolbar Toggle Button, Label, Button, Toggle Button, Tab, JX Titled Separator, Matte Border	Choose Icon selector
Icon Text Gap	Set the gap between the text and the icon	Toolbar Button, Toolbar Toggle Button, Label, Button, Toggle Button	Text field
Id	Item identifier	All	Text field (non-editable)
Image	Set the image to display	Image	Choose Icon selector
Image Position	Set the coordinates of the image when it is in positioned style	Panel, Tab, Card Panel	Text field
Image Style	Set the style of the background image	Panel, Tab, Card Panel	Combo box
Indeterminate	Set to indeterminate or not	Progress Bar	Check box
Inverted	Set the slider to inverted or not	Slider	Check box
Justification	Set the text justification	Titled Border	Combo box
Label For	Set the item id associated with this label	Label	Text field
Language	Set the coding language to use	All Events	Combo box
Leaf Icon	Select a leaf icon for the tree	Tree	Choose Icon selector
Line Color	Set the border line color around the component	Drop Shadow Border	Color Palette selector
Line Width	Set the border line width around the component	Drop Shadow Border	Text field
Line Wrap	Set whether the line should wrap or not	Text Area	Check box
Link To	Link this item to a component	Menu Item, Check Box Menu Item, Radio Button Menu Item, Toolbar Button, Toolbar Toggle Button, Button, Toggle Button	Combo box
Logo	Set the organization logo	Prototype	Choose Icon selector
Main Frame	Set the frame to lauched first	Frame	Check box
Major Tick Spacing	Set the major tick spacing value	Slider	Text field
Margins	Set the border margins	Empty Border, Matte Border	Margins selector
Maximum	Set the maximum value	Progress Bar, Slider, Spinner	Text field
Maximum Row Count	Set the maximum row count	Combo box	Text field
Message Text	Set the message text to display	Options Pane	Text field
Message Type	Set the message type	Options Pane	Combo box
Method	Set the event listener method	All Events	Combo box
Minimum	Set the minimum value	Progress Bar, Slider, Spinner	Text field
Minor Tick Spacing	Set the minor tick spacing value	Slider	Text field
Mnemonic	Set the mnemonic (underlined letter)	Menu, Menu Item, Check Box Menu Item, Radio Button Menu Item, Toolbar Button, Toolbar Toggle Button, Label, Button, Toggle Button, Radio Button, Check Box	Text field
Modal	Set the dialog to modal or not	Dialog	Check box
Modified On	Display the date last modified	Prototype	Text field (non-editable)
Name	Set the name of the item	Frame, Dialog, Options Pane, File Chooser, Color Chooser, Menu Bar, Menu, Menu Item, Button Group, Check Box Menu Item, Radio Button Menu Item, Toolbar, Toolbar Button, Toolbar Toggle Button, Label, Text Field, Button, Toggle Button, Radio Button, Check Box, Panel, Combo Box, List, Password Field, Text Area, Editor Pane, Progress Bar, Slider, Spinner, Tabbed Pane, Tab, Table, Tree, Split Pane, Card Panel, JX Titled Separator, Multiline Label, Image, All Events Note: The text of the 'Name' attribute of forms ( Frame, Dialog, Option Pane, File Chooser, Color Chooser) must be without space or special characters	Text field
One Touch Expandable	Set to be expandable by one touch or not	Split Pane	Check box
Opaque	Set whether the item should be opaque or not	Toolbar Button, Toolbar Toggle Button, Label, Button, Toggle Button, Radio Button, Check Box, Panel, Tab, Card Panel, JX Titled Separator	Check box
Open Icon	Select an open icon for the tree	Tree	Choose Icon selector
Option Type	Set the option type	Options Pane	Combo box
Organization	Set the name of the organization	Prototype	Text field
Orientation	Set the item orientation	Progress Bar, Slider, Split Pane	Combo box
Paint Labels	Set the slider with labels or not	Slider	Check box
Paint Ticks	Set the slider with ticks or not	Slider	Check box
Paint Track	Set the slider with track or not	Slider	Check box
Page	Path to an html page to load	Editor Pane	Text field
Position	Set the text position	Titled Border	Combo box
Pressed Icon	Set the icon to display when the button is pressed	Toolbar Button, Toolbar Toggle Button, Button, Toggle Button	Choose Icon selector
Property	Set the property of the selected target	All Events	Text field
Resizable	Set the form to resizable or not	Frame, Dialog	Check box
Roll Over	Set a rollover effect on toolbar buttons	Toolbar	Check box
Rollover Icon	Set the icon to display when the mouse is over the button	Toolbar Button, Toolbar Toggle Button, Button, Toggle Button	Choose Icon selector
Rollover Selected Icon	Set the icon to display when the mouse is over the selected toggle button	Toolbar Toggle Button, Toggle Button	Choose Icon selector
Root Visible	Set the tree root node visible or not	Tree	Check box
Rounded Corners	Set to rounded corners or not	Line Border	Check box
Rows	Set the number of rows	Text Area	Text field
Script	Edit the script	All Events	Text editor
Selected	Set the item to selected or deselected	Check Box Menu Item, Radio Button Menu Item, Toolbar Toggle Button, Toggle Button, Radio Button, Check Box	Check box
Selected Icon	Set the icon to display when the toggle button is selected	Toolbar Toggle Button, Toggle Button	Choose Icon selector
Selected Item	Set the selected item	Combo Box, List	Text field
Selection Mode	Set the selection mode of the list	List	Combo box
Shadow	Set the item shadow color	Bevel Border, Etched Border	Color Palette selector
Shadow Inner	Set the item inner shadow color	Bevel Border	Color Palette selector
Shadow Opacity	Set the opacity of the shadow	Drop Shadow Border	Text field
Shadow Size	Set the size of the shadow effect	Drop Shadow Border	Text field
Show Bottom Shadow	Display or not the bottom shadow	Drop Shadow Border	Color Palette selector
Show Left Shadow	Display or not the left shadow	Drop Shadow Border	Color Palette selector
Show Right Shadow	Display or not the right shadow	Drop Shadow Border	Color Palette selector
Show Top Shadow	Display or not the top shadow	Drop Shadow Border	Color Palette selector
Snap to Ticks		Slider	Check box
Soft Corners	Enable or disable soft corners	Bevel Border	Check box
Source	Select a source file	All Events	File selector
Step By	Set the value to step by	Spinner	Text field
String	Set the text string to display when text painted is checked	Progress Bar	Text field
Tab Layout Policy	Set the value of the tab layout policy	Tabbed Pane	Combo box
Tab Placement	Set the tab placement value	Tabbed Pane	Combo box
Tab Size	Set the size of the tab	Text Area	Text field
Target	Set the event listener target	All Events	Target selector
Text	Set the text to display	Menu, Menu Item, Check Box Menu Item, Radio Button Menu Item, Toolbar Button, Toolbar Toggle Button, Label, Text Field, Button, Toggle Button, Radio Button, Check Box, Titled Border	Text field
Text	Set the text to display	Password Field, Text Area, Editor Pane, Multiline Label	Text editor
Text Painted	Set whether the string text should display or not	Progress Bar	Check box
Thickness	Set the item thickness	Empty Border, Line Border	Text field
Title	Set the title to display	Frame, Dialog, Options Pane, File Chooser, Color Chooser, Tab, JX Titled Separator	Text field
Titlebar Icon	Set an icon on the title bar	Frame	Choose Icon selector
Tooltip Text	Set the tooltip text to display	Options Pane, Menu Bar, Toolbar, Toolbar Button, Toolbar Toggle Button, Label, Text Field, Button, Toggle Button, Radio Button, Check Box, Panel, Combo Box, List, Password Field, Text Area, Editor Pane, Progress Bar, Slider, Spinner, Tabbed Pane, Tab, Table, Tree, Split Pane, Card Panel, JX Titled Separator, Multiline Label, Image	Text editor
Type	Set the type of file chooser	File Chooser	Combo box
Value	Set the visible value	Progress Bar, Slider, Spinner	Text field
Value	Set the value of the selected property	All Events	Text field
Values	Set the values	Combo Box, List	Text editor
Values	Set the values in the table	Table	Table editor
Values	Set the values in the tree	Tree	Tree editor
Version	Set a version number to the prototype	Prototype	Text field
Vertical Alignment	Set the vertical alignment	Toolbar Button, Toolbar Toggle Button, Label, Button, Toggle Button	Combo box
Vertical Text Position	Set the vertical text position	Toolbar Button, Toolbar Toggle Button, Label, Button, Toggle Button	Combo box
Visible Row Count	Set the visible row count	List	Text field
Watermark	Enable or disable watermark	Frame, Dialog, Options Pane, File Chooser, Color Chooser	Check box
Watermark Text	Set the watermark text to display across the form	Frame, Dialog, Options Pane, File Chooser, Color Chooser	Text editor
Wrap Style Word	Set the text area to wrap after word	Text Area	Check box

Value Editors

Check box
	When a value is of the type 'check box', simply click in the box to enable or disable the property. When the box has a check, the property is enabled. Example: The 'Escape Dispose' property is disabled but the 'Resizable' property is enabled.

Text field
	When a value is of the type 'text field', simply type in the cell beside the property name. Example: The 'Name' property has the text Dialog1 as value typed in the text field.

Color Palette selector
	When a value is of the type 'color palette selector', simply click the down arrow at the right of the value field. The Color Palette selector displays the standard colors. Select 'None' to remove all colors Select 'More Colors' to view a full Color Chooser dialog. Example: The 'Background' property has a default color value '212, 208, 200' with a preview of the color. Selecting the down arrow opens the Color Palette.

Color Palette selector

When a value is of the type 'color palette selector', simply click the down arrow at the right of the value field.

The Color Palette selector displays the standard colors.

Select 'None' to remove all colors

Select 'More Colors' to view a full Color Chooser dialog.

Example: The 'Background' property has a default color value '212, 208, 200' with a preview of the color. Selecting the down arrow opens the Color Palette.

Choose Icon selector
	When a value is of the type 'choose icon selector', you can click in the value field to type the path and name of the icon or click at the far right of the field and the the down arrow displays. Select it to open the 'Choose Icon' dialog box. Example: The 'Pressed Icon' property has a default empty field. Selecting this field allows you to either type or to see the down arrow. Selecting the down arrow opens the Choose Icon dialog box.

Choose Icon selector

When a value is of the type 'choose icon selector', you can click in the value field to type the path and name of the icon or click at the far right of the field and the the down arrow displays. Select it to open the 'Choose Icon' dialog box.

Example: The 'Pressed Icon' property has a default empty field. Selecting this field allows you to either type or to see the down arrow. Selecting the down arrow opens the Choose Icon dialog box.

Combo box
	When a value is of the type 'combo box', simply click the down arrow at the right of the value field. Depending on the property, a list of options displays in the combo box. Select a value in the list. This new value is set for the property. Example: The 'Horizontal Alignment' property has a default value of 'center'. Selecting the down arrow displays the available values. After selecting 'right', this is the new value set.

Combo box

When a value is of the type 'combo box', simply click the down arrow at the right of the value field.

Depending on the property, a list of options displays in the combo box.

Select a value in the list. This new value is set for the property.

Example: The 'Horizontal Alignment' property has a default value of 'center'. Selecting the down arrow displays the available values. After selecting 'right', this is the new value set.

Directory selector
	When a value is of the type 'directory selector', simply click the down arrow at the right of the value field to change the path. The 'Select a Directory' dialog displays. Browse to the directory to display when a the File Chooser is launched. Example: The 'Current Directory' property has a default path. Selecting the down arrow opens the Select a Directory dialog box.

Directory selector

When a value is of the type 'directory selector', simply click the down arrow at the right of the value field to change the path.

The 'Select a Directory' dialog displays.

Browse to the directory to display when a the File Chooser is launched.

Example: The 'Current Directory' property has a default path. Selecting the down arrow opens the Select a Directory dialog box.

Text editor
	When a value is of the type 'text editor', simply click the down arrow at the right of the value field. The 'Text Editor' displays. OK: accepts the changes and closes the editor. Cancel: closes the editor without changes. Reset: reset the original text found when the editor opened. Example: The 'Tooltip Text' property has a default empty field. Selecting the down arrow opens the Text Editor. You can type a multiline text and press ok.

Text editor

When a value is of the type 'text editor', simply click the down arrow at the right of the value field.

The 'Text Editor' displays.

OK: accepts the changes and closes the editor.

Cancel: closes the editor without changes.

Reset: reset the original text found when the editor opened.

Example: The 'Tooltip Text' property has a default empty field. Selecting the down arrow opens the Text Editor. You can type a multiline text and press ok.

Font selector
	When a value is of the type 'font selector', simply click the down arrow at the right of the value field. The 'Font Chooser' displays. OK: accepts the changes and closes the Font Chooser. Cancel: closes the Font Chooser without changes. Example: The 'Font' property has a default font value 'Tahoma Plain 11'. Selecting the down arrow opens the Font Chooser.

Font selector

When a value is of the type 'font selector', simply click the down arrow at the right of the value field.

The 'Font Chooser' displays.

OK: accepts the changes and closes the Font Chooser.

Cancel: closes the Font Chooser without changes.

Example: The 'Font' property has a default font value 'Tahoma Plain 11'. Selecting the down arrow opens the Font Chooser.

Coordinates selector
	When a value is of the type 'coordinates selector', simply click the down arrow at the right of the value field. The 'Coordinates Selector' displays. Move the sliders to the desired positions OK: accepts the changes and closes the Coordinates Selector. Cancel: closes the Coordinates Selector without changes. Example: The 'Gradient Coordinates' property has a default empty field. Selecting the down arrow opens the Coordinates Selector.

Coordinates selector

When a value is of the type 'coordinates selector', simply click the down arrow at the right of the value field.

The 'Coordinates Selector' displays.

Move the sliders to the desired positions

OK: accepts the changes and closes the Coordinates Selector.

Cancel: closes the Coordinates Selector without changes.

Example: The 'Gradient Coordinates' property has a default empty field. Selecting the down arrow opens the Coordinates Selector.

Margins selector
	When a value is of the type 'margins selector', simply click the down arrow at the right of the value field. The 'Margins Selector' displays. Change the margins values with the spinners OK: accepts the changes and closes the Margins Selector. Cancel: closes the Margins Selector without changes. Example: The 'Margins' property has a default empty field. Selecting the down arrow opens the Margins Selector.

Margins selector

When a value is of the type 'margins selector', simply click the down arrow at the right of the value field.

The 'Margins Selector' displays.

Change the margins values with the spinners

OK: accepts the changes and closes the Margins Selector.

Cancel: closes the Margins Selector without changes.

Example: The 'Margins' property has a default empty field. Selecting the down arrow opens the Margins Selector.

File selector
	When a value is of the type 'file selector', you can click in the value field to type the path and name of file or click at the far right of the field and the the down arrow displays. Select it to open the 'Choose a Script' dialog box. Browse to find the file. Example: The 'Source' property has a default empty field. Selecting this field allows you to either type or to see the down arrow. Selecting the down arrow opens the Choose a Script dialog box.

File selector

When a value is of the type 'file selector', you can click in the value field to type the path and name of file or click at the far right of the field and the the down arrow displays.

Select it to open the 'Choose a Script' dialog box.

Browse to find the file.

Example: The 'Source' property has a default empty field. Selecting this field allows you to either type or to see the down arrow. Selecting the down arrow opens the Choose a Script dialog box.

Target selector
	When a value is of the type 'target selector', simply click the down arrow at the right of the value field. The 'Select Target' dialog box displays. Select the item in the tree. OK: accepts the changes and closes the Select Target. Clear: removes the target item association. Cancel: closes the Select Target without changes. Example: The 'Target' property has a default empty field. Selecting the down arrow opens the Select Target dialog box. The Panel1 item on the tree is selected.

Target selector

When a value is of the type 'target selector', simply click the down arrow at the right of the value field.

The 'Select Target' dialog box displays.

Select the item in the tree.

OK: accepts the changes and closes the Select Target.

Clear: removes the target item association.

Cancel: closes the Select Target without changes.

Example: The 'Target' property has a default empty field. Selecting the down arrow opens the Select Target dialog box. The Panel1 item on the tree is selected.

Table editor
	When a value is of the type 'Table editor', simply click the down arrow at the right of the value field. The 'Edit Table' dialog box displays. Add, insert or remove rows and columns. Enter the data in the cells Save: accepts the changes and closes the Edit Table dialog box. Cancel: closes the dialog box without changes.

Table editor

When a value is of the type 'Table editor', simply click the down arrow at the right of the value field.

The 'Edit Table' dialog box displays.

Add, insert or remove rows and columns.

Enter the data in the cells

Save: accepts the changes and closes the Edit Table dialog box.

Cancel: closes the dialog box without changes.

Tree editor
	When a value is of the type 'Tree editor', simply click the down arrow at the right of the value field. The 'Edit Tree' dialog box displays. Add, remove or edit nodes. Close: saves the changes and closes the dialog box..

Tree editor

When a value is of the type 'Tree editor', simply click the down arrow at the right of the value field.

The 'Edit Tree' dialog box displays.

Add, remove or edit nodes.

Close: saves the changes and closes the dialog box..