Lollygag Demos — The Basics

Lollygag applications are "true" Ajax applications. When you create a Lollygag application, you create a single page. After the single page is loaded in a person's browser, the page is updated through AJAX calls to the server. Unlike a non-AJAX Web application, you never perform postbacks to the server.

A typical Lollygag application consists of three files: an XML file, a JS file, and a CSS file. For example, the following three files can be used to create a "Hello World" application.

HelloWorld.xml Try it!

HelloWorld.js

HelloWorld.css

The HelloWorld.xml document is used to create a new Lollygag application. In the Lollygag framework, you create an application by creating an XML document instead of an HTML page. The XML document can contain all of the usual HTML tags. For example, you can add <b> tags to create bold text, <p> tags to create paragraphs, and so on.

However, unlike a normal HTML page, a Lollygag XML document can also contain widgets. A widget is a special tag that is interpreted on the browser and transformed into a page element. For example, the HelloWorld.xml page includes a button widget.

When you click the button, the showMessage() function defined in the HelloWorld.js file is called. Notice that the button widget includes a onClick attribute that associates the showMessage() function with the button click event.

Finally, notice that the button widget is namespaced. The button widget is declared with a <lolly:button> and not a <button> tag. The namespace prefix lolly associates the button widget with the lollygag namespace. A JavaScript library is loaded for each namespace used by a widget in a page. If you don't use any of the widgets from a particular namespace, the corresponding JavaScript library is never loaded.

Lollygag supports full autocomplete when used with Microsoft Visual Web Developer. Tags and their properties appear while you type.

To make it easier to debug Lollygag applications, you can set the application debug attribute to the value true. When debug is set to the value true, debugging information is sent to a console area rendered in the page. You can write out any custom debug information by using any of the following three methods in your JavaScript code:

• debug.write( text, category )
  Writes text to the debug console with an associated category.
• debug.warn( text, category )
  Same as debug.write except prints text in red (easier to see).
• debug.inspect( object, includeValues )
  Displays all of the properties of an object. If includeValues has the value true, then the values of all of the object's properties are displayed.

For example, the modified HelloWorld application below has debugging enabled. Notice that the <application> tag includes a debug attribute. Also, notice that the HelloWorldDebug.js file includes a debug.warn() statement. When you execute the application, the debug text appears in the console.

HelloWorldDebug.xml Try it!

HelloWorldDebug.js

If you want, you can specify an icon for your application by including an icon attribute in the <application> tag. The icon appears in the browser address bar, browser favorites, and browser tabs.

The icon file must be an .ico file. You can create an .ico file with the Visual Studio .NET icon editor (There are also ico plugins for Paint Shop Pro and Photoshop).

For example, the lollygag application below includes an icon attribute that loads an icon named lollygag.ico.

HelloWorld.xml Try it!