Lecture 7: WinForms & Controls, Part 2

7-2 MicrosoftIntroducing 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!

7-3 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Part 1 Picture Boxes and the SlideShow App…

7-4 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET SlideShow Application The SlideShow App reads & displays images from a folder: Images SlideShow.exe Images.txt

7-5 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET (1) Layout the GUI Layout the following controls on the form: MainMenu Label PictureBox TextBox Button

7-6 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET (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, …)

7-7 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET (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

7-8 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET (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

7-9 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET (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…

7-10 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET (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…

7-11 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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 // > 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 // >

7-12 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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. */ 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. */ 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.

7-13 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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; } // >. 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; } // >

7-14 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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

7-15 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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) ); }

7-16 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Programming the GUI Before running it, be sure to have supplied: –the Images directory with image files only –The descriptive Images.txt file

7-17 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET (7) Run! App should cycle through the images, support resizing, etc.

7-18 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Part 2 List Boxes and the Student Info App…

7-19 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Student Info Application The Student Info App reads & displays student information: StudentInfo.exe students.txt

7-20 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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…

7-21 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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

7-22 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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

7-23 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Part 3 Additional controls…

7-24 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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…

7-25 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET 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); }

7-26 MicrosoftIntroducing CS using.NETJ# in Visual Studio.NET Summary.NET ships with a large assortment of GUI controls –even more are available from 3 rd parties, etc. –this was just a quick overview of what's possible –the sky's the limit!