USER INTERFACE

IMPLEMENTATION
CSH3E3 #3

By : KK SIDE Faculty Team

Topics
• Input Data Media
• Information Output Media
• GUI Windows Component
• Make GUI in Netbeans, DreamWeaver, Visual Studio
• Class Exercise
• Eksploration Exercise
Sub Topic #1

Input Data Media

Input Implementation Methods
• Keyboard
• Mouse
• Touch Screen
• Point-of-sale terminals
• Sound and speech
• Automatic data capture
• Optical mark recognition (OMR)
• Bar codes
• Optical character recognition (OCR)
• Magnetic Ink
• Electromagnetic transmission
• Smart cards
• Biometric
16-4
Taxonomy
Process
for
Data Capture
Computer
Data Entry
Inputs
Data Processing
Method
Keyboard Data is usually captured on Data is entered via OLD: Data can be collected
a business form that keyboard. This is the into batch files (disk) for
becomes the source most common input processing as a batch.
document for input. Data method but also the NEW: Data is processed as
can be collected real-time. most prone to errors. soon as it has been keyed.
Mouse Same as above. Used in conjunction with Same as above, but the use of
keyboard to simplify a mouse is most commonly
data entry. Mouse associated with online and
serves as a pointing real-time processing.
device for a screen.
Touch Same as above. Data is entered o a On PCs, touch screen choices
Screen touch screen display or are processed same as above.
handheld device. Data On handheld computers, data
entry users either touch is sorted on the handheld for
commands and data later processing as a remote
choices or enter data batch.
using handwriting
recognition.

16-5
Taxonomy for Computer Inputs
(continued)
Process
Method
Data Capture Data Entry Data Processing

Point of Sale Data captured as close Data is often entered directly Data is almost always
to the point of sale as by the customer or by an processed immediately
humanly possible. No employee directly interacting as a transaction or
source documents. with the customer. inquiry.
Sound Data is captured as Data is entered using touch- Data is almost always
close to the source as tones (typically from a processed immediately
possible, even when the telephone). Usually requires as a transaction or
customer is remotely rigid command menu structure inquiry.
located. and limited input options.
Speech Same as sound. Data (and commands) is Data is almost always
spoken. This technology is not processed immediately
as mature and is much less as a transaction or
reliable and common than inquiry.
other techniques.
Optical Mark Data is recorded on Eliminates the need for data Data is almost always
optical scan sheets as entry. processed as a batch.
marks or precisely
formed letter, numbers,
and punctuation.

16-6
Taxonomy for Computer Inputs
(concluded)
Process Method Data Capture Data Entry Data Processing
Magnetic Ink Data usually prerecorded A magnetic ink reader reads Data is almost always
on forms that are the magnetized data. The processed as a batch.
completed by the customer-added data must
customer. The customer be entered using another
records additional input method.
information on the form.
Electromagnetic Data is recorded directly Data is transmitted by radio Data is almost always
on the object to be frequency. processed immediately.
described by data.

Smart Card Data is recorded directly Data is read by smart card Data is almost always
on a device to be carried readers. processed immediately.
by the customer,
employee, or other
individual that is
described by that data.
Biometric Unique human Data read by biometric Data is processed
characteristics become sensors. Primary immediately.
data applications are security
and medical monitoring

16-7
Automatic Identification:
Bar Codes

16-8
Input Design Guidelines
• Capture only variable data.
• Not data that can be looked up.
• Do not capture data that can calculated or stored in
computer programs as constants.
• Extended Price, Federal Withholding, etc.
• Use codes for appropriate attributes.

16-9
Source Document /
Form Design Guidelines
• Include instructions for completing the form.
• Minimize the amount of handwriting.
• Data to be entered (keyed) should be sequenced
top-to-bottom and left-to-right.
• When possible use designs based on known
metaphors.

16-10
Bad Flow in a Form

16-11
Good Flow in a Form

16-12
Metaphoric Screen Design

16-13
Internal Controls for Inputs
• The number of inputs should be monitored (to minimize risk of lost
transactions).
• For batch processing
• Use batch control slips
• Use one-for-one checks against post-processing detail reports
• For on-line systems
• Log each transaction as it occurs to a separate audit file
• Validate all data
• Existence checks
• Data-type checks
• Domain checks Need some codes here
• Combination checks
• Self-checking digits
• Format checks
16-14
 Sub Topic #2
Information Output Media
Implementation Methods for
Outputs
• Printed output
• Tabular output presents information in columns.
• Zoned output places text and numbers into designated areas
• Screen output
• Graphic output is the use of pictorial charts to convey information and demonstrate
trends and relationships that cannot be easily seen in tabular formats.
• Point-of-sale terminals
• Multimedia
• E-mail (baru : sms, WA)
• Hyperlinks
• Microfilm or microfiche
15-16
Taxonomy for Computer-Generated
Outputs
Distribution Internal Output
(reporting)
Turnaround Output
(external; then internal)
External Output
(transactions)
Delivery
Printer Detailed, summary, or Business transactions Business transactions
exception information printed on business forms printed on business
printed on hard-copy that will eventually be forms that conclude the
reports for internal returned as input business business transactions.
business use. transactions.
Screen Detailed, summary, or Business transactions Business transactions
exception information displayed on monitors in displayed on business
displayed on monitors for forms or windows that will forms that conclude the
internal business use. also be used to input other business transactions.
data to initiate a related
transaction.
Point-of-Sale Information printed or Information printed or Information printed or
Terminals displayed on special- displayed on a special- displayed on special-
purpose terminals purpose terminal for the purpose terminals
dedicated to specific purpose of initiating a follow- dedicated to
internal business up business transaction. customers.
functions.

15-17
Taxonomy .. (concluded)
Distribution Internal Output Turnaround Output External Output
Delivery (reporting) (external; then internal) (transactions)
Multimedia Information transformed Information transformed into Information
(audio or video) into speech for internal speech for external users who transformed into
users. respond with speech or tone speech for external
input data. users.

E-mail Displayed messages Displayed messages intended Displayed messages

related to internal business to initiate business related to business
information. transactions. transactions.

Hyperlinks Web-based links to Web-based links incorporated Web-based links

internal information that is into Web-based input pages to incorporated into Web-
enabled via HTML or XML provide users with access to based transactions.
formats. additional information.

Microfiche Archival of internal Not applicable unless there is Not applicable unless
management reports to an internal need to archive there is an internal
microfilm that requires turnaround documents. need for copies of
minimal physical storage external reports.
space.

15-18
Chart Types
Line charts show one or more series of data over a period
of time. They are useful for summarizing and showing data
at regular intervals. Each line represents one series or
category of data.

Area charts are similar to line charts except that the focus is
on the area under the line. That area is useful for
summarizing and showing the change in data over time.
Each line represents one series or category of data.

Bar charts are useful for comparing series or categories of

data. Each bar represents on series or category of data.

Column charts are similar to bar charts except that the bars
are vertical. Also, a series of column charts may be used to
compare the same categories at different times or time
intervals. Each bar represents one series or category of
data.
15-19
Chart Types (concluded)
Pie charts show the relationship of parts to a whole. They are
useful for summarizing percentages of a whole within a single
series of data. Each slice represents one item in that series of
data.

Donut charts are similar to pie charts except that they can show
multiple series or categories of data, each as its own concentric
ring. Within each ring, a slice of that ring represents one item in
that series of data.

Radar charts are useful for comparing different aspects of more

than one series or category of data. Each data series is
represented as a geometric shape around a central point. Multiple
series are overlaid so they can be compared.

Scatter charts are useful for showing the relationship between two
or more series or categories of data measured at uneven intervals
of time. Each series is represented by data points using either
different colors or bullets.
15-20
Output Design with an Old Style
Printer Spacing Chart

15-21
Output Design with a Modern CASE
Tool

15-22
Output Design with a Report Writer
Tool

15-23
Output Design with a Report Writer
Tool (continued)

15-24
 Sub Topic #3

Common GUI Component

(Windows & Web)
Common GUI Controls (Windows and
Web)
• Text boxes
• Radio buttons
• Check boxes
• List boxes
• Drop down lists
• Combination
boxes
• Spin boxes
• Buttons

16-26
Common GUI Controls Uses
• Text boxes
• When the input data values are unlimited in scope
• Radio buttons
• When data has limited predefined set of mutually exclusive values
• Check boxes
• When value set consists of a simple yes or no value
• List boxes
• When data has a large number of possible values
• Drop down lists
• When data has large number of possible values and screen space is
too limited for a list box
• Combination boxes
• To provide user with option of selecting value from a list or typing a
value that may or may not appear in the list
• Spin boxes
• When need to navigate through a small set of choices or directly
typing a data value
16-27
Advanced Controls (mostly Windows
interfaces)
• Drop down
calendars
• Slider edit controls
• Masked edit
controls
• Ellipsis controls
• Alternate numerical
spinners
• Check list boxes
• Check tree boxes

16-28
Advanced Controls (mostly Windows
interfaces)

16-29
 Sub Topic #4
GUI in Netbeans, Dream Weaver, Visual Studio
Make GUI in Netbeans
Exercise 1: Creating a Project
The first step is to create an IDE project for the application that we are going to develop. We
will name our project NumberAddition.
• Choose File > New Project. Alternatively, you can click the New Project icon in the IDE
toolbar.
• In the Categories pane, select the Java node. In the Projects pane, choose Java Application.
Click Next.
• Type NumberAddition in the Project Name field and specify a path, for example, in your
home directory, as the project location.
• (Optional) Select the Use Dedicated Folder for Storing Libraries checkbox and specify the
location for the libraries folder. See Sharing a Library with Other Users in Developing
Applications with NetBeans IDE for more information.
• Deselect the Create Main Class checkbox if it is selected.
• Click Finish.
Exercise 2: Building the Front End
• To proceed with building our interface, we need to create a Java
container within which we will place the other required GUI
components. In this step we'll create a container using the JFrame
component. We will place the container in a new package, which will
appear within the Source Packages node.
Create a JFrame container
• In the Projects window, right-click the NumberAddition node and choose New >
Other.
• In the New File dialog box, choose the Swing GUI Forms category and the JFrame
Form file type. Click Next.
• Enter NumberAdditionUI as the class name.
• Enter my.numberaddition as the package.
• Click Finish.

The IDE creates the NumberAdditionUI form and the NumberAdditionUI class
within the NumberAddition application, and opens the NumberAdditionUI form in
the GUI Builder. The my.NumberAddition package replaces the default package.
Adding Components: Making the
Front End
• Next we will use the Palette to populate our application's front end
with a JPanel. Then we will add three JLabels, three JTextFields, and
three JButtons. If you have not used the GUI Builder before, you might
find information in the Designing a Swing GUI in NetBeans IDE tutorial
on positioning components useful.

• Once you are done dragging and positioning the aforementioned

components, the JFrame should look something like the following
screenshot.
If you do not see the Palette window in the upper right corner of the IDE, choose
Window > Palette.

• Start by selecting a Panel from the Swing Containers category on Palette and drop it
onto the JFrame.
• While the JPanel is highlighted, go to the Properties window and click the ellipsis
(...) button next to Border to choose a border style.
• In the Border dialog, select TitledBorder from the list, and type in Number Addition
in the Title field. Click OK to save the changes and exit the dialog.
• You should now see an empty titled JFrame that says Number Addition like in the
screenshot. Look at the screenshot and add three JLabels, three JTextFields and
three JButtons as you see above.
Renaming the Components

In this step we are going to rename the display text of the components that were just added to the JFrame.

• Double-click jLabel1 and change the text property to First Number:.

• Double-click jLabel2 and change the text to Second Number:.
• Double-click jLabel3 and change the text to Result:.
• Delete the sample text from jTextField1. You can make the display text editable by right-clicking the text
field and choosing Edit Text from the popup menu. You may have to resize the jTextField1 to its original size.
Repeat this step for jTextField2 and jTextField3.
• Rename the display text of jButton1 to Clear. (You can edit a button's text by right-clicking the button and
choosing Edit Text. Or you can click the button, pause, and then click again.)
• Rename the display text of jButton2 to Add.
• Rename the display text of jButton3 to Exit.
• Your Finished GUI should now look like the following screenshot
Make GUI in DreamWeaver
Site Structure
• All the files that you want to use in your website must be put into a
single directory or folder, that is to say stored in one area of your
computer.
• Similar content should be grouped together to make it easier to find
later. For example all you images should be put into the same folder.
• Folders don’t add any size to your Website, they just help you
organize the content in it
Check Webpage Navigation Map
Read Tutorial DreamWeaver
• PDF Tutorial DreamWeaver
Make GUI in Visual Studio
PDF Tutorial Visual Studio
Sub Topic #5. Demo in Class
• Make User Interface in Netbean, or others
Task Week #4
• Check for all “use case” of all actors in your Use Case Diagram Project
in SDD (DPPL)
• Make all User Interface Form/Pages of your Application
• Put all of it in document (docs or pdf)
• Save in GitHub account of your Project Group
• Upload pdf with link GitHub to LMS
References
• System Analysis and Design Methods – Whitten Bentley
• http://www.netbean.org
• http://www.dreamweaver.org
• http://www.visualstudio.com
THANK YOU