CS35 Lab9:

Creating a GUI front-end for your web browser

Due 11:59pm Wednesday, November 17

A skeleton version of the programs will appear in your cs35/labs/09 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.

Requirements
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 create one new file for this lab called browser.cpp.

$ update35
Creating /home/adas/cs35/labs/09
  Adding /home/adas/cs35/labs/09/Makefile
  Adding /home/adas/cs35/labs/09/browser.cpp
$ cd cs35/labs/09/
$ cp ../08/* ./
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. Name the GUI code browser.cpp. 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. In order for wxWidgets to properly load web pages it expects the URLs to have a particular format. First, they must be preceded by http://. This is easy to take care of; you can simply concatenate this to the front of any URL that is missing it. Second, wxWidgets expects that home pages end with a slash. For example, if you try to load the page www.cs.swarthmore.edu/~adanner it will fail. But if you add a slash to the end, as in www.cs.swarthmore.edu/~adanner/, it will succeed.
    • Update the urls.txt file so that all home pages end with a slash.
    • Update your code so that it still properly processes the urls.txt file given this modification.
  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.
    • 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
wxHtmlWindow | wxBoxSizer
Optional: Spiff up the HTML
As you may have noticed, the wxHtmlWindow class renders web pages poorly. With a little bit more work, you can have a better web page display. See the extension page. On how to set this up. This part is entirely optional and should not be attempted until you complete the rest of the lab.
Submit
Once you are satisfied with your code, hand it in by typing handin35. This will copy the code from your cs35/labs/09 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.