Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
King Abdulaziz University North Jeddah Branch Saudi Arabia Laboratory Manual Course Codes: CPCS-354, CPIT- 280 and CPIS-354 Course Title: Human Computer Interaction Document Version History Version Date Prepared By Reviewed By Approved By 1.0 20/09/2012 Shahzad Qamar Dr. Muhammad Tahir Dr. Muhammad Tahir 1.1 19/11/2013 Bandar Alkhalil ………………….. …………………….. Table of Contents Table of Contents Lab 1 - Introduction to Java Swings ...................................................... Error! Bookmark not defined. Lab 2 - .................................................................................................. Error! Bookmark not defined. Lab 3 - Topic ......................................................................................... Error! Bookmark not defined. Lab 4 - Topic ......................................................................................... Error! Bookmark not defined. Lab 5 - Topic ......................................................................................... Error! Bookmark not defined. Lab 6 - Topic ......................................................................................... Error! Bookmark not defined. Lab 7 - Topic ......................................................................................... Error! Bookmark not defined. Lab 8 - Topic ......................................................................................... Error! Bookmark not defined. Lab 9 - Topic ......................................................................................... Error! Bookmark not defined. Lab 10 - Topic ....................................................................................... Error! Bookmark not defined. Lab 11 - Topic ....................................................................................... Error! Bookmark not defined. Lab 12 - Topic ....................................................................................... Error! Bookmark not defined. Lab 13 - Topic ....................................................................................... Error! Bookmark not defined. Lab 14 - Topic ....................................................................................... Error! Bookmark not defined. Lab 15 - Topic ....................................................................................... Error! Bookmark not defined. AIMS AND OBJECTIVES OF THE HCI LAB AIMS Practical Programming of Human Computer Interfaces Introduction to HCI programming in Java: AWT and Swing Introduction to Mobile HCI programming in Java: Java MIDlets Introduction to basic HCI components and how to use them Overview of other Java Foundation Classes: AWT, Accessibility, 2D API and Drag and Drop OBJECTIVES Knowledge of availability and usage of basic HCI components Understand how components can effectively be used together Understand the Java Foundation Class (JFC) Packages Be able to program in Java Swing, Java MIDlet and other JFC packages Recommended Book Java Swing by Robert Eckstein, Marc Loy, Dave Wood O'Reilly and Associates; ISBN: 156592455X Laboratory Session 1: Introduction to HCI and Java Swings Objectives: The objective of this Lab is to familiarize students with the importance of HCI, to introduce them with Java Swings and to teach them how to create a project in NetBeans. Outcomes: By the end of this Lab student will know the importance of HCI. Students will be familiarized with Java Swings and AWT. Students will be able to use NetBeans for creating Java Swings applications. 1. Introduction to Human Computer Interaction The term Human Computer Interaction (HCI) was adopted in the mid-1980s as a means of describing this new field of study. The well known definition of HCI is the following. “HumanComputer Interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them” (IEEE/ACM) 1.1 Difference between Software Engineering and HCI There is a basic fundamental difference between the approaches taken by software engineers and human-computer interaction specialists. Human-computer interface (HCI) specialists are usercentered and software engineers are system-centered. Therefore in this course our focus will be mainly on the development of good designs. 2. Introduction to Java Swings Swing did not exist in the early days of Java. Rather, it was a response to deficiencies present in Java’s original GUI subsystem: the Abstract Window Toolkit. The AWT defines a basic set of controls, windows, and dialog boxes that support a usable, but limited graphical interface. In order to eliminate the deficiencies in AWT, Swing was introduced in 1997. Swing was initially available for use with Java 1.1 as a separate library. However, beginning with Java 1.2, Swing (and the rest of the JFC) was fully integrated into Java. Swing is basically a set of customisable graphical components whose look-and-feel can be dictated at runtime. 2.1. Swing Features Pluggable look-and feels Lightweight components o Do not depend on native peers to render themselves. o Simplified graphics to paint on screen o Similar behaviour across all platforms o Portable look and feel o Only a few top level containers not lightweight. New components -- tress tables, sliders progress bars, frames, text components. Tooltips -- textual popup to give additional help arbitrary keyboard event binding Debugging support 3. Practical Work 3.1. Learning Swing with Net Beans IDE and Setting Up New Project: The Net Beans IDE is a free, open-source, cross-platform integrated development environment with built-in support for the Java programming language. It offers many advantages over coding with a text editor. Step 1: Run Net Beans and close down any open projects. Move to File tab and select New Project. From the pop-up Form select Java and Java Application, you should have something similar to figure 1.1. Figure 1.1 Setting up a Java Application Project Step No 2: Click Next and change the following. Project Name: Celsius ConvertorProject Project Location: C:\HCI Project Folder: C:\HCI\CelsiusConvertorProject VERY IMPORTANT 1: Ensure that Set as Main Project is checked. 2: Create Main class is un-checked. You should have something similar to Figure 1.2. Click Finish Figure 1.2: Setting up a Java Application Project When the IDE finishes loading, you will see a screen similar to the below Figure 1.3. All panes will be empty except for the Projects pane in the upper left hand corner, which shows the newly created project. Figure 1.3: Setting up a Java Application Project Step # 3: Adding a JFrame Form Right click on the CeliusConvertorProject and choose New -> JFrame Form (JFrame is the Swing class responsible for the main frame for your application). You should have something similar to Figure 1.4. Figure 1.4: Creating a Java Swing Step # 4: Name the GUI Class Change the following. Class Name: CelsiusConvertorGUI The remainder of the fields should automatically be filled in, as shown above. Click the Finish button when you are done, you will see something like Figure 1.5. Figure 1.5: The Java Swing editor When the IDE finishes loading, the right pane will display a design-time, graphical view of the CelsiusConverterGUI. It is on this screen that you will visually drag, drop, and manipulate the various Swing components. 3.2. NetBeans IDE Basics It is not necessary to learn every feature of the NetBeans IDE before exploring its GUI creation capabilities. In fact, the only features that you really need to understand are thePalette, the Design Area, the Property Editor, and the Inspector. We will discuss these features below. 3.2.1 The Palette The Palette contains all of the components offered by the Swing API. You can probably already guess what many of these components are for, even if this is your first time using them (JLabel is a text label, JList is a drop-down list, etc). Figure 1.6: Palette 3.2.2. The Design Area The Design Area is where you will visually construct your GUI. It has two views: source view, and design view. Design view is the default, as shown below. You can toggle between views at any time by clicking their respective tabs. Figure 1.6: The Design Area 3.2.3. The Property Editor The Property Editor does what its name implies: it allows you to edit the properties of each component. The Property Editor is intuitive to use; in it you will see a series of rows — one row per property — that you can click and edit without entering the source code directly. The following figure shows the Property Editor for the newly added JFrameobject. Figure 1.7: The Property Editor 3.3 Creating CelsiusConvertor GUI (As shown in the Figure 1.8) Set the Tile Add JText Field Add two JLabels Add JButton Figure 1.8. Simple Layout 3.4 Adjusting the CelsiusConverter GUI (As shown in Figure 1.9) Step 1: Set the Component Text Step 2: Set the Component Size Step 3: Remove Extra Space 3.5 Adding the Application Logic Step 1: Change the Default Variable Names The default names are not very relevant in the context of this application, so it makes sense to change them from their defaults to something that is more meaningful. Right-click each variable name and choose "Change variable name." Make the following changes: JText to tempTextField JLabel1 to Jbutton to convertButton JLabel2 to fahrenheitLabel celsiusButton Step 2: Register the Event Listeners When an end-user interacts with a Swing GUI component (such as clicking the Convert button), that component will generate a special kind of object — called an event object— which it will then broadcast to any other objects that have previously registered themselves as listeners for that event. The NetBeans IDE makes event listener registration extremely simple: Figure 1.10: Event Listener Step 3: Add the Temperature Conversion Code The final step is to simply paste the temperature conversion code into the empty method body. The following code is all that is necessary to convert a temperature from Celsius to Fahrenheit: private void convertButtonActionPerformed(java.awt.event.ActionEvent evt) { int tempFahr = (int) ((Double.parseDouble(tempTextField.getText())) * 1.8 + 32); fahrenheitLabel.setText(tempFahr + " Fahrenheit"); } Step 4: Run the Application Running the application is simply a matter of choosing Run -> Run Main Project within the NetBeans IDE. The first time you run this application, you will be prompted with a dialog asking to set CelsiusConverterGUI as the main class for this project. Click the OK button, and when the program finishes compiling, you should see the application running in its own window. You can see something like Figure 1.11. Figure 1.11: Output Home Tasks Read more about HCI and Java Swings Do the above process by yourself at home HCI Programming with Java Swing We have seen how data can be communicated in a Java in a sequential type manner. There are however times (most of the time) when we need to handle data in a more random manner from a human computer interface (HCI). The Java Swings library handles this form of input and output in Java. It contains pre-built classes of graphical interface elements and even basic drawing primitives. The Swing can be broken down into a number of groups of related classes. Swing library is an official Java GUI toolkit released by Sun Microsystems. The main characteristics of the Swing toolkit · platform independent · customizable · extensible · configurable · lightweight Swing consists of the following packages · javax.swing · javax.swing.border · javax.swing.colorchooser · javax.swing.event · javax.swing.filechooser · javax.swing.plaf · javax.swing.plaf.basic · javax.swing.plaf.metal · javax.swing.plaf.multi · javax.swing.plaf.synth · javax.swing.table · javax.swing.text · javax.swing.text.html · javax.swing.text.html.parser · javax.swing.text.rtf · javax.swing.tree · javax.swing.undo Swing is a part of JFC, Java Foundation Classes. It is a collection of packages for creating full featured desktop applications. JFC consists of AWT, Swing, Accessibility, Java 2D, and Drag and Drop. Swing was released in 1997 with JDK 1.2. It is a mature toolkit. HCI Elements: JButtons:- JButtons are normally used to signify that some form of processing is required. A JButton class within the Java Swing, consider: JButton onButton = new JButton(“On”); this create a button with a lable “On”. As with any class of object there are number of methods associated with the object, two commonly used methods are setLabel, which allows you to change the label and getLabel, which returns the buttons current label i.e. String name = onButton.getLabel(); JLabel: Labels are just strings that can be palced within containers, consider: JLabel myLabel = new JLabel (“Welcome to Java Swing”); JCheckbox: A checkbox is used to indicate some change in sate of a system, and as with all other control elements checkboxes are created using new, for example: JCheckbox myCheckbox = new JCheckbox(“Hello”); Here again we have as set of methods to determine if a check box has been clicked or not. The method getState returns a Boolean true if the check box had been clicked using a mouse button or false if t has not. The checkboxes are independent and as such they can both be checked or either one to be checked or neither be checked. Radio Buttons: Radio buttons are a special case of check boxes. Radio buttons are grouped together and have the property that only of the boxes s checked at a time. Radio buttons are created from checkboxes by means of a constructor which connects them to a checkbox group, consider: JCheckboxGroup department = new CheckboxGroup(); JCheckbox Electronics = new JCheckbox(“Electronics”,department,true); The getState method will find which radio button is true. Choice: A choice is a pop-up menu, which allows the user to specify a number of strings that can be selected. The code for creating a choice is shown below JChoice departmentChoice = new JChoise(); DepartmentChoice.addItem(“Electronics”); Text Fields: A text field is a part of interface object into which a user can type text. TextField are created by using the JTextField class, for example JTextField myTextField = new JTextField (“Type Text Here”, 240); Will create a text field which will have 24 columns, with the the text “type Text Here” contained within one column in the text field.