Grade

TLE- ICT
COMPUTER PROGRAMMING I
QUARTER 4 – MODULE 3
INTEGRATED DEVELOPMENT ENVIRONMENT
(IDE) and GRAPHICAL USER INTERFACE (GUI)
 What Do You Need To Know?

I.INTRODUCTION
In this module, we are going to describe the significance of using the Integrated
Development Environment (IDE) and define what a Graphical User Interface is.
II. MODULE CONTENT
What is Integrated Development Environment (IDE)?
An Integrated Development Environment (IDE) is a software application that facilitates
application development. It allows developers to design, build, test, and debug computer
programs within one environment.
An IDE normally consists of the following tools – source code editor, compiler and/or interpreter,
debugger, and build automation tools.
• source code editor – a text editor designed for writing and editing software code with
features like syntax highlighting with visual cues, providing language auto-completion,
and checking for bugs as code is being written.
• compiler and/or interpreter - these are tools that transform source code written in human
readable/writable language into machine code to be executed by the computer.
• debugger – this tool is used during testing to help debug application programs, allowing
programmers to examine and inspect their code in a deliberate way.
• build automation tools - utilities that automate simple, repeatable tasks as part of creating
a local build of the software for use by the developer.
Some IDEs’ might also include the following:
• class browser – a tool used to examine and reference the properties of an object-
oriented class hierarchy.
• object browser – this feature is used to examine the objects instantiated in a running
application program.
• class hierarchy diagram – this tool allows the programmer to visualize the structure of
object–oriented programming code.
Advantages of Using an IDE
Integrated development Environments are designed to maximize developer productivity by
regulating the development process. Some of the advantages include:
• Less Time and Effort: The purpose of using IDE is to make software development
faster and easier. Its tools and features are supposed to help developers organize
resources, prevent mistakes, and provide shortcuts.
1
 • Enforce project or company standards: A group of developers working in the same
development environment will stick to a standard way of doing things. Standards can be
enforced if IDE offers predefined templates, or if code libraries are shared among
different teams working on the same project.
• Project Management: Various files have been referenced in specific path locations
when writing a new program and to properly run the program, these files should be in
correct locations. With the use of an IDE, it is easier for the user to visualize the
locations of these files and making it more understandable for the user.
Disadvantages of Using an IDE
• IDEs are complicated tools. Maximizing their benefit will require time and patience.
• IDEs may be too complex for beginners.
• IDE will not fix bad code, practices, or design.

Different Types of IDE

Some IDEs support multiple languages, such as
• Eclipse is a free and open-source editor modeled for many development frameworks. It
began as Java development environment, expanded through plug-ins and supports C,
C++, Python, Perl, PHP, Java, Ruby, and more. Eclipse is managed and directed by the
Eclipse.Org Consortium.
• NetBeans supports Java, JavaScript, Python, PHP, Ruby, C, C++, and more. It is also a
free and open-source editor, and all the functions of the IDE are provided by modules
and each provides a well-defined function. Support for other programming languages
can be added by installing additional modules.
• Komodo IDE supports Perl, Python, Tcl, PHP, Ruby, Javascript, and more.
• Aptana is a popular choice for web application development. It supports HTML, CSS,
JavaScript, AJAX, and others via plug-ins.
• Geany is a highly customizable environment with a large set of plug-ins. It supports Java,
C, PHP, HTML, Python, Perl, Pascal and many more.
There are IDEs specifically for mobile development, including PhoneGap and
Appcelerator’s Titanium Mobile. Dreamweaver, HomeSite, or Frontpage are some of the most
popular IDEs for developing HTML applications.Cloud-based IDEs are starting to become
mainstream. These are web-based IDEs allowing developers to have access to their code
anywhere. Heroku is an example of a cloud-based development platform as a service which
enables developers to build, run, and operate applications entirely in the cloud supporting
several programming languages.

2
GRAPHICAL USER INTERFACE
What is a GUI?
GUI stands for graphical user interface. It is a form of user interface that allows users to interact
with electronic devices through graphical elements such as windows, icons, cursors, and
buttons. It displays objects that convey information and represent actions that can be taken by
the user. A GUI is a specification for the look and feel of the computer system.

In 1963, Ivan Sutherland developed the first graphical computer-aided design program called
Sketchpad which uses a light pen to create and manipulate objects in engineering drawings in
real time with coordinated graphics.
In the late 1960s, Douglas Engelbart and his team developed the On-Line Systems (NLS) at the
Standford Research Institute. It was the first to employ the practical use of hypertext links
manipulated with a mouse.
In 1970s, Alan Kay and some researchers at Xerox PARC redefined and extended Engelbart's
ideas to graphics and used GUI as the main interface of the SmallTalk programming language,
which ran on the Xerox Alto computer, released in 1973.

The Xerox PARC user interface consisted of graphical elements such as windows, menus, radio
buttons, and check boxes. The concept of icons was later introduced by David Canfield Smith.
The first computer with GUI never reached commercial production.

In 1981, the Xerox 8010 Information System, commonly known as Xerox Star was released.
Unfortunately, it was too slow and it was not commercially successful. Steve Jobs saw the interface
of the Xerox Star during a tour in Xerox and had his team at Apple to develop an operating system
with a similar design. They first produced Lisa and it was not commercially successful. In 1984,
Apple developed the commercially successful GUI-based operating system, Macintosh and in 1985,
Microsoft released their first GUI-based operating system, Windows 1.0.

Below are examples of a graphical user interface.

3
STRUCTURAL ELEMENTS OF GUI
Graphical User Interface use visual elements to represent information. The following are the
elements which defines the appearance of the GUI:
WINDOW

A window is an element that displays the

information on the screen. It can be opened or
closed with the click of an icon and it can be
moved to any area by dragging it. You can place a
window in front or behind another window and you
can adjust its size. Multiple windows can be
opened at the same time, in which each window
can perform different tasks.

The following are the various types of windows in a graphical user interface:
• Container window encloses other windows or controls.
• Browser window allows the user to view and navigate through a sequence of
documents or web pages. Web browsers are an example of these types of windows.
• Text terminal windows are designed for embedding interaction with text user
interfaces within the overall graphical interface. MS-DOS and UNIX consoles are
examples of these types of windows.
• Child window opens automatically or because of a user activity in a
parent window. Pop-up windows on the Internet can be child windows.
• Message window, or dialog box, is a type of child window. These are usually small
and basic windows that are opened by a program to display information to the user
and/or get information from the user. They usually have a button that must be pushed
before the program can be resumed.

MENUS

Menus allow the user to execute commands by selecting

from a list of choices.

• Menu bar is displayed horizontally across the top of the screen. A pull-down menu is
associated with this type of menu. When a user clicks on a menu option, the pull-
down menu will appear.
• Context menu is invisible until the user performs a specific mouse action. When the
software-specific mouse action occurs, the menu will appear under the cursor.
• Menu extras are individual items within or at the side of a menu.

ICONS

An icon is a small picture that represents objects such as files,

programs, web pages, etc. Clicking on icons yields instant access
to programs.

4
CONTROLS ( widgets) are software components that the user interacts with through direct
manipulation to read or edit information about an application. Widgets are used to display lists of
similar items, navigate systems using links and manipulate data using check boxes, radio
boxes, etc.

TAB is a small rectangular box which usually contains text label or graphical icon associated
with a view pane. Tabs are used in various web browsers. You can have multiple web pages
open at once in one window and navigate between them by clicking on the tabs associated
with the pages.

INTERACTION ELEMENTS are interface objects that represent the state of an

ongoing operation.

• cursor – is an indicator used to show the position on a computer monitor.

• pointer – echoes the movement of the pointing device (e.g. mouse and touchpad)
• insertion point – represents the point of the user interface where the focus is located.
• selection – is a list of items on which user operations will take place.
• adjustment handle – is an indicator of a starting point for a drag and drop operation.

III.ACTIVITIES

A. TAG ME!
Directions: Determine the name of the following IDE and programming language
logo. Write your answer on a separate sheet of paper.

1. 6.

_____________ _____________
2. 7.

______________ _____________
3. 8.

______________ _____________
4. 9.

______________ _____________

5. 10.

______________ _____________

5
B. Matching type
Directions: Match the following terms in column A to its corresponding meaning in column B

COLUMN A COLUMN B
1. Child window A. A specification for the look and feel of the computer system.
2. Heroku B. He introduced the concept of icons.
3. GUI C. Allows the user to view and navigate through a sequence
of documents or web pages
4. IDE D. An indicator used to show the position on a computer
monitor.
5. Douglas Engelbart E. He led the development of the On-Line Systems
6. David Canfield Smith F. Pop-up windows on the Internet.
7. Browser window G. An indicator of a starting point for a drag and drop
operation.
8. Adjustment handle H. A software application that facilitates application
development.
9. Pointer I. Echoes the movement of the pointing device
10. Cursor J. An IDE platform as a service which enables developers
to build, run, and operate applications entirely in the cloud
.
SUMMATIVE
IV. ASSESSMENT

TEST I. IDENTIFICATION
Directions: Identify the word/s being described in each item. Write your answer on
a separate sheet of paper.

1. A GUI element that displays the information on the screen.

2. This IDE has a highly customizable environment with a large set of plug-ins.

3. This IDE feature is used to examine the objects instantiated in a running application program.

4. It is a form of user interface that allows users to interact with electronic devices through
graphical elements.

5. The first graphical computer-aided design program developed by Ivan Sutherland.

6. These are usually small and basic windows that are opened by a program to
display information to the user and/or get information from the user.

7. A tool used to examine and reference the properties of an object-oriented class hierarchy.

8. These are small picture that represents objects such as files, programs, web pages, etc.

6
9. This tool allows the programmer to visualize the structure of object–oriented programming
code.
10. A rectangular small box which usually contains text label or graphical icon associated with
a view pane.

TEST II. Analogy

Directions: Analyze the following words and fill in the blanks.
1. source code editor: text editor
compiler: ________________
2. Mobile IDE: PhoneGap
_________: Heroku
3. Sketchpad: _____________
On-Line Systems: Douglas Engelbart
4. Xerox PARC: Xerox Star
__________: Lisa
5. Apple: Steve Jobs
Xerox PARC: _______

TEST III. ESSAY

Directions: Answer the following questions.

1. What is a graphical user interface?

2. Cite two (2) IDEs for Microsoft and two (2) IDEs for Apple. Indicate the programming
languages that each IDE supports.

Your output will be scored according to the rubrics below.

Features 4 3 2 1
Quality of Piece was Piece was Piece had a little Piece had no
Writing written in an written in an style, gives style, gives no
extraordinary interesting style. some new new information
style. Somewhat information but and very poorly
Very informative informative and poorly organized organized
and organized organized
Grammar Usage No spelling, Few spelling, A number of So many
and Mechanics punctuation or punctuation or spelling, spelling,
grammatical grammatical punctuation or punctuation or
errors. errors. grammatical grammatical
errors. errors that it
interferes with
the meaning.

7
REFERENCES:

https://www.digitalocean.com/community/tutorials/what-is-an-integrated-development-
environment
https://www.veracode.com/security/integrated-development-environment
https://www.redhat.com/en/topics/middleware/what-is-ide
https://salfarisi25.wordpress.com/2010/12/22/advantage-and-disadvantage-of-using-ide/
https://psu.pb.unizin.org/ist110/chapter/7-3-graphical-user-interfaces/
https://www.tutorialspoint.com/graphical-user-interface-gui