User interfaces User interfacesexercise Jan Gaura [email protected] A1037 +420 597 323 068.
29
User interfaces User interfaces exercise exercise Jan Gaura Jan Gaura jan.gaura jan.gaura @vsb.cz @vsb.cz A1037 A1037 +420 597 32 +420 597 32 3 3 06 06 8 8
-
Upload
destin-kessell -
Category
Documents
-
view
226 -
download
0
Transcript of User interfaces User interfacesexercise Jan Gaura [email protected] A1037 +420 597 323 068.
User interfacesUser interfaces exerciseexercise
Jan GauraJan Gaura [email protected]@vsb.cz
A1037A1037+420 597 32+420 597 3233 06 0688
Basic informationBasic information
Web site: http://barborka.vsb.cz/nemec/
Conditions to acquire classified credit:
• comletion of all examples from exercises
(there are about 5 easy examples) • hand over first credit exercise
TCL/TK environment• hand over second credit exercise
Java or C++ environment
PointsPoints
points minimum points
Project I (including discussion)
realization GUI in Tcl/Tk40 20
Project II (including discussion)
realization GUI in C++(Qt), Java
(Swing)
40 20
Presence and completion of
examples during exersizes20 10
Activity … …
ProjectsProjects
The goal of our projects is to show that you're able to create “good“ looking ures interface following the rules presented during recitations.
Project should demonstrate a user interface designed by you (program doesn't have to work properly, GUI matters)
Project should contain three larger windows at minumum that contain proper types of objects.
(checkbutton, frame, tabnotebook, etc.)
ProjectsProjects
Suppose, We have ready to use library of functions for our project already, now We just have to create a proper user interface.
Steps in creation:
Design of the GUI (pen and paper) - till 3rd week Creation of the GUI in TCL/TK - till 6th weekCreation of the GUI in Java (swing) or C++ (Qt)
- till credit week
TCL/TKTCL/TK
Author John Ousterhout (eighties of last century)
TCL - Tool Command Language TK - GUI toolkit
interpreted programming language
specialized for easy and fast creation of prototype applications, design of GUIs
possible to embedd into other applications
TCL/TKTCL/TK
No commands for loops
Able to change source code during runtime
Untyped language (the only type fo vasiable – string)
Even though there are applications already written large applications in TCL/TK, it's often used in combination with other languages (C, C++)
InstallationInstallation
• http://www.tcl.tk/
TCL/TK Sources
ActiveTcl 8.5.1.x
http://www.activestate.com/– Windows 18.1 MB– Documentation 3 MB
http://barborka.vsb.cz/~vla100
DocumentationDocumentation
http://www.tcl.tk/man/http://www.tcl.tk/man/tcl8.5/tutorial/tcltutorial.html
TCL/TK Podrobný průvodce programátoraZdzislaw WrzeszczComputer Press
Programovací jazyk TCL Pavel Tišnovskýhttp://www.root.cz/serialy/programovaci-jazyk-tcl/
FamilirizationFamilirization
• All the tools for creating the GUI works in the way that the interface is constructed from predefined components that are in the used library. We'll see many of them.
• So: to learn how to create a GUI, means to understand generic and still the same principle and later use manual for a concrete tool (We'll try to help you).
Main construction of the languageMain construction of the languagecommand argument1 argument2 …
Example:
set varName ?value?; # variable assignment
set name Jan; # $name=„Jan“
public static string jmeno = "Jan“;
set address "tenth floor"; # $address=„tenth floor“
puts $name; # print variable
set is assignment command.
One word strings doesn't need apostrophes.
Starting with TCL/TKStarting with TCL/TK
Start a console of TCL/TK (Start Wish85). Test basic commands (use help) Useful for testing
Basic commandsBasic commands
set title „VSB-TU Ostrava“; # note
puts $title
puts "\n \" and \{ $title“
puts “Long strings or commands \
can be written on more lines"
Mathematic computations
set x 1
expr { $x+1 }
expr { $x>0? ($x+1) : ($x-1) }; # If-then-else
Mathematic computationsMathematic computations
abs cosh log sqrt
acos double log10 srand
asin exp pow tan
atan floor rand tanh
atan2 fmod round wide
ceil hypot sin
cos int sinh
expr {round (rand()*100)} ; # numbers 0-100
set x [expr {round (rand()*100)}]; # [ ] – nested command
puts "You have $x point from the URO course" [email protected]
Grafical components (button)Grafical components (button)
Let's begin easily woth creation of a button
button .b -text Tlačítko; # button definition
Only definition is not enough. To display it on the screen, we have to show it with one of the commands (pack, grid).
pack .b; # draw object on the screen
Grafical components - packGrafical components - pack
button .b1 -text Tlačítko1
button .b2 -text Tlačítko2
button .b3 -text Tlačítko3
button .b4 -text Tlačítko4
pack .b1 -side left
pack .b2 -side right
pack .b3 -side top
pack .b4 -side bottom
Grafical components - comparisonGrafical components - comparison
pack .b1 -side left
pack .b2 -side right
pack .b3 -side top
pack .b4 -side bottom
pack .b1 -side bottom
pack .b2 -side bottom
pack .b3 -side left
pack .b4 -side left
destroy .b1; #remove the [email protected]
Grafical components - gridGrafical components - grid
grid .b1 -row 1 -column 5
grid .b2 -row 4 -column 2
grid .b3 -row 3 -column 3
grid .b4 -row 0 -column 3
grid .b1 -row 1 -column 0
grid .b2 -row 0 -column 0
grid .b3 -row 0 -column 1
grid .b4 -row 1 -column 20
Grafical components – frameGrafical components – frameframe .f
button .b1 -text Tlačítko1
button .b2 -text Tlačítko2
button .f.b1 -text Tlačítko3
button .f.b4 -text Tlačítko4
pack .b1 -side bottom
pack .f -side left
pack .b2 -side left
grid .f.b1 -row 2 -column 1
grid .f.b4 -row 1 -column 0
Grafical componentsGrafical components
Set up window manager
wm title . "Test"; #window title
wm resizable . 1 0; #resizable on axes x,y
wm maxsize . 400 100
wm minsize . 200 20
wm geometry . =300x40
label .l -text "Demonstrace wm" ;pack .l
Grafical components - procedureGrafical components - procedure
With the help of the command proc, we can define a procedure. Ofter the keyword proc, there are input parameters of the procedure (if the are none, parenthesis is left empty). After the parameters, the body of the procedure follows.
label .l; pack .lset x "popisek"proc nastavPopisek {vstup} {
global .l
.l configure -text "Tady je $vstup."}
nastavPopisek $x [email protected]
Common mistake is to
forget this space
Grafical elements - examplesGrafical elements - examples
label .p -text "©2008 URO";pack .p
entry .v; pack .v
text .t -width 20 -height 4; pack .t
frame .f ; pack .f
labelframe .l -text "labelFrame"
pack .l
checkbutton .l.c -text "checkButton"
pack .l.c
radiobutton .l.r -text "radioButton"
pack .l.r
listbox .lb -height 4; pack .lb
Grafical components - demosGrafical components - demos
For better understanding, we have created some easy examples for some selected components.
Příklady_TclTk.zip
Options during codingOptions during coding
If there are variables set in the OS, it should be enough to double click on the file with tcl extension.
You can use console of the TCL/TK (wish85) environment.
Using editor, in our case free editor PSPad that can highlight TCL syntax.
Using PSPadUsing PSPad
You can set compiler in menu (Projekt-Nastavení projektu) in tab Kompilátor to wish85 and parameter name of the edited file. Then you can run the script by pressing CTRL+F9.
Practical taskPractical task
If you have enough time, try to create an easy example to compute roots of the quadratic equation.
Design the app according to your feeling.
You can use the template
Complete the interface and Complete the interface and computation.computation.
Thank you for your attention.Thank you for your attention.
