Most business owners accept a close butt of the accident administration concept, in which risks to business profits and assets are assessed, programs are advised to abbreviate these risks and allowance is provided to financially compensate losses acquired by certain risk. How abounding business owners do you apperceive whom don't accept blaze insurance? Liability? Business abeyance protection? Even activity insurance?
How abounding businesses accept key agent activity or affliction insurance? How abounding accept even heard of them?
The contributions of a few advisers comprise the majority of success a part of baby businesses. A part of one getting companies, the amount of that one agent about consistently equals the amount of the business. But even in beyond companies, a majority of balance generally can be traced to one or a few key people. Not insuring this acumen for business profits a animal getting can accompany after-effects as acute as a blaze or bang for an uninsured owner.
To bigger allegorize the point, we'll actualize a fabulous company, Ajax, that food locations for a not so fabulous industry, medical electronics. Ajax does $100 actor a year in sales, but that could quadruple in the next decade. Even admitting the aggregation has over 100 employees, one person, Dr. Harvey Beep, generates 75% of the sales. Think that's a stretch? We'll go on.
Dr. Beep had a continued career as a medical researcher and banker afore abutting the company. He's one of 5 principals the added four are abstruse geniuses who abridgement sales adeptness and are almost new faces. Dr. Beep, meanwhile, enjoys a long, admirable acceptability with hospitals and medical associations about the country. The antagonism is tough, but his chat is as acceptable as gold and so are his company's products.
Now accept Dr. Beep becomes disabled or passes away. What happens to his chump base? The barter ability still be afflicted with the technology they've bought, but medical electronics comes up with new advances at a abating pace. Ajax's added principals try the sales route, but they're just not salespeople. They ability even appoint the next best medical electronics agent available, but what do they lose in balance and bazaar allotment during the transition? Can they anytime accomplish up those losses?
Key agent allowance covers the costs of this abrupt loss.
Not advancing for and insuring adjoin the accident of a key agent is a lot like arena Russian Roulette. Maybe the business will survive the accident or maybe it won't. Key agent allowance takes that endure ammo out of the chamber.
Sunday, August 30, 2009
How Much Is That Employee In The Window?
A Brief Introduction to E4X
I acquisition myself anxious for the old days, if I could architecture a web website in 5 account on a Sunday and again go play golf for the blow of the afternoon, and still aggregate a abounding anniversary of bacon for casework rendered. That was aback in 1996, if the internet was still new. Websites were created alone with HTML. The applicant would email me the agreeable for their website, which I would upload to FrontPage, again admit some tags and a arrangement for formatting and layout, add some graphics, and that was it.
Nowadays, I acquisition myself alive up to 10 hours per day designing web sites. I accept to use so abounding altered programming languages and blueprint if creating a website that it makes me dizzy. I can almost blazon this commodity because my academician actually hurts from all the altered programming languages I accept bouncing about in my head.
You ability be apprehensive why my job has become so complicated in contempo years. Well, it started with the wireless revolution, which fabricated a blend out of cyberspace. Now, every wireless apparatus is able with admission to the internet and email. Cell phones, approach tops, laptops, even computer screens in automobiles accept web browsers. These accessories accept platforms and web browsers that are absolute altered from what is installed on an accustomed desktop PC. These new web browsers are not accordant with abounding elements of the HTML programming language. As a result, websites created absolutely with HTML are generally airy or aloof to the wireless internet user.
New languages and blueprint such as XHTML, XSL, and XML were created to accommodate to these new web browsers. XML was apparently the a lot of important addition of them all. XML enabled web designers to ascertain abstracts after cogent the browser how to affectation the data, clashing HTML, which both defines the abstracts and tells the browser how to affectation it. XML abstracts can be beheld on any belvedere or browser because it is a simple argument book with no predefined tags, acceptance the programmer to ascertain abstracts any amount of ways. XHTML and XSL were created to catechumen XML files into absolute web pages that had appearance and anatomy and could be beheld beyond all platforms and browsers.
Now that you accept how and why programming has changed, you are accessible for a abrupt addition to the capital affair of this article, E4X. E4X adds absolute abutment for XML to JavaScript. An XML article declared with E4X is accounting like this:
var x = new XML()
Using this method, it is abundant easier to anatomize an XML certificate than it would be application JavaScript. After it, you would accept to use altered XML apparatus and libraries for anniversary browser, because anniversary browser is accordant with altered versions of the language. Also, E4X is advantageous to use because it does not crave absolute abundant code.
However, none of the boilerplate browsers currently abutment E4X. A beta-version of Mozilla is accordant with it, but not the absolute version. Firefox 1.1 works with E4X, but Internet Explorer, the a lot of accepted and broadly acclimated browser, does not plan with it. Instead, Internet Explorer utilizes assorted programming apparatus of a programming blueprint alleged AJAX, which uses a array of languages, including JavaScript, XML, CSS, and several others.
If you actualize web sites for a living, you should apparently yield some time to accustom yourself with E4X. Even admitting it is not actively acclimated appropriate now, it acceptable will be in the abreast future. For now, acquirements AJAX is apparently added important because of the ascendancy of Internet Explorer as the web browser of choice, but that could change. If you accept never advised E4X but are already accustomed with XML, you can apparently apprentice it through simple online tutorials because the syntax is not too complicated. If you accept never advised XML, XHTML, XSL, or AJAX, again you charge to accept in some courses at a bounded computer programming convention immediately. Not alive how to use these new languages could beggarly that your web sites will be airy to wireless internet users.
What is AJAX programming?
Remember if the web consisted of annihilation added than a few changeless web sites coded alone with HTML? Life was simple aback then. Aback in 1996, a website could be created in a few account by inserting the agreeable into a basal HTML template, and abacus some cartoon for style. Now, the internet is busy with web sites that are added complex. Modern web sites use anywhere from two to sometimes twenty altered programming languages, blueprint and scripts. Some of the cipher runs on the foreground end, some runs on the aback end, and some runs about in between.
We accept the wireless anarchy to acknowledge for authoritative web programming so arduous. A lot of wireless devices, such as corpuscle phones, approach tops, laptops, and even computer screens in automobiles, now appear able with admission to the internet and email. These accessories accept web browsers and platforms that are actual altered from what is installed on a acceptable desktop PC. Wireless browsers are generally not accordant with abounding elements of the HTML programming language. Web programming had to advance to clothing the needs of those that cream the net on wireless computers.
As a result, a deluge of new languages and systems for designing websites were introduced. These new innovations cover XML, XHTML, XSL, CSS, JavaScript, VBScript, DOM, and abounding others. Of these, XML was apparently the a lot of important, because it enabled web designers to ascertain abstracts after banishment web browsers to affectation it a assertive way. XML files were simple argument files that could be interpreted by any web browser, clashing HTML. So, you ask, what is AJAX and how is it affiliated to this discussion?
Well, AJAX is a assemblage of all these altered programming specifications. AJAX itself is not a language; it is a address that makes use of all these altered components. Also, AJAX web sites can collaborate with the user by responding to ascribe and alteration assertive locations of a web page after reloading the absolute page.
AJAX makes use of several components. One basic is alleged Cascading Appearance Sheets (CSS). CSS is an simple way to actualize web sites by allegorical assertive intricacies and appearance preferences for the page blueprint as allotment of a abstracted book that can again be alien into any HTML certificate by simple apropos to the CSS File. The additional allotment is XHTML, which is a added able adaptation of HTML that is accordant with XML files. AJAX aswell uses the Certificate Object Model (DOM), which is a accepted set of altar that can be acclimated to adapt web documents. The added apparatus are scripting languages such as JavaScript and VBScript, and it aswell uses XML, which we accept already described.
Microsoft is accustomed with the afflatus for AJAX if in 1998 they developed something alleged limited scripting to accomplish web pages added interactive. Later on, limited scripting was taken to newer heights by added accomplished programmers, and eventually, AJAX was the result.
Some of the advantages of it are that it can be acclimated to actualize sites that are acutely interactive, and it endless actual bound and occupies actual little bandwidth. The drawbacks are that it can sometimes arrest the use of the aback button on the web browser, and sometimes the cipher has a botheration initiating the acknowledgment that it has been programmed to produce.
If you architecture web sites for a living, you should apparently apprentice how to apparatus all of the languages declared actuality to accomplish your sites added interactive. If you accept never advised or acclimated XML, XHTML, JavaScript, or VBScript, you should accept in some courses at a bounded computer programming institute. The use of these languages is growing as added humans are abutting to the internet with wireless computers that crave added adjustable languages to affectation web sites appropriately beyond all platforms and browsers.
Monday, October 8, 2007
Scriptaculous
Scriptaculous is an MIT-licensed JavaScript library that provides visual effects, drag-and-drop support, and controls, such as sliders, to HTML pages. It is built on top of the Prototype JavaScript library, which provides AJAX support (and a number of other features) to the Ruby on Rail Web application framework. Because it's built on Prototype, scriptaculous has AJAX support, but its main focus is on providing highly interactive visual components that can take an AJAX application to the next level. Some of the more commonly used properties are overlap, ghosting, and onChange: The overlap property, which takes the values of horizontal, vertical, or false, limits how you can drag the elements around; the false setting has no limits. Setting the ghosting property to TRue leaves the element in its current position; the user then drags a faded version until it is dropped. The onChange property lets you set a callback function, which is called after an item has been moved. If the elements in your sortable have the ID property set using the naming convention of name_item, you can use the Sortable.serialize method to quickly build a query string, which can be sent to the server and used to update the order on the server. An example output from the serialize method is this: Scriptaculous contains functionality for creating visually impressive Web sites. While using it, keep these tips in mind: Most scriptaculous functions have further documentation and examples at http://script.aculuo.us, so if you're not sure how to make a function operate, start there. Scriptaculous contains a variety of prepackaged effects and components, but if they don't meet your needs, it also provides the tools to build new ones. Besides the Web site, you can find more scriptaculous examples in the tests directory, in the scriptaculous download. The functional tests are very useful in this regard. Scriptaculous contains a number of additional controls that you should explore before building your own. These include the following: Autocompleter: Provides Google Suggest style auto completing text fields InPlaceEditor: Provides click-to-edit content with AJAX saving the changes
Installation
You can download scriptaculous from http://script.aculo.us. After extracting the archive, copy the contents of the src and lib subdirectories into a directory in the document root of your Web server. After doing that, you just need to include the prototype and scriptaculous libraries in your HTML files. The components of scriptaculous will be automatically included as needed as long as they are in the same directory as scriptaculous.js. An example of these includes is shown here:<script src="/scriptaculous/prototype.js
"type="text/javascript"></script>
<script src="/scriptaculous/scriptaculous.js
"type="text/javascript"></script>
Visual Effects
One of the most exciting features of scriptaculous is its visual effects. These effects can be used to notify the user that an event has happened or that some content is updated. The effects can be applied to any DOM element, making them very versatile, because they will work no matter what the display type of the element is. To apply an effect, you create a new instance of a method of the Effects class, passing in the element to update. This element can be an ID or a DOM element accessed directly in JavaScript.
A wide variety of effects are provided. They perform two main tasks: showing or hiding elements and drawing attention to an element. Some of the show/hide effects are available in pairs and can be used with the Effect.toggle method to hide or show an element, doing the opposite of the element's current status. The rest of the functions can be used individually, like the simple examples in the following list of effects. An effects tester is also included so that you can see what each effect looks like. Scriptaculous also includes the lower-level methods that can be used to build new effects; the API for these methods is included on its Web site.
Hide/Show Pairs
BlindDown hides the element, and BlindUp shows it:new Effect.toggle(element,'blind');
new Effect.BlindDown(element);
new Effect.BlindUp(element);
SlideDown hides the element, and SlideUp shows it:new Effect.toggle(element,'slide');
new Effect.SlideDown(element);
new Effect.SlideUp(element);
Fade hides the element, and Appear shows it:
new Effect.toggle(element,'appear');
new Effect.Fade(element);
new Effect.Appear(element);
A large number of nonpaired effects for hiding elements is also included:
new Effect.SwitchOff(element);
new Effect.DropOut(element);
new Effect.Squish(element);
new Effect.Shrink(element);
new Effect.Fold(element);
The Grow effect is the only unpaired effect for showing an element:new Effect.Grow(element);
The Effects class also contains a number of methods for drawing attention to an element:new Effect.Pulsate(element);
new Effect.Shake(element);
new Effect.Highlight(element);
The effects tester is located in the scriptaculousViewAllEffects.html file. Listing 8-9 shows a short example of how to apply various effects.
ScriptaculousViewAllEffects.html1 <html>
2 <head>
3 <title>Script.aculo.us Visual Effects</title>
4 <script src="scriptaculous/prototype.js"
5 type="text/javascript"></script>
6 <script src="scriptaculous/scriptaculous.js"
7 type="text/javascript"></script>
8 </head>
9 <body>
10
11 <p>Reload the page to reset the effects.</p>
12
13 <div onclick="new Effect.Fade(this)">
14 Click Me to see a Fade Effect
15 </div>
16
17 <p>
18 <a href="#" onclick="new Effect.Puff(this)"
19 >Click to hide this link</a>
20 </p>
21
22 <p>
23 <a href="#" onclick="new Effect.Fold('cell')"
24 >Hide the table cell</a>
25 <a href="#" onclick="new Effect.Grow('cell')"
26 >Show the table cell</a>
27 </p>
28
29 <table border=1>
30 <tr>
31 <td>A cell</td>
32 <td id="cell">Cell to Hide</td>
33 </tr>
34 </table>
35
36 <p>
37 <a href="#" onclick=
38 "new Effect.toggle('box','blind')"
39 >Toggle the box below</a>
40 <div id="box"
41 style="border: solid 1px black;
42 width: 50px; height: 50px">
43 BOX
44 </div>
45 </p>
46 </body>
47 </html>
One way to attach an event is to tie it to the click event of a DOM element; this passes the element being clicked and performs the effect directly on the current element. This approach is easy to do and is shown on line 13 against a block-level element, and on line 18 against an inline element. There are few cases where this direct attachment is useful; in most cases, you'll want the effect to be performed against another element on the page because the point of the effect is to draw attention to the action that is happening. Line 23 hides the element with an ID of cell by using the Fold effect, whereas line 25 shows the same element using the Grow effect. Line 38 shows the toggle utility method, which alternately shows and hides an element. This method is useful for building interface elements that show optional information.
Drag-and-Drop
Drag-and-drop gives you the ability to visually drag elements around the page and have other elements that accept the drop. The scriptaculous implementation separates the drag-and-drop components into two parts, allowing you to make elements draggable without providing a place to drop them. This can be useful for adding palettes or note elements that can be moved anywhere within the window by the user. To create a draggable element, create a new instance of the Draggable class, passing in the element to drag and any options. A common option is revert; when it is set to true, the item returns to its original position when the user lets up on the mouse:
new Draggable(element,{revert:true});
In the second half of drag-and-drop, the drop target is provided by the Droppables class. Drop targets are useful in a number of cases, from building a visual shopping cart to allowing you to visually move mail to a new folder. Drop targets can be any element and can take a number of options, including an accept parameter that limits the elements that can dropped to those with a matching class. They can also include an onDrop handler, which is run when an element is added to the drop target:
Droppables.add(el, { onDrop: function(e) { alert(e);
});
Listing 8-10 shows a small drag-and-drop application. In this listing, there are three draggable boxes and one drop target. Only the first two boxes can be dropped on the target because the third box has a class that isn't in the accept list of the drop target. This example also uses the $() alias function; it works the same way as document.getElementById. Formatting for this example is done with CSS, which is included in a separate file to decrease the amount of noise.
ScriptaculousDragNDrop.html1 <html>
2 <head>
3 <title>Script.aculo.us Drag and Drop</title>
4 <script src=""scriptaculous/prototype.js"
5 type="text/javascript"></script>
6 <script src="scriptaculous/scriptaculous.js"
7 type="text/javascript"></script>
8
9 <link rel="stylesheet" href="dnd.css"
10 type="text/css">
11 </head>
12 <body>
13 <div id="box1" class="box">Box 1</div>
14 <div id="box2" class="box">Box 2</div>
15 <div id="box3" class="other">Box 3</div>
16
17 <br style="clear: both">
18 <div id="drop">Drop Target</div>
19
20
21 <script type="text/javascript">
22 new Draggable('box1',{revert:true});
23 new Draggable('box2',{revert:false});
24 new Draggable('box3',{revert:true});
25
26 Droppables.add('drop', {accept: 'box',
27 onDrop: function(el) {
28 $('drop').innerHTML =
29 'Dropped: '+el.id;
30 }
31 });
32 </script>
33
34 </body>
35 </html>
Most of this page is set up in HTML with a small amount of JavaScript code to activate the drag-and-drop functionality. The page starts with a basic setup. Lines 47 include the scriptaculous JavaScript library, and lines 910 include a CSS file to do some basic formatting. Lines 1318 create the basic user interface; it is made up of three 200x200 pixel boxes that are floated next to each other. Below that is a 100x400 pixel drop target.
Lines 2132 make these boxes draggable and create a drop target for them. Lines 2224 create the draggable boxes; the first parameter is the ID of the box, and the second is a hash of options. On line 23, we set the revert property of the second box to false; this lets us drag it around the screen. This property isn't very useful for dragging to a drop target, but it can be useful for other use cases. Lines 2630 create the drop target; the first parameter is the ID of the element, and its second parameter is a hash of options. Here we're setting two options. The first is the accept variable, which takes a class to accept; in this case, it's set to box, which allows box 1 and 2, but not box 3, to be dropped. The second option is the onDrop function; this is called when a draggable element is released while over the drop target. The function displays some simple feedback displaying the ID of the dropped element in the drop target.
Sortables
A sortable is a predefined component built from the drag-and-drop building blocks that scriptaculous provides. Sortables make it easy to build graphically reorderable lists and can even be used to let you move items between multiple lists. Sortables are usually used with HTML lists, but they can also be used with floated elements. To create a sortable list, you simply run Sortable.create, passing in an ID and any options you want to specify, like so:
Sortable.create("element",{ghosting:true});
list[]=one&list[]=three&list[]=two&list[]=four
If you used this string as the query string on a request to a PHP page, $_GET['list'] will be populated with an array that contains the updated positions of the list. The array is ordered in its new position, with the value being the specified ID. Listing 8-11 shows an example of this operation.
ScriptaculousSortable.php1 <html>
2 <head>
3 <title>Script.aculo.us Sortables</title>
4 <script src="scriptaculous/prototype.js"
5 type="text/javascript"></script>
6 <script src="scriptaculous/scriptaculous.js"
7 type="text/javascript"></script>
8
9 <style type="text/css">
10 #list {
11 cursor: pointer;
12 }
13 </style>
14 </head>
15 <body>
16
17 <ul id="list">
18 <li id="i_one">One</li>
19 <li id="i_two">Two</li>
20 <li id="i_three">Three</li>
21 <li id="i_four">Four</li>
22 </ul>
23
24 <a href="javascript:updateList()"
25 >Send Changes to server</a>
26
27 <pre><?php
28 if (isset($_GET['list'])) {
29 var_dump($_GET['list']);
30 }
31 ?></pre>
32
33 <script type="text/javascript">
34 Sortable.create("list"});
35
36 function updateList() {
37 var update = Sortable.serialize('list');
38
39 window.location = '?'+update;
40 }
41 </script>
42
43 </body>
44 </html>
This page is mainly an HTML/JavaScript page with a small amount of PHP mixed in to show how a server-side language parses the output of Sortable.serialize(). The script starts with a basic setup, with lines 47 including the scriptaculous library. Then, on lines 912, we include a small amount of CSS, which gives all the sortable elements a pointer cursor. This is an important usability step; without it, the elements will have a text select cursor, and the user won't realize they are sortable. Lines 1722 build the list that will be sorted; each item has an ID in it, which defines the value that will be returned to the server. Lines 2425 complete the user interface, creating a link that reloads the page and sends the list's new order to the server.
Lines 2731 contain the small amount of PHP code in this script. If the list variable has been passed in by the query string, its outputs are echoed out using a debugging function. PHP and many other Web development languages automatically turn the query string provided by Sortable.serialize into an array; from here you could update the database with the new order.
Lines 3340 contain the JavaScript for this example. On line 34, we make the list element sortable, using most of the default options because they are optimized for use with HTML lists. Then, on lines 3640, we build a small function that builds a query string using Sortable.serialize (line 37) and then reloads the page by setting window.location.
Slider Control
Scriptaculous also provides a slider control, which is useful for selecting values that are in a range. This control can be used in its basic state to build something like a color selector. It can also be used as a building block for more advanced elements, such as a JavaScript-powered scrollbar for an AJAX grid. An example of the slider control in both horizontal and vertical modes is shown in Figure 8-1
The scriptaculous slider control shown in both horizontal and vertical modes
var outputValue = Math.round(100*sliderValue);
Listing 8-12 shows an example page that implements both a horizontal slider and a vertical slider.
ScriptaculousSlider.html1 <html>
2 <head>
3 <title>Script.aculo.us Slider</title>
4 <script src="scriptaculous/prototype.jsv
5 type="text/javascript"></script>
6 <script src="scriptaculous/scriptaculous.js"
7 type="text/javascript"></script>
8 </head>
9 <body>
10
11 <h3>Horizontal Slider</h3>
12 <div id="track1" style="
13 width: 200px;
14 background-color: rgb(170, 170, 170);
15 height: 5px;">
16 <div id="handle1" style="
17 width: 5px;
18 height: 10px;
19 background-color: rgb(255, 0, 0);
20 cursor: move;
21 "> </div>
22 </div>
23 <div id="debug1"></div>
24
25 <h3>Vertical Slider</h3>
26 <div id="track2" style="
27 height: 100px;
28 background-color: rgb(170, 170, 170);
29 width: 5px;">
30 <div id="handle2" style="
31 width: 10px;
32 height: 5px;
33 background-color: rgb(255, 0, 0);
34 cursor: move;
35 "> </div>
36 </div>
37 <div id="debug2"></div>
38
39 <script type="text/javascript">
40 var d1 = document.getElementById('debug1');
41 var d2 = document.getElementById('debug2');
42
43 new Control.Slider('handle1','track1',{
44 onSlide:function(v){d1.innerHTML='slide: '+v},
45 onChange:function(v){d1.innerHTML='changed! '+v}
46 });
47
48 new Control.Slider('handle2','track2',{
49 axis:'vertical',
50 onSlide:function(v){d2.innerHTML=Math.round(100*v)},
51 onChange:function(v){d2.innerHTML=Math.round(100*v)}
52 });
53 </script>
55 </body>
56 </html>
Like the rest of the scriptaculous examples (Listings 8-98-11), this page includes the JavaScript library files in its header (lines 47). After that, the HTML for the sliders is laid out: first the horizontal slider (lines 1123) and then the vertical slider (lines 2537). Both sliders follow a similar pattern; first the slider track is defined, setting its ID, width, height, and color (lines 1215 and 2629). Then, the handles for the sliders are defined (lines 1621 and 3035). The handles set most of the same basic style elements as the track, adding a cursor of move for improved usability. The HTML definitions are finished by creating empty DIV elements to display the current value of the slider (lines 23 and 37).
The next section of the page is the JavaScript that turns these DIV groups into sliders. We start this process by assigning the debug DIV elements to variables so that we can easily reference them later (lines 4041). Then we create a slider instance for the horizontal slider control (lines 4346). The Control.Slider function takes three parameters: the track element, the handle element, and any options. In this case, we are setting two options: the onSlide and onChange event handlers. The onSlide handler is called as we move the handle around; the onChange handler is called when we're done dragging the handle. The onSlide handler is usually used to provide feedback, whereas the onChange handler is used to make the value of the slide accessible to other parts of the page, storing its value in an input box or JavaScript variable.
Lines 4852 follow much of the same process for the vertical slider. In this case, we set an extra option, axis, to the value of vertical setting. This does what it suggests and makes the slider work in a vertical fashion. We also translate the value of the slider to a 0100 scale in the onSlide and onChange handlers.
Scriptaculous Development Tips
Monday, October 1, 2007
Sarissa
Sarissa is a GPL license library focusing on providing a cross-browser wrapper for the native JavaScript XML APIs. It provides an ECMA style API on all browsers it supports, which allows you to write to the standard no matter what browser you might be using. Its major features are AJAX communications, XPath, and XSLT support. Sarissa supports most major browsers, including Firefox and other Mozilla-based browsers, Internet Explorer (MSXML 3.0+), Konqueror (KDE 3.3+), Safari, and Opera. The code has reached a stable level and no longer has frequent releases, but the forums are busy and the developers respond to questions. Sarissa can be downloaded from http://sourceforge.net/projects/sarissa, and it has online documentation available at http://sarissa.sourceforge.net/. Sarissa is a highly focused library that provides an easy-to-use, cross-browser API to the major browsers' XML functionality. If you're looking to use XML technologies such as XSLT or XPath, then Sarissa is a perfect solution for you. While using Sarissa, keep in mind these tips: Be sure to include the sarissa_ieemu_xpath.js or sarissa_ieemu_xslt.js files if you're working with XPath or XSLT. Without them, your scripts will work only in Internet Explorer. Use the XML string-loading capabilities to cut down on the number of individual XML files that you need to load. Run the test cases in testsarissa.html to make sure your browser is supported if you're on a less commonly used browser. Mix Sarissa with other libraries if Sarissa meets only some of your needs; Sarissa is focused on XML. XPath is extremely effective at searching XML documents; try using it before creating custom solutions to search XML. If you have a question about what method to use, check out the project's Web site; it contains complete API documentation.
Installation
Sarissa is a pure JavaScript library, so it's quite easy to install. Download the zip file from the SourceForge.net download page, and extract its contents to an accessible location on your Web server. The examples in this chapter use Sarissa version 0.9.6.1 installed at http://localhost/sarissa/; the Sarissa code is extracted into a subdirectory below that.
The release includes API documentation, including a basic tutorial located in the doc directory. It also includes unit tests that can be run by loading testsarissa.html and a sample application, minesweeper, in the sample-apps/minesweeper directory.
Making an AJAX Request
Sarissa gives you the ability to access XMLHttpRequest directly (or on IE6, a wrapper classes that looks the same), but that's not how you usually want to use it to make AJAX requests. Sarissa is designed around loading XML documents, so you can easily use the load command on its DOM documents to make a remote request.
Listing 8-1 does three main tasks: It includes the Sarissa library, creates a loadDoc function (which does an AJAX load of an XML file), and provides a simple UI for running the loadDoc function. The Sarissa library is included on line 5; in this example, the library is installed in the Sarissa subdirectory. Lines 921 define the loadDoc function; it's made up of a number of subtasks. Line 10 gets an empty Sarissa DomDocument. Lines 1217 define a handler function that is called each time the ready state of the DomDocument is called. This ready state handler is just like the one on XMLHttpRequest; state 4 is reached when the document is fully loaded. When this state is reached (line 13), we use the Sarissa.serialize method to turn the loaded document back into its textual XML representation and then turn < style="font-weight: bold;">SarissaMakingAnAJAXRequest.html1 <html>
2 <head>
3 <title>Making an AJAX Request with Sarissa</title>
4
5 <script type="text/javascript" src="sarissa/sarissa.js">
6 </script>
7
8 <script type="text/javascript">
9 function loadDoc() {
10 var oDomDoc = Sarissa.getDomDocument();
11
12 var rHandler = function() {
13 if(oDomDoc.readyState == 4) {
14 document.getElementById('target').innerHTML =
15 Sarissa.serialize(oDomDoc).replace(/</g,'<');
16 }
17 }
18
19 oDomDoc.onreadystatechange = rHandler;
20 oDomDoc.load("sarissaNews.xml");
21 }
22 </script>
23 </head>
24 <body>
25 <a href="javascript:loadDoc()">Load news.xml</a>
26 <pre id="target"></pre>
27 </body>
28 </html>
Basic XML Features
The Sarissa library focuses on providing good cross-browser XML support. To provide this, it creates a standardized interface to DOM documents loaded from any source. Most of this work is providing compatibility methods for Internet Explorer, hiding the fact that the XML capabilities are provided by the MSXML ActiveX control instead of by native JavaScript objects.
Working with DOM Documents
DOM documents are created in Sarissa through the use of the Sarissa.getDomDocument() method. Once you have a document, you can load content into it using three different methods. You can load remote data using AJAX (as shown in Listing 8-1), you can parse a string that contains XML data, or you can create the elements using standard DOM functions. Sarissa also includes a utility method, Sarissa.serialize(), for working with DOM documents. This prints out the document as its XML output, which is useful for debugging or in cases in which you want to send XML payloads to the server. To use the serialize method, just send the method a DOM document; a basic example is shown here:
Sarissa.serialize(domDoc);
Loading DOM Documents from a String
Loading DOM documents from a string gives you the ability to load a number of XML documents in a single request and then parse them into DOM documents to work with them. This can be a useful strategy for preloading XML during the normal page load, or it can be used with XMLHttpRequests that return data other than XML. (An example of such data is JSON.) A small example HTML page, which loads a short XML string into a Sarissa DOM document, is shown in Listing 8-2.
SarissaDOMDocumentString.html1 <head>
2 <title>Loading a DOM document with an XML string</title>
3
4 <script type="text/javascript" src="sarissa/sarissa.js">
5 </script>
6
7 <script type="text/javascript">
8 var xmlData = '<rss version="2.0"></rss>';
9
10 function loadDoc() {
11 var parser = new DOMParser();
12 var domDoc = parser.parseFromString(
13 xmlData, "text/xml");
14
15 document.getElementById('target').innerHTML =
16 Sarissa.serialize(domDoc).replace(/</g,'<');
17 }
18 </script>
19 </head>
20 <body>
21 <a href="javascript:loadDoc()">Load XML String</a>
22 <pre id="target"></pre>
23 </body>
24 </html>
In Listing 8-2, all the Sarissa interaction takes place within the loadDoc function, which is defined on lines 1017. The Sarissa library is loaded on lines 45, and an example XML string is defined on line 8. In practice, this string would be generated from a server-side language like PHP, allowing XML data to be accessed without an extra HTTP request. Line 10 starts our worker loadDoc functions. First we create a DOMParser (line 11), and then we use its parseFromString method to parse our XML string data contained in the xmlData var (lines 1213). parseFromString takes two parameters: the XML string and its content-type. Content-type is usually text/xml, but application/xml and application/xhtml+xml can also be used. The parseFromString method returns a DOM document, which can be used just like the one from Sarissa.getDomDocument().
On lines 1516, we print out the document using some basic entity replacement so that we can see the output in the browser. The rest of the XML is a link to run the example, line 21, and a pre-element that we use as a target for the printed-out DOM node.
Creating a DOM Document Manually
Because Sarissa works with DOM documents, all the normal DOM methods and properties are available. This allows you to create a DOM document with just its root node specified and then append additional nodes to it. In most cases, you won't use this functionality to create a complete DOM document; instead, you will use it to update a document loaded by one of the other methods. When creating a document manually, you'll want to specify the root node to create to the getdomDocument method; this is done by filling in geTDomDocument's optional parameters. Sarissa.getDomDocument takes two parameters: the namespace of the root and the local name of the root node. Listing 8-3 shows a small example using this method.
SarissaCreateNodesWithDom.html1 <html>
2 <head>
3 <title>Sarissa: Create elements on a DomDocument</title>
4
5 <script type="text/javascript" src="sarissa/sarissa.js">
6 </script>
7
8 <script type="text/javascript">
9 function loadDoc() {
10 var domDoc = Sarissa.getDomDocument(null,'foo');
11
12 var elBar = domDoc.createElement('bar');
13 domDoc.firstChild.appendChild(elBar);
14
15 var elBaz = domDoc.createElement('baz');
16 var text = domDoc.createTextNode('Some Text');
17 elBaz.appendChild(text);
18
19 domDoc.firstChild.appendChild(elBaz);
20
21 document.getElementById('target').innerHTML =
22 Sarissa.serialize(domDoc).replace(/</g,'<');
23 }
24 </script>
25 </head>
26 <body>
27 <a href="javascript:loadDoc()">Create an
28 XML document manually</a>
29 <pre id="target"></pre>
30 </body>
31 </html>
Listing 8-3 follows the same pattern as the previous examples: A loadDoc function is called by a small HTML interface. On lines 56, we include the Sarissa library, followed by the main JavaScript block, which defines loadDoc (lines 824). Line 10 creates the empty DOM document; we're not setting the XML namespace, so we pass null into that property, and the root node has a value of foo. Line 12 creates a new element with a tag name of bar; this is appended to the document on line 13. The bar element is appended to the firstChild of the DOM document, not directly to the document. This appending is done because an XML document can have only a single root element.
Lines 1519 repeat the same process for an element with the tag name of "baz". This time, however, the difference is that we add a child node to "baz". In this case, it is a DOM text node with the value of "Some Text", but it could also be any other XML element. There are two main types of nodes you work with in XPath: element nodes, which represent the XML tags, and text nodes, which hold the content within tags. This distinction also exists in HTML, but you don't see it as often because you can use the innerHTML property to grab the text content without worrying about DOM notes. Lines 2122 use Sarissa.serialize to output the generated document to the target element.
Using XPath to Find Nodes in a Document
Many times, when you're displaying data from an XML document, you'll want to look only at specific portions of the document. This is especially true for formats such as RSS that contain a number of news entries. XPath is an XML technology that allows you to select specific nodes within a document. A basic XPath follows the nodes from the root of the document to the element you're specifying. Each element can be directly addressed by a path; these paths start with a / and contain a / between each node (/rss/item). Further specificity can be provided by adding a bracketed number after the node name (/rss/item[1]). This path selects a particular occurrence of the node when there are multiple instances of a tag in this particular branch of the document. XPath can also query a document by starting with a double slash (//); these paths return any matching nodes (//item). Listing 8-4 shows an XML document that is used in some subsequent examples in this chapter.
An Example XML File1 <rss>
2 <item>
3 <title>AJAX Defined</title>
4 </item>
5 <item new="true">
6 <title>Web 2.0 News</title>
7 </item>
8 </rss>
You can refer to the nodes of this document in a number of different ways. First, there are absolute paths. The path /rss/item[1] refers to the item node that starts on line 2 and ends on line 4. The path /rss/item[2]/title refers to the title node on line 6. You can also query style paths; the path //item refers to both the item node on lines 24 and the item node on lines 56. These queries can also look at attributes by using an "@"; the path //item[@new="true"]/title refers to the title node on line 6.
XPath is able to do more complex queries than what is shown in this simple overview. If you're dealing with XML documents in the browser, you will find XPath to be an important tool. XPath is a W3C standard, so you can easily find more information to move past the basics.
Sarissa provides the IE XPath API to all the browsers it supports, which provides an easy to use cross-browser API. The API consists of two methods on a DOM document: the selectSingleNode method and the selectNodes method. Each method takes an XPath, with selectSingleNode returning a single DOM node and selectNodes returning a node collection that you can iterate over to access all the nodes. Listing 8-5 is a small example page that shows how to use these XPath methods.
SarissaSearchingWithXpath.html1 <html>
2 <head>
3 <title>Sarissa: Searching XML with XPath</title>
4
5 <script type="text/javascript" src="sarissa/sarissa.js">
6 </script>
7 <script type="text/javascript"
8 src="sarissa/sarissa_ieemu_xpath.js"></script>
9
10 <script type="text/javascript">
11 var domDoc;
12 function loadDoc() {
13 domDoc = Sarissa.getDomDocument();
14
15 var rHandler = function() {
16 if(domDoc.readyState == 4) {
17 document.getElementById('target').innerHTML =
18 "Document Loaded, ready to Search";
19
20 document.getElementById('afterLoad'
21 ).style.display = 'block';
22 }
23 }
24
25 domDoc.onreadystatechange = rHandler;
26 domDoc.load("sarissaNews.xml");
27 }
28
Lines 18 perform the basic HTML setup. Besides including the main Sarissa library file, we also include the sarissa_ieeme_xpath.js file. This file provides the IE XPath API to other browsers, and it is how Sarissa provides cross-browser XPath support. Lines 1227 define a loadDoc function, which loads the remote XML document we will be searching in this example. This code is identical to the earlier AJAX XML loading examples. The only exception is that now, we're defining the domDoc variable outside of the function so that it can be used elsewhere. In addition, we're showing a DIV element, which contains more links when the document is loaded instead of just printing it out. This file is continued in Listing 8-6 where the logic appears for searching the DOM using XPath.
SarissaSearchingWithXpath.html Continued29 function searchBuildDate() {
30 var el = domDoc.selectSingleNode('//lastBuildDate');
31 document.getElementById('target').innerHTML =
32 "Build date = " + el.firstChild.nodeValue;
33 }
34
35 function searchItems() {
36 var list = domDoc.selectNodes('//item/title');
37
38 var target = document.getElementById('target');
39 target.innerHTML = "Number of Items = "+ list.length+
40 "<br>Titles:<br>";
41
42 for(var i = 0; i < list.length; i++) {
43 target.innerHTML +=
44 list[i].firstChild.nodeValue + "<br>";
45 }
46 }
47 </script>
48 </head>
49 <body>
50 <a href="javascript:loadDoc()">Load news.xml</a>
51 <div id="afterLoad" style="display: none">
52 <a href="javascript:searchBuildDate()">Last build date</a>
53 <a href="javascript:searchItems()">List item titles</a>
54 </div>
55 <pre id="target"></pre>
56 </body>
57 </html>
Lines 2933 define the searchBuildDate function; this function performs an XPath query against the loaded document to find the last build date of the document. This information is provided in a single tag called lastBuildDate, so the XPath to get the information is //lastBuildDate. The XPath query happens on line 30 when we call selectSingleNode. The value of the resulting node is then displayed in the target element. Because the lastBuildNode is from an XML document, we can't just use the innerHTML attribute. Instead, we access the text node inside the returned element and get its value (line 32).
Lines 3545 define the searchItems function; this function performs an XPath query that selects all the title nodes that are inside item nodes from the document and then outputs their value in the target element. The XPath query takes place on line 36; it returns a node collection to the list variable. On line 39, we use the collection's length attribute to output the number of items in the loaded RSS document. Lines 4245 loop over the returned nodes, outputting the value of the nodes to the target; this lists the title of each item in the RSS feed.
Lines 5055 create the document's basic user interface. Links are provided to run each JavaScript function with the search links that are accessible only after the RSS document is loaded. This delay is accomplished by putting them inside a DIV that is hidden until the document's onreadystatechange change callback shows it on line 21.
Transforming XML with XSLT
XSLT is a powerful XML-based template language. XPaths are used inside the template, which allows you to easily apply multiple subtemplates to different XML templates. Describing how to create an XSLT template could take a book as long as this one, so we focus only on the API that Sarissa provides to transform documents. The API is easy to use; you create a new XSLTProcessor, load a stylesheet that contains the transformation rules, and then transform the document using the processor's TRansformToDocument method. You'll usually want to import the resulting document into the main HTML document using its importNode method so that you can add it to the DOM and display the results. A short example is shown in Listing 8-7. The data is the same RSS feed of the Sarissa news used earlier; the only exception is that the stylesheet is shown in Listing 8-7.
transform.xsl1 <?xml version="1.0"?>
2 <xsl:stylesheet version="1.0"
3 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
4
5 <xsl:output method="html" />
6 <xsl:template match="/rss">
7 <div>
8 <xsl:for-each select="//item">
9 <h2><xsl:value-of select="title"/></h2>
10 </xsl:for-each>
11 </div>
12 </xsl:template>
13 </xsl:stylesheet>
This is a really basic stylesheet with a single template that matches the root rss element in the document (lines 511). Inside this template, we output a DIV container so that we have an HTML element encasing the rest of the output, which will make it easy to add to the main document. Lines 810 loop over the results from an XPath query. The query //item selects each item node in the document. The code then displays the value of the title of each item inside an h2 tag (line 9). The rest of the file is basic XSLT boilerplate. This XSLT stylesheet is used by an HTML and JavaScript page to transform an XML document; this page is shown in Listing 8-8.
SarissaTransformWithXSLT.html1 <html>
2 <head>
3 <title>Sarissa: Transforming Documents with XSLT</title>
4
5 <script type="text/javascript" src="sarissa/sarissa.js">
6 </script>
7 <script type="text/javascript"
8 src="sarissa/sarissa_ieemu_xslt.js"></script>
9
10 <script type="text/javascript">
11 var domDoc = Sarissa.getDomDocument();
12 var styleSheet = Sarissa.getDomDocument();
13 styleSheet.load("transform.xsl");
14 var processor = new XSLTProcessor();
15
16 function loadDoc() {
17 var rHandler = function() {
18 if (domDoc.readyState == 4) {
19
20 document.getElementById('target').innerHTML =
21 "Document Loaded, ready to transform";
22
23 document.getElementById('afterLoad'
24 ).style.display = 'block';
25 }
26 }
27
28 domDoc.onreadystatechange = rHandler;
29 domDoc.load("sarissaNews.xml");
30 }
31
32 function transform() {
33 processor.importStylesheet(styleSheet);
34 var output = processor.transformToDocument(domDoc);
35
36 var target = document.getElementById('target');
37 target.appendChild(document.importNode(
38 output.firstChild,true));
39 }
40 </script>
41 </head>
42 <body>
43 <a href="javascript:loadDoc()">Load news.xml</a>
44 <div id="afterLoad" style="display: none">
45 <a href="javascript:transform()">Display Items</a>
46 </div>
47 <div id="target"></div>
48 </body>
49 </html>
Listing 8-8 takes the sarissaNews.xml file, transforms it with the transform.xsl XSLT stylesheet, and then adds its results to the main document's DOM. The Sarissa library is included on lines 58. Notice that we're including the cross-browser XSLT support files as well as the main library file. On lines 1114, we set up the objects we will use on the rest of the transformation process. On line 5, we set up an empty DomDocument into which we will load our RSS feed; then, on line 6, we create a similar object into which to load the stylesheet. On line 13, we load TRansform.xsl into the styleSheet document; you could also use the string parser to load transform.xsl. This would be accomplished by loading the contents of TRansform.xsl into a JavaScript variable and then creating the DomDocument using the DOMParser. Doing this would let you reduce the number of HTTP requests needed to load the document, which is helpful from a performance standpoint as long as the stylesheet is small. Finishing the basic setup, we create a new XSLTProcessor on line 14.
Lines 1630 define the loadDoc function, which loads sarissaNews.xml so that it can later be transformed. This works the same as the earlier examples; we're just adding a few more actions to perform after the document is loaded. On lines 2021, we output a message saying the document is loaded, giving the user feedback that something has happened. Then, on lines 2324, we show a DIV in the main HTML document. This DIV contains the links that do the actual transformation; by keeping it hidden until the document is loaded, we are able to prevent errors from happening. The rest of the method contains the simple Sarissa document loading processes; on line 28, we register the callback function, and on line 29, we load the sarissaNews.xml document.
Lines 3239 define a JavaScript function that does the transformation. This is a three-part process. On line 33, we import the stylesheet we previously set up, and then on line 34, we transform the document assigning the result to a variable. We finish the processes on lines 3638, selecting an output element and then appending the output to it after importing it to the HTML document. When importing the nodes, passing a Boolean value of true as the second parameter to importNode makes the method perform a deep import. A deep import imports the element passed in and all its children; without this flag, only the top-level element is imported.
The rest of the document is the basic HTML user interface. A link is provided on line 43 to load the sarissaNews.xml document, with the transform link enclosed in a hidden DIV so that it will be available only after the news document is loaded (lines 4446). We finish up with a target DIV on line 47 that we use for giving messages to the user and for showing the transformed document.
Sarissa Development Tips
Atom Feed (xml)