Creating a nice GUI The next several slides will walk you thru a - PowerPoint PPT Presentation

Creating a nice GUI • The next several slides will walk you thru a particular design that I like for my applications. OpenGL and Window s • The order can be a little finicky, so if you mess up, delete all files and start over!!! • The design consists of a GUI panel on the Windows Forms left and a view panel on the right, with a Programming status bar and a main menu. Roger Crawfis Note: VS 2003 show n Create a new Project • The following slides and images are old, • Start Visual Studio .NET create a new project using 2005. • Also, note there is a new SplitContainer that works better for this style of GUI. – Use it rather than the Panel/Splitter/Panel approach.

Create a new Project Add your GUI elements • Select a C++ Windows Forms Application • Resize the Form to be about 800 by 600, or whatever you like. • In this order, add the following elements from the Toolbox->Windows Forms. – StatusBar – Panel – Splitter – Panel GUI design GUI Design • In the Properties window you can make changes • Build (Build->Build Solution) and run to the content and appearance of these controls. (Debug->Start without Debugging) your application. It should look something like this: – Change the BackColor of the splitter. – Change the Dock property of panel1 to Left. – Change the Dock property of panel2 to Fill (the center icon). – Click on the Collections property of the statusBar and add three tabs. Type in some text. – On the StatusBar properties, set ShowPanels to true.

GUI Design GUI Design • In the GUI panel, let’s make one large tabbed • Your program should now look like this. dialogue. New Title added • Drag a tabControl over to the GUI panel. Background • Set its dock to Fill. image added • In the properties select the Collection button and add four tab panels. – Lab2 – Extra – Grading – Readme Examine the code InitializeComponents • Okay. We have the basic lay-out. Notice we • There is a tree view structure in the code views have not done any programming yet. with Visual Studio. You can collapse a method, class or region of code to hide the details as you • Right-click the Form1.h file in the Solution panel work on other parts of the code. and select Edit Code. We have: • The InitializeComponents method is collapsed – A public constructor by default. This is automatically generated by – A protected Dispose the Designer Window. It has all of the natty – A private InitializeComponents details on setting up the controls. • What is this! The source code is in the .h file? • Uncollapse it and examine the code. • Look at the Form1.cpp file.

Lab2 Lab2 Controls • Okay, we have the basic lay-out, now we • Selecting an image file. need to embed the business logic. – Possible Options: • What are the lab requirements? 1. Add a text box and have the user type the path / filename into the textbox. (umm Yuck!!!) • More specifically, what controls do we 2. Pre-load a set of image files and have the user need? select from this set. (lacks flexibility). 3. Bring up a dialog asking the user to select an – Specifying the number of lines / points. image. Limit the selection to only the proper type – Reading in (selecting) an image file. of files. – Specifying the line-width or point size. • How do we bring up the dialog? • What do we have to do to show the dialog? – Specify two color values. Image file Dialogue Image file Dialogue • Adjust the Button’s properties: • This is why you use a higher-level API. 1. Change the text to “Load Texture” • With windows forms and .Net 1.1 this is • Adjust the OpenFileDialog’s properties really trivial. Follow these simple steps: 1. Change the Title to “Select an image file for the texture” 2. In the Filter property add a string to aid in the right file type 1. Drag an OpenFileDialog control to anywhere selection. Something like this: “All files (*.*)|*.*|Jpeg (*.jpg)|*.jpg|Png (*.png)|*.png”. on your Form. Notice that it places it in a Each pair here has the format (Text string to display | regular special window pane below your design. expression). Note that adding a space before the asterisk results in a different regular expression. 2. Drag a Button control to the Lab2 tab panel. 3. Set the Filter index to 2, such that jpeg is the default format. This will be used to bring up the dialog. 4. Set the AddExtension to False. 5. Make sure the Multiselect property is False.

Image file Dialogue Image file Dialogue • Okay, we have now defined everything, such • Run and test the program. Clicking on the that the constructor is called and the properties button should bring up the openFileDialog. are set. Nothing will happen though, we need to add some logic. • Double click the “Load Texture” button. This adds some template code and brings up the source code window (Form1.h). • It also added this line inside the InitializeComponents: this->button1->Click += new System::EventHandler(this, button1_Click); • Add the following line in button1_Click: this->openFileDialog1->ShowDialog(); Image file Dialogue Lab2 Controls • Number of primitives • Note that the dialog simply selects the file, – There are several choices here. it does not open it or perform any logic yet. • Textbox (you would need to validate that it only • We will address actually opening the file, contained numbers). reading in the image and creating a • Numeric Up/Down control (it has two speeds, both of which you can configure in the Properties page). texture map from it later. • Trackbar or slider control (you may need to provide a text label that indicates the current value). – The reference lab uses both a numericUpDown and a Trackbar tightly coupled together.

Accessibility Trackbar • Most controls have accessibility features • Let’s use the trackbar. built into them. • Drag a trackBar control to the Lab2 tab panel. • In the Properties page: • This allows for a mouse free control. – Set the Maximum value to 100,000 (or higher) • You can hit the tab key to reach the – Set the (initial or current) Value to 10,000 NumericUpDown and Trackbar controls – Set the LargeChange to 5,000 and then use the arrow keys to change – Set the SmallChange to 1,000 their values. – Set the Tick Frequency to 10,000 • Holding down the key accelerates the • Also add a Label control (static text) above the change. trackBar to describe its purpose. Trackbar Trackbar • Okay, we have a control and it can change values, etc. • We should now have something like: but we do not have anything useful connected to it. • Business logic: – There are many ways you can use this: 1. The lazy way – simply read the control’s value whenever you need it. This mixes the business logic and the GUI logic. 2. The global document way – Whenever the value changes, change a corresponding data value in some document class. This still mixes the logic. Bad data hiding. 3. The document/view way – Whenever the value changes, call a method on the document’s class. The document now knows it’s value has changed. • Perform some action (update display, verify data, etc.) • Keep a history for undo/redo.

Document Class Document Class • Okay, I will admit it, I used method #1 in the • You also need to include: reference lab. But I am going to make you follow using namespace System::Drawing; method #3. • Add public methods to set (and optionally • Create and add a new class to your project. – Right-click on the solution and select get) each of these. For instance: Add->Add Class from the context menu. void SetNumPrimitives( const int nLines ) { numPrimitives = nLines; } – Select a generic C++ class and give a name. • – Change it to managed C++ by changing class to public __gc class in the header file. – Add the following private members: – int numPrimitives; – float lineWidth; – Color color1, color2; Document Class Lab2 Status • Okay, now we can wire that to the trackBar. • Okay, we are about 1/3 of the way to • Double-click the trackBar in the designer. having some implementation for lab2. • In the code template, add something like: • You need to add an OpenGLPanel as in impressionismDoc->SetNumPrimitives( trackBar1->Value ); HW #1 and Lab1 and create the OpenGL • We need to create and add an instance of our document. Declare a private pointer to an drawing calls. instance. • We also still need to add the image file private: Impressionism *impressionismDoc; and texture map, as well as the other • In the constructor for Form1 create a new controls. instance. impressionismDoc = new Impressionism();