Mini AHAH Or A Taste Of AJAX

The capability of TWiki4 regarding dynamic retrieval of contents can be shown with a couple of simple examples:

  1. Some simple ways to preview TML without going through an edit cycle Read more
  2. A topic selector form, similar to the "jump box" in PatternSkin, but allowing to select from existing webs/topics in dropdown menues Read more
  3. A topic explorer, very similar to the explorer known from MS Windows Read more
  4. Another explorer, this time allowing to selectively collect entries from TWikiVariables Read more
  5. A form and a table to display - and even change TWiki session variables without saving a topic Read more
Feel free to create your own!


Full Table of Contents

Showroom

Preview arbitrary TML Without Leaving The Page

This can be used to test some TWiki Markup Language (TML), or to simply inspect a TWiki variable without having to go through a complete view/edit/save/view cycle. Available in three flavours: an one-line input field, a text area, and a real sandbox.

All these share some shortcoming: The TWiki Variables describing the current web and topic (e.g. TOPIC) are showing a "wrong" value (so searches etc. are having the wrong defaults), and a "Save" function is not implemented (though the latter would be possible).

One Line Input Field

Enter Text, TML, or TWikiVariables. Try, for example, [[MendedDrum]] or %SEARCH{"Topic Explorer"}%.

TML Input:
Result:

To use in your own topic, say: %INCLUDE{"Legolab.MiniAHAH" section="tmlinput"}%

Multiline Text Area

Use this one for trying bullet lists, table layouts, ...

TML Input:
Result:

To use in your own topic, say: %INCLUDE{"Legolab.MiniAHAH" section="tmltextarea"}%

A Sandbox Within A Topic

With a sandbox like this, guests can try editing and formatting without having to think about topic names. No trace will be left on the server side.


To use in your own topic, say: %INCLUDE{"Legolab.MiniAHAH" section="tmlsandbox"}%


A Dynamic Topic Selector Form

This is similar to the "Jump" box in pattern skin, but allows selecting from existing webs and topics instead of having to guess. Clicking on the Plus will convert the text boxes to dropdown menues, which will be filled with values only on request, but cached for quick access. Be careful when using this to select topics from a web with many topics, this may take quite a while.

Select web and topic: Plus Plus

To use in your own topic, say: %INCLUDE{"Legolab.MiniAHAH" section="topicselector"}%


A Dynamic Topic Explorer

This is similar to the Windows Explorer. Clicking on the Plus will expand the webs, or topics, respectively. Be careful when using this for webs with many topics, this may take quite a while.

Plus Home (TWiki)

To use in your own topic, say: %INCLUDE{"Legolab.MiniAHAH" section="topicexplorer"}%


TWikiVariables Explorer

Is TWikiVariables too fat for you? Mind you, it has ~150kB, includes lots of stuff and - per design - expands almost every conceivable variable. Then read only the parts you really need.

A drawback is that the links to "Related" variables are broken. As broken as if you access individual variable topics like VarACTIVATEDPLUGINS, and for a similar reason.

Plus (All TWiki Variables)

To use in your own topic, say: %INCLUDE{"Legolab.MiniAHAH" section="twikivarexplorer"}%


Conveniently Getting/Setting Session Variables

Usually, to set a session variable you need to edit and save a topic. This is inconvenient, as I'd dare to say, since topics live longer than sessions (most of the time) and unless you remember to update the topic at the end of the session, everyone reading this topic will get the session variable thrust upon him.

Set Using Key-Value Boxes

Enter the name of a session variable (for example _SESSION_REMOTE_ADDR) to read its value, set if you want.

Name: Read more

To use in your own topic, say: %INCLUDE{"Legolab.MiniAHAH" section="sessionvariable"}%

A Table of Frequently Used Session Variables

Set your Session variables:

SKIN: DONE (you need to reload the page to see the effect)
EDITBOXHEIGHT: DONE  
EDITBOXWIDTH: DONE  
LANGUAGE: DONE plus I18N is not enabled

To use in your own topic, say: %INCLUDE{"Legolab.MiniAHAH" section="sessionvariabletable"}%

Preparation for Usage in Your Topics

  1. Create the two topics MiniAHAH and MiniAHAHSelector, either by copying the contents from this web or by expanding the zip files which I have still been to lazy to attach.
  2. Include the following either in one of your templates, or only in the text those pages where you want to use the examples (you'll see it in raw or edit mode at the top of this topic):

<script type="text/javascript"><!--
var ahah_web = '%WEB%';
var ahah_topic_type = 'input';
// -->
</script>
<script type="text/javascript" src="https://twiki.di.uniroma1.it/pub/Legolab/MiniAHAH/ahah.js"></script>

See the demonstrations above for how to use the particular functions. You don't have to stick with the functions given here. Take them just as a examples, extend as you like.


Technical Section

Purpose of this topic
Short of a AJAX Framework, let's have a look what can be done with today's (TWiki4) functions, by leveraging a technique called "AHAH". AHAH (Asynchronous HTML and HTTP), also known as JAH (Javascript Asynchronous HTML) is sort of a lightweight AJAX (Asynchronous HTML And XML).
AHAH References
Wikipedia
Microformats

Comparison to Other TWiki Extensions

Today methods to expand or collapse parts of a HTML page with Javascript are quite frequently found in the internet. For TWiki, there are several extensions which help authors doing this. So, why yet another technique? Let's compare with some of those:

In contrast to TWiki:Plugins.TwistyContrib, TWiki:Plugins.RenderListPlugin, TWiki:Plugins.TooltipPlugin and the like, with AHAH the "expandable" data are not fetched in advance. They're only fetched from the server when unfolding is requested, using the AJAXoid XMLHttpRequest(). If you are doing many unfolds, the "traditional" CSS folding techniques are faster because only one request to the server is required - however, even then the perceived speed may be better with AHAH, where the first screen is readily available.

Comparing to JSPopupPlugin, this extension is not a plugin. It does not define a new TWiki tag to the author. Instead, it is targeted at TWiki power users who want to define blocks (see below) for ready-to-use dynamic content.

Overview

To dynamically read things like a %TOPICLIST% into a TWiki topic, we need a possibility to 1) retrieve that information from the server, and 2) display the list in the browser.

The first part is possible using Javascript: Modern browsers support a function XMLHttpRequest, which allows to pull (XML) contents via HTTP from a web server into a Javascript variable.

For the second part, we will use the DOM property innerHTML, which describes the complete contents of a HTML element. We are not going to bother with parsing the results from XMLHttpRequest (that is, by the way, the difference between AJAX and AHAH). We simply replace the contents of an element which has been present in a topic by the contents from the server. Fortunately TWiki usually throws out valid XHTML, which is valid XML as well.

The Gory Details

Formulating the =XMLHttpRequest

Formatting the Result


Mini AHAH Templates

The following templates implement what you can see in the demonstrations above. They will look strange (at least) when viewed they bear no useful function, and only minimal effort has been taken to maintain thie section as valid (X)HTML.

Templates for the TML Previewer

TML Single Line Template

TML Input:
Result:

TML Textarea Template

TML Input:
Result:

Sandbox Template


Templates for the Topic Selector Form

Template =topicselector

This is the template for the dynamic topic selector above.

Select web and topic: Plus Plus

Plus

Minus

Plus

Minus

Templates for the Topic Explorer

Plus Home (TWiki)

Plus Home (TWiki)

Minus Home (TWiki) (%)WEBLIST{format=""}%

Plus Folder %MINIAHAH1%

Minus Folder %MINIAHAH1%
(%)TOPICLIST{web="%MINIAHAH1%" format="plus Name
"}%

Templates for the TWikiVariables Explorer

Plus (All TWiki Variables)

Plus (All TWiki Variables)

Minus (All TWiki Variables) (%)SEARCH{"^Var.*" web="TWiki" scope="topic" type="regex" nonoise="on" format=""}%

Plus %MINIAHAH1%

Minus %MINIAHAH1%

Warning: Can't find topic TWiki.MINIAHAH1

Templates for Accessing Session Variables

Name: Read more

= DONE

= DONE

SKIN: DONE (you need to reload the page to see the effect)
EDITBOXHEIGHT: DONE  
EDITBOXWIDTH: DONE  
LANGUAGE: DONE plus I18N is not enabled

Session variable '%MINIAHAH1%' has been seet to '%MINIAHAH2%'

Topic attachments
I Attachment History Action Size Date Who Comment
JavaScriptjs ahah.js r1 manage 1.9 K 2006-08-22 - 10:30 AndreaSterbini  
Topic revision: r1 - 2006-08-22 - AndreaSterbini






 
Questo sito usa cookies, usandolo ne accettate la presenza. (CookiePolicy)
Torna al Dipartimento di Informatica
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback