REBOL GUI how to Guide PDF
Preview REBOL GUI how to Guide
How 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:
The list of books you might like
