Lecture 7: WinForms & Controls, Part 2

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!

Part 1 • Picture Boxes and the SlideShow App…

SlideShow.exe Images SlideShow Application • The SlideShow App reads & displays images from a folder: Images.txt

(1) Layout the GUI • Layout the following controls on the form: Label MainMenu PictureBox Button Button TextBox

(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 Anchorproperty 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 Maximizedif 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 >>

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

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

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(); 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: students.txt StudentInfo.exe

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

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

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

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