Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user...

67
Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 1 of 67 Software Development Tools Reference A collection of powerful Design, Development, and Testing Tools Reference ...................................................................................................................................................... 3 Technology Tool List ................................................................................................................................. 3 Application Documentation ........................................................................................................................ 31 Web Interface ......................................................................................................................................... 31 Database ................................................................................................................................................. 32

Transcript of Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user...

Page 1: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 1 of 67

Software Development Tools Reference A collection of powerful Design, Development, and Testing Tools

Reference ...................................................................................................................................................... 3

Technology Tool List ................................................................................................................................. 3

Application Documentation ........................................................................................................................ 31

Web Interface ......................................................................................................................................... 31

Database ................................................................................................................................................. 32

Page 2: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 2 of 67

Reference ...................................................................................................................................................... 3

Technology Tool List ................................................................................................................................. 3

Adobe Acrobat ...................................................................................................................................... 3

Balsamiq ................................................................................................................................................ 4

BeanStalk............................................................................................................................................... 5

Continuous Integration ......................................................................................................................... 7

C-Sharp .................................................................................................................................................. 7

FogBugz ................................................................................................................................................. 8

Jquery .................................................................................................................................................. 11

Jquery Mobile...................................................................................................................................... 12

Problem Steps Recorder ..................................................................................................................... 13

Resharper ............................................................................................................................................ 14

RIDE ..................................................................................................................................................... 15

Robot Framework ............................................................................................................................... 18

Selenium ............................................................................................................................................. 22

Sikuli .................................................................................................................................................... 23

Software Factory ................................................................................................................................. 24

SQL ...................................................................................................................................................... 24

SVN ...................................................................................................................................................... 25

TypeScript ........................................................................................................................................... 26

Visual Studio ........................................................................................................................................ 27

Web Sequence Diagrams .................................................................................................................... 28

WebStorm ........................................................................................................................................... 29

YUML.ME............................................................................................................................................. 30

Application Documentation ........................................................................................................................ 31

Web Interface ......................................................................................................................................... 31

Site Inventory ...................................................................................................................................... 31

Thumbnails .......................................................................................................................................... 31

Database ................................................................................................................................................. 32

Tables .................................................................................................................................................. 32

Page 3: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 3 of 67

Reference

Technology Tool List

Adobe Acrobat

http://en.wikipedia.org/wiki/Adobe_Acrobat

Adobe Acrobat is a set of application software developed by Adobe Systems to view, create, manipulate,

print and manage files in Portable Document Format (PDF files). All parts of the set, except Adobe

Reader (formerly Acrobat Reader), are proprietary commercial programs, while the latter is available as

freeware and can be downloaded from Adobe's website. Adobe Reader enables users to view and print

PDF files but has negligible PDF creation capabilities. Acrobat and Reader are widely used as a method of

presenting information with a fixed layout similar to a paper publication.

Tools Adobe Acrobat 1a PNG

Page 4: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 4 of 67

Balsamiq

http://en.wikipedia.org/wiki/Balsamiq

Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to

arrange pre-built widgets using a drag-and-drop WYSIWYG editor. The application is offered in a desktop

version as well as a plug-in for Google Drive, Confluence, JIRA, FogBugz and XWiki.

Tools Balsamiq 1a PNG

Tools Balsamiq 1b PNG

Page 5: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 5 of 67

BeanStalk

https://beanstalkapp.com/

Beanstalk makes it easy to take care of Version Control, Deployments, Integration, Collaboration, and

Security.

First you can setup and manage repositories. You can then invite team members, partners & clients.

Next, you can browse files and changes. Lastly, you can preview, compare & share the changes.

Tools Bean Stalk 1a PNG

Page 6: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 6 of 67

Tools Bean Stalk 1b PNG

Tools Bean Stalk 1c PNG

Page 7: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 7 of 67

Continuous Integration

http://en.wikipedia.org/wiki/Continuous_Integration

Continuous integration (CI) is the practice, in software engineering, of merging all developer workspaces

with a shared mainline several times a day. It was first named and proposed as part of extreme

programming (XP). Its main aim is to prevent integration problems, referred to as "integration hell" in

early descriptions of XP. CI can be seen as an intensification of practices of periodic integration

advocated by earlier published methods of incremental and iterative software development, such as the

Booch method. CI isn't universally accepted as an improvement over frequent integration by supporters

of the latter. It is important to distinguish between the two forms as there is disagreement about the

virtues of each.

C-Sharp

http://en.wikipedia.org/wiki/C_Sharp_(programming_language)

C# (pronounced see sharp) is a multi-paradigm programming language encompassing strong typing,

imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented

programming disciplines. It was developed by Microsoft within its .NET initiative and later approved as a

standard by Ecma (ECMA-334) and ISO (ISO/IEC 23270:2006). C# is one of the programming languages

designed for the Common Language Infrastructure.

C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its

development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on

August 15, 2012.

Page 8: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 8 of 67

FogBugz

http://www.fogcreek.com/fogbugz/

FogBugz Bug Tracking

FogBugz is the world's easiest bug tracking system, built for teams who are serious about shipping great

software.

cooperate with teammates

meet deadlines

maintain control of your projects

integrate with source control

FogBugz incorporates the lessons Joel Spolsky and the team at Fog Creek have learned over a decade of

learning how to write software better.

Tools Fog Bugz 1PNG

Page 9: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 9 of 67

Tools Fog Bugz 9f PNG

Tools Fog Bugz 9g PNG

Page 10: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 10 of 67

Tools Fog Bugz 9h PNG

Tools Fog Bugz 9i PNG

Page 11: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 11 of 67

Jquery

http://www.w3schools.com/jquery/default.asp

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

Tools Jquery 1a PNG

Page 12: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 12 of 67

Jquery Mobile

http://jquerymobile.com/

jQuery Mobile is a touch-optimized web framework (additionally known as a JavaScript library or a

mobile framework) currently being developed by the jQuery project team. The development focuses on

creating a framework compatible with a wide variety of smartphones and tablet computers, made

necessary by the growing but heterogeneous tablet and smartphone market. The JQuery Mobile

framework is compatible with other mobile app frameworks and platforms such as PhoneGap, Worklight

and more.

Tools Jquery Mobile 1a PNG

Page 13: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 13 of 67

Problem Steps Recorder

http://windows.microsoft.com/en-us/windows7/how-do-i-use-problem-steps-recorder

You can use Problem Steps Recorder to automatically capture the steps you take on a computer,

including a text description of where you clicked and a picture of the screen during each click (called a

screen shot). Once you capture these steps, you can save them to a file that can be used by a support

professional or someone else helping you with a computer problem.

Tools Problem Steps Recorder 1a PNG

Page 14: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 14 of 67

Resharper

http://www.jetbrains.com/resharper/

ReSharper is a refactoring and productivity extension by JetBrains that extends native functionality of

Microsoft Visual Studio 2003, 2005, 2008, 2010 and 2012.

ReSharper executes solution-wide static code analysis (error detection on-the-fly, without the need to

compile), provides additional features for error correction, code completion, navigation, search, syntax

highlighting, formatting, code generation and optimization, carries out 40 automated refactorings, and

streamlines unit testing using NUnit and MSTest, among other features.

The current major version 7, was released in 2012. It supports C# 5.0, VB11, JavaScript, CSS, HTML,

ASP.NET, ASP.NET MVC, Razor, XML, XAML, WinRT, MSBuild and NAnt build scripts.

Tools Resharper 1a PNG

Page 15: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 15 of 67

RIDE

https://github.com/robotframework/RIDE/wiki/How-To

Graphical development tool for the Robot Framework. It offers framework-specific features like code

completion, syntax highlighting and much more.

Tools Ride 0PNG

Page 16: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 16 of 67

Tools Ride 1PNG

Tools Ride 2PNG

Page 17: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 17 of 67

Tools Ride 3PNG

Page 18: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 18 of 67

Robot Framework

http://en.wikipedia.org/wiki/Robot_Framework

The Robot Framework is a generic test automation framework for acceptance testing and acceptance

test-driven development (ATDD). It has easy-to-use tabular test data syntax and utilizes the keyword-

driven testing approach.

Test cases are persisted in plain text or HTML files and can be edited with any text editor. There is also a

graphical development tool, the Robot IDE (RIDE). It offers framework-specific features like code

completion, syntax highlighting and much more.

Tools Robot Framework 1PNG

Page 19: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 19 of 67

Tools Robot Framework 1a PNG

Tools Robot Framework 1b PNG

Page 20: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 20 of 67

Tools Robot Framework 1c PNG

Tools Robot Framework 1d PNG

Page 21: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 21 of 67

Tools Robot Framework 1e PNG

Page 22: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 22 of 67

Selenium

http://en.wikipedia.org/wiki/Selenium_(software)

Selenium is a portable software testing framework for web applications. Selenium provides a

record/playback tool for authoring tests without learning a test scripting language (Selenium IDE). It also

provides a test domain-specific language (Selenese) to write tests in a number of popular programming

languages, including C#, Java, Groovy, Perl, PHP, Python and Ruby. The tests can then be run against

most modern web browsers. Selenium deploys on Windows, Linux, and Macintosh platforms.

Tools Selenium 1a PNG

Page 23: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 23 of 67

Sikuli

http://en.wikipedia.org/wiki/Sikuli

Sikuli is a visual technology to automate and test graphical user interfaces (GUI) using images

(screenshots)[1] of the software under test. It may be used like Selenium to control a web page and also

other PC (Windows, Mac OS X and Linux) applications, and even an iPhone or Android application

running in a simulator or via VNC.

Sikuli Script is a visual scripting API using Jython to create automation scripts. Sikuli includes an

integrated development environment (IDE) for writing visual Sikuli scripts with screenshots.

Tools Sikuli 1a PNG

Page 24: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 24 of 67

Software Factory

Tools Software Factory 1apng

SQL

http://www.w3schools.com/sql/default.asp

SQL is a standard language for accessing databases.

SQL is used to access and manipulate data in:

MySQL, SQL Server, Access, Oracle, Sybase, DB2, and other database systems.

Page 25: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 25 of 67

SVN

http://en.wikipedia.org/wiki/Apache_Subversion

Apache Subversion (often abbreviated SVN, after the command name svn) is a software versioning and

revision control system distributed under an open source license. Developers use Subversion to

maintain current and historical versions of files such as source code, web pages, and documentation. Its

goal is to be a mostly compatible successor to the widely used Concurrent Versions System (CVS).

The open source community has used Subversion widely: for example in projects such as Apache

Software Foundation, Free Pascal, FreeBSD, GCC, Mono and SourceForge. Google Code also provides

Subversion hosting for their open source projects. BountySource systems use it exclusively. CodePlex

offers access to Subversion as well as to other types of clients.

The corporate world has also started to adopt Subversion. A 2007 report by Forrester Research

recognized Subversion as the sole leader in the Standalone Software Configuration Management (SCM)

category and as a strong performer in the Software Configuration and Change Management (SCCM)

category.

Subversion was created by CollabNet Inc. in 2000 and is now a top-level Apache project being built and

used by a global community of contributors.

Tools SVN1a PNG

Page 26: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 26 of 67

TypeScript

http://www.typescriptlang.org/

TypeScript is a free and open source programming language developed by Microsoft. It is a superset of

JavaScript, and essentially adds optional static typing and class-based object oriented programming to

the language. Anders Hejlsberg, lead architect of C#, has worked on development of TypeScript.

TypeScript extends JavaScript syntax, so any existing JavaScript programs work with TypeScript without

any changes. TypeScript is designed for development of large applications and when compiled it

produces JavaScript to ensure compatibility.

TypeScript supports header files which add type information to existing JavaScript libraries, extending its

benefits to popular libraries like jQuery, MongoDB, Node.js, and D3.js.

Tools Type Script 1a PNG

Page 27: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 27 of 67

Visual Studio

http://en.wikipedia.org/wiki/Visual_Studio

Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It is used to

develop console and graphical user interface applications along with Windows Forms applications, web

sites, web applications, and web services in both native code together with managed code for all

platforms supported by Microsoft Windows, Windows Mobile, Windows CE, .NET Framework, .NET

Compact Framework and Microsoft Silverlight it can also develop windows presentation

foundation(WPF) application.

Tools Visual Studio 1a PNG

Page 28: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 28 of 67

Web Sequence Diagrams

http://www.websequencediagrams.com/

Get things done faster

With other tools, it can take an hour to make a sequence diagram and line everything up. You can do the

same thing in seconds with WebSequenceDiagrams, simply by writing the interactions down.

Page 29: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 29 of 67

WebStorm

http://en.wikipedia.org/wiki/WebStorm

JetBrains WebStorm is a commercial IDE for JavaScript, CSS & HTML built on JetBrains' IntelliJ IDEA

platform.

WebStorm provides automatic code completion, on-the-fly code analysis, refactoring support and VCS

integration.

Tools Web Storm 1a PNG

Page 30: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 30 of 67

YUML.ME

http://yuml.me/

Create and share simple UML diagrams in your blogs, wikis, forums, bug-trackers and emails.

Page 31: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 31 of 67

Application Documentation

Web Interface

Site Inventory

Title URL

Acronym (http://localhost:8770/DatabaseDocumentationFil

es/SDLC/Acronym_Entry.html)

Thumbnails

Screenshots of Web Interface

Acronym

(http://localhost:8770/DatabaseDocumentationFiles/SDLC/Acronym_Entry.html)

1

1 Screenshots of Jquery Mobile sample application.

Page 32: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 32 of 67

Database

Tables

The SDLC has a total of 149 tables.

Acronym (dbo.Acronym)

The Acronym table is part of the dbo schema and can be referenced as 'dbo.Acronym'. The dbo.Acronym

table contains a total of 6 columns.

Database Table Information

Class Diagram

2

Table Quick Summary

Column Count 6

Primary Key AcronymID

Foreign Key Columns Project ID, and Work Flow Step Type ID

Referenced Tables Project, and Work Flow Step Type

2 Image generated using YUML.me. (http://yuml.me/diagram/scruffy/class/samples )

Page 33: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 33 of 67

Column Information

Column Name Data Type Nullable Is Primary

Key

Is Foreign

Key

Max

Length

AcronymID int False True False 4

Name varchar False False False 50

Description varchar True False False -1

IsActive bit False False False 1

ProjectID int False False True 4

WorkFlowStepTypeID int True False True 4

Relationships

Foreign Keys for dbo.Acronym

The 2 foreign key constraints in the Acronym table are the Project ID column which references the

Project table, and the Work Flow Step Type ID column which references the Work Flow Step Type

table.

3

Column Name Referenced Table Schema Referenced Table

ProjectID dbo Project

WorkFlowStepTypeID dbo WorkFlowStepType

3 3 Image generated using YUML.me. (http://yuml.me/diagram/scruffy/class/samples )

Page 34: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 34 of 67

Lookup Data Values for WorkFlowStepTypeID from dbo.WorkFlowStepType

WorkFlowSte

pTypeID

Name Description IconFileName IconFile

TypeID

1 Data Entry Data Entry Icon_textfield_s1.png

2 Access Network Drive Access Network

Drive

Icon_drive_web.png

3 Folder Search Icon_folder_find.png

4 Upload Icon_arrow_up_s1.png

5 Download Icon_arrow_down_s1.png

6 Data Process Icon_database_gear.png

7 Database Output Icon_page_white_database_

s1.png

8 Web Application Icon_page_white_world_s1.

png

9 Process Icon_cog_add_s1.png

10 Adobe Acrobat PDF Icon_page_white_acrobat_s

1.png

11 Information to Review Icon_information_s1.png

12 Create Email Icon_email_edit_s1.png

13 Work with Excel or CSV Icon_page_white_excel_s1.p

ng

14 Secure Server Access Icon_server_key_s1.png

15 Folder with files Icon_folder_page_white.png

Page 35: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 35 of 67

Class Diagram with All Relationships

4

dbo.Acronym and Project

The tables, Acronym and Project, have a 'many-to-one' relationship. That means a Acronym can only be

associated with one Project. This relationship allows us to filter Acronym by Project, or determine how

many different Projects are referenced by Acronym, or even create a pie chart that shows how the

records in the Acronym table are distributed by Project. The Project ID column has a foreign key

constraint on the Project ID column of the Project table. This means each value stored in this column

must be a valid value already present in the Project ID column of the Project table. The Project ID

column of the Project table is also known as the lookup column for entries in this column.

dbo.Acronym and WorkFlowStepType

The tables, Acronym and Work Flow Step Type, have a 'many-to-one' relationship. That means a

Acronym can only be associated with one Work Flow Step Type. This relationship allows us to filter

Acronym by Work Flow Step Type, or determine how many different Work Flow Step Types are

referenced by Acronym, or even create a pie chart that shows how the records in the Acronym table are

distributed by Work Flow Step Type. The Work Flow Step Type ID column has a foreign key constraint on

the Work Flow Step Type ID column of the Work Flow Step Type table. This means each value stored in

this column must be a valid value already present in the Work Flow Step Type ID column of the Work

Flow Step Type table. The Work Flow Step Type ID column of the Work Flow Step Type table is also

known as the lookup column for entries in this column.

4 Image generated using YUML.me. (http://yuml.me/diagram/scruffy/class/samples )

Page 36: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 36 of 67

User Interface

Requirements

User Requirements

As a user when I enter a new Acronym I need to be able to enter 5 pieces of information. I'll have the

Name, Description, Is Active, Project ID, and Work Flow Step Type ID ready and I'll want the system to be

able to store them. I know that Project ID, and Work Flow Step Type ID values are stored in separate

tables, so I'll want to be able to select the value I want from a dropdown list

Acronym_Entry_Page

5

5 Image generated using Web Sequence Diagrams. (http://www.websequencediagrams.com/#)

Page 37: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 37 of 67

6

System Requirements

As a system I need to capture the following data elements for a complete Acronym record:

Name

Description

IsActive

ProjectID

WorkFlowStepTypeID

As a system I will generate the primary key value for AcronymID. Values for Project ID, and Work Flow

Step Type ID will be pulled from thier respective look up tables (Project, and Work Flow Step Type).

6 Image generated using YUML.me. (http://yuml.me/diagram/scruffy/usecase/samples )

Page 38: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 38 of 67

Element List for Acronym Entry Page

Here is the list of labels, control IDs, and types of web controls that are displayed on the page. Whether

or not a user is required to supply this information is also included.

Label Text Control Name Control Type Required

Acronym ID txtAcronymID text True

Name txtName text True

Description txtDescription text False

Is Active ddlIsActive dropdown True

Project ddlProjectID dropdown True

Work Flow Step Type ddlWorkFlowStepTypeID dropdown False

Page 39: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 39 of 67

Abbreviated List of Available Option Values and Text for Dropdowns

Project (ddlProjectID)

Value Text

1 Bakery

2 HopeSortaFloats

3 EnterpriseBusLines

Work Flow Step Type (ddlWorkFlowStepTypeID)

Value Text

1 Data Entry

2 Access Network Drive

3 Folder Search

4 Upload

5 Download

Page 40: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 40 of 67

Renderings

Balsamiq Mockup

iPad Landscape

Concept rendering of web application using the Balsamiq mockup tool.

7

7 Image created using Balsamiq mockups (http://balsamiq.com/ )

Page 41: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 41 of 67

Screen Shot

Image of a web application implementing the Jquery Mobile Framework.

8

8 Screenshot of sample application using jQuery Mobile (http://jquerymobile.com/ )

Page 42: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 42 of 67

HTML Code of Jquery Mobile Prototype Form Controls

<!--Acronym ID-->

<!--This section allows the user to enter the necessary Acronym ID information. The section contains

both a label and an input field. Mobile or tablet users viewing this form will see a numeric keyboard.-->

<div data-role="fieldcontain">

<label for="txtAcronymID">Acronym ID: </label>

<input ID="txtAcronymID" MaxLength="4" type="number" data-mini="true"/>

</div>

<!--Name-->

<!--This section allows the user to enter the necessary Name information. The section contains both a

label and an input field. Mobile or tablet users viewing this form will see an alphanumeric keyboard.-->

<div data-role="fieldcontain">

<label for="txtName">Name: </label>

<input ID="txtName" MaxLength="50" type="text" data-mini="true"/>

</div>

<!--Description-->

<!--This section allows the user to enter the necessary Description information. The section contains

both a label and an input field. Mobile or tablet users viewing this form will see an alphanumeric

keyboard.-->

<div data-role="fieldcontain">

<label for="txtDescription">Description: </label>

<input ID="txtDescription" type="text" data-mini="true"/>

</div>

<!--Is Active-->

<!--This section allows the user to select the necessary Is Active information. The section contains both a

label and a dropdown field. Mobile or tablet users viewing this form will see an alphanumeric keyboard.-

->

<div data-role="fieldcontain">

<label for="ddlIsActive" class="select">Is Active: </label>

<select name="ddlIsActive" id="ddlIsActive" data-role="slider" data-native-menu="false" data-

mini="true">

<option value="0">False</option>

<option value="1">True</option>

</select>

</div>

<!--Project ID-->

<!--This section allows the user to select the necessary Project ID information. The section contains both

a label and a dropdown field. Mobile or tablet users viewing this form will see a numeric keyboard.-->

Page 43: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 43 of 67

<div data-role="fieldcontain">

<label for="ddlProjectID" class="select">Project: </label>

<select name="ddlProjectID" id="ddlProjectID" data-native-menu="false" data-

mini="true"><option value="">Select</option>

<option value="1">Bakery</option>

<option value="2">HopeSortaFloats</option>

<option value="3">EnterpriseBusLines</option>

</select>

</div>

<!--Work Flow Step Type ID-->

<!--This section allows the user to select the necessary Work Flow Step Type ID information. The section

contains both a label and a dropdown field. Mobile or tablet users viewing this form will see a numeric

keyboard.-->

<div data-role="fieldcontain">

<label for="ddlWorkFlowStepTypeID" class="select">Work Flow Step Type: </label>

<select name="ddlWorkFlowStepTypeID" id="ddlWorkFlowStepTypeID" data-native-

menu="false" data-mini="true"><option value="">Select</option>

<option value="1">Data Entry</option>

<option value="2">Access Network Drive</option>

<option value="3">Folder Search</option>

<option value="4">Upload</option>

<option value="5">Download</option>

<option value="6">Data Process</option>

<option value="7">Database Output</option>

<option value="8">Web Application</option>

<option value="9">Process</option>

<option value="10">Adobe Acrobat PDF</option>

<option value="11">Information to Review</option>

<option value="12">Create Email</option>

<option value="13">Work with Excel or CSV</option>

<option value="14">Secure Server Access</option>

<option value="15">Folder with files</option>

</select>

</div>

<!--This section includes two buttons: submit and cancel.-->

<div class="ui-body ui-body-b"><fieldset class="ui-grid-a"><div class="ui-block-a"><button

type="submit" data-theme="d" data-mini="true" id="btnCancel">Cancel</button></div><div class="ui-

block-b"><button type="submit" data-theme="a" data-mini="true"

id="btnSubmit">Submit</button></div> </fieldset></div>

Page 44: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 44 of 67

Presentation Layer Scripting

These are examples of presentation layer interactivity using JavaScript, and TypeScript.

JavaScript

/** Gets the value for the AcronymID field.

*@example Get value using function.

*var acronymID = getAcronymID();

*@example Get value using JQuery.

*var acronymID = $('#txtAcronymID').val();

*@example Get value using Document GetElementByID.

*var acronymID

* = document.getElementById('txtAcronymID').value;

*@return {String} Returns a string value containing value of Acronym ID field.

*/

<script type='text/javascript'>

function getAcronymID() {

return($('#txtAcronymID').val());

}

</script>

/** Gets the value for the Name field.

*@example Get value using function.

*var name = getName();

*@example Get value using JQuery.

*var name = $('#txtName').val();

*@example Get value using Document GetElementByID.

*var name

* = document.getElementById('txtName').value;

*@return {String} Returns a string value containing value of Name field.

*/

<script type='text/javascript'>

function getName() {

return($('#txtName').val());

}

</script>

/** Gets the value for the Description field.

*@example Get value using function.

*var description = getDescription();

*@example Get value using JQuery.

*var description = $('#txtDescription').val();

*@example Get value using Document GetElementByID.

Page 45: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 45 of 67

*var description

* = document.getElementById('txtDescription').value;

*@return {String} Returns a string value containing value of Description field.

*/

<script type='text/javascript'>

function getDescription() {

return($('#txtDescription').val());

}

</script>

/** Gets the value for the IsActive field.

*@example Get value using function.

*var isActive = getIsActive();

*@example Get value using JQuery.

*var isActive = $('#txtIsActive').val();

*@example Get value using Document GetElementByID.

*var isActive

* = document.getElementById('txtIsActive').value;

*@return {String} Returns a string value containing value of Is Active field.

*/

<script type='text/javascript'>

function getIsActive() {

return($('#txtIsActive').val());

}

</script>

/** Gets the value for the ProjectID field.

*@example Get value using function.

*var projectID = getProjectID();

*@example Get value using JQuery.

*var projectID = $('#ddlProjectID').val();

*@example Get value using Document GetElementByID.

*var projectID

* = document.getElementById('ddlProjectID').value;

*@return {String} Returns a string value containing value of Project ID field.

*/

<script type='text/javascript'>

function getProjectID() {

return($('#ddlProjectID').val());

}

</script>

Page 46: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 46 of 67

/** Gets the value for the WorkFlowStepTypeID field.

*@example Get value using function.

*var workFlowStepTypeID = getWorkFlowStepTypeID();

*@example Get value using JQuery.

*var workFlowStepTypeID = $('#ddlWorkFlowStepTypeID').val();

*@example Get value using Document GetElementByID.

*var workFlowStepTypeID

* = document.getElementById('ddlWorkFlowStepTypeID').value;

*@return {String} Returns a string value containing value of Work Flow Step Type ID field.

*/

<script type='text/javascript'>

function getWorkFlowStepTypeID() {

return($('#ddlWorkFlowStepTypeID').val());

}

</script>

Page 47: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 47 of 67

TypeScript Class Information

class Acronym{

public Acronym(){}

constructor(public AcronymID: Int32 ,public Name: String ,public Description: String ,public IsActive:

String ,public ProjectID: Int32 ,public WorkFlowStepTypeID: Int32 ) {}

}

C# (pronounced "See Sharp") Server Side Code

These are examples of C# files associated with the Acronym domain object. These examples include the

components of a server side web page: Class Definition files(.cs), Data Access files(_data.cs), Web

Forms(.aspx), Code Behind files(.aspx.cs), and Designer Files(.aspx.designer.cs).

In C# standard Ecma script comments ("//") are used to explain which database table columns are

referenced, or related to, these properties. This style of commenting is used in most C-based

programming languages. Examples include: C, C++, C #, JavaScript, Java, ActionScript, and TypeScript.

Business Layer Code

Class Definition File

It references the system library, identifies the class as part of the SDLC namespace, has a constructor

that does not require parameters, and includes public properties without a backing store.

Basic Object Diagram

9

9 Image generated using YUML.me. (http://yuml.me/diagram/scruffy/class/samples )

Page 48: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 48 of 67

CODE

using System;

namespace SDLC{

public class Acronym{

public Acronym(){}

//DB Column Name: AcronymID, Datatype: int, Primary Key

public Int32 AcronymID { get; set; }

//DB Column Name: Name, Datatype: varchar

public String Name { get; set; }

//DB Column Name: Description, Datatype: varchar, Nullable

public String Description { get; set; }

//DB Column Name: IsActive, Datatype: bit

public String IsActive { get; set; }

//DB Column Name: ProjectID, Datatype: int, Is ForeignKey

public Int32 ProjectID { get; set; }

//DB Column Name: WorkFlowStepTypeID, Datatype: int, Nullable , Is ForeignKey

public Int32 WorkFlowStepTypeID { get; set; }

}

}

Page 49: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 49 of 67

Object Diagram with Get Methods

10

10

Image generated using YUML.me. (http://yuml.me/diagram/scruffy/class/samples )

Page 50: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 50 of 67

C# code examples to Access and Modify the Values of User Interface Controls (textboxes, dropdowns,

etc.)

Get Values

The following function can be used to retrieve the values entered on the Acronym page.

CODE

public GetAcronymPageControlValues(){

string acronymID = txtAcronymID.Text;

string name = txtName.Text;

string description = txtDescription.Text;

string isActive = txtIsActive.Text;

string projectID = ddlProjectID.SelectedValue;

string workFlowStepTypeID = ddlWorkFlowStepTypeID.SelectedValue;

}

Reset Values

This function can be used in conjunction with the cancel button click event. It allows a user to reset

values they have entered in the user interface. By setting the text of input boxes to empty strings, and

changing the selected index of drop-down controls to "0". The resulting effect is cleared input boxes,

and de-selected drop downs.

CODE

public ClearAcronymPageControlValues(){

txtAcronymID.Text = string.Empty;

txtName.Text = string.Empty;

txtDescription.Text = string.Empty;

txtIsActive.Text = string.Empty;

ddlProjectID.SelectedIndex = 0;

ddlWorkFlowStepTypeID.SelectedIndex = 0;

}

Page 51: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 51 of 67

Testing for Acronym page.

This section includes the Test Suite, Test Cases, Test Steps and specific technical implementations for

testing the Acronym page.

Element List for Acronym Entry Page

Here is the list of labels, control IDs, and types of web controls that are displayed on the page. Whether

or not a user is required to supply this information is also included.

Label Text Control Name Control Type Required

Acronym ID txtAcronymID text True

Name txtName text True

Description txtDescription text False

Is Active ddlIsActive dropdown True

Project ddlProjectID dropdown True

Work Flow Step Type ddlWorkFlowStepTypeID dropdown False

Page 52: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 52 of 67

Test Suite: Acronym Entry Page

11

Name Description Success Criteria

Verify Labels Verify that the labels on the Acronym Page match

the specified requirements.

Confirm labels match

requirements.

Enter Data Enter data on the Acronym Page conforms to

datatype specifications, maximum field length

restrictions, and required field requirements.

Confirm data is displayed

on page.

Clear Data Clear data on the Acronym Page and confirm that

data is no longer visible or stored on page.

Confirm data is removed

from page.

11

Image generated using YUML.me. (http://yuml.me/diagram/scruffy/usecase/samples )

Page 53: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 53 of 67

Test Case Steps for Test Suite:Acronym Entry Page

1. Browse to the Acronym page.

2. Verify that the label for txtAcronymID equals "Acronym ID".

3. Verify that the label for txtName equals "Name".

4. Verify that the label for txtDescription equals "Description".

5. Verify that the label for ddlIsActive equals "Is Active".

6. Verify that the label for ddlProjectID equals "Project ID".

7. Verify that the label for ddlWorkFlowStepTypeID equals "Work Flow Step Type ID".

8. Enter text into Acronym ID field.

9. Confirm field accepts valid numeric values.

10. Confirm field accepts no more than 4 characters.

11. Confirm user cannot proceed without completing this required field.

12. Enter text into Name field.

13. Confirm field accepts valid alphanumeric values.

14. Confirm field accepts no more than 50 characters.

15. Confirm user cannot proceed without completing this required field.

16. Enter text into Description field.

17. Confirm field accepts valid alphanumeric values.

18. Confirm field has no apparent character limit.

19. Enter text into Is Active field.

20. Confirm field accepts valid alphanumeric values.

21. Confirm field accepts no more than 1 characters.

22. Confirm user cannot proceed without completing this required field.

23. Enter text into Project ID field.

24. Confirm field accepts valid numeric values.

25. Confirm field accepts no more than 4 characters.

26. Confirm user cannot proceed without completing this required field.

27. Enter text into Work Flow Step Type ID field.

28. Confirm field accepts valid numeric values.

29. Confirm field accepts no more than 4 characters.

30. Hit the Cancel button to clear entered data on the Acronym Page.

31. Verify the value for txtAcronymID is now empty.

32. Verify the value for txtName is now empty.

33. Verify the value for txtDescription is now empty.

34. Verify the value for ddlIsActive is now empty.

35. Verify the value for ddlProjectID is now empty.

36. Verify the value for ddlWorkFlowStepTypeID is now empty.

Page 54: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 54 of 67

Verify Labels Test Case

Name Description Success Criteria

Browse to the Acronym

page.

Browse to the Acronym page. Confirm user has arrived

at theAcronym page.

Verify txtAcronymID

label

Verify that the label for txtAcronymID equals

"Acronym ID".

Label equals "Acronym

ID"

Verify txtName label Verify that the label for txtName equals "Name". Label equals "Name"

Verify txtDescription

label

Verify that the label for txtDescription equals

"Description".

Label equals

"Description"

Verify ddlIsActive label Verify that the label for ddlIsActive equals "Is Active". Label equals "Is Active"

Verify ddlProjectID label Verify that the label for ddlProjectID equals "Project

ID".

Label equals "Project ID"

Verify

ddlWorkFlowStepTypeID

label

Verify that the label for ddlWorkFlowStepTypeID

equals "Work Flow Step Type ID".

Label equals "Work Flow

Step Type ID"

Page 55: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 55 of 67

Enter Data Test Case

Name Description Success Criteria

Enter Acronym ID

information.

Enter text into Acronym ID field. Value of Acronym ID

control equals entered

text.

Confirm field accepts

numeric values.

Confirm field accepts valid numeric values. Valid numeric values

accepted

Acronym ID field has a

max length of 4

characters.

Confirm field accepts no more than 4 characters. No more than 4

characters accepted.

Confirm Acronym ID field

is required.

Confirm user cannot proceed without completing

this required field.

Acronym ID field is

confirmed as required.

Enter Name information. Enter text into Name field. Value of Name control

equals entered text.

Confirm field accepts

alphanumeric values.

Confirm field accepts valid alphanumeric values. Valid alphanumeric

values accepted

Name field has a max

length of 50 characters.

Confirm field accepts no more than 50 characters. No more than 50

characters accepted.

Confirm Name field is

required.

Confirm user cannot proceed without completing

this required field.

Name field is confirmed

as required.

Enter Description

information.

Enter text into Description field. Value of Description

control equals entered

text.

Confirm field accepts

alphanumeric values.

Confirm field accepts valid alphanumeric values. Valid alphanumeric

values accepted

Description field has no

apparent character limit.

Confirm field has no apparent character limit. No apparent character

limit.

Enter Is Active

information.

Enter text into Is Active field. Value of Is Active control

equals entered text.

Confirm field accepts

alphanumeric values.

Confirm field accepts valid alphanumeric values. Valid alphanumeric

values accepted

Is Active field has a max

length of 1 characters.

Confirm field accepts no more than 1 characters. No more than 1

characters accepted.

Confirm Is Active field is

required.

Confirm user cannot proceed without completing

this required field.

Is Active field is

confirmed as required.

Page 56: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 56 of 67

Enter Project ID

information.

Enter text into Project ID field. Value of Project ID

control equals entered

text.

Confirm field accepts

numeric values.

Confirm field accepts valid numeric values. Valid numeric values

accepted

Project ID field has a max

length of 4 characters.

Confirm field accepts no more than 4 characters. No more than 4

characters accepted.

Confirm Project ID field is

required.

Confirm user cannot proceed without completing

this required field.

Project ID field is

confirmed as required.

Enter Work Flow Step

Type ID information.

Enter text into Work Flow Step Type ID field. Value of Work Flow Step

Type ID control equals

entered text.

Confirm field accepts

numeric values.

Confirm field accepts valid numeric values. Valid numeric values

accepted

Work Flow Step Type ID

field has a max length of

4 characters.

Confirm field accepts no more than 4 characters. No more than 4

characters accepted.

Page 57: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 57 of 67

Clear Data Test Case

Name Description Success Criteria

Hit the Cancel button to

clear the entered data

Hit the Cancel button to clear entered data on the

Acronym Page.

Confirm data has been

removed from the

Acronym page.

Verify the txtAcronymID

value is now empty.

Verify the value for txtAcronymID is now empty. Value of txtAcronymID

equals 0 or ""

Verify the txtName value

is now empty.

Verify the value for txtName is now empty. Value of txtName equals

0 or ""

Verify the txtDescription

value is now empty.

Verify the value for txtDescription is now empty. Value of txtDescription

equals 0 or ""

Verify the ddlIsActive

value is now empty.

Verify the value for ddlIsActive is now empty. Value of ddlIsActive

equals 0 or ""

Verify the ddlProjectID

value is now empty.

Verify the value for ddlProjectID is now empty. Value of ddlProjectID

equals 0 or ""

Verify the

ddlWorkFlowStepTypeID

value is now empty.

Verify the value for ddlWorkFlowStepTypeID is now

empty.

Value of

ddlWorkFlowStepTypeID

equals 0 or ""

Page 58: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 58 of 67

Robot Framework ( 18)

This section includes what sample robot framework test cases and test suites would look like for this

page. They include the structure of a test suite that references the included robot framework libraries

and reference test cases. The robot framework is a keyword driven automation framework. The term

"keyword" must be understood to mean that spacing as well as tab indentation of lines impact the

syntax of the commands. Three of the many usages of the robot framework include: data entry, task

execution, and testing.

Robot Framework Test Suite

The test suite includes two sections. These sections are the settings and test cases. The settings includes

documentation for the test suite as well as references to external resource files. The external resource

files would include common variables to be shared across all test cases as well as the referenced test

cases.

Test Suite Code

*** Settings ***

Documentation This is your first test

Resource common.txt

Resource SDLCTestCases.txt

*** Test Cases ***

Open Documentation to SDLC Page

Open Browser To Acronym Page

Page 59: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 59 of 67

Robot Framework Test Cases

The test case file includes three sections. Sections are identified by three asterisks ("***"). The sections

are as follows: settings, variables, and keywords. The settings section includes documentation as well as

referenced libraries. The variables section includes locally stored or declared variables for this test case.

The keywords section includes the commands and the corresponding steps for each test case.

Test Case Code

*** Settings ***

Documentation this resource file contain specific keywords for running

... Robotframework and Selenium Lib

*** Variables ***

*** Keywords ***

Open Browser To Acronym Page

Open Browser http://localhost:8770/DatabaseDocumentationFiles/SDLC/Acronym_Entry.html

${browser}

Maximize Browser Window

Set Selenium Speed ${sel_speed}

Title Should Be Acronym

Location Should Be http://localhost:8770/DatabaseDocumentationFiles/SDLC/Acronym_Entry.html

Input Text identifier=txtAcronymID 1

Input Text identifier=txtName varchar

Input Text identifier=txtDescription varchar

Textfield Value Should Be identifier=txtAcronymID 1

Textfield Value Should Be identifier=txtName varchar

Textfield Value Should Be identifier=txtDescription varchar

Click Button identifier=btnCancel

Capture Screenshot Acronym_dataCleared.png

Textfield Value Should Be identifier=txtAcronymID

Textfield Value Should Be identifier=txtName

Textfield Value Should Be identifier=txtDescription

Input Text identifier=txtAcronymID 1

Input Text identifier=txtName varchar

Input Text identifier=txtDescription varchar

Textfield Value Should Be identifier=txtAcronymID 1

Textfield Value Should Be identifier=txtName varchar

Textfield Value Should Be identifier=txtDescription varchar

Capture Screenshot Acronym_dataEntered.png

Click Button identifier=btnSubmit

Reload Page

Capture Screenshot Acronym_pageReloaded.png

Page 60: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 60 of 67

Capture Screenshot Acronym.png

Close Browser

Page 61: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 61 of 67

Selenium ( 22)

This section covers the steps involved with testing the web application using the Selenium Testing

Library. This can be accomplished by either using the Selenium IDE Implementation or a Selenium

RC/WebDriver Implementation.

The Selenium IDE Implementation uses an HTML file (either .html or .htm extension) containing Table

tags (<Table></Table>).

The Selenium RC/WebDriver Implementation with a specific programming-language file (C#, Python,

Java, etc.).

The steps depicted include the following:

Verifying Labels

Entering Data

Clearing Data

Label Text Verification

Selenium IDE Implementation using an HTML file

Command Locator Value

assertText //label[@for='id=txtAcronymID'] Acronym ID

assertText //label[@for='id=txtName'] Name

assertText //label[@for='id=txtDescription'] Description

assertText //label[@for='id=ddlIsActive'] Is Active

assertText //label[@for='id=ddlProjectID'] Project

assertText //label[@for='id=ddlWorkFlowStepTypeID'] Work Flow Step Type

Selenium RC Implementation using C#

This code block performs the necessary steps to:

Open a browser

Capture label values for controls

Verify actual label values match expected values

Capture Screenshot

Page 62: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 62 of 67

[Test]

public void Acronym_VerifyLabels(){

selenium.Open(browserUrl+"/Acronym_Entry.html");

try {

Assert.AreEqual("Acronym ID :", selenium.GetText("lblAcronymID"));

}

catch (AssertionException e){ verificationErrors.Append(e.Message); }

try {

Assert.AreEqual("Name :", selenium.GetText("lblName"));

}

catch (AssertionException e){ verificationErrors.Append(e.Message); }

try {

Assert.AreEqual("Description :", selenium.GetText("lblDescription"));

}

catch (AssertionException e){ verificationErrors.Append(e.Message); }

try {

Assert.AreEqual("Is Active :", selenium.GetText("lblIsActive"));

}

catch (AssertionException e){ verificationErrors.Append(e.Message); }

try {

Assert.AreEqual("Project ID :", selenium.GetText("lblProjectID"));

}

catch (AssertionException e){ verificationErrors.Append(e.Message); }

try {

Assert.AreEqual("Work Flow Step Type ID :",

selenium.GetText("lblWorkFlowStepTypeID"));

}

catch (AssertionException e){ verificationErrors.Append(e.Message); }

selenium.CaptureEntirePageScreenshot(s + "Acronym_label.png", "");

}

Page 63: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 63 of 67

Data Entry Test

Selenium IDE Implementation using an HTML file

Command Locator Value

Type id=txtAcronymID

Type id=txtName

Type id=txtDescription

Select id=ddlIsActive

Select id=ddlProjectID

Select id=ddlWorkFlowStepTypeID

Selenium RC Implementation using C#

This code block performs the necessary steps to:

Open a browser

Supply inputs with data

Remove focus from inputs using the "blur" function

Capture Screenshot

[Test]

public void Acronym_EntryTest(){

selenium.Open(browserUrl+"/Acronym_Entry.html");

selenium.Type("id=txtAcronymID", txtAcronymID_value);

selenium.FireEvent("id=txtAcronymID", "blur");

selenium.Type("id=txtName", txtName_value);

selenium.FireEvent("id=txtName", "blur");

selenium.Type("id=txtDescription", txtDescription_value);

selenium.FireEvent("id=txtDescription", "blur");

selenium.Type("id=txtIsActive", txtIsActive_value);

selenium.FireEvent("id=txtIsActive", "blur");

selenium.Type("id=ddlProjectID", ddlProjectID_value);

selenium.FireEvent("id=ddlProjectID", "blur");

selenium.Type("id=ddlWorkFlowStepTypeID", ddlWorkFlowStepTypeID_value);

selenium.FireEvent("id=ddlWorkFlowStepTypeID", "blur");

selenium.CaptureEntirePageScreenshot(s + "Acronym_entry.png", "");

}

Page 64: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 64 of 67

Cleared Value Test

Selenium IDE Implementation using an HTML file

Command Locator Value

assertTextNotPresent id=txtAcronymID

assertTextNotPresent id=txtName

assertTextNotPresent id=txtDescription

assertSelectedIndex id=ddlIsActive 0

assertSelectedIndex id=ddlProjectID 0

assertSelectedIndex id=ddlWorkFlowStepTypeID 0

Selenium RC Implementation using C#

This code block performs the necessary steps to:

Open a browser

Capture current input values for controls

Verify actual values are either an empty string for input fields or '0' for dropdown fields

Capture Screenshot

[Test]

public void Acronym_VerifyResets(){

selenium.Open(browserUrl+"/Acronym_Entry.html");

try { Assert.IsFalse(selenium.IsTextPresent("txtAcronymID")); }

catch (AssertionException e) { verificationErrors.Append(e.Message); }

try { Assert.IsFalse(selenium.IsTextPresent("txtName")); }

catch (AssertionException e) { verificationErrors.Append(e.Message); }

try { Assert.IsFalse(selenium.IsTextPresent("txtDescription")); }

catch (AssertionException e) { verificationErrors.Append(e.Message); }

try { Assert.IsFalse(selenium.IsTextPresent("txtIsActive")); }

catch (AssertionException e) { verificationErrors.Append(e.Message); }

try { Assert.AreEqual("0", selenium.GetSelectedIndex("ddlProjectID")); }

catch (AssertionException e) { verificationErrors.Append(e.Message); }

try { Assert.AreEqual("0", selenium.GetSelectedIndex("ddlWorkFlowStepTypeID")); }

catch (AssertionException e) { verificationErrors.Append(e.Message); }

selenium.CaptureEntirePageScreenshot(s + "Acronym_verifyReset.png", "");

Page 65: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 65 of 67

}

Page 66: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 66 of 67

Sikuli ( 23)

Unit Test File

These are examples of Sikuli scripted UI commands based on the supplied database schema and

rendered UI controls. They are written in Python and will serve to validate the application. Python uses a

combination of reserved words and indentation for variable declaration, conditional processing and

method definitions. These unit tests require the prefix 'test_' in their name, as well as 'self' as a

parameter. This example includes setup and tear down method definitions, as well as the main test

method.

Python Code

#Test Setup

def setUp(self):

setAutoWaitTimeout(3)

switchApp(r"C:\Windows\System32\psr.exe")

wait(5)

type("a",KeyModifier.ALT)

#Test Definition

def test_Acronym_Entry(self):

wait(5)

App.open(r"C:\Users\myuser\AppData\Local\Google\Chrome\Application\Chrome.exe

http://localhost:8770/DatabaseDocumentationFiles/SDLC/Acronym_Entry.html")

wait(5)

type("d",KeyModifier.ALT)

for i in range(8):

type(Key.TAB)

self.enterTabs(1) #id=txtAcronymID

self.enterTabs(1) #id=txtName

self.enterTabs(1) #id=txtDescription

self.enterTabs(1) #id=ddlIsActive

self.enterTabs(1) #id=ddlProjectID

self.enterTabs(1) #id=ddlWorkFlowStepTypeID

#Enter value method definition

def enterValue(self, inputValue,numberOfTabs):

type(inputValue)

for i in range(numberOfTabs):

type(Key.TAB)

def enterTabs(self, numberOfTabs):

Page 67: Software Development Tools Reference · 2013-10-04 · Balsamiq Mockups is a graphical user interface mockup builder application. It allows the designer to arrange pre-built widgets

Software Development Tools Reference: 10/04/2013 - Property of Luis Casillas. @LuisCasillas All rights reserved. Page 67 of 67

for i in range(numberOfTabs):

type(Key.TAB)

#Go to Browser Address Bar method definition

def goToBrowserAddressbar():

type("d",KeyModifier.ALT)

#Enter Value method test definition

def enterValue(self, inputValue,numberOfTabs):

type(inputValue)

for i in range(numberOfTabs):

type(Key.TAB)

def enterTabs(self, numberOfTabs):

for i in range(numberOfTabs):

type(Key.TAB)

def goToBrowserAddressbar():

type("d",KeyModifier.ALT)

def tearDown(self):

switchApp("Problem Steps Recorder")

type("o",KeyModifier.ALT)

wait(2)

type("Acronym_Test_442013_618PM")

wait(2)

type(Key.ENTER)

wait(5)

closeApp("Problem Steps Recorder")