GUI – Part I
Event Programming
Types of Interfaces
• Physical
o Button pressed physically by the user
o Keyboard
o Mouse
o Touch Sensor
• GUI
o Graphical, User, Interface
o instead of the BORING command window, we can have user interact with our application
o event driven
▪ event-> an action that occurs when a user or preprogrammed parameter is executed
• user ( clicks on a button
• preprogrammed ( application shuts down after a certain amount of time
Threading
• a thread is the flow of execution of one set of program statements
• much like a flowline on a flowchart from beginning to end, outputs, inputs, processing and all
• many programming languages support MULTITHREADING
o the computer reacts to MANY events at the same time ONCE IT FORKS (or splits)
▪ (or tries to, kinda hard with ONE CPU)
▪ Computer shares time with multiple threads to be fair
• (Round-Robin, FIFO, etc…)
|Thread Example |
|[pic] |
Designing (Storyboarding) the GUI Layout
• Should be your FIRST STEP!!!
• Draw up what you would want to a GUI to look like
o Share it with someone else, they may have good ideas or questions about the interface
1. On your own, draw a design for a Simple Calculator using the UPPER section of the paper.
2. After a predetermined time, share your idea with your team, and come up with a MASTER plan
Things to remember when creating a GUI
• Interface should be natural and predictable
o Use appropriate icons for use (( for forward, X for close)
o Menu bar should be at top or side (like other programs)
• Should be easy to read and attractive
o Do not put too much on an interface
o Do not use crazy colors like pink
• Should be forgiving and have some validation
o Make sure the user completes all tasks before allowing them to continue
The Java Components
• Next, we have to determine WHAT GUI components we want
|Button |CheckBox |ComboBox |Label |
|PasswordField |RadioButton |Slider |TextArea |
|TextField |ToggleButton |EditorPane |ScrollPane |
|OptionPane | | | |
o Give each GUI component a name
o Easier to find if you need to change something since all in one area
1. What is the difference between a TextField and TextArea?
2. How many Buttons, TextFields, RadioButtons, etc… do you need for your design?
What colors play roles in GUI
|Which Colors fit what? |
|Favorite color among older men, especially clothes? | |
|Color of royalty? | |
|Easiest color on the eyes? | |
|Which color makes babies cry and get tempers to flare more easily? | |
|Color makes people look thinner? | |
|Color represents purity? | |
|Produces calming chemicals to make us tranquil? | |
|Stimulates faster breathing and heart rate? | |
(Green, Red, Blue, Brown, White, Purple, Black, Yellow are your choices and can only be used ONCE!!)
List the colors that routinely appear on POPULAR the web pages.
List the colors that DO NOT appear on the webpage.
Lab Section
Your age group:
5 – 12 16-25 30-50 55-70
1. List web pages that attract these types of age group users:
2. Describe the size of the text, buttons, pictures, etc…
3. Explore the website, what common INTERFACE controls appear and where?
4. What do the images on the webpage contain??
5. What type of advertising is on the webpage??
In-Class Assignment
Create a WEB PAGE (on a piece of paper), containing a virtual cell-phone that people will use when they can’t find one! (per YOUR selected age group)You will need to specify EVERY SINGLE AS SPECT, size, color, text size, buttons, etc…
1. As a group, you are assigned an age group, but as individuals create a ROUGH sketch on paper with YOUR design. (15 minutes)
2. Combine your effort into a FINISHED cell-phone. Please have one student in the group draw the calculator with everyone’s name on it in PAINT or PHOTOSHOP.
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.