1User Interface Development User Interface Dev.docx

1
User Interface Development
User Interface Development
Shashank Pitla
Wilmington University
Iteration 1 – Develop a storyboard
Plan
Nowadays, as the technology and the Web are continually being
used to perform various operations, it becomes paramount to
have an interactive and attractive user interface (Molina,
Redondo, & Ortega, 2009). That is because humans interact
with these systems through an interface. This iteration entails
storyboarding for the user interface. A storyboard is a
technique used for illustrating the interaction between humans

and products in a narrative format that incorporates a series of
sketches, drawings, pictures, and words to tell a story (Gruen,
2000). In this iteration, I plan to create storyboards that specify
how the user interface will be changing in reaction to the user’s
actions as well as to show the external elements to the system. I
plan to use as few details as possible to get the key points on
board regarding the big picture because the storyboard is
supposed to present clear and precise information of the user
interface.
In the procedure for storyboard design, there are three major
activities that I plan to carry out including deciding what to
incorporate, building the storyboard, and lastly feedback and
iteration. In deciding what to do, I plan to interact with some
users in the company to understand their needs, goals, and
background. This analysis will also aid in understanding the
system and the features. I will also get to brainstorm with the
design team, identify people and artifacts in this storyboard and
then develop the storyboard scenarios. During the time for
building the storyboard, I will put the gathered information
concerning the storyboard features into practice and illustrate
the user actions on the storyboard. During the last step in my
procedure; feedback and iteration, I plan to gather feedback
from the internal and external stakeholders and then iterate the
storyboard design.
Action
The documenting of the iteration’s objectives was the first
activity that was carried out before commencing the main
activities of the session. I then began with the first step of my
procedure that is, deciding what to include. To accomplish that,
I had to interact with the users with the aim of understanding
their backgrounds and goals, and to understand the system
better in terms of the desired features. I also brainstormed with
the design team about the storyboard before developing the
storyboard scenarios.
In the second step, I broke the story into smaller sections known

as frames; I identified the key frames from the scenarios as I
focus on each frame’s individual features. In each frame, I had
to draw the user, the product as well as other fundamental
objects for each frame. I used tests for the users’ thoughts or
reactions and made sure to use as minimum detail as possible in
communicating the user interface features. I then wrote short
descriptions for each frame to help in explaining what is
happening in it.
During the last step of my procedure that involved feedback and
iteration, I sought for feedback from the stakeholders of the
system. I presented the developed prototype for the storyboard
to the stakeholders, and they examined it as they gave their
feedback on how their desired features have been incorporated.
The user feedback is crucial because it helps the developer to
incorporate the user requirements and thus develop an
acceptable system from the user’s view (Truong, Hayes, &
Abowd, 2006). The stakeholders that were incorporated into this
step included the visual designers, the representative users, and
the human factor practitioners among others. User testing was
also conducted internally with the users with the aim of
verifying how realistic the storyboard was and whether it was
successful in communicating its function, message, or
interaction.
Observation
Storyboarding helps to communicate the user interface
interactivity and functionality to the users. It strengthens the
user experience components of the design, and the use of
software to build prototypes for the sketches can be of
paramount importance. I observed that a great challenge in
developing storyboards is to understand the point from which to
start the storyboard or the point to end it. If you start too early
or too late, you may incorporate irrelevant information or
functions that unnecessary (Okur, & Gümüş, 2010). I also
observed that when the storyboard is created individually, it is
impossible to develop one agreed-upon storyboard from the
many opinions that were generated. Storyboarding also requires

some skills in drawing although you need not to draw something
perfect, but a representation of the system’s functionality
(Larkin, 1996). That is why the team members who have
difficulty in drawing have reluctance in participating and
contributing to the storyboarding activity.
Another thing I observed from this iteration is that sometimes a
storyboard may address crucial issues, interactions, and
functions thereby creating holes in the story. The model-based
design is widely used while developing the user interface. The
user involvement is also important when storyboarding because
their input can aid in building the interface from the perception
of the users (Kaulio, 1998). Therefore, it increases the user
acceptability. A good storyboard allows the designers to get a
feel on how the users’ experiences are flowing in the system.
When I had ignored many features in the design, the end users
and other stakeholders are the ones that helped to unravel those
features, and through the same, more details were incorporated.
The development of the storyboard was also an involving task
as I had to spend more time than I had allocated due to the long
process and the user involvement.
Reflection
This was the first iteration towards the development of the user
interface. I got to learn many things, both good and challenging
as I was handling a practical task on this area for the first time.
The lack of adequate knowledge and skills derailed the
storyboard development process although carrying out research
and also interacting with other experts helps to simplify some of
the difficulty areas. Documenting the iteration’s objectives and
then implanting a stepwise process helped me to address each
system feature carefully and fully develop the storyboard based
on the functional and nonfunctional requirements that had been
gathered from the users. The users with whom I interacted were
also very much willing to provide me with useful information
that I then used to structure and sketch the system. The iteration
helped me to understand how to carry out storyboarding

practically.
The basic understanding of storyboarding that I had helped me
to carry out the storyboarding activity correctly. However, there
are some things that did not go on well as I had anticipated in
my plan for the iteration. For one, I did not accomplish the
work within the timeframe that was required because I had
underestimated the time required to complete the activity. There
was also little resources that I involved in this iteration, for
instance, I did not use such resources like magazines, journals,
and books to understand how to accomplish the storyboarding
activity. In the future, I plan to make sure that I set aside
enough time for every activity to make sure that each activity is
completed within the required timeframe. I will also make sure
to use as many resources as possible to have a good background
understanding of the topic under research and to
comprehensively understand how to perform each required
activity.
References
Gruen, D. (2000). Storyboarding for design: An overview of the
process. Lotus Research–accessed, 3(11), 10.
Kaulio, M. A. (1998). Customer, consumer and user
involvement in product development: A framework and a review
of selected methods. Total Quality Management, 9(1), 141-149.
Larkin, G. (1996). Storyboarding: A concrete way to generate
effective visuals. Journal of technical writing and
communication, 26(3), 273-289.
Molina, A. I., Redondo, M. Á., & Ortega, M. (2009). A
methodological approach for user interface development of
collaborative applications: A case study. Science of Computer
Programming, 74(9), 754-776.
Okur, M. R., & Gümüş, S. (2010). Storyboarding issues in
online course production process. Procedia-Social and
Behavioral Sciences, 2(2), 4712-4716.
Truong, K. N., Hayes, G. R., & Abowd, G. D. (2006, June).

Storyboarding: an empirical determination of best practices and
effective guidelines. In Proceedings of the 6th conference on
Designing Interactive systems (pp. 12-21). ACM.
Chapter 5
© copyright Janson Industries 2014
*
Java VariablesTypes of variables
Creating, modifying and displaying
Comparing
Converting between types
TextField
Non-graded Assg
Chapter 5
*
Variables Used to access data (and objects) in classes
Variables are declared. That means defining the variable’s:
Identifier (name)
Type
Java’s basic variable types are called Primitive Data Types

Chapter 5
*Two types: Primitive & Referenced
Primitive variables:
Hold a value
Type names begin with lowercase letters
Referenced variables:
Hold the storage location of an object
Type names begin with uppercase letters
Variables
*
Chapter 5
*
Primitive Data Typesboolean: true or false (default is
false)char: single character, use single quotes byte: 8 bit whole
number (-128 to 127)short: 16 bit whole number (32,767
max)int: 32 bit whole number (2**31 max)long: 64 bit whole
number float: floating point (7 decimal place max)double:
double precision (15 dec places)
Chapter 5
*
Variable Name RulesMust begin with a character
Can be made of letters, numbers, _, or $

NoSpecial characters (%, #, @, etc.)SpacesReserved words
(new, class, static, etc.)
Are case sensitive!!
Chapter 5
*
Defining and AssigningPrimitive data type then variable name
int numberOfDependents;
char gender, maritalStatus;
A value can be assigned when the variable is declared:float
taxRate = .28;
Or a value can be assigned later:numberOfDependents = 2;
Chapter 5
*
ValuesCalculated values can be assigned using standard
operators: +, -, *, /. Ex:
When dividing two integers, decimal remainder
truncatedDividing float/double and integer, integer “promoted”
to float/doubleStandard order of operator precedence
int counter;
counter = counter + 1; counter++; ++counter;
Chapter 5

*
ValuesUse PRINT
System.out.print(“The answer is: ”);
System.out.print(answer);Assuming answer is boolean
with value of true, results in:
The answer is: trueOr PRINTLN. Does a carriage return so
To get same result
System.out.print(“The answer is: ”);
System.out.print(answer);
System.out.println(“The answer is: ” + answer);
+ concatenates
text or variables
Chapter 5
*
Pre/Post Inc/DecrementStandalone Pre/Post expressions
(++counter; counter++;) do the same thing
Within a larger expression they are different
Result is: Counter = 1
Counter = 2
Counter = 2
Counter = 3
int counter = 1;
System.out.println("Counter = " + counter);
System.out.println("Counter = " + ++counter);
System.out.println("Counter = " + counter++);

Chapter 5
*
Pre/Post Inc/DecrementTo do the same thing without Pre/Post
expressions requires more coding
int counter = 1;
counter = counter + 1;
counter = counter + 1;
int counter = 1;
System.out.println("Counter = " + counter + 1);
Results in "Counter = 11"*
Chapter 5
*
ValuesSome math functions are performed with java supplied
methods not operators
These methods are stored in the Math classMath is part of
java.lang packageNo need to import or declare Math because
java.lang automatically imported
To invoke a static methodClassname.methodName(parms)

Chapter 5
*
Look at documentation to see required parms
Chapter 5
*
To raise 12 to the fourth power:
double answer;
answer = Math.pow(12, 4);
Chapter 5
*
Referenced TypesString & StringBuffer are
examplesStringBuffer provides more flexibility when
manipulating Strings
Class name then variable nameString name, address,
phoneNumber;StringBuffer nameSB;
Like primitives, you can assign a value when declaring the
variable or assign a value later
Reference variables are usually 32 bits in length*

Chapter 5
*
Reference TypesHave to create and assign an object to a
reference variable
Object created with the “new” keywordString name = new
String(“Joe”);StringBuffer nameSB = new StringBuffer(“Joe”);
Alternative for String objects (not recommended)String name =
“Joe”;
Reference variables are usually 32 bits in length*
Chapter 5
*
Referenced TypesYou can declare a referenced variable for a
class and then “instantiate” and assign the object to the variable
Assuming Customer is a java class, the variable cust points to a
Customer object that contains the values
Customer cust;
cust = new Customer(“Joe”, “1 Main St.”,
“Enid, OK 65654”);
Chapter 5

*
For example: StringIf we set the value of a to Joe
A String object with the text “Joe” is placed in memory and a =
A1
If we then set b to “Joe”, a 2nd String object with “Joe” is
placed in memory
and b = B2
a = new String(“Joe”);
a
b A B C 1Joe 2Joe 3
Chapter 5
*
For example: StringIf we change the value of a
A String object with the value “Art” is placed in memory
a = C3 and the first Joe is not referenced
a = new String(“Art”);
a

b A B C 1Joe 2Joe 3Art
Chapter 5
*
StringHowever if we define c as equal to a:
c = C3
a
b
c
String c = a; A B C 1Joe 2Joe 3Art

Chapter 5
*
StringsAre immutable (unchangeable)
Assigning a new value to a String variable creates a new String
objectIt does not change any existing String object that the
variable references
There are now two String objectsOne with the text “Art” the
other “Joe”
String c = "Art";
c = “Joe”;
Chapter 5
*
StringHowever, using the shortcut (i.e. not explicitly creating a
new object) will not necessarily result in a new object
Only one object with text “Art”
Two objects with text “Art”
String c = "Art";
String b = “Art”;
String c = "Art";
String b = new String(“Art”);

String optimization*
Chapter 5
*
StringEven this…
..results in two objects with text “Art”
Beware of the shortcut
This is also why StringBuffers are betterTheir value can be
changed (more on this later)
String b = new String(“Art”);
String c = "Art";
Chapter 5
*
Reference VariablesIf two Customer variables created as
follows:
How many objects are there?
Customer cust1 = new Customer(“Walmart”);
Customer cust2 = new Customer(“Walmart”);
Chapter 5

*
Reference Variables2 objects exist
cust1
cust2 A B C 1Walmart 2 3Walmart
Chapter 5
*
Reference VariablesIf the following statements are also
executed:
How many objects are there?
How many objects are referenced?
cust1 = new Customer(“Target”);
cust2.setCustName(“Sam’s”);

Chapter 5
*
Reference Variables3 objects exist, 2 are referenced
For an alternative explanation of variables:
http://www.javaranch.com/campfire/StoryCups.jsp
cust1
cust2 A B C 1Walmart 2Target 3Sam’s
Chapter 5
*
Null Pointer Exception
cust1
cust2
Customer cust1, cust2;
cust1 = new Customer(“Target”);

cust2.setCustName(“Sam’s”);
Exception in thread "AWT-EventQueue-0"
java.lang.NullPointerException
at
packageName.className.methodName(fileName.java:lineNumb
er)Occurs when using a reference variable that is not assigned
to an object (pointer is null) A B C 2Target 3
Chapter 5
*
Primitive Variables
Defining these two integers:
Results in a memory allocation of:
int a = 1; int b = 2; A B C 1 1 2 2 3

*
Chapter 5
*
PrimitivesIf we change the value of a
The value 1 is replaced with 3
a = 3; A B C 1 3 2 2 3
Chapter 5

*
Referenced TypesProof: Printing Customer variable c would
result in memory address (hash code)
Customer c = new Customer();
c.setContactPerson("Joe Samaritan");
c.setContactPhone("555-3333");
c.setCustName("Kindness Foods");
c.setShipToStreet("1 Milk of St.");
c.setShipToCity("Human");
c.setShipToState("ME");
c.setShipToZip("03234");
System.out.println(c);
Chapter 5
*
Chapter 5
*
Why address?Because that is the value of the reference
variableIf you wanted to see the Customers name, use
c.getName()Actually the Customer object's toString method is
invoked when println executed“Hey, we didn’t code a
Customer.toString() method!”toString inherited from Object
classObject.toString returns address of an object

Chapter 5
*
We’ll prove it!
Chapter 5
*
In Customer, click Source, then Override/Implement Methods
Click toString and specify it as the first method
after the class variables, then click OK
Chapter 5
*
Inserts new toString method that calls Object's (the superclass’)
toString method

Chapter 5
*
We’ll change to return customer name
Chapter 5
*
When we run CustApp and print the Customer variable c
Try it: change Customer and CustApp
Chapter 5
*
Another Example
Object
toString
Person
toString
Name
toString
Person is an object
Name is an object
Person has a name
is a
is a
has a

Chapter 5
*
Inheritance Example
// Name.java
public class Name extends Object {
String first;
String last;
String middle;
public Name(String f, String l)
{ first = f; last = l; middle = “ “;}
public Name(String f, String l, String m)
{ first = f; last = l; middle = m; }
}We’ll create classes called Name and Person
Method
Overloading
Methods can have the same name but they must accept a
different set of values.*
Chapter 5
*

Example
// Person.java
public class Person extends Object {
int age;
Name name;
public Person() { age = 0; }
public Person(int a, String f, String l) {
name = new Name(f, l);
age = a;
}
public Person(int a, String f, String l, String m){
name = new Name(f, l, m);
age = a;
}
}
Person “has a” name
Person “is an”object
Chapter 5
*
ExamplePersonFrame will instantiate 3 Person objects
// PersonFrame.java
import java.awt.*;
import java.awt.event.*;
public class PersonFrame extends Frame implements
WindowListener, ActionListener {
Button showButton = new Button("Show");

Label outputLabel1 = new Label();
Person newPerson1 = new Person(32, "John", "Smith");
Person newPerson2 = new Person(27, "Mary", "Jones", “Jo");
Person newPerson3 = new Person(42, "John", "Public", "Q");
Chapter 5
*
public PersonFrame()
{ setLayout(null); this.setSize(500, 400);
showButton.setBounds(275,300,50,25);
outputLabel1.setBounds(112,200,350,15);
add(showButton); this.setVisible(true);
showButton.addActionListener(this);
addWindowListener(this);
add(outputLabel1);add(outputLabel2);add(outputLabel3); }
public void actionPerformed(ActionEvent e) {
outputLabel1.setText("The new person is: " + newPerson1);
}
Uses the default toString method to display
Example

Chapter 5
*
public void windowActivated(WindowEvent e) {}
public void windowClosed(WindowEvent e) {}
public void windowClosing(WindowEvent e) {
this.dispose();
}
public void windowDeactivated(WindowEvent e) {}
public void windowDeiconified(WindowEvent e) {}
public void windowIconified(WindowEvent e) {}
public void windowOpened(WindowEvent e) {}
public static void main(String args[]) {
PersonFrame pf = new PersonFrame();
}
}
Example
Chapter 5
*
Example
PersonFrame
Person
Name
PersonFrame has a Person object (actually 3)
Person has a Name object
When we run PersonFrame and click the button...
has a
has a

Chapter 5
*
Yuck!
Referenced variables hold an address not info!
Chapter 5
*
ExampleWe’ll override the inherited toString functions for both
Name and Person
//Name
: : :
public String toString() {
if (middle.equals(" ")) return ( first + " " + last);
else if (middle.length() == 1) return (first + " " + middle + ".
" + last);
else return (first + " " + middle + " " + last);}
//Person
: : :
return (name + ". Who is " + age + " years old." );}
Chapter 5
*

Example
public void actionPerformed(ActionEvent e) {
} }Now when we try to print the newPerson variables:
The Object class’ toString method (which would print out the
address) is overridden by the Person toString method
Chapter 5
*
ExampleThe Person toString method tries to concatenate the
Name object
Fortunately, we overrode the Object class’ toString method in
the Name class also
//Person
: : :
return (name + ". Who is " + age + " years old." ) ; }

Chapter 5
*
Better?
Chapter 5
*
ExampleWe overrode (the inherited) Object class' toString
method by defining toString methods for both Person and Name
We accessed the Person and Name classes' toString methods in
PersonFrame through composition (i.e. PersonFrame “has a”
Person)
Chapter 5
*
ExampleIn PersonFrame (specialized type of Frame, aka a
subclass of Frame) we created 3 instances/objects of type
Person:
In Person, we created an instance/object of type Name
Person newPerson1 = new Person(32, "John", "Smith");
Person newPerson2 = new Person(27, "Mary", "Jones", “Jo");
Person newPerson3 = new Person(42, "John", "Public", "Q");
name = new Name(f, l);

Chapter 5
*
Inheritance Example
Object
toString
Person
toString
Name
toString
Person is an Object (subclass of Object)
Name is an Object (subclass of Object)
Both inherited toString
is a
is a
Chapter 5
*
Inheritance Example
Frame is a Component (subclass of Component)
PersonFrame is a Frame (subclass of Frame)
Frame inherits setLayout, what does PersonFrame inherit?
is a
is a
Component
setLayout
PersonFrame

setLayout getTitle
Frame
setLayout getTitle
Chapter 5
*
Composition Example
PersonFrame
Person
Name
PersonFrame has a Person
Person has a Name
PersonFrame invokes Person's toString method
Person invokes Name's toString method
has a
has a
Chapter 5
*
Comparison Operators< less than> greater than>= greater
than or equal to<= less than or equal to== equal!= not equal
Order of precedence:
relational then equality
Relational
Operators
Equality

Operators
Chapter 5
*
Comparison OperatorsComparisons result in a boolean value
(true or false)
You can assign the result of a comparison to a boolean variable
boolean isOvertime = (hours > 40);
Chapter 5
*
Converting TypesPrimitives can be converted to a larger type by
simply equating/assigning it
To convert from larger to smaller, use a “cast” operation
long a; int b = 1; char c = ‘2’;
a = b;
b = c;
Chapter 5
*

CastingConverts a larger primitive type to a smaller primitive
type
General syntax:
type1Variable = (type1Name) type2Variable
long a; int b = 1; char c = ‘2’;
b = (int)a;
c = (char)b;
Chapter 5
*
Primitives to Strings
long a = 1;
int b = 2;
char c = ‘c’;
String d, e, f;
d = String.valueOf(a);
e = String.valueOf(b);
f = String.valueOf(c);Casting and = do not work
String class has static methods (.valueOf) that convert many
primitives to strings
Chapter 5
*Use the String valueOf methods to convert primitive types to
StringsNotice no byte valueOf

Chapter 5
*
Converting TypesThere are also a series of “Wrapper” classes
for primitives
Wrapper classes contain useful methods for manipulating
primitives
byte Byte
int Integer
double Double
: : : :
Chapter 5
*
For example, each “Wrapper” class has a toString method that
does the same thing as String’s valueOf
Chapter 5

*
long a = 1;
int b = 2;
char c = ‘c’;
String d, e, f;
d = Long.toString(a);
e = Integer.toString(b);
f = Character.toString(c);
Primitives to Strings
Chapter 5
*
Strings to Primitives
The parseXXX methods (of each Wrapper class) convert Strings
to primitive types
int a;
long b;
String c = “1”;
a = Integer.parseInt(c);
b = Long.parseLong(c);
Chapter 5
*
Strings to CharsUse a String method called .charAt(#)

a is set to 1
char a;
String c = “123”;
a = c.charAt(0);
Chapter 5
*
Converting between typesAssuming int a, double b, String c
Larger
PrimitiveSmaller
Primitiveb = a;Smaller
PrimitiveLarger
Primitivea = (int) b;StringPrimitivec = String.valueOf(a);
c = Double.toString(b);PrimitiveStringa = Integer.parseInt(c);

Chapter 5
*
GUI Interface Components
TextField: entry field to hold and display text defined by the
programmer or user
Usually used in conjunction with a label that defines the text to
be entered
Chapter 5
*
Defining Components
As always, must import classes (not shown) then define the
components:
Then add to the frame:
Label custNameLabel = new Label("Enter the customer name:");
TextField custNameTF = new TextField(25);
Label custAddrLabel = new Label("Enter the customer
address:");
TextField custAddrTF = new TextField(25);
add(custNameLabel);
add(custNameTF);
add(custAddrLabel);
add(custAddrTF);

Chapter 5
*
Defining Properties
Of course you will want to define their properties (e.g. text)
either when created
Or after creating using the “setters”
Label custNameLabel = new Label("Enter the customer name:");
Label custNameLabel = new Label();
: : : : : :
custNameLabel.setText(“Enter the customer name:”);
Chapter 5
*
Positioning
To set position, turn off the default layout scheme:
Specify the components size and location with either the setSize
and setLocation methods or the setBounds method
setLayout(null);
custNameLabel.setSize(160,10);
custNameLabel.setLocation(5,35);
custNameTF.setSize(200,20);
custNameTF.setLocation(162,30);
custAddrLabel.setBounds(5,100,75,75);
custAddrTF.setBounds(162,100,75,75);

Chapter 5
*
Positioning
custNameLbl.setSize(155,10);
custNameTF.setSize(200,20);
custNameTF.setLocation(162,30);
custAddrLb.setBounds(5,100,75,75);
custAddrTF.setBounds(162,100,75,75);
custNameLbl.setLocation(5,35);
Chapter 5
*
Defining Components
Lots of other commonly set properties:
Alignment
Font style
Font size
setLayout(null);
Label l1 = new Label("stuff");
l1.setBounds(15,50,155,20);
Label l2 = new Label("stuff", Label.RIGHT);
l2.setBounds(15,80,155,20);
Label l3 = new Label("stuff");
l3.setAlignment(Label.CENTER);
l3.setBounds(15,110,155,20);
add(l1); add(l2); add(l3);
How does label know “stuff” is text not a variable?

Chapter 5
*
Putting it all together in a new visual class called Sale
Chapter 5
*
Change size to 300, 229 and layout to null
Chapter 5
*
Defined 5 labels, 4 text fields, and 1 button
Rename, align
Enable Close button - How? (Hint: 2 steps)
*
Define windowClosing method action, add WindowListener to

frame.
Chapter 5
*
When data is entered and the calc button is clicked, the total
should be calculated and displayed (as above) and the text fields
blanked out
Chapter 5
*
Non-graded ExerciseNeed three primitives to hold qty, price
and cost
When button clicked:
Retrieve qty and price, calculate cost with a 6.5% sales tax
Build result message and place in result label
Blank out other text fields
What method holds this logic?
Chapter 5
*
Non-graded Exercise
qty = Integer.parseInt(qtyTF.getText());
price = Double.parseDouble(priceTF.getText());
cost = price * qty * 106.5;
msgLbl.setText("The cost of this " +

"transaction is: $" + cost);
custNameTF.setText("");
itemNameTF.setText("");
qtyTF.setText("");
priceTF.setText("");
Sale saleTest = new Sale();
private int qty;
private double price, cost;
Chapter 5
*
Non-graded ExerciseIf tested now nothing appears: why?
If run and press button nothing happens: why?
If price and qty entered, get wrong result: why?
*
Never set frame visible
Never added actionlistener to button
Multiply by 1.065 not 106.5
Chapter 5
*

Chapter 5
*
*
Chapter 5
*
Non-graded AssgExport Sale.java
Send as an email attachment to [email protected]
Chapter 5
*
Points to RememberPrimitive variables contain a value
Referenced variables contain an address
Use toString(), casting, and Wrapper class methods to convert
between types
TextFields can be used for input and output

Chapter 4
*
More GUIEvents, Actions, and Listeners
The Visual Editor
More GUI component properties
Non-graded assg part1part2
Chapter 4
*
WindowListenerA class that reacts to window events
Window eventsClicking X to close the windowResizing the
window
This is another one of those JDK classes that makes your
programming life easier!
Chapter 4
*
WindowListenerFor a class to be a WindowListener it must:
import java.awt.event.WindowEvent;
import java.awt.event.WindowListener;

In the class header have:
… implements WindowListener {
This is how java allows a class to inherit from multiple classes.
The class is a WindowListener as well as a frame*
Chapter 4
*
WindowListenerAlso, the WindowListener must have these
seven methods:
public void windowClosing(WindowEvent e) {
System.exit(0); }
Ends the JVM
Chapter 4
*

WindowListenerTwo ways you can do this:
1. Create a separate class to act as the window listener
Then in the frame class:Create the window listener objectAdd
the window listener object to the frame
this.addWindowListener(new WindowListener());
2. Have the frame implement WindowListener
Add the frame to itself
this.addWindowListener(this);
Chapter 4
*
WindowListenerextends relates two classes as super/sub classes
implements defines the class as a WindowListener (in addition
to whatever the extends specifies, e.g. Frame)
addWindowListener makes the WindowListener part of the
frameJust like creating & adding a label to the frame
Chapter 4
*
WindowListener
Create a separate class to act as the window listener
Must import WindowEvent and implement Window Listener

Chapter 4
*
WindowListener
Create the window listener object
Add the window listener object to the frame
Chapter 4
*
Add the frame to itself
Option 2: Define the frame as a WindowListener
Have the frame import and implement WindowListener
Either way, close button will now work
Chapter 4
*
Superclass/subclassProblem with option 2Every frame must
have codeAlternative 3rd solutionUse inheritance/specialization
to avoid coding these methods multiple timesHave a superclass
with needed codeAdvantages:Save programmer timeLess chance
of errorEasier to modifyP.S. Inherited methods and variables
can be overridden in subclass (more on this later)
Chapter 4

*
Visual EditorCreate a new CustomerFrame class that
implements WindowListener
CustomerFrame constructor will expect a Customer variable
CustomerFrame retrieves info from Customer object and puts
into labels
Will create a Visual Class and use the Visual Editor
Chapter 4
*
New Customer Example
CustApp
Customer
Object
CustomerFrame
Object
Create a Customer object, assign to variable c, set object’s
properties
Create a CustomerFrame
object, pass c, assign to variable cf
Retrieve & display Customer object properties
Chapter 4
*
Visual ClassClick File, New, Visual Class

If Visual Class not an option, click Other and find in list. If not
in list, you haven't modified the RAD configuration – go back
to the RAD install slides and follow the instructions to add the
Visual Editor to the configuration.*
Chapter 4
*
Specify CustomerFrame
Use the Style box to specify Frame as superclass
Have RAD generate main and window event handling methods
Implement by clicking Add..
1
2
3
4
Chapter 4
*
Start typing WindowListener, select WindowListener from the

AWT package, click OK
Chapter 4
*
Will use main method for testing. Click Finish.
Chapter 4
*
import java.awt.Frame;
public class CustomerFrame extends Frame implements
WindowListener {
private static final long serialVersionUID = 1L;
public void windowClosing(WindowEvent e) {}
public static void main(String[] args) {}

public CustomerFrame() {
super();
initialize();
}
private void initialize() {
this.setSize(300, 200);
this.setTitle("Frame");
}
}
Initialize method used to set frame properties and add
components
VE initially generates this code
Chapter 4
*
Design pane
Source pane
Resize
Open Component
Palette
Chapter 4
*
Visual EditorComponents stored in trays
Click on tray to open/close
Click on component to select

Then click on design pane to add selected component
Click on source pane to edit source code
Chapter 4
*
Change all properties in Properties pane
Enter/change source code
Open/close
trays
Select a component
Add components and change some properties in design pane
Make frame visible and layout null by adding this source code
into initialize
Or change in Properties view
Chapter 4
*
Visual Editor
this.setLayout(null);
this.setVisible(true);

Chapter 4
*
Click Label in palette then click on design pane to add
Should give the Label variable a meaningful name
Chapter 4
*
Or accept the default
Label's source code and property values are displayed
Chapter 4
*
Visual EditorModify component in design pane, properties
pane, or source code
VE does not name components well (i.e. label, label1, label2,
etc.)
Right click component and select rename field

Chapter 4
*
Specify new name, click OK, and save all modified resources
VE changes all the source code
Chapter 4
*
Chapter 4
*
LabelsLots of label propertiesForeground and background
colorsSize, LocationFont styleAlignment
Some nice VE features to define labels
Chapter 4
*
LabelsSelect many components by
Holding CTRL key and clicking each

OR
Change pointer from selection to marquee then click and drag
around all the components
Chapter 4
*
Click Marquee and pointer changes from arrow to +
...to here, so all components are inside the dotted line box
Click here and drag...
I’ve added 3 more labels
Chapter 4
*
When released all components selected, any changes will
change all
Alignment and size changes according to the anchor component
Alignment button brings up
Chapter 4
*

AnchorWhen selecting by Marquee, it is the newest component
When selecting by Selection, it is the last component selected
Anchor component indicated with solid resize handles
Chapter 4
*
Changed pointer to Selection, then reselected so oldest label is
anchor (held CTRL key, clicked each label)
Click left align
Chapter 4
*
Resize all by dragging any label resize handle
Chapter 4
*
Need to align labels vertically
Click distribution box
then distribute vertically

Chapter 4
*
Distributes evenly within the box.
Make distribution box larger, distribute vertically again
Chapter 4
*
Drag labels to center on frame
Click distribution box button again (to deselect) , then close
Customize Layout window
Chapter 4
*
Visual Editor
Rename the labels from top to bottomcustNameLbl, shipToLbl1,
shipToLbl2, contactInfo
Make sure custNameLbl is on top
Add code to:receive a Customer variablemove the info from the
Customer object into the labels

Chapter 4
*
Visual EditorNeed to create a class variable of type
Customerprivate Customer customer = null;
Change constructor to accept a Customer variablepublic
CustomerFrame(Customer cust) {
In constructor, move method variable (cust) to class variable
(customer) – why?customer = cust;
Chapter 4
*
Change CustApp so that a CustomerFrame object is created and
change Customer Frame so that info is displayed like this
Enable the Window Close button
Non-graded assg:
Chapter 4
*
Visual Editor Probs“Error trying to set new file into editor”

1) Bring up a VE session and close it. Make sure no VE's are
open.
2) Click Project, then Clean..., then click Clean All Projects
radio button, then OK button
3) Wait for build to complete.
4) Try VE again. It should work.
Chapter 4
*
Visual Editor ProbsWhen creating, Visual Class not an option
When RAD is installed the Visual Editor is not in the default
configuration
You must change the configuration to include the Visual Editor
Go back to the Ch01a slides
Slides 37 – 46 show how to change the configuration to include
VE
Chapter 4
*
ActionListener“Reacts” to actions on buttons and lists

ActionsClicking a buttonClicking a list item
Need to add:
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
Chapter 4
*
ActionListenerIn the class header, define class as an
ActionListener by adding:
…extends Frame implements ActionListener {
Add the ActionListener to a component:
myButton.addActionListener(this);
In the ActionListener class must define an actionPerformed
method
This method is executed when an action occurs
Chapter 4
*
CustomerFrame1Create a visual class CustomerFrame1
Implement both action and window listeners
Has a button that when pressed will display the data
Chapter 4

*
CustomerFrame1
Initially displayed with no data
Click Display button…
Chapter 4
*
CustomerFrame1
… info displayed in labels
Chapter 4
*
Chapter 4
*

public class CustomerFrame1 extends Frame implements
WindowListener,
ActionListener {
private static final long serialVersionUID = 1L;
public void actionPerformed(ActionEvent e) {}
: : : :
public static void main(String[] args) {}
public CustomerFrame1() {
super();
initialize();
}
}
}
RAD took care of imports and class header
Took care of actionPerformed
and window methods

Initialize sets Frame props and (as added) component properties
Chapter 4
*
CustomerFrame1Notice that the “window” methods don’t do
anything
Need to add code to remove window
this.dispose();
“Code a little, test a little”Verify close button works by
running appIn main, instantiate a CustomerFrame1 objectThen
run CustomerFrame1 as application
Chapter 4
*
CustomerFrame1Nothing happens – why not?
Never set Frame visible Wish I had created a useful frame
superclass that automatically did that!
Add code to set visible then Run CustomerFrame1 as
applicationTest close button
Chapter 4
*
Click Frame to select and display properties
In properties pane, click visible’s drop down button and select

true
Chapter 4
*
public class CustomerFrame1 extends Frame implements
ActionListener, WindowListener{
public void actionPerformed(ActionEvent arg0) {}
public void windowOpened(WindowEvent arg0) {}
public void windowClosing(WindowEvent arg0) {
this.dispose();
}
: : : : :
public void windowDeactivated(WindowEvent arg0) {}
public static void main(String[] args) {
CustomerFrame1 cf1 = new CustomerFrame1(); }
public CustomerFrame1() {
super();
initialize(); }

this.setVisible(true);
}
}
VE added to source
You need to add to source
Chapter 4
*
CustomerFrame1If run and close button clicked, nothing
happens – why not?
Never added WindowListener to the frameThis is why you
should test often: catch errors early!!
Add code in initialize() to add WindowListener and test
this.addWindowListener(this);
Chapter 4
*
CustomerFrame1Change source code so that
Class/global Customer variable called customer is
createdConstructor:accepts a Customer variable called
custassigns cust to the class variable customer
Why? So actionPerformed() can access the Customer object
Chapter 4

*
CustomerFrame1
Added
Chapter 4
*
Get an error: why? How fix?
Chapter 4
*
CustomerFrame1Our test in main does not pass the required
Customer variable
In main must:
Instantiate a Customer object and assign to a Customer variable
Pass Customer variable to CustomerFrame1
Chapter 4
*
Customer cust = new Customer();
cust.setCustName("Thrifty Food");
cust.setShipToStreet("1 Diet Lane");
cust.setShipToCity("Fasting");

cust.setShipToState("IN");
CustomerFrame1 cf1 = new CustomerFrame1(cust);
}
Added
Changed
CustomerFrame1Let’s test that customer object is accessibleIn
CustomerFrame1's constructor, add code to display customer
name in the console then run as app
System.out.println(customer.getCustName());
Chapter 4
*
Frame is displayed
Name is displayed in the console
Make sure window close button works
Chapter 4
*
CustomerFrame1Add labels to hold info
Add button to frame using VEDefine button propertiesIncluding
good names
Tie button to ActionListener
Code actionPerformed to retrieve info from Customer object and
put in labels

Chapter 4
*
Copy the Label definition statements from CustFrame into
CustomerFrame1
Chapter 4
*
RAD inserts the import statement
Chapter 4
*
Delete the System.out.println statement and set the layout to
null
Chapter 4
*
Switch to the design pane
Notice the labels are not on the frame

Chapter 4
*
Drag/drop the four labels
Increase the width of the labels and the height of the frame to
250
Chapter 4
*
Define the button properties so it looks like this
Click on the AWT button icon Click on frame to add the button
Chapter 4
*
Let’s test: add to the actionPerformed method:
System.out.println("listener is working");
run the CustomerFrame1, click the Display button
For more complicated GUI components, RAD creates a get
method that sets all the properties
Add the actionListener to the button in the get button method

Chapter 4
*
Click Display button
Text should appear
Chapter 4
*
CustomerFrame1
Code actionPerformed to retrieve info from Customer object and
put in labels
Use Customer object’s getters and concatenation to build label
text
Can cut and paste CustFrame code into actionPerformed to
overwrite the println statement
Chapter 4
*
Chapter 4

*
Must change cust. to customer.
Can't do Replace All because main uses cust
.
Chapter 4
*
Chapter 4
*
Run, click Display
Why does data appear like this?
Chapter 4
*
Customer cust = new Customer();
cust.setCustName("Thrifty Food");

cust.setShipToStreet("1 Diet Lane");
cust.setShipToCity("Fasting");
cust.setShipToState("IN");
CustomerFrame1 cf1 = new CustomerFrame1(cust);
}
Only these were set
CustomerFrame1
In main, the test data wasn’t complete
Only some properties were set
Chapter 4
*
Change CustApp to create a CustomerFrame1 object
Run CustApp
Chapter 4
*
Click Display button
Notice that the JVM automatically redisplays frame after
actionPerformed method
Chapter 4
*

New Customer Example
CustApp
Customer
Object
CustomerFrame1
Object
Creates Customer object, assigns to variable c, sets object’s
properties
Creates a CustomerFrame1
object, passes c, assigns to variable cf
Retrieves & displays Customer object properties
Non-graded assg: Do it!
Chapter 4
*
Non-graded AssgExport as one jar
fileCustomer.javaCustomerFrame.javaCustomerFrame1.javaCust
App.java
Email the jar file as an email attachment to [email protected]

1User Interface Development User Interface Dev.docx

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 1User Interface Development User Interface Dev.docx

Ähnlich wie 1User Interface Development User Interface Dev.docx (20)

Mehr von felicidaddinwoodie

Mehr von felicidaddinwoodie (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

1User Interface Development User Interface Dev.docx