Incidentally, in Figure 7-11 you can actually see what the UI looks like when adding a
favorite.
CHAPTER 7 n ENTER THE ENTERPRISE: A DWR-BASED REPORT PORTAL 370
Figure 7-11. Adding a favorite
One interesting thing is that when you select a report from the list, its description is
shown to the right of the list, but it??™s done so with a little bit of flair, courtesy of another
script.aculo.us effect. In web UI design, especially where Ajax is involved, the Yellow Fade
Effect is often employed to get the user??™s attention pointed in the right direction. This effect
is simple, yet effective: a piece of information that has just changed is highlighted in yellow
and then fades to a nonhighlighted state. The code that accomplishes this is a call to
favoritesDisplayReportInfo():
this.favoritesDisplayReportInfo = function(inSelectValue) {
var vals = inSelectValue.split("~~");
document.getElementById("favorites_reportDescription").innerHTML = vals[1];
new Effect.Highlight(
document.getElementById("favorites_reportDescription"));
}
CHAPTER 7 n ENTER THE ENTERPRISE: A DWR-BASED REPORT PORTAL 371
The term ???Yellow Fade Effect??? seems to have originated with a company called 37signals, as seen in this
article: www.
Pages:
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654