Smoke and Mirrors Prototype

Introduction to Prototyping.....................................................................................................................1

Implementing the Use Cases...................................................................................................................2

Paper Based Designs............................................................................................................................2

The Smoke and Mirrors Prototype..........................................................................................................2

Response.Redirect...................................................................................................................................5

.Visible .Enabled & .Text Properties.........................................................................................................5

Prototyping..........................................................................................................................................7

The Benefits of Prototyping.....................................................................................................................8

Solutions and Projects in Visual Studio....................................................................................................8

So where is the data Layer?...................................................................................................................10

Thick and Thin Layers............................................................................................................................12

Introduction to PrototypingPerhaps the hardest question to consider when designing a site is the question “where do I begin?”

To simply open Visual Studio and starting writing code is a skill that takes a long time to acquire.

Every skill that we have was not learnt over night and certainly not without proper help and support.

When I was learning to ride a bike I had something like the one above. The important and an essential part of the design were the stabilisers attached to the back wheel.

Eventually over time these were removed and I learnt to ride a bike without them.

The same is true of programming. However the good news is that not only are the strategies helpful to people new to programming they are also essential tools for experienced programmers. To some extent the stabilisers never come off.

We are currently in the process of using some of those tools.

We are…

Taking time to think about the problem Working collaboratively to get a grasp of the problem Using documentation to help us model the problem

o System specificationo Event tableso Use case diagrams / descriptionso Class diagrams

1

Using tools to support us (Enterprise Architect and Visual Studio)

There are a few other tools at our disposal to help us build the system.

Git Hub Paper based designs Smoke and mirrors prototype Test Driven Development

Implementing the Use CasesAt some point we will need to turn our use case diagrams into presentation layer artefacts.

In creating a web based interface this will involve ASP.NET web forms.

In creating a desktop application this will require a Windows executable file using Windows forms.

Paper Based DesignsPaper based designs may be drawn up quickly and at low cost and allow the developer to plan out the screens and the flow of the pages. Once the individual screens have been designed they may be built up into a story board of the system allowing a potential user to get a feel for the finished system without having to use a large amount of development time.

Pen and paper is fast and cheap.

If your design is way off the mark of the client’s expectations then it isn’t too painful to change it.

I often use rough scribbles on paper just to plan out ideas if I am not sure what I need to do.

The Smoke and Mirrors Prototype

2

The picture of the cute bunny is here to illustrate the meaning of “smoke and mirrors”. Smoke and mirrors are used by magicians to cover up what is really going on and to give the illusion that some magic is taking place.

The Smoke and Mirrors prototype will do exactly this.

Firstly it is a tool to allow you to mock up the system to the client quickly with a minimum of effort on your part.

Secondly it provides a useful discussion point with the user / client to establish if you are on the correct track.

Even the most experienced of developers have incorrect assumptions about user interaction.

What seems like a perfectly sensible design to you may be very confusing when presented to the user.

The smoke and mirrors prototype is a valuable tool that allows you to test your assumption of how the system is to be used.

Fortunately Visual Studio is an ideal environment for designing a system as it supports the creation of system prototypes.

To illustrate this we will look at a prototype, the DVD swap shop.

Type your email address and password to log into the system.

The interface should change like so...

3

Now make an offer on one of the DVDs.

Hopefully you will be fooled into thinking that this system is fully functional.

Stop the program and now take a look at the code for the program...

You may be interested to note that there really isn’t very much code at all in this system.

The two main items of code are as follows.

4

Response.RedirectResponse.Redirect may be used to navigate from one page in the site to another.

For e example the click event for the “Sign Up” button ...

Contains only the following line of code...

This tells the program to redirect to the page “signup.asp” when the user clicks on this button.

Much of the functionality for the prototype is driven by Response.Redirect.

.Visible .Enabled & .Text PropertiesAnother way of creating the illusion of functionality is to use various control properties.

Take a look at the page signup.aspx...

Double click on the page in the solution explorer to see the page.

5

The idea is that to sign up the user enters their first name, last name and email address. They are then sent a password when they press the button “Send me my password”.

Like so...

They press the “Send me my password” button...

6

Note the following

The email text box is greyed out so the user cannot change the address The password text box is made visible The create account button is made visible The “send me my password” button is hidden A message is displayed to provide further instructions

Take a look at the code for the “send me my password” click event...

Here you can see how the visible and enabled properties are being manipulated to control the interface. Also see how the message is displayed in the label control.

The whole point of the above is that it is possible to create the illusion of a working system with very little code.

PrototypingCreating prototypes of a system is a very useful way of checking if the design is on track.

Consider a prototype for a new design of car. The prototype will have the dimensions, shape and colour scheme of the finished car. The prototype will not be the finished car as it is only 60cm long.

7

A software prototype is a mock up of the finished system. It often looks like it works as intended however the functionality is a trick. The finished code is not in place.

The above tools allow us to create our system with the constant input of the client / users.

The worst possible situation with any system is to get to the end of the design process and find that it is wrong in some fundamental way.

The Benefits of PrototypingOne big benefit of prototyping is that you are able to show your system design to your client to see if it is what they are looking for.

A prototype may be created very quickly and easily modified to suit the needs of your client.

The prototype should look like a professional piece of software however the functionality is just an illusion.

Once you know that your prototype design is suitable then you may get on with the task of making the code work.

However – now that you have your presentation layer clearly defined it provides a bigger insight into how the middle layer code will need to work along with the sort of tables and attributes the data layer will need.

Solutions and Projects in Visual StudioGoing off on a slight tangent from prototyping I want to cover a few points about how we are going to configure Visual Studio to try and reduce the amount of work we will need to do.

As we saw in the lab last week Visual Studio allows us to create projects and solutions.

A project may be a web site, a desktop application, an application based in the cloud, a mobile phone app, class library etc.

In Visual Studio we have the option of adding projects to a solution.

A solution is a master container that allows us to work on multiple projects at the same time also to create a single class library and link that class library to the projects in the solution.

Looking at this in Visual Studio we see the following…

8

Solution

Projects

PBFrontEnd(Interface)

Data LayerDatabase

Middle LayerBusiness Logic(Classes)

PBBackOffice(Interface)

In this solution we have created six projects

Address Book Finished – the IMAT1604 work you did last year Bookshop Class Library – the middle layer of the three layers shared between all of the projects Connect4 – a connect 4 game written in Visual Basic. (This set up allows us to mix up our

languages a bit!) PBBackOffice – A C# Windows desktop application which would be used to maintain the project

bank data PBFrontEnd – a C# ASP.NET web site which will be the front end for the project bank application

If we look at this from the point of view of the three layered architecture we would see the following structure (concentrating on the projects PBBackOffice and PBFrontEnd)…

What we have here are two projects defining separate presentation layers sharing a common middle layer. Sharing a common middle layer means that both projects ultimately share a common data layer.

9

So where is the data Layer?In a real world system the data layer would be stored on a dedicated computer running the full blown version of the database software.

Since Visual Studio allows us to develop systems without too much of a configuration overhead we will be handling the data requirement slightly differently.

In order for this to work we need to arrange the folders within the solution in a particular way.

In last year’s address book we created the data layer inside a special folder called App_Data.

When we place the database inside that folder it is only available to the project and not to other projects we may create.

To solve this we move the App_Data folder containing the shared database to the same level as the other folders in the solution like so…

10

The class clsDataConnection has been designed in such a way that it will search in the following orde

1. In the local folder for the current project2. In the root folder of the solution

This means that the data from the shared database may be accessed by all projects in the solution.

The data in the database looks like this…

The main list in PBFrontEnd will look like this…

The main list in PBBackOffice will look like this…

11

Any change made to the data is seen in both projects.

Any changes to the code in the middle layer will be passed on to both projects sharing the class library.

Thick and Thin LayersIn the three layered architecture a layer may be completely absent or it may not have much content at all i.e. thin.

When we are creating any code it is always a good idea to write with an eye to re-use.

Any code in the middle layer class library may be shared across multiple projects.

Any code that is in the presentation layer is much harder to share with other projects.

We want to create as little code in the presentation layer as possible.

.NET has a number of facilities allowing us to use as little code in the presentation layer as possible.

12

In IMAT1604 last year we used the following function to populate the list box on the presentation layer…

//function use to populate the list box

Int32 DisplayAddresses(string PostCodeFilter)

{

///this function accepts one parameter - the post code to filter the list on

///it populates the list box with data from the middle layer class

///it returns a single value, the number of records found

//create a new instance of the clsAddress

clsAddressBook MyAddressBook = new clsAddressBook();

//var to store the count of records

Int32 RecordCount;

//var to store the house no

string HouseNo;

//var to store the street name

string Street;

//var to store the post code

string PostCode;

//var to store the primary key value

string AddressNo;

//var to store the index

Int32 Index = 0;

//clear the list of any existing items

lstAddresses.Items.Clear();

//call the filter by post code method

MyAddressBook.FilterByPostCode(PostCodeFilter);

//get the count of records found

RecordCount = MyAddressBook.Count;

//loop through each record found using the index to point to each record in the data table

while (Index < RecordCount)

{

//get the house no from the query results

13

HouseNo = Convert.ToString(MyAddressBook.AddressList[Index].HouseNo);

//get the street from the query results

Street = Convert.ToString(MyAddressBook.AddressList[Index].Street);

//get the post code from the query results

PostCode = Convert.ToString(MyAddressBook.AddressList[Index].PostCode);

//get the address no from the query results

AddressNo = Convert.ToString(MyAddressBook.AddressList[Index].AddressNo);

//set up a new object of class list item

ListItem NewItem = new ListItem(HouseNo + " " + Street + " " + PostCode, AddressNo);

//add the new item to the list

lstAddresses.Items.Add(NewItem);

//increment the index

Index++;

}

//return the number of records found

return RecordCount;

}

This loop is working its way through each record in the address book collection.

14

Copying the data to the main list box…

What if I told you that we could do the same thing without the loop?

15

What we are able to do is tell the code these are the attributes of the collection class…

To use these attributes for the list.

This is really to once again illustrate the following points.

We want to achieve results with the minimum amount of effort possible. If we configure our code and tools correctly they will do a great deal to support us in writing

simpler code.

16