CS35 Lab10:

Creating a GUI front-end for your web browser

Due 11:59pm Wednesday, April 13

A skeleton version of the programs will appear in your cs35/labs/10 directory when you run update35. The program handin35 will only submit files in this directory.

This lab is the final part of a larger project to build a web browser with a search engine for a limited portion of the web. In this part you will construct a graphical user interface for your web browser using wxWidgets.

At a minimum, your GUI must have: Once your browser can successfully handle all of these requirements feel free to include additional features.

Classes, Programs, and Files Used

Copy all of the files, except the Makefile, from your previous lab directory into the current lab directory. When you do an update35 you will get an updated version of the Makefile. You will edit one new file for this lab called browser.cpp.

$ update35
Creating /home/adas/cs35/labs/10
  Adding /home/adas/cs35/labs/10/Makefile
  Adding /home/adas/cs35/labs/10/browser.cpp
$ cd cs35/labs/10/
$ cp ../09/* ./
cp: overwrite `./Makefile'? n
$ ls

String conversions

The GUI toolkit wxWidgets uses a type called wxString to store strings, while our search engine code uses the C++ type string. There are several places where we need to convert between these two representations.

Getting Started

  1. Before trying to connect the GUI front-end to the rest of your search engine code, format the GUI so that it contains all of the required components. Your GUI code should contain a MyFrame class that inherits from the wxFrame class, and a MyPanel class that inherits from the wxPanel class. Here are some tips for how to structure the GUI code:
    • Declare all of the controls (such as buttons and text boxes) in the MyPanel class. Create the controls using new in the MyPanel constructor and be sure to use this as the first argument in each one.
    • Declare all of the event handlers in the MyFrame class, and put them in the event table for MyFrame. You will probably not need an event table for MyPanel. The MyFrame class has two data members called m_Html and m_Panel. Putting all of the event handlers at the level of MyFrame will allow you to access both the panel and the web page through these data members. For example, suppose you have a text box named queryEntry. You can access it in an event handler by doing m_Panel->queryEntry. Or if you want to load a web page from within an event handler you can do m_Html->LoadPage(...).
    • To make your browser window a particular size, in the MyFrame constructor, use sizer->SetMinSize(width, height). A width and height of at least 1000 work well.
  2. When running ./browser, you may get a warning about "Could not initialize the application's security component." Click OK and the application should still work. I'll look into this.

  3. Using the previous main program from part3.cpp as a guide, incorporate the search engine code into the gui front-end in browser.cpp.
    • Add the appropriate includes at the top of browser.cpp so that it has access to all the necessary data structures such as priority queues and hash tables as well as other important components such as the process query code.
    • Any of the key data structures that you declared in the main program of part3.cpp should now be declared in the public area of the MyFrame class.
    • Because wxWidgets does not export an easy way to read command line arguments, you can hard-code the urls list and ignore list directly into the browser app.
    • Then create these data structures using new in the Constructor method of the MyFrame class.
    • Most of the code that formerly processed queries will now go into the event handler for the component of the GUI where the query is entered. You will no longer need to deal with recognizing "quit" as the GUI will be closed through a menu or a button.
Helpful wxWidgets classes
wxApp | wxFrame | wxPanel
wxString | wxButton | wxTextCtrl
wxStaticText | wxGauge | wxCheckBox
handin35. This will copy the code from your cs35/labs/10 to my grading directory. You may run handin35 as many times as you like, and only the most recent submission will be recorded. If you worked with a partner, only one of you needs to handin the code.