COSC 0242: DESKTOP APPLICATION DEVELOPMENT (30/30: C.F 3.0) Notes
Planning the Design of an Application
What is SDLC?
SDLC is a process followed for a software project, within a software organization. It consists of
a detailed plan describing how to develop, maintain, replace and alter or enhance specific
software. The life cycle defines a methodology for improving the quality of software and the
overall development process.
The following figure is a graphical representation of the various stages of a typical SDLC.
A typical Software Development Life Cycle consists of the following stages −
Stage 1: Planning and Requirement Analysis
Requirement analysis is the most important and fundamental stage in SDLC. It is performed by
the senior members of the team with inputs from the customer, the sales department, market
surveys and domain experts in the industry. This information is then used to plan the basic project
approach and to conduct product feasibility study in the economical, operational and technical
areas.
Planning for the quality assurance requirements and identification of the risks associated with the
project is also done in the planning stage. The outcome of the technical feasibility study is to
define the various technical approaches that can be followed to implement the project successfully
with minimum risks.
Stage 2: Defining Requirements
Once the requirement analysis is done the next step is to clearly define and document the product
requirements and get them approved from the customer or the market analysts. This is done
through an SRS (Software Requirement Specification) document which consists of all the
product requirements to be designed and developed during the project life cycle.
Stage 3: Designing the Product Architecture
SRS is the reference for product architects to come out with the best architecture for the product
to be developed. Based on the requirements specified in SRS, usually more than one design
approach for the product architecture is proposed and documented in a DDS - Design Document
Specification.
This DDS is reviewed by all the important stakeholders and based on various parameters as risk
assessment, product robustness, design modularity, budget and time constraints, the best design
approach is selected for the product.
A design approach clearly defines all the architectural modules of the product along with its
communication and data flow representation with the external and third party modules (if any).
The internal design of all the modules of the proposed architecture should be clearly defined with
the minutest of the details in DDS.
Stage 4: Building or Developing the Product
In this stage of SDLC the actual development starts and the product is built. The programming
code is generated as per DDS during this stage. If the design is performed in a detailed and
organized manner, code generation can be accomplished without much hassle.
Developers must follow the coding guidelines defined by their organization and programming
tools like compilers, interpreters, debuggers, etc. are used to generate the code. Different high
level programming languages such as C, C++, Pascal, Java and PHP are used for coding. The
programming language is chosen with respect to the type of software being developed.
Stage 5: Testing the Product
This stage is usually a subset of all the stages as in the modern SDLC models, the testing activities
are mostly involved in all the stages of SDLC. However, this stage refers to the testing only stage
of the product where product defects are reported, tracked, fixed and retested, until the product
reaches the quality standards defined in the SRS.
Stage 6: Deployment in the Market and Maintenance
Once the product is tested and ready to be deployed it is released formally in the appropriate
market. Sometimes product deployment happens in stages as per the business strategy of that
organization. The product may first be released in a limited segment and tested in the real business
environment (UAT- User acceptance testing).
Then based on the feedback, the product may be released as it is or with suggested enhancements
in the targeting market segment. After the product is released in the market, its maintenance is
done for the existing customer base.
SDLC Models
There are various software development life cycle models defined and designed which are
followed during the software development process. These models are also referred as Software
Development Process Models". Each process model follows a Series of steps unique to its type
to ensure success in the process of software development.
Following are the most important and popular SDLC models followed in the industry −
•
•
•
•
•
Waterfall Model
Iterative Model
Spiral Model
V-Model
Big Bang Model
Other related methodologies are Agile Model, RAD Model, Rapid Application Development and
Prototyping Models.
Waterfall Model - Design
Waterfall approach was first SDLC Model to be used widely in Software Engineering to ensure
success of the project. In "The Waterfall" approach, the whole process of software development
is divided into separate phases. In this Waterfall model, typically, the outcome of one phase acts
as the input for the next phase sequentially.
The following illustration is a representation of the different phases of the Waterfall Model.
Iterative Model - Design
Iterative process starts with a simple implementation of a subset of the software requirements and
iteratively enhances the evolving versions until the full system is implemented. At each iteration,
design modifications are made and new functional capabilities are added. The basic idea behind
this method is to develop a system through repeated cycles (iterative) and in smaller portions at a
time (incremental).
Spiral Model - Design
The spiral model has four phases. A software project repeatedly passes through these phases in
iterations called Spirals.
Identification
Design
Construct or Build
Evaluation and Risk Analysis
V-Model - Design
Under the V-Model, the corresponding testing phase of the development phase is planned in
parallel. So, there are Verification phases on one side of the ‘V’ and Validation phases on the
other side. The Coding Phase joins the two sides of the V-Model.
Big Bang Model ─ Design and Application
The Big Bang Model comprises of focusing all the possible resources in the software development
and coding, with very little or no planning. The requirements are understood and implemented as
they come. Any changes required may or may not need to revamp the complete software.
This model is ideal for small projects with one or two developers working together and is also
useful for academic or practice projects. It is an ideal model for the product where requirements
are not well understood and the final release date is not given.
What is Agile?
Agile model believes that every project needs to be handled differently and the existing methods
need to be tailored to best suit the project requirements. In Agile, the tasks are divided to time
boxes (small time frames) to deliver specific features for a release.
Iterative approach is taken and working software build is delivered after each iteration. Each build
is incremental in terms of features; the final build holds all the features required by the customer.
What is RAD?
Rapid application development is a software development methodology that uses minimal
planning in favor of rapid prototyping. A prototype is a working model that is functionally
equivalent to a component of the product.
In the RAD model, the functional modules are developed in parallel as prototypes and are
integrated to make the complete product for faster product delivery. Since there is no detailed
preplanning, it makes it easier to incorporate the changes within the development process.
RAD projects follow iterative and incremental model and have small teams comprising of
developers, domain experts, customer representatives and other IT resources working
progressively on their component or prototype.
What is Software Prototyping?
The most important aspect for this model to be successful is to make sure that the prototypes
developed are reusable.
Prototype is a working model of software with some limited functionality. The prototype does
not always hold the exact logic used in the actual software application and is an extra effort to be
considered under effort estimation.
Prototyping is used to allow the users evaluate developer proposals and try them out before
implementation. It also helps understand the requirements which are user specific and may not
have been considered by the developer during product design.
What is VB.Net?
VB.NET stands for Visual Basic.NET, and it is a computer programming language developed by
Microsoft. It was first released in 2002 to replace Visual Basic 6. VB.NET is an object-oriented
programming language. This means that it supports the features of object-oriented programming
which include encapsulation, polymorphism, abstraction, and inheritance.
Visual Basic .ASP NET runs on the .NET framework, which means that it has full access to the
.NET libraries. It is a very productive tool for rapid creation of a wide range of Web, Windows,
Office, and Mobile applications that have been built on the .NET framework.
Advantages of VB.NET
The following are the pros/benefits you will enjoy for coding in VB.NET:
•
•
•
•
•
Your code will be formatted automatically.
You will use object-oriented constructs to create an enterprise-class code.
You can create web applications with modern features like performance counters, event
logs, and file system.
You can create your web forms with much ease through the visual forms designer. You
will also enjoy drag and drop capability to replace any elements that you may need.
You can connect your applications to other applications created in languages that run on
the .NET framework.
•
You will enjoy features like docking, automatic control anchoring, and in-place menu
editor all good for developing web applications.
Disadvantages of VB.NET
Below are some of the drawbacks/cons associated with VB.NET:
•
•
VB.NET cannot handle pointers directly. This is a significant disadvantage since pointers
are much necessary for programming. Any additional coding will lead to many CPU
cycles, requiring more processing time. Your application will become slow.
VB.NET is easy to learn. This has led to a large talent pool. Hence, it may be challenging
to secure a job as a VB.NET programmer.
Working with visual studio
Introduction
Visual Studio is an integrated development environment (IDE). The “integrated” part of IDE
means that Visual Studio contains features that complement every aspect of software
development
User Interface
When you open Visual Studio, there are a number of tool windows that let you interact with
your code:
1. The Code editor is where you write your code.
2. The Solution explorer shows the files you’re working with.
3. The Properties pane gives additional information and context about selected parts of
your project.
4. The Output window displays debugging and error messages, compiler warnings, status
messages, and other output.
You can add additional tool windows by using the View menu at the top. For example,
the Bookmarks tool window lets you bookmark lines of code for quick access. The layout of
your tool windows is highly customizable — you can add additional windows, remove the ones
you have open, and move them around to best suit how you work.
Menus
At the top of the screen, you’ll see Visual Studio’s menus, which you’ll use to run various
commands. Here’s a high level overview of the most important ones:
1.
2.
3.
4.
5.
6.
The File menu contains commands to create, open, and save projects.
The Edit menu contains commands to search, modify, and refactor your code.
The View menu is where you go to open additional tool windows in Visual Studio.
The Project menu lets you add files and dependencies in your project.
The Debug menu contains commands to run your code and use debugger features.
The Tools menu contains commands to change your settings, add functionality to Visual
Studio via extensions, and access various Visual Studio tools.
Toolbar
The Visual Studio toolbar, shown below the menus, provides quick access to the most common
commands.
You can change what commands the toolbar contains by going to View → Customize
Source Files
Visual Basic .NET source code is saved in files with a .vb extension.
Source files are plain-text files that can be created and edited with any text editor
Visual Basic .NET is not case sensitive
Identifiers
Identifiers are names given to namespaces, types, type and variables.
Keywords
Keywords are words with special meaning in a programming language. In Visual Basic .NET,
keywords are reserved; that is, they cannot be used as tokens for such purposes as naming
variables and subroutines.
Dim Variable declaration statement
Do Visual Basic .NET statement examples of keywords
Me Statement referring to the current object instance
Mid String-manipulation statement and function
Mod Visual Basic .NET operator
Module Visual Basic .NET statement
MustInherit Used in the Class construct
MustOverride Used in the Sub and Function statements
MyBase Statement referring to an object's base class
MyClass Statement referring to the current object instance
Access Modifiers
Access modifiers control the accessibility of types and type to other program elements.
Public and Private are access modifiers:
Public Class SomeClass
Public Sub DoSomething( )
' ...
End Sub
Private Sub InternalHelperSub( )
' ...
End Sub
End Class
Creating a User Interface
First, you'll create a Visual Basic application project. The project type comes with all the
template files you'll need, before you've even added anything.
1. Open Visual Studio 2019 or any visual studio you are using.
2. On the start window, choose Create a new project.
3. On the Create a new project window, enter or type Windows Forms in the search box.
Next, choose Visual Basic from the Language list, and then choose Windows from the
Platform list.
After you apply the language and platform filters, choose the Windows Forms App
(.NET Framework) template, and then choose Next.
Note
If you do not see the Windows Forms App (.NET Framework) template, you can install
it from the Create a new project window. In the Not finding what you're looking
for? message, choose the Install more tools and features link.
Next, in the Visual Studio Installer, choose the Choose the .NET desktop
development workload.
After that, choose the Modify button in the Visual Studio Installer. You might be prompted
to save your work; if so, do so. Next, choose Continue to install the workload. Then,
return to step 2 in this "Create a project" procedure.
4. In the Configure your new project window, type or enter HelloWorld in the Project
name box. Then, choose Create.
Visual Studio opens your new project.
Create the application
After you select your Visual Basic project template and name your file, Visual Studio opens a
form for you. A form is a Windows user interface. We'll create a "Hello World" application by
adding controls to the form, and then we'll run the application.
Add a button to the form
1. Click Toolbox to open the Toolbox fly-out window.
(If you don't see the Toolbox fly-out option, you can open by pressing Ctrl+Alt+X.)
2. Click the Pin icon to dock the Toolbox window.
3. Click the Button control and then drag it onto the form.
4. In the Appearance section (or the Fonts section) of the Properties window, type Click
this, and then press Enter.
(If you don't see the Properties window, you can open it from the menu bar. To do so,
click View > Properties Window. Or, press F4.)
5. In the Design section of the Properties window, change the name
from Button1 to btnClickThis, and then press Enter.
Add a label to the form
Now that we've added a button control to create an action, let's add a label control to send text to.
1. Select the Label control from the Toolbox window, and then drag it onto the form and
drop it beneath the Click this button.
2. In the Design section of the Properties window, change the name
from Label1 to lblHelloWorld, and then press Enter.
Add code to the form
1. In the Form1.vb [Design] window, double-click the Click this button to open
the Form1.vb window.
(Alternatively, you can expand Form1.vb in Solution Explorer, and then click Form1.)
2. In the Form1.vb window, between the Private Sub line and the End Sub line (or between
the Public Class Form1 line and the End Class line), type the following code.
Run the application
1. Click the Start button to run the application.
Several things will happen. In the Visual Studio IDE, the Diagnostics Tools window will
open, and an Output window will open, too. But outside of the IDE, a Form1 dialog box
appears. It will include your Click this button and text that says Label1.
2. Click the Click this button in the Form1 dialog box. Notice that the Label1 text changes
to Hello World!.
Congratulations on completing this quickstart! We hope you learned a little bit about Visual
Basic and the Visual Studio IDE. If you'd like to delve deeper, please continue with a tutorial in
the Tutorials section of the table of contents.
How to set your form properties
1. Be sure you're looking at Windows Forms Designer. In the Visual Studio integrated
development environment (IDE), choose the Form1.cs [Design] tab (or the Form1.vb
[Design] tab in Visual Basic).
2. Choose anywhere inside the form Form1 to select it. Look at the Properties window,
which should now be showing the properties for the form. Forms have various properties.
For example, you can set the foreground and background color, title text that appears at the
top of the form, size of the form, and other properties.
Note
If the Properties window doesn't appear, stop your app by choosing the square Stop
Debugging button on the toolbar, or just close the window. If the app is stopped and you
still don't see the Properties window, on the menu bar, choose View > Properties
Window.
3. After the form is selected, find the Text property in the Properties window. Depending on
how the list is sorted, you might need to scroll down. Choose Text, type Picture Viewer,
and then choose Enter. Your form should now have the text Picture Viewer in its title bar,
and the Properties window should look similar to the following screenshot.
Properties window
Note
Properties can be ordered by a Categorized or Alphabetical view. You can switch
between these two views by using the buttons on the Properties window. In this tutorial,
it's easier to find properties through the Alphabetical view.
4. Go back to Windows Forms Designer. Choose the form's lower-right drag handle, which
is the small white square in the lower-right of the form and appears as follows.
Drag handle
Drag the handle to resize the form so the form is wider and a bit taller.
5. Look at the Properties window, and notice that the Size property has changed.
The Size property changes each time you resize the form. Try dragging the form's handle
to resize it to a form size of approximately 550, 350 (no need to be exact), which should
work well for this project. As an alternative, you can enter the values directly in
the Size property and then choose the Enter key.
6. Run your app again. Remember, you can use any of the following methods to run your
app.
• Choose the F5 key.
• On the menu bar, choose Debug > Start Debugging.
• On the toolbar, choose the Start Debugging button, which appears as follows.
Start Debugging toolbar button
Just like before, the IDE builds and runs your app, and a window appears.
7. Before going to the next step, stop your app, because the IDE won't let you change your
app while it's running. Remember, you can use any of the following methods to stop your
app.
• On the toolbar, choose the Stop Debugging button.
• On the menu bar, choose Debug > Stop Debugging.
• Use your keyboard and press Shift+F5.
• Choose the X button in the upper corner of the Picture Viewer window
How to lay out your form with a TableLayoutPanel control
1. On the left side of the Visual Studio IDE, choose the Toolbox tab. (Alternatively,
choose View > Toolbox from the menu bar, or press Ctrl+Alt+X.)
2. Choose the small triangle symbol next to the Containers group to open it, as shown in the
following screenshot.
Containers group
3. You can add controls like buttons, check boxes, and labels to your form. Double-click the
TableLayoutPanel control in the Toolbox. (Or, you can drag the control from the toolbox
onto the form.) When you do this, the IDE adds a TableLayoutPanel control to your form,
as shown in the following screenshot.
TableLayoutPanel control
Note
After you add your TableLayoutPanel, if a window appears inside your form with the
title TableLayoutPanel Tasks, choose anywhere inside the form to close it. You'll learn
more about this window later in the tutorial.
Notice how the Toolbox expands to cover your form when you choose its tab, and closes
after you choose anywhere outside of it. That's the Auto Hide feature in the IDE. You can
turn it on or off for any of the windows by choosing the pushpin icon in the upper-right
corner of the window to toggle Auto Hide and lock it in place. The pushpin icon appears as
follows.
Pushpin icon
4. Be sure the TableLayoutPanel is selected by choosing it. You can verify what control is
selected by looking at the drop-down list at the top of the Properties window, as shown in
the following screenshot.
Properties window showing TableLayoutPanel control
5. Choose the Alphabetical button on the toolbar in the Properties window. This sorts the
list of properties in the Properties window in alphabetical order, which makes it easier to
locate properties in this tutorial.
6. The control selector is a drop-down list at the top of the Properties window. In this
example, it shows that a control called tableLayoutPanel1 is selected. You can select
controls either by choosing an area in Windows Forms Designer or by choosing from the
control selector.
Now that the TableLayoutPanel is selected, find the Dock property and choose Dock,
which should be set to None. Notice that a drop-down arrow appears next to the value.
Choose the arrow, and then select the Fill button (the large button in the middle), as shown
in the following screenshot.
Properties window with Fill selected
Docking in Visual Studio refers to when a window is attached to another window or area in
the IDE. For example, the Properties window can be undocked—that is, unattached and
free-floating within Visual Studio—or it can be docked against Solution Explorer.
7. After you set the TableLayoutPanel Dock property to Fill, notice that the panel fills the
entire form. If you resize the form again, the TableLayoutPanel stays docked, and resizes
itself to fit.
Note
A TableLayoutPanel works like a table in Microsoft Office Word: It has rows and
columns, and an individual cell can span multiple rows and columns. Each cell can hold
one control (like a button, a check box, or a label). Your TableLayoutPanel should have
a PictureBox control spanning its entire top row, a CheckBox control in its lower-left cell,
and four Button controls in its lower-right cell.
8. Currently, the TableLayoutPanel has two equal-size rows and two equal-size columns.
Let's resize them so the top row and right column are both much bigger. In Windows
Forms Designer, select the TableLayoutPanel. In the upper-right corner, there is a small
black triangle button, which appears as follows.
Triangle button
This button indicates that the control has tasks that help you set its properties
automatically.
9. Choose the triangle to display the control's task list, as shown in the following screenshot.
TableLayoutPanel tasks
10. Choose the Edit Rows and Columns task to display the Column and Row
Styles window. Choose Column1, and set its size to 15 percent by being sure
the Percent button is selected and entering 15 in the Percent box. (That's
a NumericUpDown control, which you'll use in a later tutorial.) Choose Column2 and set
it to 85 percent. Don't choose the OK button yet, because the window will close. (But if
you do, you can reopen it by using the task list.)
TableLayoutPanel column and row styles
11. From the Show drop-down list at the top of the Column and Row Styles window,
choose Rows. Set Row1 to 90 percent and Row2 to 10 percent.
12. Choose the OK button. Your TableLayoutPanel should now have a large top row, a small
bottom row, a small left column, and a large right column. (You can resize the rows and
columns in the TableLayoutPanel by choosing tableLayoutPanel1 in the form and then
dragging its row and column borders.)
Form1 (Picture Viewer) with resized TableLayoutPanel
How to add controls to your form
1. Choose the Toolbox tab on the left side of the Visual Studio IDE (or press Ctrl+Alt+X),
and then expand the Common Controls group. This shows the most common controls that
you see on forms.
2. Double-click the PictureBox item to add a PictureBox control to your form. Because the
TableLayoutPanel is docked to fill your form, the IDE adds the PictureBox control to the
first empty cell (the upper left corner).
3. Choose the new PictureBox control to select it, and then choose the black triangle on the
new PictureBox control to display its task list, as shown in the following screenshot.
PictureBox tasks
4. In the PictureBox Tasks menu from the PictureBox control, choose the Dock in parent
container link. This automatically sets the PictureBox Dock property to Fill. To see this,
choose the PictureBox control to select it, go to the Properties window, and be sure that
the Dock property is set to Fill.
5. Make the PictureBox span both columns by changing its ColumnSpan property. In
the PictureBox, choose the PictureBox control and set its ColumnSpan property to 2.
Also, when the PictureBox is empty, you want to show an empty frame. Set
its BorderStyle property to Fixed3D.
6. Choose the TableLayoutPanel on the form and then add a CheckBox control to the
form. Double-click the CheckBox item in the Toolbox to add a new CheckBox control to
the next free cell in your table. Because a PictureBox takes up the first two cells in the
TableLayoutPanel, the CheckBox control is added to the lower-left cell. Choose
the Text property and type in the word Stretch, as shown in the following image.
TextBox control with Stretch property
To add buttons
1. Choose the new FlowLayoutPanel that you added. Go to Common Controls in
the Toolbox and double-click the Button item to add a button control called button1 to
your FlowLayoutPanel. Repeat to add another button. The IDE determines that there's
already a button called button1 and calls the next one button2.
2. Typically, you add the other buttons by using the Toolbox. This time, choose button2, and
then from the menu bar, choose Edit > Copy (or press Ctrl+C). Next,
choose Edit > Paste from the menu bar (or press Ctrl+V) to paste a copy of your button.
Now paste it again. Notice that the IDE adds button3 and button4 to the
FlowLayoutPanel.
Note
You can copy and paste any control. The IDE names and places the new controls in a
logical manner. If you paste a control into a container, the IDE chooses the next logical
space for placement.
3. Choose the first button and set its Text property to Show a picture. Then set
the Text properties of the next three buttons to Clear the picture, Set the background
color, and Close.
4. Let's size the buttons and arrange them so they align to the right side of the panel. Choose
the FlowLayoutPanel and look at its FlowDirection property. Change it so it's set
to RightToLeft.
The buttons should align themselves to the right side of the cell, and reverse their order so
that the Show a picture button is on the right.
Note
If the buttons are still in the wrong order, you can drag the buttons around the
FlowLayoutPanel to rearrange them in any order. You can choose a button and drag it left
or right.
5. Choose the Close button to select it. Then, to choose the rest of the buttons at the same
time, press and hold the Ctrl key and choose them, too.
After you've selected all the buttons, go to the Properties window and scroll up to
the AutoSize property. This property tells the button to automatically resize itself to fit all
of its text. Set it to True.
Your buttons should now be sized properly and be in the right order. (As long as all four
buttons are selected, you can change all four AutoSize properties at the same time.) The
following image shows the four buttons.
Picture Viewer with four buttons
6. Now run your program again to see your changes.
Notice that the buttons and the check box don't do anything yet—but they will, soon.
There are four buttons on your form, and the IDE named them button1, button2, button3,
and button4. By just looking at their current names, you don't know which button is
the Close button and which one is the Show a picture button. That's why giving your button
controls more informative names is helpful.
To name your button controls
1. On the form, choose the Close button. (If you still have all the buttons selected, choose
the Esc key to cancel the selection.) Scroll in the Properties window until you see
the (Name) property. (The (Name) property is near the top when the properties are
alphabetical.) Change the name to closeButton, as shown in the following screenshot.
Properties window with closeButton name