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.

At a minimum, your GUI must have:

• A starting web page within the computer science domain.
• A way to go backward and forward through the web pages that have been recently viewed. This can be accomplished via menus or buttons.
• A clearly labeled place to enter the URL of a web page that the user wishes to view. If the URL is valid, then the browser will load the web page.
• A clearly labeled place to enter a query. If there are relevant web pages for the query, then the browser will load the best matching web page.
• A place where the browser can display the search results as a list of relevant web pages in sorted order from most to least relevant.
• A place to report caching messages. Whenever a query result is found in the cache or added to the cache, display an appropriate message.
• A way to quit the browser. This can be accomplished via a menu or a button.

Once your browser can successfully handle all of these requirements feel free to include additional features.

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

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.

• Converting a quoted string into a wxString
  When you want to pass a quoted string into a wxWidgets method that expects a wxString, such as SetLabel for wxStaticText controls, use the wxT macro as follows:

  m_Panel->messages->SetLabel(wxT("an example"));
  

• Converting a C++ string variable into a wxString
  When you want to pass a variable that contains a C++ string into a wxWidgets method that expects a wxString do the following:

  string s = "an example";
  wxString temp;
  m_Panel->messages->SetLabel(temp.FromAscii(s.c_str()));
  

• Converting a wxString into a C++ string
  Use the helper function I provided called wx2string. For example, suppose you have a wxTextCtrl component called queryEntry. You can convert its contents as follows:

  string words = wx2string(m_Panel->queryEntry->GetValue());
  

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.

wxApp | wxFrame | wxPanel
wxString | wxButton | wxTextCtrl
wxStaticText | wxGauge | wxCheckBox
wxHtmlWindow | wxBoxSizer
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. 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.

Home Page

Last updated: Tuesday, September 22, 2020 at 01:07:42 PM