Build an AJAX Based ASP.NET Web Tag Application - Part 1
page 4 of 9
by Xianzhong Zhu
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 45141/ 201

Introduction to script.aculo.us

script.aculo.us is another set of JavaScript libraries, which is based on Prototype, offers handy pre-fabricated widgets to enhance the user interface of web sites. It provides a visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, and sliders) and more. As of January 3, 2008, script.aculo.us upgrades to version 1.8.1. For small and mid-sized web projects, script.aculo.us+Prototype are a recommendable solution.

I am going to only introduce two objects, Sortable and Ajax.Autocompleter, in script.aculo.us by respective examples for brevity and their being used later on.

Sample for object Sortable

According the script.aculo.us wiki document, Sortable is a quick way to initialize many Draggable elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding draggable Droppables. The main syntax of Sortable is as follows:

Sortable.create('id_of_container',[options]);

As you may imagine, the powerful function is hidden inside parameter "options." However, we only give a basic illustration of object Sortable in the following sample.

Listing 7

<body>
<h1>Demo for Sortable.create</h1>
<ul style="position: relative;" id="list" class="sortablelist">
 
<li id="Tags_1" class="sortablelist" style="position: relative;">
<img alt="move element up"  src="images/arrow_up_blue.png" class="arrowbutton"/>
<img alt="move element down" src="images/arrow_down_blue.png" 
  style="margin-right: 20px;" class="arrowbutton"/>Prototype</li>
 
<li id="Tags_2" class="sortablelist" style="position: relative;">
<img alt="move element up"  src="images/arrow_up_blue.png" class="arrowbutton"/>
<img alt="move element down"  src="images/arrow_down_blue.png" 
  style="margin-right: 20px;" class="arrowbutton"/>script.aculo.us</li>
 
<li id="Tags_3" class="sortablelist" style="position: relative;">
<img alt="move element up"  src="images/arrow_up_blue.png" class="arrowbutton"/>
<img alt="move element down"  src="images/arrow_down_blue.png" 
  style="margin-right: 20px;" class="arrowbutton"/>Dojo</li>
 
<li id="Tags_4" class="sortablelist" style="position: relative;">
<img alt="move element up"  src="images/arrow_up_blue.png" class="arrowbutton"/>
<img alt="move element down" src="images/arrow_down_blue.png" 
  style="margin-right: 20px;" class="arrowbutton"/>jQuery</li>
</ul>
 
<script type="text/javascript" >
 Sortable.create("list", {
     ghosting: true,
     constraint: false
 });
 </script>
</body>

Here, the first parameter "list" specifies the sortable element, while the second parameter corresponds to an object that holds a possible large set of options. Here, property ghosting specifies whether to keep the copy at the original position when dragging an element, the second property constraint indicates the moving direction (the default value is vertical, and the other two are horizontal and false respectively). Figure 4 illustrates the two snapshots before and after moving the item in a list.

Figure 4 - Demo for Sortable.create usage

Next, let us take a look at the Ajax related topic provided by script.aculo.us.

Sample for object Ajax.Autocompleter

There are three Ajax controls in script.aculo.us, which are Ajax.Autocompleter, Ajax.InPlaceEditor, and Ajax.InPlaceCollectionEditor, respectively. Here, we only show interest in the first one.

Today, maybe Google Suggest becomes the doctrine when one mentions AJAX. script.aculo.us, of course, provides the kind of support through two means of automatic completion, which are achieved through two classes, Ajax.Autocompleter and Autocompleter.Local. The distinction lies in that the former deals with the listed data coming from the server, while the latter works with data preset using client-side scripts.

Here, we only care for class Ajax.Autocompleter, whose syntax is defined below:

new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options);

In the following example, there are two elements introduced. The <input/> element is used to enter a character string, the <div/> element is used to display the dropdown list.

Listing 8

<input type="text" id="autocomplete" name="autocomplete_parameter" />
<div id="autocomplete_choices" class="autocomplete"/>

Then, in the JavaScript block, we have defined an Ajax.Autocompleter object, as follows:

Listing 9

new Ajax.Autocompleter
(
"autocomplete",
"autocomplete_choices",
"list.html", {
method: "GET",
tokens: ","
}
);

The first two parameters correspond to the above page elements. The third parameter specifies the URL of the Ajax request, through which Ajax.Autocompleter will assign the returned data from this request to the innerHTML attribute of the dropdown list element defined above. The last parameter relates to a set of options. Herein, we specify the request mode to be GET and the list separator of many entering data is "'". For more options, please refer to the URL. Figure 5 shows one of the running-time snapshots for this sample.

Figure 5 - Demo for Ajax.Autocomplete

So much for the rough introduction to the two above client-side Ajax frameworks!

Next, we will roll up our sleeves to start the real work - developing a basic web tag system using the two Ajax frameworks. First of all, let us familiarize ourselves with the functionality requirements of the target system.


View Entire Article

User Comments

Title: Good   
Name: Sam
Date: 2008-11-03 10:29:16 PM
Comment:
It's very Useful to me
Title: Good   
Name: good choice
Date: 2008-11-01 3:18:04 AM
Comment:
it's very use ful...... thanks
Title: Good!   
Name: Good choice
Date: 2008-10-29 12:30:03 AM
Comment:
I will test your solution on my project ASP in my work.
If all Ok! It would be very very useful... Thnx.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2020 ASPAlliance.com  |  Page Processed at 2020-08-03 10:27:41 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search