Table Of ContentHow to Create and Use Text Fields
Part of: How-To
Revised: 1-Feb-2010
Original: 8-June-2001
Contents
How to Run the Examples
Creating Text Fields
Built-in Styles
Field
Area
Info
Custom Fields
Fonts
Colors
Focus Color
Edges
Images and Effects
Use Styles!
Using Text Fields
Getting Input from Fields
Using Action Values
Using Face Variables
Finding Fields By Style Name
Changing Fields
Clearing All Fields
Updating Fields
Setting the Focus
Hidden Fields
Predefined Request Fields
Request-Text
Request-Pass
Additional Documents
How to Run the Examples
To run any of the examples shown below, use a text editor to create a REBOL header such as:
REBOL [Title: "Example"]
Then simply cut the example text and paste it after this line. Save the text file and give it a name, such as
example.r. Then run the file just as you would run any REBOL file.
Creating Text Fields
Similar to all other VID user interface styles, text fields are defined with LAYOUT and displayed with the
VIEW function.
Built-in Styles
There are three predefined text field styles:
field Used for single line input. The return and tab keys will terminate text entry and
advance to the next field.
area Used for multiline input of paragraphs or single lines. Text can be wrapped or not.
info Used for displaying non-editable text.
These styles all use the same face attributes to specify how they appear and operate.
Field
Here's how to create a few basic fields. These examples just display the fields. Later you will see how to
obtain the input text from fields or modify their contents.
Here's a basic one line program that displays a text input field:
view layout [field]
When executed, it will display:
All of the attributes of the field are predefined, including the color, edge, and size. By default the size is
200x24.
See the REBOL/View documentation for descriptions of the VIEW and LAYOUT functions.
For the remaining examples, the VIEW and LAYOUT functions are not shown, but all of these examples are
functional and can be run by placing them within a block as shown below:
view layout [
(example)
]
To display default text in a field, supply the text as a string after the FIELD style:
field "Text here"
This appears as:
The pixel widths of fields can be specified:
field 80 "Short"
field 480 "Much wider field"
which result in:
Both the width and height of fields can be specified with a pair:
field 100x18 "Short"
field 100x48 "Tall"
This displays as:
Here is an example input form that uses three fields and provides labels for the fields:
style lab label right 60x24
across
lab "Name:" field return
lab "Email:" field return
lab "Phone:" field return
lab
space 0
button "Enter"
button "Cancel"
Note that the empty LAB line is a simple technique to force the buttons to be indented by the same amount
as the fields.
The result is:
As you type into the fields, pressing a tab or a return will hop to the next field. Pressing a CTRL-tab will hop
back to a prior field.
In a later section you will see how to grab the contents of these fields.
Area
Areas are similar to fields but are designed for text paragraphs that require multiple lines.
Here is the default area style:
view layout [area]
This displays a large empty text input box:
The default size for an area is 400x150, as shown above.
To provide default text input for an area, you can write:
area "Text input goes here."
This will appear as:
You can specify the size of the area with a pair such as:
area 150x50 "A small area"
This area would appear as:
The text of an area can come from any source. For instance, you can read a file and display its text in an
area:
area 400x400 read %fields.txt
This produces a large area that shows the text source to this document.
In a similar fashion you can read a URL, such as the source to a web page or an online text document, by
putting the URL in place of the file name above. Try it, but be sure to remove the % for URLs.
area 400x400 read http://www.rebol.com
If the area is to narrow for the next, by default the text does not wrap. To force text to wrap, you can use the
WRAP attribute:
area 200x400 wrap read %fields.txt
This results in:
The opposite of WRAP is AS-IS, which is the default.
Here is an example input form that uses fields and areas:
style lab label right 60x24
across
lab "Program:" field return
lab "Purpose:" area return
lab "Notes:" area return
lab
button "Enter"
button "Cancel"
The result is:
In a later section you will see how to grab the contents of these fields.
Info
The info style is similar to a field, but does not allow text editing. It is used for displaying static fields for
information purposes only. The example:
info "Only displays text"
will display
It can be sized in the same way as the field examples above.
Custom Fields
All of the attributes that apply to other types of view faces also apply to fields. You can change their fonts, the
color of their text or their background, change their edges, use special effects, etc.
Keep in mind that even though the fields appear different, all custom fields are editable in the same way as
any other text field.
Fonts
The standard face font settings can be applied to fields.
You can change the font style with:
field "Plain text"
field "Bold text" bold
field "Italic text" italic
field "Bold, italic, underlined" bold italic underline
Or, change the font itself:
field "Sans serif font (default)" font-name font-sans-serif
field "Serif font like Times" font-name font-serif
field "Fixed width font" font-name font-fixed
Any size font can be used within a field.
field 200x18 "Small text" font-size 9
field 200x44 "Big text" font-size 32
And, the field can be aligned in various ways:
field "Left aligned" left
field "Centered" center
field "Right aligned" right
field 200x32 "Top aligned" top
field 200x32 "Middle aligned" middle
field 200x32 "Bottom aligned" bottom
Colors
The color of the field area behind the font can be changed. This is the same rule as used for buttons, not the
rule used for text. Just provide a color:
field "This is red" red
field "This is purple" purple
field "This is greenish" 80.180.120
To change the text color itself, you must change the font color setting, as in:
field "This is red text" font-color red
field "This one stands out" black font-color white
field "Hot field here" bold black font-color red
To completely eliminate the color of the field area:
field "No backdrop area" colors none
But, don't mix this up with an INFO style. This style can still be edited.
Focus Color
The focus color is the color of the box area when it is currently selected. The default is yellow. You can
override that default by defining the secondary color of the face. For example:
field "No highlight color" colors [240.240.240 240.240.240]
will produce a field:
that will not turn yellow when you click on it.
Note that the colors must be specified as tuples. The block is not evaluated, so if color variables (e.g. white,
red) are used, you must reduce the block first:
field "Light blue highlight color" colors reduce [white sky]
Edges
You can change the size, color, and effect of the surrounding field edges.
For example, here are a few edge size variations:
field "Normal edge"
field "Thin edge" edge [size: 1x1]
field "Thick edge" edge [size: 3x3]
field "Really thick edge" edge [size: 4x4]
field "No edge at all" edge none
The edges can be uneven in their dimensions:
field "Thick on top and bottom" edge [size: 2x4]
field "Thick on sides" edge [size: 4x2]
Sometimes you need to create a field that has no edges or background:
