![Page 1: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/1.jpg)
CNS 1410Graphical User Interfaces
![Page 2: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/2.jpg)
Obectives
• Students should understand the difference between a procedural program and an Event Driven Program. • Students should be able to describe the basic components of a GUI.• Students should be able to create a simple GUI, using wxWidgets• Students should be able to describe the event handling mechanism of wxWidgets.
![Page 3: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/3.jpg)
Traditional Model – Command Line Programs
Object
Object
main ( ){ declare variables create objects send messages to objects . . . send messages to objects . . . return 0}
![Page 4: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/4.jpg)
Graphical User Interface Model
ApplicationObject
FrameObject
Domain Objects
![Page 5: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/5.jpg)
Graphical User Interface Model
ApplicationObject
The application object “listens”for events to occur, then callsevent handlers in the FrameObject.
![Page 6: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/6.jpg)
Graphical User Interface Model
FrameObject
GUIComponent
GUI Component (widgets)generate events.
Event handlers reactto events
GUIComponent
GUIComponent
![Page 7: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/7.jpg)
xFile Edit View Help
Name:
Phone:
PUSH
GUI Components
Frame
![Page 8: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/8.jpg)
Graphical User Interface Model
Domain Objects
Domain objectsdo the work ofthe application
![Page 9: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/9.jpg)
File Edit View Help
PUSH
ApplicationObject
WindowsEvent Queue
ButtonEvent
![Page 10: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/10.jpg)
ApplicationObject
WindowsEvent Queue
FrameObject
ButtonEvent
![Page 11: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/11.jpg)
ApplicationObject
WindowsEvent Queue
FrameObject
ButtonEvent
Call event handler
![Page 12: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/12.jpg)
Graphical User Interfaces
ApplicationObject
WindowsEvent Queue
FrameObject
ButtonEvent
Call event handler
Domain Objects
Call functions indomain objectsto do some work.
![Page 13: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/13.jpg)
#include <wx/wx.h>class BasicApplication : public wxApp{public:
bool OnInit( );};
ApplicationObject
The application class only needs oneFunction named OnInit. This functionis used to create the User Interface.
![Page 14: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/14.jpg)
bool BasicApplication::OnInit( ){ BasicFrame *frame = new BasicFrame("Hello World", 50, 50, 450, 340); frame->Show(true); SetTopWindow(frame); return TRUE;}
This statement creates a Frame object. Framesrepresent windows. By default, Frame objectscontain all of the function of a simple window.You can drag them, resize them, and close them.
![Page 15: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/15.jpg)
bool BasicApplication::OnInit( ){ BasicFrame *frame = new BasicFrame("Hello World", 50, 50, 450, 340); frame->Show(true); SetTopWindow(frame); return TRUE;}
This statement makes the Frame object visible.
![Page 16: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/16.jpg)
bool BasicApplication::OnInit( ){ BasicFrame *frame = new BasicFrame("Hello World", 50, 50, 450, 340); frame->Show(true); SetTopWindow(frame); return TRUE;}
This statement makes the Frame the topmostFrame.
![Page 17: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/17.jpg)
#include <wx/wx.h>class BasicFrame : public wxFrame{public: BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height); void OnQuit(wxCommandEvent& event); void OnAbout(wxCommandEvent& event);private:
DECLARE_EVENT_TABLE( ) };
Event handlers
![Page 18: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/18.jpg)
BEGIN_EVENT_TABLE(BasicFrame, wxFrame) EVT_MENU(ID_QUIT, BasicFrame::OnQuit) EVT_MENU(ID_ABOUT, BasicFrame::OnAbout)END_EVENT_TABLE( )
The Event Table for the Frame
When you receive an event named ID_QUIT, call thefunction OnQuit in the BasicFrame class.
![Page 19: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/19.jpg)
BasicFrame::BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height) : wxFrame( (wxFrame *)NULL, -1, title, wxPoint(xpos, ypos), wxSize(width, height)) { wxMenu *menuFile = new wxMenu;
menuFile->Append(ID_ABOUT, "&About..."); menuFile->AppendSeparator( ); menuFile->Append(ID_QUIT, "E&xit");
wxMenuBar *menuBar = new wxMenuBar; menuBar->Append(menuFile, "&File");
SetMenuBar(menuBar);
CreateStatusBar( ); SetStatusText("Welcome to wxWidgets"); }
Frame Constructortext for title bar
Position of upper left hand corner of thewindow on the screen
window size
![Page 20: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/20.jpg)
BasicFrame::BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height) : wxFrame( (wxFrame *)NULL, -1, title, wxPoint(xpos, ypos), // wxSize(width, height)) { wxMenu *menuFile = new wxMenu;
menuFile->Append(ID_ABOUT, "&About..."); menuFile->AppendSeparator( ); menuFile->Append(ID_QUIT, "E&xit");
wxMenuBar *menuBar = new wxMenuBar; menuBar->Append(menuFile, "&File");
SetMenuBar(menuBar);
CreateStatusBar( ); SetStatusText("Welcome to wxWidgets"); }
Frame Constructor
pointer to parent (containing) class
ID – default is -1
title bar text
position// size
![Page 21: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/21.jpg)
BasicFrame::BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height) : wxFrame( (wxFrame *)NULL, -1, title, wxPoint(xpos, ypos), wxSize(width, height)) { wxMenu *menuFile = new wxMenu;
menuFile->Append(ID_ABOUT, "&About..."); menuFile->AppendSeparator( ); menuFile->Append(ID_QUIT, "E&xit");
wxMenuBar *menuBar = new wxMenuBar; menuBar->Append(menuFile, "&File");
SetMenuBar(menuBar);
CreateStatusBar( ); SetStatusText("Welcome to wxWidgets"); }
Frame Constructor
create a menu object
![Page 22: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/22.jpg)
BasicFrame::BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height) : wxFrame( (wxFrame *)NULL, -1, title, wxPoint(xpos, ypos), wxSize(width, height)) { wxMenu *menuFile = new wxMenu;
menuFile->Append(ID_ABOUT, "&About..."); menuFile->AppendSeparator( ); menuFile->Append(ID_QUIT, "E&xit");
wxMenuBar *menuBar = new wxMenuBar; menuBar->Append(menuFile, "&File");
SetMenuBar(menuBar);
CreateStatusBar( ); SetStatusText("Welcome to wxWidgets"); }
Frame Constructor
Define the menuitems in the menu
AboutExit
generate an event with this name
![Page 23: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/23.jpg)
BasicFrame::BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height) : wxFrame( (wxFrame *)NULL, -1, title, wxPoint(xpos, ypos), wxSize(width, height)) { wxMenu *menuFile = new wxMenu;
menuFile->Append(ID_ABOUT, "&About..."); menuFile->AppendSeparator( ); menuFile->Append(ID_QUIT, "E&xit");
wxMenuBar *menuBar = new wxMenuBar; menuBar->Append(menuFile, "&File");
SetMenuBar(menuBar);
CreateStatusBar( ); SetStatusText("Welcome to wxWidgets"); }
Frame Constructor
Define a MenuBar object
![Page 24: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/24.jpg)
BasicFrame::BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height) : wxFrame( (wxFrame *)NULL, -1, title, wxPoint(xpos, ypos), wxSize(width, height)) { wxMenu *menuFile = new wxMenu;
menuFile->Append(ID_ABOUT, "&About..."); menuFile->AppendSeparator( ); menuFile->Append(ID_QUIT, "E&xit");
wxMenuBar *menuBar = new wxMenuBar; menuBar->Append(menuFile, "&File");
SetMenuBar(menuBar);
CreateStatusBar( ); SetStatusText("Welcome to wxWidgets"); }
Frame Constructor
AboutQuit
File
Store the Menu object in the MenuBar and label it.
![Page 25: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/25.jpg)
BasicFrame::BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height) : wxFrame( (wxFrame *)NULL, -1, title, wxPoint(xpos, ypos), wxSize(width, height)) { wxMenu *menuFile = new wxMenu;
menuFile->Append(ID_ABOUT, "&About..."); menuFile->AppendSeparator( ); menuFile->Append(ID_QUIT, "E&xit");
wxMenuBar *menuBar = new wxMenuBar; menuBar->Append(menuFile, "&File");
SetMenuBar(menuBar);
CreateStatusBar( ); SetStatusText("Welcome to wxWidgets"); }
Frame Constructor
Make the MenuBar object thecurrently active menu bar.
![Page 26: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/26.jpg)
BasicFrame::BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height) : wxFrame( (wxFrame *)NULL, -1, title, wxPoint(xpos, ypos), wxSize(width, height)) { wxMenu *menuFile = new wxMenu;
menuFile->Append(ID_ABOUT, "&About..."); menuFile->AppendSeparator( ); menuFile->Append(ID_QUIT, "E&xit");
wxMenuBar *menuBar = new wxMenuBar; menuBar->Append(menuFile, "&File");
SetMenuBar(menuBar);
CreateStatusBar( ); SetStatusText("Welcome to wxWidgets"); }
Frame Constructor
Create a StatusBar object
![Page 27: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/27.jpg)
BasicFrame::BasicFrame(const wxChar *title, int xpos, int ypos, int width, int height) : wxFrame( (wxFrame *)NULL, -1, title, wxPoint(xpos, ypos), wxSize(width, height)) { wxMenu *menuFile = new wxMenu;
menuFile->Append(ID_ABOUT, "&About..."); menuFile->AppendSeparator( ); menuFile->Append(ID_QUIT, "E&xit");
wxMenuBar *menuBar = new wxMenuBar; menuBar->Append(menuFile, "&File");
SetMenuBar(menuBar);
CreateStatusBar( ); SetStatusText("Welcome to wxWidgets"); }
Frame Constructor
Store this text in the status bar
![Page 28: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/28.jpg)
![Page 29: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/29.jpg)
The Event Handlers
void BasicFrame::OnQuit(wxCommandEvent& event) { Close(TRUE); } void BasicFrame::OnAbout(wxCommandEvent& event) { wxMessageBox("The Hello World Sample", "About Hello World", wxOK | wxICON_INFORMATION); }
Closes the window and terminates the application.
![Page 30: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/30.jpg)
Finishing Touches
enum{ ID_QUIT = 1, ID_ABOUT};
Use an enumeration to define event names
IMPLEMENT_APP(BasicApplication)
This macro starts the Windows event loop running
![Page 31: CNS 1410 Graphical User Interfaces. Obectives Students should understand the difference between a procedural program and an Event Driven Program. Students](https://reader036.vdocument.in/reader036/viewer/2022070401/56649f165503460f94c2bb27/html5/thumbnails/31.jpg)
Write the code using the minGW Compiler
This code is available on the course web site as part of Lab #6.