CIS 310: Visual Programming, Spring 2007 Western State College Welcome to 310 Visual Programming...

CIS 310: Visual Programming, Spring 2007 Western State College

Welcome to 310

Visual Programming

Spring, 2008


About This ClassThe catalog:A course focusing on common environment

and design tools used in the development and implementation of graphic user interfaces. Emphasis is placed on the automation of tasks and the customization of systems by programming constructs.

The reality:A chance to have fun with computer

programming. A grand tour of many different areas in CS


Organization

The work in this class will be exclusively programming – there will be no tests. There will be a significant program due every three weeks once we get started. These programs will exemplify the “visual” aspects of programming, user interfaces, graphics, and animation. These programs are meant to be entertaining – programs that you would want to show your friends once they are done.


Language

This term we use C# / Visual Studio

You are encouraged to take this course twice – we'll chance projects / languages every other year.


Text

C# is enough like Java that you shouldn’t need a new text. There’s a lot of online information.

We’re using Visual Studio 2008 – it’s new so there’s no good text for it that I know.


Danger!

There will be math involved – you will be expected to be comfortable with coordinate systems, 3-D graphics, geometry, and other mathematical foundations of CS.


About 310

Let's tour the syllabus

http://wiki.western.edu/mcis/index.php/CIS310-s08/Policies


Late Work

Late work will NOT be acceptable. Prototypes cannot be handed in late for any reason except illness or emergency. Programs cannot be handed more than 2 days late. Late work will lose 10% a day in credit. Don’t hand things in late! Deadlines will be strictly enforced.


The WikiPlease create a home page for yourself in the

MCIS wiki. This is a portfolio you can show off once you leave Western – we'll keep a record of all your projects there. Create a sub-page or section on your homepage for your 310 projects. Each project should have it's own subpage. Use your name and "/" as a prefix.

For every project, you need to make a wiki page that (briefly) describes your program and the extensions you have made to it.


Ask For Help!

When you have problems understanding your programming language, debugging a program, understanding a problem domain, or just figuring out where to start it is up to you to ask for help, either in class or privately. When you enter the real world, you’ll find that it’s much better to admit you don’t understand and get help than to go off and waste time doing the wrong thing.


Warmup Projects

Before we start on the real projects, We will do a series of "warmup" projects that explore the basic programming ideas (visual programming and graphics) and tools (visual editing, debugging) that we'll need.

I'll assign a short project nearly EVERY DAY for the next few weeks. If you don't hand one in your warmup grade goes down one letter.


Visual Studio

You can't go far in programming without a good IDE (Integrated Development Environment). For visual programming, the IDE is especially important.

You HAVE to master Visual Studio to write these programs!


Programming

You need to be ready to program EVERY DAY in this class. That means having the current project available. Options:

• Bring in a laptop with VS loaded onto it EVERY CLASS and develop there

• Use the S: drive to hold projects

• Bring your project on a stick

I can give you an install disk for VS


The E-Commerce Project

One of the four projects will be done in cooperation with the E-commerce class.

You’ll work with a team of 2 – 3 business students on a small web-based project.

This will use ASP.NET – we’ll spend a week learning the basics of web services before the business students work with us. This will be Project #3.


Projects and Packages

Create a project "Warmup" and a package inside it called "warmup".

Make sure you're always using packages! No default package use allowed.

Get started on Visual Studio now.


Basic Ideas of Visual Programming

What is a “visual” program? One that interacts with the user through a collection of “widgets” – things that display information to the user or allow the user to “stimulate” the program.

These widgets are denoted by “objects” in the programming language. The design environment may make these for you or you may have to create them yourself.


Properties

These widgets have parameters (state) – you change the value in the widget and the widget will change on the screen.

You deal with these in two ways:

* The visual editor allows you to set initial values of all properties.

* Getter / setter methods that allow you to change properties dynamically


Events

What’s an event? It’s just a procedure call from the GUI into your program.

Events generally have arguments – these carry information from the GUI into the program.

You need to bind a handler with an event source – this is handled in the IDE.


Basic Widgets

* Graphics panel – user updates the image using drawing functions; interacts through the mouse

* Push button – user controls the label; sends a “Pressed” event to the program

* Timer – posts an event at a regular interval

* Label – user can view text or an image

We'll use the .NET widget set.


State

The “state” of your program is the global variables / instance variables / whatever that holds onto information between interactions from the GUI.

To do GUIs correctly, you need to be very aware of what the state is and how it is used!

You will generally add instance variables to the classes generated by Eclipse to handle state.


Warmup #1: Electronic Voting

We'll start this together and then you can finish up on your own.

Create a “Windows Form Project” named Voting Machine – make sure the language is C#

Under “View”, click on the “Properties” window so you can configure widgets.


Widgets

We'll need the following widgets:

* A "Frame" to hold everything – this comes for free but you need to set the title to “Voting Machine”.

• 2 buttons for each candidate –give them a good name and text. Make these line up horizontally.

• A label to hold the results – change the font to 14 point and give this the name “results”.


The Code ViewNow go to “Code” view. Note that there is a

constructor method containing a call to InitializeComponent();

We’ll put our own initializers after this.Create two instance variables in the form:

public int obamaVotes = 0;

public int hillaryVotes = 0;

Or whoever you are voting for …


Displaying the Totals

We need a method on this class to set the text in the “result” label: showVotes.

What type of value does this return?

What arguments will this have?

Use “+” for string concatentation.

Set the “text” property of results.

Place a call to this in the constructor.

Test this by running your program – the totals should be 0 and the buttons don’t work.


Events

All that remains is to wire up the buttons.

Select a button, go to the property window, and click the lightening bolt (events).

Double click on the “Click” event and the IDE will create a stub for you.

Inside this stub, increment the appropriate vote total. Then do what??


Grading This

I’ll grade this just by looking at it. If you can’t get this done in class then work on it in 115 and show me the result before next class sometime.

CIS 310: Visual Programming, Spring 2007 Western State College Welcome to 310 Visual Programming...

Documents

Transcript of CIS 310: Visual Programming, Spring 2007 Western State College Welcome to 310 Visual Programming...