Lecture 7:
WinForms & Controls, Part 2
Objectives
“Visual Studio .NET ships with a wealth of controls for building
Graphical User Interfaces…”
• More WinForms & Controls
• Demos of:
– Picture boxes
– List boxes
– Menus
– Web browsers
– and more!
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-2
Part 1
• Picture Boxes and the SlideShow App…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-3
SlideShow Application
• The SlideShow App reads &
displays images from a folder:
Images.txt
SlideShow.exe
Images
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-4
(1) Layout the GUI
• Layout the following controls
on the form:
Label
MainMenu
PictureBox
Button
Button
TextBox
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-5
(2) Configure the controls
• Label:
– Name (lblTitle), Font (Bold Italic), TextAlignment (MiddleCenter)
• PictureBox:
•
•
•
•
– Name (picImageBox), BorderStyle (FixedSingle), SizeMode (CenterImage)
TextBox:
– Name (txtFileName), TabStop (False), TextAlign (Center)
Buttons:
– Name (cmdNext, cmdPrev)
– Image (C:\Program Files\MS VS .NET 2003\Common7\Graphics\icons\arrows)
MainMenu:
– &File with E&xit, &Help with &About…
Form:
– Text, AcceptButton (cmdNext), View menu Tab Order (cmdNext 0, …)
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-6
(3) Run & test GUI
• Run & test controls…
– check tab order
– confirm that user can't type into text box
– notice that resizing is a problem
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-7
(4) Resizing support
• Resizing support based on notion of Anchoring
– controls anchor themselves to 1 or more corners of form
– as form resizes, controls resize (or not)
• Example:
– picture box should grow &
shrink with form
– set picture box's Anchor
property to Top, Bottom,
Left, Right so that it follows
all 4 corners of form
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-8
(5) Maximize app on startup
• You can set form's WindowState property to Maximized if you
want it to take up whole screen when run.
• Run & test, controls should properly resize…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-9
(6) Programming…
• The application has two main components:
– data structure for keeping track of the images
– GUI form for displaying current image & interacting with user
• Let's build the data structure component first…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-10
Creating the data structure
• App class defines main to initialize data structure & show form
– data structure is an array of filenames, one per image…
public class App
{
private static String
private static String[]
private static int
HomeDir; // directory where .EXE is
Images;
// array of image filenames
IndexOfCurrentImage; // index of image being displayed
public static void main(String[] args)
{
HomeDir = System.AppDomain.get_CurrentDomain().get_BaseDirectory();
Images = System.IO.Directory.GetFiles(HomeDir + "Images\\");
IndexOfCurrentImage = 0; // first filename in array
// run app by creating a form and asking .NET to "run" it…
System.Windows.Forms.Application.Run( new Form1() );
}//main
// << cont'd >>
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-11
Creating the data structure (cont..)
• Since we are defining main(), we must comment out the Visual Studio
supplied version of main() inside Form1.jsl
• Alternatively our
code could be placed
inside Form1.jsl, but
logically it should be
separate.
/**
* The main entry point for the application.
*/
/** @attribute System.STAThread() */
/*
*
*
*
*
Comment out this version of main, since we
supplied our own.
public static void main(String[] args)
{
Application.Run(new Form1());
}
*/
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-12
Accessing the data structure
• App class provides methods for accessing data structure…
.
.
.
public static String GetCurrentImageFileName()
{
return Images[IndexOfCurrentImage];
}
public static void NextImage()
{
IndexOfCurrentImage += 1;
if (IndexOfCurrentImage >= Images.length) IndexOfCurrentImage = 0;
}
public static void PrevImage()
{
IndexOfCurrentImage -= 1;
if (IndexOfCurrentImage < 0) IndexOfCurrentImage = Images.length - 1;
}
// << cont'd >>
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-13
Accessing the Title file
• Finally, App class opens & returns contents of "Images.txt" file
– which contains the images' title (e.g. “Family Pictures")
.
.
.
public static String GetImagesText()
{
String s, filename;
filename = App.HomeDir + "Images.txt";
System.IO.StreamReader reader;
reader = new System.IO.StreamReader(filename);
s = reader.ReadToEnd();
reader.Close();
return s;
}
}//class
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-14
Programming the GUI
• Five events to program:
– File >> Exit
this.Close();
– Help >> About
MessageBox.Show("SlideShow App written by...");
– Form Load
this.lblTitle.set_Text( App.GetImagesText() );
DisplayCurrentImage();
– cmdNext Click
App.NextImage();
DisplayCurrentImage();
– cmdPrev Click
App.PrevImage();
DisplayCurrentImage();
private static void DisplayCurrentImage()
{
String filename = App.GetCurrentImageFileName();
this.txtFileName.set_Text( System.IO.Path.GetFileName(filename) );
this.picImageBox.set_Image( System.Drawing.Image.FromFile(filename) );
}
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-15
Programming the GUI
• Before running it, be sure to
have supplied:
– the Images directory with
image files only
– The descriptive Images.txt
file
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-16
(7) Run!
• App should cycle through the
images, support resizing, etc.
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-17
Part 2
• List Boxes and the Student Info App…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-18
Student Info Application
• The Student Info App reads & displays student information:
students.txt
StudentInfo.exe
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-19
List boxes
• List boxes are essentially a visual
data structure
– display items are kept in an
unbounded data structure
– changes to data structure
immediately reflected in list box
• You have a choice as to what you store in list box:
– you can store strings, what are displayed as is
– you can store objects, in which case obj.toString() is displayed
– storing objects allows easy access to info later on…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-20
Adding to a list box
• Student Info app adds Student objects during Form Load:
public class Form1 extends System.Windows.Forms.Form
{
.
.
.
private java.util.ArrayList
students;
// data structure of Student objects...
private void Form_Load(...)
{
this.students = StudentsIO.read("students.txt");
for (int i = 0; i < this.students.size(); i++)
{
Student s = (Student) this.students.get(i);
this.lstStudents.get_Items().Add(s);
}
}//Load
– notice the entire student object is added to a list box item
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-21
Retrieving from a list box
• User selection triggers list box's SelectedIndexChanged event:
– reference to selected item stored in SelectedItem property
.
.
.
private void lstStudents_SelectedIndexChanged(...)
{
Student s;
if (this.lstStudents.get_SelectedItem() == null)
return;
// nothing selected
// otherwise get selected student & display their info...
s = (Student) this.lstStudents.get_SelectedItem();
this.txtID.set_Text( String.valueOf(s.getID()) );
this.txtGPA.set_Text( s.getFormattedGPA() );
}//SelectedIndexChanged
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-22
Part 3
• Additional controls…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-23
Just the tip of the iceberg…
• Dialogs, toolbars, etc.
• Thousands of additional
controls
– .NET and ActiveX
– right-click on Toolbox
– Then "Add/Remove Items…"
– Example!
•Select the COM tab
•add the Microsoft Web
Browser control
•Use arrow keys to scroll
through Toolbox controls
•see next page for usage…
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-24
Baby Browser Application
• Baby Browser App easily built from web browser control:
public class Form1 extends ...
{
.
.
.
private void cmdGo_Click(...)
{
Object junk = null;
// surf to URL entered by user...
this.axWebBrowser1.Navigate(this.txtURL.get_Text(),
junk, junk, junk, junk);
}
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-25
Summary
• .NET ships with a large assortment of GUI controls
– even more are available from 3rd parties, etc.
– this was just a quick overview of what's possible
– the sky's the limit!
Introducing
Microsoft
J#
in Visual Studio
CS using
.NET
.NET
7-26