Building a powerful web interface interface with a free JS framework

Today, building Web applications has become increasingly popular as Web applications provide increasingly rich free tools, code, and more. Some resources have been developed and tested, so you can use them to quickly increase the application features. A typical example is the script.aculo.us (or scriptaculous) Web site, which provides a JavaScript library for building powerful Web applications, and it is important that these resources are free. This week, we will take you on the site and the resources it provides to make intimate contact.

What is it?

Scriptaculous is a framework for building a Dynamic Web 2.0 interface. It uses another free framework called prototype. Scriptaculous simplifies input and output to implement an AJAX based Web interface, allowing you to easily add new or traditional data controls and tools to work with Dom and JavaScript.

Why use it?

Ajax is an important technology, but building an AJAX based application is a confusing and time-consuming thing to do. The scriptsculous framework makes it easier to add AJAX-based features to your application, as all development and testing is done and you can devote your time to more important tasks.

Start using

The first step in using the scriptaculous framework is to download and install. The download is a compressed file that contains JavaScript files and various HTML files for testing and presentation. JavaScript source files are the most important, and the following are lists of source files:

Libprototype.js: Source code for the prototype JavaScript framework.

Scrbulder.js: Allows you to easily create dynamic DOM objects.

Srccontrols.js: Contains core components that work with traditional data controls.

Srcdragdrop.js: Provides code to implement drag-and-drop related functionality using traditional data controls.

Srceffects.js: The visualization gallery contains all the high-priced JavaScript new controls you need to add to your Web application. Srcscriptaculous.js: The base Code library that implements the Sciptaculous framework.

Srcslider.js: Provides code to implement sliding data controls.

The preceding list contains the default directories for each file installation. You can place these JavaScript files anywhere on the Web server, but using the default directory will make it easier to work with the example.

You may not understand why you include these files in the head of a Web page. Because all library files (all files in the list) occupy approximately 150KB of space, two core files Prototype.js and Scriptaculous.js total 50KB, all other combinations will be between 50KB and 150KB, depending on the file you want to use.

By default, Scriptaculous.js loads other JavaScript files for effects, drag-and-drop, slide, and all other scriptaculous attributes. When loading the scriptaculous script file, you can limit other scripts that are loaded by adding the script to a comma-separated list.

Use it

Once you have downloaded and installed the framework, you can easily use it in a Web page. The first step is to connect to the JavaScript source file at the head of the page, see List A.

You can access the various functions provided by the framework through HTML markup. View a sample file installed in the framework you can get a better understanding. As an example, I chose the default installation when the Testfunctional directory of the slider.html file to explain that the full content of the file is too large, so it can not be listed here, but we can see the loading of a sliding control on a page part. The standard horizontal sliding control is:

以下是引用片段：
<script type="text/javascript">
//<！[CDATA[
newControl.Slider('handle1','track1',{
sliderValue:0.5,
onSlide:function(v){$('debug1').innerHTML='slide:'+v},
onChange:function(v){$('debug1').innerHTML='changed!'+v}});
//]]>
</script>

Use the CDATA section to avoid problems with characters in JavaScript such as < and > characters. The code is used to create a new sliding control (through the control class) and set its initial position and add a slider handle and change the event. Also, frame functions can be easily used by clicking events.

Documented

A flaw in many of the free tools is the lack of documentation and examples. The scriptaculous framework provides a large number of sample code and simple documents through its wiki. In addition, a fast Google search engine domain will be more helpful. A good example is a variety of style sheets that can be used to quickly reference tables that use frames.

The framework in the functional subdirectory of the test directory contains a large number of sample sets, and you can analyze the test file more carefully, which makes it a better idea of how to use a frame function in a Web application. In addition, the Example section of the Scriptaculous Web site provides a number of examples.

Licensing issues

Another issue with free or third-party tools is the use of them in commercial products, which usually involves licensing issues, but this is not covered by the use of this tool. Simply put, you can use the scriptaculous framework anywhere for free, as long as your copyright notice does not remove the JavaScript source code file.

Who uses it?

There are a lot of free tools and library files in the network, and you can verify the usability of the tools by verifying the users who use them and how to use them. The scriptaculous framework is currently being used by individual Web sites in a variety of ways: Apple, the Globe and Mail newspaper, NBC News and Basecamp.

Starting point

As the user's expectations increase, project development time continues to shorten, but free tools and frameworks make it easier to add new features to the application. Scriptaculous is a good example of using a framework that allows you to simply add powerful Ajax user interface features to Web 2.0 applications. I will provide more examples of usage in next week's article.