ICS 2570 APPLICATION PROGRAMMING

COURSE OUTLINE:
User Interface;

Graphic User Interface (GUI) elements, basic code construction in Visual Basic.

Logical data structures, screen and dialog design, prototyping. Use of ACCESS and Visual Basic

Macros in a user interface. Application of the concepts of analysis and design. Design of a relational

database application using ACCESS/Visual Basic to build a prototype.

Internet and World Wide Web (WWW):

Hypertext Mark-up Language (HTML) coding; fonts, lines,

maps, hyperlinks, frames. Design and implementation of Internet application programs: Fundamentals

of the Web, introduction to client/server architectures, web browsers and network programming. JAVA

and the Internet; applet, graphics, fonts, colour, windows and networking, programming tools,

standard extensions.
INTRODUCTION
An application program
An application program or application software, is a computer software package that performs a specific
function directly for an end user or, in some cases, for another application. An application can be self-
contained or a group of programs.
It is a comprehensive, self-contained program that performs a particular function directly for the user.
Among many others, application programs include:

 Email
 Web browsers
 Word processors
 Enterprise software
 Accounting software
 Graphics software
 Database management

Because every program has a particular application for the end user, the term "application" is used. For
instance, a word processor can help the user create an article, whereas a game application can be used
for entertainment.

Application software and system software

Application software and system software are the two major types of software available. System
software manages the internal operation of a computer, mainly via an operating system (OS). It
manages peripherals like storage devices, printers and monitors as well. On the contrary, application
software or an application program guides the computer to carry out instructions provided by the user.
System software includes programs running in the background, which enable application programs to
function. System software programs include compilers, assemblers, file management tools as well as the
OS itself. Application programs function on top of the system software as the system software is built
from "low-level" programs. System software is automatically installed during the OS installation.
However, users have the option to select which application programs are installed on their systems.

Some examples of application programs include:

 Application suite: Includes various applications packaged together

 Enterprise software: Addresses the data flow and process requirements of an organization,
covering entire departments
 Content access software: Used mainly to gain access to content without editing
 Media development software: Creates electronic and print media
 Educational software: Includes content and/or features intended for students or educators
 Product engineering software: Develops software and hardware products

An application programming interface (API)

An application programming interface (API) is an interface that provides programmatic access to service
functionality and data within an application or a database. It can be used as a building block for the
development of new interactions with humans, other applications or smart devices.
CHAPTER ONE:
GUI: GRAPHICAL USER INTERFACE
GUI stands for Graphical User Interface. It refers to an interface that allows one to interact with
electronic devices like computers and tablets through graphic elements. It uses icons, menus and other
graphical representations to display information, as opposed to text-based commands. The graphic
elements enable users to give commands to the computer and select functions by using mouse or other
input devices.
GUI allows users to interact with electronic devices, such as computers, laptops, smartphones and
tablets, through graphical elements. It’s a valuable part of software application programming in regards
to human-computer interaction, replacing text-based commands with user-friendly actions. Its goal is to
present the user with decision points that are easy to find, understand and use. In other words, GUI lets
you control your device with a mouse, pen or even your finger.
GUI was created because text command-line interfaces were complicated and difficult to learn. The GUI
process lets you click or point to a small picture, known as an icon or widget, and open a command or
function on your devices, such as tabs, buttons, scroll bars, menus, icons, pointers and windows. It is
now the standard for user-centered design in software application programming.
Programs that use GUI are known as “GUI programs.” The program creates small pictures of tasks or
functions and waits for the user to interact with them. The user controls when and how they will be
used. To select functions, users can either use a keyboard, pointing device, such as a mouse, touchpad
or touchscreen depending on the device.
The programs which run under a GUI has a specific set of graphic elements so that after learning a
specific interface, a user can use these programs without learning new commands.
Xerox 8010 Information system was the first GUI-centric computer operating model. It was developed at
Xerox PARC by Alan Kay, Douglas Engelbart and their associates.
As of 2014, the most popular GUIs are Microsoft Windows and Mac OS X. And, if we talk about mobile
devices, the Apple's IOS and Google's Android Interface are the widely used GUIs.

Basic Components of a GUI

o Pointer: It is a symbol that appears on the display screen. It can be moved to select commands
and objects.
o Pointing device: It allows you move the pointer and select objects on the screen, e.g. mouse or
trackball.
o Icons: It refers to small images on the display screen that represent commands, files, windows
etc. Using pointer and pointing device, you can execute these commands.
o Desktop: It is the display screen that contains the icons.
GUI KEY Benefits
o It allows you to place more information within a program.
o The graphics allow users to use complex programs with greater ease.
o It saves time as you do not need to edit configurations manually.
o You can easily memorize the tasks (point-and-click).
o Helps create user-friendly software with a point-and-click interface.
GUI elements
GUI uses structural elements that together define the appearance of the interface. GUI pulls its
elements from four basic groups, including:

1. Input controls
Here are examples of GUI input control elements:

 Buttons: Buttons are circles that let you make immediate choices and take actions. Radio
buttons come in groups where only one button can be selected at a time. Label buttons have
text on them. If you want more than one option to be selected, consider using a check box.

 Checkboxes: Checkboxes are square boxes in a list of one or more options. When you click the
box, it stays selected. They are best presented in a vertical list. A checkbox can be a single box,
such as acknowledging a statement, or a list of related items, such as a shopping list.

 Date picker: A date picker lets you select a date and/or time. The creator can choose a
calendar or a fill-in option. It ensures that a consistent format is used, such as “day, month,
year.”

 Dropdown lists: Dropdown lists lets you select one item at a time. Several items can be
included compactly. Consider adding directions, such as “select one” to let the user know what
to do. The creator can add or delete items to keep the list up to date.

 List boxes: List boxes let you select multiple items from one compact list. Use this GUI feature if
you have a long list of options for the user to consider. There are four variations of list boxes:
single-line, multi-select, multi-select with checkboxes and multi-select-dual list boxes.

 Text boxes: Text boxes are fields that let you enter text. The creator can control how much text
is allowed.

 Toggles: Toggle buttons let you change a setting typically as off/on states.
2. Navigational components
Here are examples of GUI navigational elements:
 Breadcrumbs: Breadcrumbs provide a clickable trail of proceeding pages. They give you a visual
map of pages for your navigation ease.

 Icons: An icon is a small image used as a symbol to help you navigate the system. They are
typically used to indicate an application, folder, file or web browser. Using an icon is a fast way
to open documents and run programs. Also, all files that you create in the same application will
have the icon of the application and the same extension.

 Image carousel An image carousel lets you scroll through a set of images and choose the one
you’d like to see enlarged. The carousel typically holds thumbnail images that may be
hyperlinked.

 Pagination: Pagination divides content into pages and lets you skip between them or follow
them in order.

 Search field: The search box lets you enter a keyword or phrase to search an index for relevant
results. They typically are one-line text boxes with a search button.

 Slider: A slider has a bar and a tick that slides across it. The creator can control the size of the
bar and tick, the bar margins and its orientation.

 Tags: Tags let you find content within the same category. Options include giving the user the
ability to add their own tags into the system.

 Tabs: A tab is a small box that displays the name or graphical icon associated with a specific
window. When you choose a tab, you will see the specific controls and information presented in
that window. For example, when you open multiple pages in a web browser, you will see the
different tabs displayed at the top of the browser window.

3. Informational components
Here are examples of GUI informational elements:
 Message box: A message box is a small window with information such as a policy or disclaimer.
It requires you to take action before you proceed.

 Notifications: A notification is a message box. Typically, they are used to indicate emergency
warnings, error messages or task completion.

 Pop-up windows: A pop-up, or modal, window requires you to interact with it before you can
return to the system.

 Progress bar: A progress bar shows where you are in a series of steps in a process. Typically,
progress bars are not clickable. For example, a progress bar might show your pizza order’s status
in the order, cook and delivery process.

 Tool tips: A tool tip offers you more information when you hover over an item. For example, you
might receive a definition and usage examples when you hover over a word or phrase.
4. Containers
Here is an example of a GUI container element:

 Accordions: Accordions are stacked lists of items that have a show and hide functionality. When
the label is clicked, the list expands to its full size.

Interaction elements of a GUI

Apart from structural elements, a GUI also features interaction elements, such as:

 Cursors: A cursor indicates the place where the system will accept input next. It can either be a
pointer, which follows the movements of a pointing device—such as a mouse—or a text cursor,
which indicates the point of focus in a current text box.

 Selections: A selection refers to a list of items to which a user will apply an operation. A user will
select a portion of text for cut, copy and paste operations. Image editing applications allow
users to select and modify certain areas of an image by using the magic wand selection or lasso
selection tools.

 Adjustment handles: A handle serves as the indicator of a drag and drop operation. When a
user places the pointer on the handle to initiate the drag process, its shape changes to an icon
that represents the drag function.

What are the benefits of a GUI?

Older desktop operating systems, such as MS-DOS, and many current programming languages, employ
command-line interfaces that require you to type in long lines of code at a command line to access the
system’s functions. You have to know the system’s available commands and how to input them in the
correct format. This means that small mistakes, like spelling errors or incorrect spacing, will prevent a
function from being executed.

GUI uses visual elements to represent those now hidden lines of command. You simply select a button
or an icon to call the relevant function. The easy use of GUIs has made it possible for the public in
general, regardless of experience or knowledge, to access all kinds of systems for everyday use.

There are many other benefits to using GUI. Here are some of the most common:

1. Easy to use

Since data is represented by symbols, shapes and icons, users can easily recognize, classify and navigate
options. A simple click is all it takes to acquire a function. Because it’s so easy to use and understand,
GUI has become the preferred interface for computers and mobile devices.

2. Easy to communicate

Visual representation of data is recognized faster than text. Non-programmers find it easy to use GUIs
since it requires no experience with computing commands. They don’t have to worry about writing or
debugging code. As a result, users find GUI an easy-to-learn interface.
3. Attractive

GUI has visually appealing features and is not cluttered with command line codes. Visual images can
portray emotions, comments and situations with long lines of computer language. Pictures and such are
easy to understand and often carry universal meaning.

4. Provides shortcuts

GUI lets users take advantage of shortcut keys to minimize strokes. A combination of two keys in place
of several actions saves the user time and increases productivity. For example, a call-to-action button
can pull up a form, a prefilled letter or a list of contact information. That one button saves you from
searching for the same information.

5. Allows for multitasking

GUI lets users work and view two or more programs at the same time. For example, you can view a
streaming presentation while searching the internet from a web browser. You can watch a video while
writing a review of the presentation with a search engine in another tab.
PART TWO:
Basic code construction in Visual Basic:
1.1 A Brief Description of Visual Basic 2017

Visual Basic is a third-generation event-driven programming language first released by Microsoft in

1991. The final version of the classic Visual Basic was Visual Basic 6. Visual Basic 6 is a user-friendly
programming language designed for beginners. Many developers still favor VB6 over its successor
VB.NET.

In 2002, Microsoft released Visual Basic.NET (VB.NET) to replace Visual Basic 6. Thereafter,
Microsoft declared VB6 a legacy programming language in 2008. However, Microsoft still provides
some form of support for VB6. VB.NET is a fully object-oriented programming language
implemented in the .NET Framework. It was created to cater for the development of the web as well
as mobile applications.

Subsequently, Microsoft has released many versions of VB.NET. They are Visual Basic 2005, Visual
Basic 2008, Visual Basic 2010, Visual Basic 2012, Visual Basic 2013, Visual Basic 2015 and Visual Basic
2017. Although the .NET portion was discarded in 2005, all versions of the Visual Basic programming
language released since 2002 are regarded as VB.NET programming language

Visual Basic 2017 was released in 2017. It is bundled as a .NET desktop development component
Visual Studio 2017. VB2017 can be used to build windows desktop applications using the .NET
framework. Besides that, Visual Studio Community 2017 also comes with other Windows
development tools that include Universal Windows Platform Development that creates applications
for the Universal Windows Platform with C#, VB, JavaScript and C++. On top of that, it also includes
Desktop Development with C++

In addition, to cater for the increasing needs of web and cloud-based applications, VS2017 also
provides the Web and Cloud development tools that include ASP.NET, Python, Azure SDK, Node.js,
data storage and processing, data science and analytical applications as well as Office/SharePoint
development. Furthermore, VS2017 also cater for the development of mobile applications by
including the mobile and gaming tools like mobile development with .NET, game development with
Unity, mobile development with JavaScript, mobile development with C++ and game development
with C++. With the mobile development and gaming tools, you can build IOS and Android mobile
apps and mobile games.

Downloading Visual Studio 2017

You can download Visual Studio 2017 from the following link:
https://visualstudio.microsoft.com/vs/older-downloads/ after downloading the file, run the
VS2017RC community installer file. If you receive a User Account Control notice, click Yes. Next, it
will ask you to acknowledge the Microsoft License Terms and the Microsoft Privacy Statement, as
shown in Figure 1.1. Click Install to continue.
You will see several status screens that show the progress of the installation. After installation
completed, you can select the feature set that you want, as shown in Figure 1.2. Since we are keen on
developing Visual Basic 2017 desktop app, we will select the .NET 13 desktop development component.
Besides that, you might want to install a language by clicking the Language packs. After making your
selections, click install.

Figure 1.2

Upon completion of the installation, you can start programming in Visual Basic 2017.
1.2 The Visual Studio 2017 IDE
When you launch Microsoft Visual Studio 2017, you will be presented with the Start Page of Microsoft
VS 2017, as shown in Figure 1.3

Figure 1.3 Visual Studio 2017 IDE

The Visual Studio 2017 start page comprises a few sections, the Get Started section, the recent section,
the Open section, the New project section and the Developers News section. In the start page, you can
either start a new project, open a project or open a recent project. Besides that, you can also check for
the latest news in Visual Studio 2017 for Windows Desktop. The Start Page also consists of a menu bar
and a toolbar where you can perform various tasks by clicking the menu items.

1.3 Creating a New Project in Visual Studio 2017