February 27, 2021
Hot Topics:

Fine Tuning the Development Process: Adding a Web Interface to the Electronic Notebook

  • By Matt Weisfeld
  • Send Email »
  • More Articles »


This is the fortieth installment in a series of articles about fundamental object-oriented (O-O) concepts and related object-oriented technologies. The material presented in these articles is based on material from the second edition of my book, The Object-Oriented Thought Process, 2nd edition. The Object-Oriented Thought Process is intended for anyone who needs to understand basic object-oriented concepts and technologies before jumping directly into the code. Click here to start at the beginning of the series.

In keeping with the code examples used in the previous articles, Java will be the language used to implement the concepts in code. One of the reasons that I like to use Java is because you can download the Java compiler for personal use at the Sun Microsystems Web site http://java.sun.com/. You can download the standard edition, J2SE 5.0, at http://java.sun.com/j2se/1.5.0/download.jsp to compile and execute these applications. I often reference the Java J2SE 5.0 API documentation and I recommend that you explore the Java API further. Code listings are provided for all examples in this article as well as figures and output (when appropriate). See the first article in this series for detailed descriptions for compiling and running all the code examples (http://www.developer.com/design/article.php/3304881).

The code examples in this series are meant to be a hands-on experience. There are many code listings and figures of the output produced from these code examples. Please boot up your computer and run these exercises as you read through the text.

Last month, you changed gears a bit and learned about a technique to assist in the development process called an Electronic Notebook. This notebook is a great tool that allows you to identify, store, organize, and retrieve information. Perhaps, more importantly, the Electronic Notebook provides the infrastructure for backup and recovery. You defined some possible directory structures and methods for searching through these directories.

In this month's article, you continue the discussion of the Electronic Notebook by showing how a simple web front-end can be added to enhance the productivity of the concept. The Electronic Notebook reinforces sound development practices and is intended to improve the integrity of your process—whether your application is software or otherwise.

Engineering Notebook

As Simple and Elegant as Necessary

Let me do a quick review of the concepts you covered last time. The complete article can be found at http://www.developer.com/design/article.php/3703071.

As was noted in the last article, the beauty of this idea is that the user can implement the Electronic Notebook at a variety of levels—either quite simply or in a very comprehensive manner.

For example, suppose that a student is taking a programming class, although this technique is applicable to all disciplines. Suppose that in this class the work consists of the following categories:

  • Assignments
  • Notes
  • Worksheets
  • Vocabulary Lists

To implement an Electronic Engineering Notebook, the simplest thing to do is to create a directory called notebook as seen in Figure 1.

Click here for a larger image.

Figure 1: Engineering Notebook Directory.

Although this is obviously a basic task to complete (simply creating a directory structure), the power of storing everything in an electronic medium has many advantages. And while this example illustrates an academic scenario, the fundamental concepts are applicable to a business process as well as personal activities—the first time I used this technique was to help administer a fantasy football league.

In this example, which you created in the previous article, you laid the fundamental infrastructure for the notebook. Although this in itself is a very powerful tool, you can make it even more user friendly by adding a web-based user interface (front-end). This approach allows you to navigate through the directory structure by using a familiar client—that of a browser.

One other advantage is that, with the web front-end, you can copy the material to a server and access the notebook from any Internet connection (providing you consider the appropriate security issues).

For this example, I parallel the previous column by presenting the directory structures, in order, as they were presented while I then show what the web front-end might look like. A very simple, small section of HTML code is presented in the article to provide an example of what the code might look like. I present a portion of the code that illustrates what a single directory structure looks like. However, to save space, I do not present all of the code in print—the complete code infrastructure is provided as a download.

One thing I do want to note is that the code utilizes frames, which may not be considered the best approach for an industrial strength web site; however, it provides great flexibility in creating this simple web interface. Having the navigation frame separate from the content frame is one way to provide easy navigation. This allows you to simply copy the code infrastructure from one directory to another while only making slight code edits to the deeper directory levels.

Page 1 of 5

This article was originally published on November 13, 2007

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date