Due Tue Nov 17, 10 points
For this programing assignment you will complete a JavaScript file that, when incorporated into an appropriate HTML or XHTML file, will display a menu of files specified in the HTML or XHTML file. When the browser user clicks on one of the menu items the file will be displayed in two forms: as normally displayed in a browser and as HTML or XHTML text. The layout and functionality of the display is similar to that of HTML Examples and CSS Examples. You will be using some of the JavaScript files from jsLib
Before going much further in this web page you should download the project. It is available in zipped form here. Unzip it and open up the project using NetBeans.
The source package in the netbeans project contains the following files:
You will be using the VisualU object and the Layout object in layout.js to layout the visual display. You will be using the Loader object in utility.js to fetch HTML and XHTML text from files. You may want to use the Log object in log.js for debugging. You should read the documentation for these objects before writing JavaScript code.
The JavaScript that you will produce is intended to be installed in a web page formatted like pa6.html, along with layout.js and utility.js. For debugging log.js can also be included.
After you have completed the code additions to pa6.js, the browser display for pa6.html should have three visuals layed out similar to the HTML Examples and CSS Examples web pages.
On the left side you will have a navigation visual that displays the menu of HTML and XHTML pages that the browser user can select. This is just the element with id "navigation" from pa6.html, after it is taught to be a visual. You will need to add code to the getNavigationVisual() function to configure it properly.
The right side of the browser window is divided vertically between two visuals. The top visual in the right side is the object visual. It displays the selected HTML or XHTML file as it would normally be displayed in a browser. The existing code in the createObjectVisual() function creates an <object> element. You will need to create a visual and append the <object> element to it.
The bottom visual is the text area visual. It displays the selected file as HTML or XHTML text. The existing code in the createTextVisual() function creates an <textarea> element. You will need to create a visual and append the <textarea> element to it.
After the getNavigationVisual(), createObjectVisual(), and createTextVisual() functions have been written you can set up the layout by adding code in the start() function.
After you have done this, when you display pa6.html in a browser you should see the three visuals, but the object and text visuals will not have any content. The also will not fill up the panes they are installed in. <object> and <textarea> elements need to have their width (element.style.width) and height (element.style.height) set to "100%" in order to fill the space available to them.
The final change that you will need to make is to complete the setPage() function. This function puts the content into the <object> and <textarea> elements. This is easy for the <object> element: just assign the argument url to its data property. For the <textarea> element you will need to load the text using the Loader object. You will need to create a load context object that is passed as an argument to Loader.loadHTTP(). When your context object's callback is executed the context object will have a new property responseText. Assign this to the <textarea> element's value property.
Although this is not a hard assignment, I have given you two weeks to get it done in order that you can have more time to ask questions. Since it will be due the day after the next exam, you will likely want to finish it several days before the exam.