Computer Science 111 Fundamentals of Programming I

Slides:



Advertisements
Similar presentations
Computer Science 112 Fundamentals of Programming II User Interfaces
Advertisements

Chapter 8 Improving the User Interface
Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.
Tutorial 6 Creating a Web Form
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Basic HTML. Guide to HTML code Not case sensitive Use tag for formatting output: new line, paragraph, text size, color, font type, etc. Can be a single.
Chapter 7 Improving the User Interface
Computer Science 111 Fundamentals of Programming I User Interfaces Introduction to GUI programming.
Tutorial #9 – Creating Forms. Tutorial #8 Review – Tables Borders (table, gridlines), Border-collapse: collapse; empty-cells: show; and rowspan, colspan.
Microsoft Visual Basic 2005 CHAPTER 5 Mobile Applications Using Decision Structures.
Forms Sangeetha Parthasarathy 02/05/2001. Introduction to Forms A form makes it possible to transform your web pages from text to graphics to interactive.
Guide to Programming with Python Chapter Ten GUI Development: The Mad Lib Program.
Lecture # 6 Forms, Widgets and Event Handling. Today Questions: From notes/reading/life? Share Personal Web Page (if not too personal) 1.Introduce: How.
Computer Science 112 Fundamentals of Programming II Graphics Programming.
Computer Science 111 Fundamentals of Programming I Model/View/Controller and Data model design.
Computer Science 112 Fundamentals of Programming II Command Buttons and Responding to Events.
1 Computer Science of Graphics and Games MONT 105S, Spring 2009 Session 20 Graphical User Interface (GUI)
Python Programming Graphical User Interfaces Saad Bani Mohammad Department of Computer Science Al al-Bayt University 1 st 2011/2012.
Creating Graphical User Interfaces (GUI’s) with MATLAB By Jeffrey A. Webb OSU Gateway Coalition Member.
Applications Development
HTML Form Widgets. Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back.
Graphical User Interface You will be used to using programs that have a graphical user interface (GUI). So far you have been writing programs that have.
Forms Collecting Data CSS Class 5. Forms Create a form Add text box Add labels Add check boxes and radio buttons Build a drop-down list Group drop-down.
GUI development with Matlab: GUI Front Panel Components GUI development with Matlab: Other GUI Components 1 Other GUI components In this section, we will.
Copyright © 2015 Pearson Education, Inc. Publishing as Pearson Addison-Wesley C H A P T E R 13 GUI Programming.
Introduction To HTML Form Inputs Written By George Gimian.
VAT Calculator program Controls Properties Code Results.
Basic HTML.
Guide to Programming with Python
Data Types and Conversions, Input from the Keyboard If you can't write it down in English, you can't code it. -- Peter Halpern If you lie to the computer,
Visual Basic.NET Comprehensive Concepts and Techniques Chapter 3 Building an Application in the Visual Basic.NET Environment.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved Student Grades Application Introducing Two-Dimensional Arrays and RadioButton.
20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML.
Microsoft Visual Basic 2012 CHAPTER FIVE Decision Structures.
Working with the Window Object JavaScript considers the browser window an object, which it calls the window object.
Tutorial 6 Creating a Web Form
HTML Structure II (Form) WEEK 2.2. Contents Table Form.
Computer Science 112 Fundamentals of Programming II Data Fields for I/O and Message Boxes for Error Recovery.
GUI’s.
Topics Graphical User Interfaces Using the tkinter Module
PYGAME.
Graphical User Interfaces (GUIs)
Computer Science 111 Fundamentals of Programming I
Section 64 – Manipulating Data Using Methods – Java Swing
Computer Programming I
CHAPTER FIVE Decision Structures.
My Final Project: Calorie Counter
Fundamentals of Programming I The Model/View/Controller Design Pattern
Computer Science 112 Fundamentals of Programming II GUIs II:
Chap 7. Building Java Graphical User Interfaces
Graphical User Interfaces -- Introduction
Fundamentals of Python: From First Programs Through Data Structures
HTML Forms and User Input
Objectives Explore web forms Work with form servers
Creating a Workbook Part 2
CHAPTER FIVE Decision Structures.
Tkinter GUIs Computer Science and Software Engineering
Variables and Arithmetic Operations
Fundamentals of Python: First Programs Second Edition
CSc 110, Spring 2018 Lecture 9: Parameters, Graphics and Random
In Class Programming BIS1523 – Lecture 11.
Fundamentals of Programming I Windows, Labels, and Command Buttons
Computer Science 111 Fundamentals of Programming I Text Areas
Computer Science 111 Fundamentals of Programming I User Interfaces
Additional Topics in VB.NET
Fundamentals of Programming I The Model/View/Controller Design Pattern
Topics Graphical User Interfaces Using the tkinter Module
Chapter 7 Event-Driven Pages
What is a Function? Takes one or more arguments, or perhaps none at all Performs an operation Returns one or more values, or perhaps none at all Similar.
Presentation transcript:

Computer Science 111 Fundamentals of Programming I Organizing Widgets with Panels Data Fields for I/O Message Boxes for Error Recovery

One Background or Two?

Problems If all the widgets go directly in the window, they must have only one common background They’re all in the same grid, but we might want different subgrids for different groups of widgets in the same window

Solution: Use Panels A panel is a blank rectangular area within a window A panel is added to the window’s grid, like other widgets Other widgets, including other panels, are then added to the panel

class FrenchFlag(EasyFrame): """Displays the French flag in the window.""" def __init__(self): """Sets up the window and the panels.""" EasyFrame.__init__(self, title = "French Flag", width = 300, height = 200) self.addPanel(0, 0, background = "blue") self.addPanel(0, 1, background = "white") self.addPanel(0, 2, background = "red"))

In CounterDemo: def __init__(self): """Sets up the window, label, and buttons.""" EasyFrame.__init__(self, title = "Counter", background = "lightblue") self.count = 0 self.label = self.addLabel(text = str(self.count), row = 0, column = 0, sticky = "NSEW", columnspan = 3, buttonPanel = self.addPanel(1, 0, background = "pink") buttonPanel.addButton(text = "Previous", command = self.previous) buttonPanel.addButton(text = "Reset", row = 0, column = 1, command = self.reset) buttonPanel.addButton(text = ”Next", row = 0, column = 2, command = self.next)

About Panels Each panel has its own grid, independent of the enclosing window or panel’s grid Any type of widget that can be placed in a window can be placed in a panel Panels can be nested to any depth

A Mythical Tax Code All incomes are taxed at a single flat rate, say, 15% Each family member receives an exemption amount, say, $3500 tax = max(0.0, (income - exemptions * 3500) * 0.15) Inputs: income and number of exemptions Output: tax

TUI and Code print("Tax Calculator\n") RATE = .15 EXEMPTION_AMOUNT = 3500.0 income = float(input("Please enter your income: $")) exemptions = int(input("Please enter the number of exemptions: ")) tax = max(0.0, (income - exemptions * EXEMPTION_AMOUNT) * RATE) print("Your total tax is $%0.2f" % tax)

TUI vs GUI

Data Fields The IntegerField class is used for the I/O of integers only The FloatField class is used for the I/O of integers or floats Use addIntegerField and addFloatField, respectively

Attributes and Methods Field attributes value (the field’s initial numeric value) state (“normal” or “readonly”) width (20 columns for float fields, 10 for integer fields) precision (for float fields only, infinite by default) Field methods getNumber() returns the field’s value as a number setNumber(anIntOrFloat) resets the field’s value setPrecision(anInt) for float fields only

class TaxCode(EasyFrame): """Application window for the tax calculator.""" RATE = .15 EXEMPTION_AMOUNT = 3500.0 def __init__(self): """Sets up the window and the widgets.""" EasyFrame.__init__(self, title = "Tax Calculator") # Label and field for the income self.addLabel(text = "Income", row = 0, column = 0) self.incomeField = self.addFloatField(value = 0.0, row = 0, column = 1) # Label and field for the number of exemptions self.addLabel(text = "Exemptions", row = 1, column = 0) self.exField = self.addIntegerField(value = 0, row = 1,

class TaxCode(EasyFrame): """Application window for the tax calculator.""" RATE = .15 EXEMPTION_AMOUNT = 3500.0 def __init__(self): """Sets up the window and the widgets.""" EasyFrame.__init__(self, title = "Tax Calculator") . . . # The command button self.button = self.addButton(text = "Compute", row = 2, column = 0, columnspan = 2, command = self.computeTax) # Label and field for the tax self.addLabel(text = "Total tax", row = 3, column = 0) self.taxField = self.addFloatField(value = 0.0, row = 3, column = 1, precision = 2, state = "readonly")

class TaxCode(EasyFrame): """Application window for the tax calculator.""" RATE = .15 EXEMPTION_AMOUNT = 3500.0 def __init__(self): """Sets up the window and the widgets.""" EasyFrame.__init__(self, title = "Tax Calculator") . . . # The event handling method for the button def computeTax(self): """Obtains the data from the input fields and uses them to compute the tax, which is sent to the output field.""" income = self.incomeField.getNumber() exemptions = self.exField.getNumber() tax = max(0.0, (income - exemptions * TaxCode.EXEMPTION_AMOUNT) \ * TaxCode.RATE) self.taxField.setNumber(tax)

Input Errors: Number Out of Range

Error Recovery Check for inputs out of range Pop up a message box with a descriptive error message Continue to wait for new inputs

def computeTax(self): """Obtains the data from the input fields and uses them to compute the tax, which is sent to the output field. Responds with error message if inputs are invalid.""" income = self.incomeField.getNumber() exemptions = self.exField.getNumber() if income < 0 or exemptions < 0: self.messageBox("ERROR ALERT", "Income and number of exemptions must be >= 0") return tax = max(0.0, (income - exemptions * TaxCode.EXEMPTION_AMOUNT) \ * TaxCode.RATE) self.taxField.setNumber(tax)

Input Errors: Bad Digits

Trapping Exceptions Must use Python’s try/except statement When exception is trapped, pop up a message box with an error message try: <code that might raise an exception> except <exception type>: <recovery code>

Trapping an Exception def computeTax(self): """Obtains the data from the input fields and uses them to compute the tax, which is sent to the output field. Responds with error message if inputs are invalid.""" try: income = self.incomeField.getNumber() exemptions = self.exField.getNumber() if income < 0 or exemptions < 0: self.messageBox("ERROR ALERT", "Income and number of exemptions must be >= 0") return tax = max(0.0, (income - exemptions * TaxCode.EXEMPTION_AMOUNT) \ * TaxCode.RATE) self.taxField.setNumber(tax) except ValueError: self.messageBox("ERROR ALERT", "Inputs must be numbers")

Widgets for Text I/O A text field (class TextField) is used for the I/O of one-line strings A text area (class TextArea) is used for the I/O of multiple lines of text See the breezypythongui site for details

Check boxes and radio buttons For Wednesday Scrolling text areas Check boxes and radio buttons Prompter boxes Working with colors