Sample of DHTML, for an Office Payroll System Interface

For the entire organization of my former full-time employer, a massive project was undertaken to replace the existing payroll and accounting systems, all to be combined within one inter-connected system. Although it was being developed mostly be the hired contractor team, my roll in the development of this project (BTW - I was the only government employee doing any of the coding whatsover), was to develop the browser front-end code that would integrate to the Java Applets and the Java servlets on the back-end that would handle the data. Using extensive Javascript programing techniques, my software checked for numerous permutations of browser and platform compatibilty, had extensive Javascript inter/intra-window and inter/intra-window communications, and even further accomplished yet another very difficult task - communication both to and from the Java Applets themselves! Java-Javascript communication has always been problematic at best, and ontop of all the fancy user-interactive features it accomplished, it also acheived this Java-Javascript communication flawlessly!

To see this, click here and be sure to maximize the new window afterwards. But since it may not be intuitive to try out all the complexities of it, please read below:

Although not appearing spectacular at first glance, this incorporates a great many technical achievements. The operation, look and feel, was desired to be similar to Microsoft Windows Explorer. The left frame you'll notice is a tree structure, written in JavaScript, that performs this function with folders and links. I did not create this part of the code completely myself, a coworker had found it on the web and brought it to me, which I then significantly modified to achieve our goals. The remainder of the code was 100 percent written by myself alone. The 3 links that are active in this tree, were completely designed by me. First my code detects what platform and browser the viewer is using, as the DOM (Document Object Model) of Netscape and MS IE are significantly different. To ensure proper operation on either browser, duplicate versions of all functions of the code exist that will perform the desired effects on each. This uses many facets of DHTML and programming techinques, such as multi-dimensional arrays, DIV's and LAYER's, Style Sheets, dynamic rewriting of HTML code and sub contents, opening multiple sub windows, multiple window communication (parent-child, child-parent), etc. Additionally since the actual individual records selected would invoke Java applets, hooks for future Java- JavaScript communication were also provided; however, this feature may have been browser dependent.

Now let's walk through some of the features:
If you select the topmost link, Time Sheet Selection, it will begin to load, with temporary fictitious dummy data. (In actual practice, this data and part of the HTML code would have been dynamically generated on the back end by the Java servlets we were developing). A small window temporarily pops up to alert you the system is working, and automatically closes once the data is loaded. Then you will see a list of unsorted data on the screen. You will notice at the top, there are 4 buttons. Each button will sort the data by that field, just as Windows Explorer would. Clicking the same button a 2nd time will then re-sort the list in reverse order. If you later sort by another field, the list then becomes primary sorted by that field, and will remain secondarily sorted by the previous sort operation. You'll notice the Name field of each record is a hyperlink. Mousing over any name will display the exact record it refers to in the status line of the browser. Clicking on any name will open that particular timesheet record. Unfortunately, as the individual record portion of this was a Java applet which is now defunct, the example brings up a window with only a blank placeholder. If you wanted to have multiple timesheets open simultaneously, clicking on any link more than once would not create 2 copies of that same record being open. Instead, the system would automatically realize that there is already an existing window of that particular record open, and will simply return focus to that window. Try opening several windows, then click on one of the links again. You'll see it regains focus. Now shift you attention to the bottom of the screen. You'll notice there is a text box labeled "Find", and along side of it there are 3 buttons: "Top", "Next, and "Previous". If you wish to search the list for a particular record, you can simply type in a string or substring and it would scroll that resulting match to the top of the screen and highlight it. It will search both the Name and Date fields. So if for example, you were to type in the substring "mar" into the textbox, and then press the "Next" button, it would scroll to the next case-insensitive occurrence of that substring, in either the Name or Date field. So if there was a 'Mary' in the Name field and also a date in 'March', it would scroll to whichever record appeared first in the list. Pressing the "Next" button again will scroll to the next occurrence, and conversely "Previous" will scroll to the previous occurrence. Pressing the "Top" button will scroll to the first occurrence in the list, regardless of where in the list you happen to be presently. And if an occurrence of the search substring is so far near the end of the list that it cannot scroll to the top, the highlight will appear midway down on the screen, exactly on that line which it occurs. Try it and see.

You'll see similar operation by clicking on the left-hand link for the Time Sheet Approval page, you'll notice this time that there are only 3 buttons, as the other fields are fixed and cannot be sorted upon. The Find feature works similarly as described above, and clicking on the "Approve" button would have submitted all the records that were checked.

Obviously, the "Clear All" and "Select All" buttons set the boxes unchecked or checked, respectively.

The Project Selection page was relying on additional input and thus never fully completed, and since some data is missing, it's operation is unreliable. Please ignore this link.