Serving just a piece of text isn't very useful, so our next step is to add some HTML content and enhance the display and functionality with JavaScript:
- Go to the same directory where
nocontent.pycould be found. - Double-click the file
unitconvertor.py, CherryPy console will again open in a text window. - Enter
http://localhost:8080in the address bar of your browser (or click refresh if it is still open on that address). You will now see a small unit convertor:
You can enter any number (with an optional fraction) in the text input on the left and after selecting the units to convert from and to, pressing the convert button will present you with the converted number on the right.
The basic structure of our web application hasn't changed. The content we deliver is different but that hardly changes the Python code we need to deliver it. The actual content, that is the HTML we deliver when the index() function is invoked, does differ as it has to define the<form> elements that our unit convertor consists of and we want to execute some JavaScript as well.
The<head> portion of the HTML doesn't have to be changed as it already refers to the stylesheet and JavaScript libraries we want to use. However, we do have to change the<body> element to contain the structural elements that make up our unit convertor.
The unit convertor is structured as a<form> element (highlighted). It contains two drop-down lists to select the units to convert, both implemented with<select> elements, and a text<input> element where the user can enter a number. A second text<input> element is used to display the result of the conversion. This one is set to read only as it is not meant to receive input from the user. The final element is a<button> that the user may click to initiate the conversion.
You may have noticed that the<form> element lacks an action attribute. This is intentional as there is no interaction with a server. The conversion that happens when the user clicks the button is completely implemented in JavaScript. This JavaScript is included (and executed) in the final script element (highlighted). We will examine this script in the next section.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="static/css/redmond/jquery-ui-
1.8.1.custom.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="static/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="static/jquery-ui-1.8.1.custom.min.
js" ></script>
</head>
<body id="spreadsheet_example">
<div id="example">
<form id="unitconversion">
<input name="from" type="text" value="1" />
<select name="fromunit">
<option selected="true">inch</option>
<option>cm</option>
</select>
<label for="to">=</label>
<input name="to" type="text" readonly="true" />
<select name="tounit">
<option>inch</option>
<option selected="true">cm</option>
</select>
<button name="convert" type="button">convert</button>
</form>
</div>
<script type="text/javascript" src="unitconverter.js" ></script>
HTMLHTMLform based interaction</body>
</html>
Screen elements or widgets are essential to let the end user interact with you application. These widgets might be simple buttons that initiate some action when the user clicks them or more complex widgets like drop-down boxes, radio buttons, or even little calendars that let you pick a date. The jQuery UI library provides a large number of predefined and easy to configure widgets, and so our next step is to use jQuery UI to let the button in our conversion application react to a click of the mouse and initiate the unit conversion.