Magazine
 
Quick Review:Ajax
 
Ajax and XML: Five cool Ajax widgets
 

When I go to the page in my browser, I see the gauge shown in Figure 2.

Figure 2. The Gauge Widget in Action

You might think that with the specification of the graphics primitives, there isn’t a lot to be gained on this widget. Not so. The primitives also include simple animation techniques so that you can bounce the needle around as well as sound and the ability to create hot-linking zones that navigate the browser when the user clicks them. In addition, you can think out of the box with this control, not just using it for gauges but using its simple graphics primitive language to build any type of image and simple animation.

In-place editing
Users now expect in-place editing from desktop applications, but this functionality is something rarely found on the Web, until now. With Web 2.0, interactivity becomes paramount, so techniques such as in-place editing are also more commonplace.

To implement in-place editing, you can either write it yourself or use one of the JavaScript frameworks to do the heavy lifting for you. One of the most popular toolkits is the Scriptaculous framework, which is built on top of the prototype.js library. The Scriptaculous library makes building an in-place edited control quite easy.

A simple HTML test file for in-place editing is shown in Listing 5.

Listing 5. Inplace.html

<html><head>
<script src=”prototype.js”></script>
<script src=”effects.js”></script>
<script src=”controls.js”></script>
<script src=”scriptaculous.js”></script>
</head><body>
<table width=”100%”>
<tr><th width=”10%”>Name</th>
<td width=”90%”><p id=”name”>Candy bar</p></td>
</tr></table>
<script>
new Ajax.InPlaceEditor(‘name’, ‘submitted.html’ );
</script>
</body>
</html>

Apr 2008 | Java Jazz Up | 52
previous
index
next
 
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,

30
, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53 , 54, 55, 56, 57,

58
, 59, 60, 61, 62, 63 , 64, 65 , 66 , 67 , 68 , 69 , 70, 71, 72, 73, 74, 75, 76, 77, 78,   Download PDF