XML Tutorial Edit Control, Text Edit Field
Version 1.6

This is the archives. For the latest Bambookit GUI 2.0, XML GUI Demos & Tutorials visit: www.bambookit.com/_demo.html

Bamboo Suite Edit control/component can be used in web applications or as an applet add-on to enhance a web page. It is a customizable input field with rich rendering possibilities. Edit control allows to create a text input element. Edit is a text entry field. This field allows user to enter a single word or a line of text. Default size of Edit is 80 pixels wide and height is 25 pixels, but you can set it any length using the setSize or setShape properties of Edit control.

The user can type an unlimited number of characters into the field, but you can set the maximum number of characters using setLabelLength property.

As user types unlimited number of characters in preset width of Edit control, the "dor crop" feature in Edit control is engaged. What is not evident right away is the "dot crop" feature. The best way to describe it is by demonstrating it in action. Select an edit control and start typing away. Once the text exceeds the edit controls width the text gets cropped by two dots. Upon scrolling the other way, the text on the opposite end of the edit control gets cropped. You should never encounter a situation where your text characters are sliced in half, not only does this look ugly and unprofessional, it is not intuitive.

Selection is applied to the text in the Edit control. You can drag select text with the mouse or keyboard controls. Using a mouse, and left click and drag, reaching the end of a left aligned 'cropped' text, the edit control would automatically begin scrolling the 'cropped' text into view.

Focus is always set whenever user clicks in the Edit control. When an edit control gains focus, a thin blue line is drawn around the control. Note: The edit control's size does NOT decrease, that is counter intuitive. Expectations that a selected/focus item is brought to the foreground by both adding color or adding to the size of the control. (Note: Disabled items are not highlighted).

Numeric property allows to set Edit to accept only numeric values, as it is displayed in the last edit on the left. Try to type in this field not numeric values, and you will find that edit field refuses to accept them.

Bamboo Suite Edit offers wide range of colors for background and foreground, and opaque to set a Edit's transparency. Background and Foreground colors and highlights can be configured to be set to any 6 digit hexadecimal (RGB) value.

Edit's border choices are: none, flat, squareraised, squarelowered, roundraised, roundlowered, roundraisedthin, roundloweredthin, squareraisedthin, squareloweredthin, text groove, ridge.

Edit control can contain a text with cutomizable font's size and style, colors, alignment. The Fontname can be configured as Serif, Sanssserif, or monospaced. Fontstyle can be configured as Bold, Italic, Plain, Bolditalic, Underline. The point size can be set from 6 tp 120.

Edit can be aligned right, left, center, bottomright, bottomleft, topright, topleft.

Another property is positioning of the Caret, when you are telling the user where to start typing in the Edit field.

Read-only property will disable typing abilities of the Edit.

setPassword property set to True will allow asterix charachters in the Edit control to be displayed.

Opaque is used to set the Edit's transparency, if opaque is set to 'false', then the elements behind the Edit are visible, as it is demonstrated on the left. You can use this feature set the transparency of your Edits if you want the images on your background to be seen through this Edit.

The Edit control can be enabled/disabled and set visible/invisible.

All Bamboo Suite controls allow Focus traversable feature to be applied. This sets whether or not when you can cycle through this particular focusable widget (by pressing the tab / shift-tab key). If false then you cannot set focus to this widget through the keyboard interface. Examples of widgets that are not focus traversable is scrollbars and progressbars. Pressing the Tab key cycles through the fields in an order determined by your application, and Shift-Tab navigates in the opposite direction. Typically, the sequence is from left to right, then from top to bottom. Pressing Tab from the last field selects the first field.

Cacheable views get activated through setCache property. When loading gui's, this option caches the views if set to 'True, including previously entered data in the fields.

On the left, the navigation tree is provided to easily search though Bamboo Suite controls (if the tree is not displayed click on the Tutorial link below). The tree represents the contents of the Tutorial for Bamboo Suite. The main topics appear under collapsed folder icon. Collapsed folder icon is also an indication that there are more files available under collapsed folder. The expanded folder implies that there are no more files under this item. Clicking on the collapsed/expanded folder icon will open/close items in the tree node. Clicking on the tree item will open the requested topic in the main window.

Most of the topics contain live applet examples along with the property description, HTML source and XML source.

[Home][Tutorial] [Demo]

Shape Borders Fonts & Colors Other