| 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 |
|
| |
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 |
|
|
|
