Presentation is loading. Please wait.

Presentation is loading. Please wait.

User interfaces User interfacesexercise Jan Gaura A1037 +420 597 323 068.

Similar presentations

Presentation on theme: "User interfaces User interfacesexercise Jan Gaura A1037 +420 597 323 068."— Presentation transcript:

1 User interfaces User interfacesexercise Jan Gaura A1037 +420 597 323 068

2 Basic information Web site: 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

3 Points pointsminimum points Project I (including discussion)‏ realization GUI in Tcl/Tk 4020 Project II (including discussion)‏ realization GUI in C++(Qt), Java (Swing)‏ 4020 Presence and completion of examples during exersizes 202010 Activity ……

4 Projects 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, t abnotebook, etc.)

5 Projects

6 Projects 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 week  Creation of the GUI in Java (swing) or C++ (Qt)‏ - till credit week

7 TCL/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

8 TCL/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++)‏

9 Installation TCL/TK Sources ActiveTcl 8.5.1.x –Windows 18.1 MB –Documentation 3 MB

10 Documentation TCL/TK Podrobný průvodce programátora Zdzislaw Wrzeszcz Computer Press Programovací jazyk TCL Pavel Tišnovský

11 Help (TCL and TK)‏

12 Familirization 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).

13 Main construction of the language command 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.

14 Starting with TCL/TK  Start a console of TCL/TK (Start Wish85).  Test basic commands (use help)‏  Useful for testing

15 Basic 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

16 Mathematic 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"

17 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

18 Grafical 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

19 Grafical 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 object

20 Grafical 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

21 Grafical components – frame frame.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

22 Grafical 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

23 Grafical 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.l set x "popisek" proc nastavPopisek {vstup } { global.l.l configure -text "Tady je $vstup." } nastavPopisek $x Common mistake is to forget this space

24 Grafical 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 -height 4;

25 Grafical components - demos For better understanding, we have created some easy examples for some selected components. Pří

26 Options 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.

27 Using 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.

28 Practical 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

29 Complete the interface and computation. Thank you for your attention.

Download ppt "User interfaces User interfacesexercise Jan Gaura A1037 +420 597 323 068."

Similar presentations

Ads by Google