Bin-Co > Tcl/Tk > Tcl/Tk Tutorial - Create GUI using Tk with Tcl Language > Frame, Text, Scrollbar, Scale

Previous
Button, Entry, Label

Next
Radiobutton, Checkbutton

Tcl/Tk Tutorial - Create GUI using Tk with Tcl Language
Frame, Text, Scrollbar, Scale

Widgets 2 : Frame, Text, Scrollbar, Scale

A frame is a simple widget. Its primary purpose is to act as a spacer or container for complex window layouts. The only features of a frame are its background color and an optional 3-D border to make the frame appear raised or sunken.

Some Options

-relief STYLE

Specifies the 3-D effect desired for the widget. Acceptable values are raised, sunken, flat, ridge, solid, and groove. The value indicates how the interior of the widget should appear relative to its exterior; for example, raised means the interior of the widget should appear to protrude from the screen, relative to the exterior of the widget.

Example


proc push_button {} {
	.ent insert 0 "Hello "
}
frame .frm -relief groove
label .lab -text "Enter name:"
entry .ent
button .but -text "Push Me" -command "push_button"
pack .lab -in .frm
pack .ent -in .frm
pack .frm
pack .but

A text widget displays one or more lines of text and allows that text to be edited. Similar to the entry widget but a larger version of it.

Some Options

-xscrollcommand COMMAND	This is to enable communication between a text widget and a scrollbar widget. There is a -yscrollcommand similler to this one.
-font FONTNAME	Specifies the font to use when drawing text inside the widget.
-width NUMBER	Specifies the width of the widget
-height NUMBER	Specifies the, you guessed it, height of the widget

Syntax	Description	Example
path get index1 ?index2 ...?	Return a range of characters from the text. The return value will be all the characters in the text starting with the one whose index is index1 and ending just before the one whose index is index2 (the character at index2 will not be returned). If index2 is omitted then the single character at index1 is returned. Note that the index of text is different from that of the entry widget. The index of text widget is in the form LINE_NO.CHARECTER_NO. This means that 1.0 means the first character in the first line.	set contents [.txt get 1.0 end]
path insert index DATA	Inserts all of the chars arguments just before the character at index. If index refers to the end of the text (the character after the last newline) then the new text is inserted just before the last newline instead.	.txt inset end "Hello World"

Example


proc push_button {} {
	set name [.ent get]
	.txt insert end "Hello, $name."
}
frame .frm -relief groove
label .lab -text "Enter name:"
entry .ent
button .but -text "Push Me" -command "push_button"
text .txt -width 20 -height 10
pack .lab -in .frm
pack .ent -in .frm
pack .frm
pack .but
pack .txt

A scrollbar is a widget that displays two arrows, one at each end of the scrollbar, and a slider in the middle portion of the scrollbar. It provides information about what is visible in an associated window that displays an document of some sort (such as a file being edited or a drawing). The position and size of the slider indicate which portion of the document is visible in the associated window. For example, if the slider in a vertical scrollbar covers the top third of the area between the two arrows, it means that the associated window displays the top third of its document. It is made to work with other widgets like text. Some Options

-orient DIRECTION	For widgets that can lay themselves out with either a horizontal or vertical orientation, such as scrollbars, this option specifies which orientation should be used. DIRECTION must be either horizontal or vertical or an abbreviation of one of these.
-command COMMAND	This command gets executed when the scrollbar is moved. This option almost always has a value such as .t xview or .t yview, consisting of the name of a widget and either xview (if the scrollbar is for horizontal scrolling) or yview (for vertical scrolling). All scrollable widgets have xview and yview commands that take exactly the additional arguments appended by the scrollbar.

Example


proc push_button {} {
	set name [.ent get]
	.txt insert end "Hello, $name."
}
frame .frm -relief groove
label .lab -text "Enter name:"
entry .ent
button .but -text "Push Me" -command "push_button"
frame .textarea
text .txt -width 20 -height 10 \
	-yscrollcommand ".srl_y set" -xscrollcommand ".srl_x set"
scrollbar .srl_y -command ".txt yview" -orient v
scrollbar .srl_x -command ".txt xview" -orient h
pack .lab -in .frm
pack .ent -in .frm
pack .frm
pack .but
grid .txt   -in .textarea -row 1 -column 1
grid .srl_y -in .textarea -row 1 -column 2 -sticky ns
grid .srl_x -in .textarea -row 2 -column 1 -sticky ew
pack .textarea

As you can see I have used 'grid' here. Grid is NOT a widget. It is a geometry manager like pack but more advanced. Lets take a closer look at the commands -
grid .txt -in .textarea -row 1 -column 1
This line will tell the interpreter to put the widget called '.txt' in the widget called '.textarea'(That is a frame, remember?). It will be put in the first column of the first row. The below digram will help you understand.

	Column 1	Column 2
Row 1	'.txt' widget will be here	'.srl_y' widget's place
Row 2	'.srl_x' widget's position.

Some Options

-sticky STYLE	This option may be used to position (or stretch) the widget within its cell. STYLE is a string that contains zero or more of the characters n, s, e or w. Each letter refers to a side (north, south, east, or west) that the slave will "stick" to. If both n and s (or e and w) are specified, the slave will be stretched to fill the entire height (or width) of its cavity.
-in MASTER	The widget will be put in the MASTER widget.
-ipadx AMOUNT	The AMOUNT specifies how much horizontal internal padding to leave on each side of the slave(s). This is space is added inside the slave(s) border.
-ipady AMOUNT	The AMOUNT specifies how much vertical internal padding to leave on each side of the slave(s). Options same as -ipadx
-padx AMOUNT	The amount specifies how much horizontal external padding to leave on each side of the slave(s), in screen units. AMOUNT may be a list of two values to specify padding for left and right separately.
-pady AMOUNT	The amount specifies how much vertical external padding to leave on the top and bottom of the slave(s), in screen units. Options same as -padx.
-row N	Insert the slave so that it occupies the Nth row in the grid. Row numbers start with 0. If this option is not supplied, then the slave is arranged on the same row as the previous slave specified on this call to grid, or the first unoccupied row if this is the first slave.
-column N	Insert the slave so that it occupies the N'th column in the grid. Options same as -row
-rowspan N	Insert the slave so that it occupies N rows in the grid. The default is one row.
-columnspan N	Insert the slave so that it occupies N columns in the grid.

Using grid requires a bit of experience - but if you know HTML it would help a lot. The rows and columns are just like those in HTML tables - although the codes are very different.

Makes a slider that can be adjusted by the user to input a variable.

Some Options

-from NUMBER	Starting Number
-to NUMBER	Ending Number
-tickinterval NUMBER	Determines the spacing between numerical tick marks displayed below or to the left of the slider.
-varable NAME	Specifies the name of a global variable to link to the scale. Whenever the value of the variable changes, the scale will update to reflect this value. Whenever the scale is manipulated interactively, the variable will be modified to reflect the scale's new value.

Syntax	Description	Example
path get	Get the current value of the scale	set age [.scl get]
path set value	Give the scale a new value.	.scl set 20

Example


#This function will be executed when the button is pushed
proc push_button {} {
	global age
	set name [.ent get]
	.txt insert end "Hello, $name.\nYou are $age years old."
}

#Global Variables
set age 10

#GUI building
frame .frm -relief groove
label .lab -text "Enter name:"
entry .ent
button .but -text "Push Me" -command "push_button"
#Age
scale .scl -label "Age :" -orient h -digit 1 -from 10 -to 50 \
	-variable age -tickinterval 10
#Text Area
frame .textarea
text .txt -yscrollcommand ".srl_y set" -xscrollcommand ".srl_x set" \
	-width 20 -height 10
scrollbar .srl_y -command ".txt yview" -orient v
scrollbar .srl_x -command ".txt xview" -orient h

#Geometry Management
pack .lab -in .frm
pack .ent -in .frm
pack .frm
pack .scl
pack .but
grid .txt   -in .textarea -row 1 -column 1
grid .srl_y -in .textarea -row 1 -column 2 -sticky ns
grid .srl_x -in .textarea -row 2 -column 1 -sticky ew
pack .textarea

Now our little example is becoming more and more like a program. We have added the comments to it as it has grown big and is difficult to understand. Now we have added a slider with which age can be inputed. You may have also noticed that an new line 'global age' is added. It is not the aged of the earth or the age of every human being combined. It says that the variable 'age' should be taken from the global scope to the scope of the function.

Previous
Button, Entry, Label

Next
Radiobutton, Checkbutton

Contents

Comments

nikos at 27 Apr, 2007 07:38

could you put a demo?