It was decided that the front-end would be an entirely self-contained web page—that is, the page for entering a query and viewing the result would be the same—so that there was no code repetition, and users can do all the main functions from the same place. This meant that if they chose to upload a file, but then decided to do a conversion instead, this was easily possible for them. Similarly, if they performed one conversion they could easily modify their query to perform a new conversion, even if the previous conversion had resulted in them being asked to upload a file; as it may just have been the case that they accidentally typed a unit name incorrectly. Another advantage was that a user does not need to go to a different page depending on which units they wish to convert, as is the case with some converters—however, this is in keeping with some other converters which allow the user to type their unit choices, rather than selecting them from a list.
Due to the simplicity of the layout designed, it was decided that the PHP code would write all of the XHTML dynamically each time, as there was very little. However, it was decided to separate out as much of the JavaScript functionality as possible into a separate, prewritten, file, functions.js, and for the small amount of CSS that was used, to place this in a separate file, styles.css.
5.4.1 Functionality
As the system used JavaScript for some parts of its functionality, but it is not guaranteed that JavaScript is enabled, in order to not confuse the user, or clutter the display with unusable controls, it was decided that if JavaScript was disabled, such controls would not be displayed. This is implemented by writing JavaScript functions that add the controls to the web page—if JavaScript is not enabled, the controls are not added. Therefore, they only appear when they are usable. An example of such a control was the “Reverse this conversion” link, which will be described later on this this section.
CHAPTER 5. DETAILED DESIGN AND IMPLEMENTATION 61 Significant Figures
The method to round the result to a certain number of significant figures is written in PHP, as JavaScript has poor support for it. The function used was found on the php.net website, with a reference in the code. However, it was found that the function only worked correctly with positive numbers, so to resolve this, the function was modified to store the value, but perform the processing on the absolute value, and then afterwards, if the absolute value was not the same as the input value (i.e. the input value was negative), the rounded absolute value was then negated before being returned. The initial value of the significant figures drop down box is 15, which is the maximum available, as this is the maximum precision offered by C#’s double data type, and thus by the back-end of the system.
Suggestions
To load the suggestions into the page, in PHP the suggestions files are loaded, and the contents written into JavaScript arrays for prefixable and unprefixable units, and the pre- fixes themselves. There are then several JavaScript functions used to offer the suggestions. When the focus is on either of the two input boxes, as keys are pressed, the parser function is called. Firstly, if the user has pressed the down cursor key, the first item in the list of suggestions, if there are any, is given the focus. Otherwise, the text box receives the input as normal, and the last word in the current text box is examined to see if it matches any of the units in the prefixable, unprefixable, or prefixes lists. If there are any suggestions which start with what the user has typed, but are not equal (that is, as the user completes the unit name it disappears from the list), they are added to a list of suggestions, and these suggestions are added as links, which when clicked or selected by the user, call the add function, which adds the specified string in place of the last word in the specified text box. As the design suggested that the user should be able to navigate the suggestions with the keyboard, a function was written to allow use of the up/down cursor keys to navigate the list, with the <Enter> key then being used to select the suggestion. The suggestions do not get limited by anything else the user has typed in (for example, not suggesting gramme for the destination when the source unit is metre), because ensuring the dimensions were correct for compound units, when many units could be put together where individually they would not be allowed, would be far too complicated, and, as the back-end of the system has to do this anyway, and it is far easier to do it there, it was decided it was not worth the effort. In addition, it was felt that restricting the suggestions in this way might make the user feel they were making a mistake, when in fact they were not, and the user is assumed to know what they want to do.
Reverse Conversion
As a change to the design, a link was added to “Reverse this Conversion”, which, when clicked, switches the units round between source and destination, but leaves any quantity
CHAPTER 5. DETAILED DESIGN AND IMPLEMENTATION 62 in the source box as is. This was originally put in as a temporary aid to testing, but it was decided that it was quite useful, so remained.
Calling the back-end
As has been mentioned, the back-end uses underscores to separate compound units. This is not particularly user-friendly, and therefore, in another change to the design, it was decided to allow the user to type compound units separated by spaces instead, as it is not too difficult to convert this to a form suitable for the back-end. This means that, if the user were to type “10 mile per hour”, it will become “10 mile per hour”, before being passed to the back-end. The user input is split into source quantity and source unit from the source box, and destination unit from the destination box. These are then converted to the underscored version, and passed to the back-end of the system by following its interface specification. If the user has not specified a source quantity, “1” is used.
5.4.2 User Interface
Following on from the explanations of what the front-end consists of, it is reasonable to present the final user interface. Figure 5.1 shows a unit conversion where the source unit— “micron”—was not recognised. In addition, it shows the suggestions list as the user is typing into the destination box.
Figure 5.2 shows the same conversion with the source unit corrected to “micrometre”. Finally, Figure 5.3 shows how the system appears when JavaScript is disabled. Notice how the unavailable options no longer appear.