Logo
 
Simprit Swing Quick Start

This document describes Simprit Swing's components in brief. After you read this document, you will know features of each Simprit Swing's component, their properties and look and feel behaviour.

Introduction

Simprit Swing is designed with simple spirit in mind, most components can be used and designed in visual UI designer. UI design using Simprit Swing is as simple as drag and drop, and setting component's properties in Property Editor.

Our demo application is designed in NetBeans Form designer environment completely. Demo application source code is provided in our distribution package. Visit download page to download a trial version and follow given instructions to install Simprit NetBeans module and run our demo application.

JSxButton

JSxButton extends from JButton, therefore it has all features of JButton plus additional new features.

dropDownMenu property (JPopupMenu)

JSxButton can be assigned an instance of JPopupMenu through dropDownMenu property. When it is assigned an instance of JPopupMenu. It looks like this:

JSxButton with drop down menu

As above picture shows, when right hand side area of the button is clicked, drop down menu appears. User can select menu item in drop down menu and click the menu item.

When left hand side area of the button is clicked, default action is fired. Default action could be action assigned to the button or it's action listeners or the first menu item of the drop down menu. One of them is default action only, it is determined by order mentioned above.

alwaysDropDown property (boolean)

This property takes effect only when dropDownMenu is assigned. When alwaysDropDown is true, drop down menu is always shown when button is clicked and there will be no default action. The button looks like this when alwaysDropDown is true:

JSxButton with always drop down menu

showAlwaysDropDownIcon property (boolean)

As above picture shows, when a button is always drop down, a triangle down arrow icon is shown on the right hand side of the button. In some cases, developer might want to turn off this feature. This can be done by setting showAlwaysDropDownIcon to false.

autoDisableWhenEmptyDropDown property (boolean)

In most cases, developers want button to control its own enabled/disabled status automatically. This can be done by setting autoDisableWhenEmptyDropDown to true. When autoDisableWhenEmptyDropDown is true, button is set to disabled when no menu item in drop down menu and it is set to enabled when there is one or more than one menu item in drop down menu.

showText property (boolean)

This property is used to control visibility of button's text. When showText is false, text is not shown even it is set. This property is useful when button is used in tool bar. Buttons in tool bar normally show glyph icon only (and text property is not set or set to blank). With JSxToolBar, hidden buttons in tool bar are shown in a popup menu as following picture shows:

Tool bar pane

Button text is used to show in popup menu. If button text is not set, menu item text will be blank too. This does not look good. To overcome this issue, you can set showText to false to turn off button text display and set the button text to the text that displays in popup menu.

JSxToolBar

JSxToolBar extends from JToolBar, it has different look and feel behaviour. JSxToolBar is normally used together with JSxToolBarPane to form multiple tool bar lines.

Display hidden components in popup menu

This feature is useful when your application has many tool bar buttons and not all buttons are visible in user's screen. JSxToolBar adjusts visibility of buttons based on user's screen resolution and displays hidden buttons in popup menu. They are shown when button with '>>' icon is clicked. See the following picture:

Tool bar(s) with hidden buttons

JSxToolBarPane

JSxToolBarPane is tool bar container that manages tool bars' layout and allows user to customize its layout. JSxToolBarPane must be used with JSxToolBar.

JSxToolBarPane has following features:

  • Allow user to customize tool bar's layout by drag and drop.
  • Allow user to show or hide tool bar(s).
  • Layout persistence (auto or manual). Layout is persisted in user's local storage and it will be loaded when your application starts up. This can be done without writing single line of code when it is in auto mode.
  • Reset to default layout. This is useful when inexperience user messed up tool bars layout. Your support team can easily guide the user to resume back to default layout (the state before user starts to change).
  • Lock tool bars. When tool bar is locked, it will not be dragged accidentally.

See the below picture. User customizable functions are in popup menu. Popup menu appears when mouse button is right clicked within rectangle area of tool bar pane.

Customize tool bar pane

orientation property (int)

Tool bars can be laid out horizontally or vertically. There are two orientation constants, HORIZONTAL or VERTICAL. When tool bar pane is set to a specific orientation, for sake of consistency, all tool bars in the tool bar pane are enforced to use its parent orientation setting.

As of this writing, HORIZONTAL orientation is supported only.

rollover property (boolean)

rollover property is used to specify whether or not buttons in tool bar have rollover effect. All tool bars in tool bar pane are enforced to use its parent rollover property.

locked property (boolean)

When tool bar pane is locked, all tool bars in the tool pane are not draggable.

showPopupMenu property (boolean)

This property is for developer to customize tool bar pane popup menu behaviour. Set showPopupMenu to false to disable popup menu. Popup menu is used by user to customize most tool bar pane setting. When popup menu is disabled, popup menu will not appear when mouse button is right clicked.

showLockMenu property (boolean)

Lock menu is contained in popup menu, it is used by user to lock/unlock tool bars. To disable this feature, set showLockMenu to false. This property takes effect only when showPopupMenu is true.

showToolBarGrid property (boolean)

This property is used to specify whether or not to show tool bar grid. It is unlikely to use this property. When showToolBarGrid is set to false, tool bar pane looks like:

Customize tool bar pane

allowAllInvisible property (boolean)

This property is used to specify whether or not to allow user to hide all tool bars. Note that when all tool bars are hidden, size of tool bar pane will be shrunk to zero, therefore popup menu is not able to trigger by user. When allowAllInvisible is false (this is default setting), there must be at least one tool bar is visible.

Layout persistence

Layout persistence feature is to persist layout data that changed by user and load the persisted layout data when application is restarted.

There are two layout persistence mode, auto or manual. When layout persistence is auto, tool bar pane persists and loads layout data automatically, developer is required to set some layout persistence properties only. We suggest you to use auto mode. However in cases auto mode cannot meet your requirements, you can use manual mode. In manual mode, developer has to take care of persisting layout data manually, for example, using backend database to persist layout data. A few methods are provided to access layout data from tool bar pane.

autoPersistLayout property (boolean)

This property is used to specify persistence mode. When autoPersistLayout is true, tool bar pane is in auto persistence mode; otherwise, it is in manual persistence mode.

layoutKey property (String)

layoutKey is normally set as your application name, it is used as a root folder to store layout data.

layoutName property (String)

layoutName can be used to function like profile, different layout name represents different storage location for storing layout data.

layoutVersion property (int)

layoutVersion is used for version control, layoutVersion is included in part of the layout data. When expected version number and persisted layout data's version number do not match, the layout data is discharged and ignored.

This is used in cases like your application has a major release, tool bars layout has been changed completely. You can increase layoutVersion to avoid version conflict.

usePref property (boolean)

To specify whether to use Preference API or file system to persist layout data. usePref is true meaning to use Preference API to persist layout data; false meaning to use file system to persist layout data.

layoutData property (String)

layoutData is normally used when layout persistence mode is manual. Developer can access layoutData to persist and load layout data manually.

JSxTextField

JSxTextField extends from JTextField and adds a few new properties.

selectWhenFocus property (boolean)

Select all text when JSxTextField gains focus. This feature is helpful for data input.

maximumChars property (int)

maximumChars is used to restrict number or characters allowed to input.

JSxNumberTextField

JSxNumberTextField is used for displaying number in a specific format and controlling users to input valid number data.

JSxNumberTextField supports six number types, they are INTEGER, REAL, CURRENCY, PERCENT, SCIENTIFIC and CUSTOM. See the picture below for different number types of text field:

JSxNumberTextFields

numberType property (int)

This property is used to specify type of number to be used. INTEGER, REAL, CURRENCY, PERCENT, SCIENTIFIC or CUSTOM constants are allowed only.

negativeTextColor property (Color)

negativeTextColor is the color used to render text when value of number text field is in negative value range. negativeTextColor can be set to read color for highlighting purpose.

minimumValue property (Number)

The lowest value that number text field allows user to input. If minimumValue is not specified, there is no restriction.

maximumValue property (Number)

The highest value that number text field allows user to input. If maximumValue is not specified, there is no restriction.

allowsYieldFocusIfInvalid property (boolean)

This property is used to specify whether or not to allow to loss focus when data in text field is invalid. When allowsYieldFocusIfInvalid is false, switching focus is not allowed if data is invalid.

Custom number type

In cases of predefined number types (INTEGER, REAL, CURRENCY, PERCENT and SCIENTIFIC) cannot meet your requirements, you can use custom number type. If custom number type is used, number format has to be set too. Number format uses syntax defined by java.text.DecimalFormat. Refer to java.text.DecimalFormat JavaDoc for detailed information.

customNumberFormat property (String)

This property is the number format used to format number when number type is CUSTOM. customNumberFormat is used to format number for displaying, or editing if customEditNumberFormat is not specified.

customEditNumberFormat property (String)

This property is the number format used to format number for editing. If this property is not specified, customNumberFormat is used to format number for editing instead.

JSxDateTextField

JSxDateTextField is used for displaying date in a specific format and controlling users to input valid date/time data.

See the following picture for frequently used date text fields:

Frequently used JSxDateTextFields

dateFormatType property (int)

dateFormatType is used to specify date type that used to format date. Allowed values are FULL, LONG, MEDIUM, SHORT, ENHANCED_SHORT, ENHANCED_SHORT_2DIGIT_YEAR, ENHANCED_SHORT_4DIGIT_YEAR and CUSTOM. Most of them are self-explained, they are common type used defined in java.text.DateFormat.

ENHANCED_SHORT, ENHANCED_SHORT_2DIGIT_YEAR and ENHANCED_SHORT_4DIGIT_YEAR are new date type that supported by JSxDateTextField to improve date input.

displayType property (int)

This property is used to specify date display type. Allowed values are DISPLAY_DATE_ONLY, DISPLAY_TIME_ONLY and DISPLAY_DATE_TIME. This property is applicable when dateFormatType is not CUSTOM. For CUSTOM date type, developer has to specify date format manually through customDateFormat

customDateFormat property (String)

customDateFormat is the date format that used to format date data when dateFormatType is CUSTOM. In most cases , our predefined date types and date display types should fulfil your requirements. If this is not the case, you can use CUSTOM date type and set customDateFormat manually.

customDateFormat uses date format syntax defined by java.text.SimpleDateFormat. Refer to java.text.SimpleDateFormat for detail.

allowsYieldFocusIfInvalid property (boolean)

This property is used to specify whether or not to allow to loss focus when data in text field is invalid. When allowsYieldFocusIfInvalid is false, switching focus is not allowed if data is invalid.

JSxMaskTextField

JSxMaskTextField is used for displaying text in a specific mask format and controlling users to input valid data.

JSxMaskTextField is normally used to input phone number, zip/postal code, ip address and data that have specific format. See the following picture for example of mask text fields:

JSxMaskTextFields

maskFormat property (String)

maskFormat is the format used to format and verify data. Its syntax is defined by javax.swing.text.MaskFormatter. Refer to javax.swing.text.MaskFormatter for detail.

For example, for phone number format, '(###)####-####' format text can be used; for ip address format, '***.***.***.***' format text can be used. Note that '#' means allow any digit number, '*' means allow any character. For ip address input, space and 1 to 9 characters are allowed only. This can be done by using validCharacters property. Therefore for ip address input, we should set validCharacters to ' 0123456789' too.

validCharacters property (String)

Allows for further restricting of the characters that can be input. Only characters specified in the mask, not in the invalidCharacters, and in validCharacters will be allowed to be input. Passing in null (the default) implies the valid characters are only bound by the mask and the invalid characters.

invalidCharacters property (String)

Allows for further restricting of the characters that can be input. Only characters specified in the mask, not in the invalidCharacters, and in validCharacters will be allowed to be input. Passing in null (the default) implies the valid characters are only bound by the mask and the valid characters.

valueContainsLiteral property (boolean)

If valueContainsLiteral is false, value string returned by JSxMaskTextField does not contain literal characters.

placeholder property (String)

placeHolder is used to use fill value does not completely fill in the mask. A null value implies the placeholder char should be used.

placeholderChar property (char)

placeholderChar is the character that used to place of characters that are not present in the value.

This is only applicable if the placeholder string has not been specified, or does not completely fill in the mask.

allowsYieldFocusIfInvalid property (boolean)

This property is used to specify whether or not to allow to loss focus when data in text field is invalid. When allowsYieldFocusIfInvalid is false, switching focus is not allowed if data is invalid.

JSxCalendarPane

JSxCalendarPane is used to display date in calendar like view. JSxCalendarPane has many customizable properties to customize its look and feel behaviour. See the following calendar picture with background image set:

JSxCalendarPane

We are not going to explain JSxCalendarPane properties in this document, most of them are used to set calendar pane look and feel behaviour. Refer to Simprit Swing JavaDoc for detail.

JSxDatePicker

JSxDatePicker is a date text field with popup calendar for user to select date from calendar view interface.

JSxDatePicker has all JSxDateTextField properties and additional properties like editable and icon. See the following picture:

JSxDatePicker

editable property (boolean)

editable is used to specify if user is allowed to input through date editor. If editable is false, user is not allowed to input text through date editor and date editor look and feel like disabled. Date input can only be selected from popup calendar. See the following picture:

JSxDatePicker (not editable)

icon property (Icon)

This icon is used to render popup calendar trigger button's icon. You can provide custom icon to overwrite default icon set by UI delegate.

JSxComboBox

JSxComboBox extends from JComboBox and adds new features to improve user input.

selectWhenFocus property (boolean)

Select all text when JSxComboBox gains focus. This feature is helpful for data input. In case of combo box is not editable, this setting has no effect.

Improved key selection algorithm

This feature is to make efficient selection from item list based on user input text. For example, when user type 'fast' in a short period of time, 'fast' or closer match text in the item list should be selected.

JSxLinkButton

JSxLinkButton is a kind of button that has hyperlink look and feel. When it's clicked, native browser will be launched with url that has been set. See the following screen:

JSxLinkButton

Developer can customize JSxLinkButton's look and feel, like underline style, link color, active link color, hover link color, visited link color and disabled link color, by setting its properties. Each of them is described in the followng sections.

URL

If URL property is set, native Internet browser will be launched with the set url. This and URLString property can be used interchangeably, URL is type of URL, whereas URLString is type of String.

URLString

If URLString property is set, native Internet browser will be launched with the set url. This and URL property can be used interchangeably, URLString is type of String.

text

If text property is set, link button displays this text instead of url text.

activeLinkColor

Active link color is the color used to render link text when the link is active (focus).

disabledLinkColor

Disabled link color is the color used to render link text when the link is disabled.

hoverLinkColor

Hover link color is the color used to render link text when mouse hovers over the link.

linkColor

Link color is the color used to render link text.

visitedLinkColor

Visited link color is the color used to render link text when the link has been visited before.

linkUnderlineStyle

Supported link underline style are:

  • ALWAYS_UNDERLINE_STYLE - Link is always underline.
  • NEVER_UNDERLINE_STYLE - Link is never underline.
  • HOVER_UNDERLINE_STYLE - Link is underline when mouse hovers.
  • ACTIVE_UNDERLINE_STYLE - Link is underline when active/focus.
  • HOVER_OR_ACTIVE_UNDERLINE_STYLE - Link is underline when active or mouse hovers.

linkVisited

This property is a status to indicate whether a link has been visited or not.

Localization

We have internationalized text and messages used in Simprit Swing, therefore you can localize text and messages by providing your resource bundle file.

Simprit Swing's resource bundle file is located at com/simprit/swing package with name Bundle.properties. You can put your resource bundle file at com/simprit/swing package in your own jar file.

For example, let's say you want to localize text and messages in German language. You can use Bundle.properties as a template, rename it to Bundle_de.properties and change its content according to your need. When you build your own jar file, include Bundle_de.properties into the jar file at com/simprit/swing package.

Keyboard Navigation Quick Reference
JSxButton
  • 'Space'/'Enter' to perform default action.
  • 'Down' to show drop down menu.
  • 'Escape' to hide drop down menu.
JSxCalendarPane
  • Arrow keys ('Up', 'Down', 'Left' and 'Right) are used to move day label focus.
  • 'PageUp' to move to next month view and 'PageDown' to move to previous month view.
  • 'Space'/'Enter' to make selection.
JSxDatePicker
  • 'Alt Down' to show popup calendar.
  • 'Escape' to hide popup calendar if popup calendar is shown. If popup calendar is not shown, it is to cancel date input.
  • When popup calendar is shown, JSxCalendarPane keyboard navigation is applicable.