lecture 7: winforms & controls, part 2. 7-2 microsoftintroducing cs using.netj# in visual...

Lecture 7:

WinForms & Controls, Part 2

7-2MicrosoftIntroducing CS using .NETJ# in Visual Studio .NET

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!


Part 1

• Picture Boxes and the SlideShow App…


SlideShow Application

• The SlideShow App reads & displays images from a folder:

Images

SlideShow.exe

Images.txt


(1) Layout the GUI

• Layout the following controls on the form:

MainMenu

Label

PictureBox

TextBox

Button Button


(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, …)


(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


(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 followsall 4 corners of form


(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…


(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…


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 HomeDir; // directory where .EXE is private static String[] Images; // array of image filenames private static int 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 >>

public class App{ private static String HomeDir; // directory where .EXE is private static String[] Images; // array of image filenames private static int 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 >>


Creating the data structure (cont..)

• Since we are defining main(), we must comment out the Visual Studio supplied version of main() inside Form1.jsl

/** * 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()); }*/

/** * 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()); }*/

• Alternatively our code could be placed inside Form1.jsl, but logically it should be separate.


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 >>

. . .

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 >>


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

. . .

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


Programming the GUI

• Five events to program:

– File >> Exit

– Help >> About

– Form Load

– cmdNext Click

– cmdPrev Click

this.Close();

MessageBox.Show("SlideShow App written by...");

this.lblTitle.set_Text( App.GetImagesText() );DisplayCurrentImage();

App.NextImage();DisplayCurrentImage();

App.PrevImage();DisplayCurrentImage();

this.Close();

MessageBox.Show("SlideShow App written by...");

this.lblTitle.set_Text( App.GetImagesText() );DisplayCurrentImage();

App.NextImage();DisplayCurrentImage();

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) );}

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) );}


Programming the GUI

• Before running it, be sure to have supplied:

– the Images directory with image files only

– The descriptive Images.txt file


(7) Run!

• App should cycle through the images, support resizing, etc.


Part 2

• List Boxes and the Student Info App…


Student Info Application

• The Student Info App reads & displays student information:

StudentInfo.exe

students.txt


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…


Adding to a list box

• Student Info app adds Student objects during Form Load:

– notice the entire student object is added to a list box item

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

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


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) // nothing selected return;

// 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

. . .

private void lstStudents_SelectedIndexChanged(...) { Student s;

if (this.lstStudents.get_SelectedItem() == null) // nothing selected return;

// 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


Part 3

• Additional controls…


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…


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); }

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); }


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!

lecture 7: winforms & controls, part 2. 7-2 microsoftintroducing cs using.netj# in visual...

Documents

microsoftintroducing

microsoftintro cs

images title

basedirectory images

imagepublic class app

string s

filename filename

wealth of controls