Tags:
ajax3Add my vote for this tag brainstorming1Add my vote for this tag component1Add my vote for this tag features1Add my vote for this tag twiki_application1Add my vote for this tag usability1Add my vote for this tag create new tag
, view all tags

TWiki AJAX Framework

Discusson topic on development of a solid TWiki AJAX Framework where application builders can easily build AJAX-based TWikiApplications. This has now been implemented in TWikiAjaxContrib.

AJAX Frameworks

A number of frameworks listed below are briefly discussed in The SitePoint Tech Times #132 (February 15th, 2006)

  • Yahoo! User Interface Library - The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, HTML and AJAX. The UI Library Utilities facilitate the implementation of rich client-side features by enhancing and normalizing the developer's interface to important elements of the browser infrastructure (such as events, in-page HTTP requests and the DOM). The Yahoo UI Library Controls produce visual, interactive user interface elements on the page with just a few lines of code and an included CSS file. All the components in the Yahoo! User Interface Library have been released as open source under a BSD license and are free for all uses.

We have opted to use the Yahoo! User Interface Library. This library is available for usage in TWiki development with YahooUserInterfaceContrib. Also TWikiAjaxContrib is based on the Yahoo! AJAX library.

Other frameworks:

  • prototype is released in TWiki 4 as a contrib, but prototype appears to cause Explorer crashes to certain windows machines; see: Bugs:Item1649.
  • Dojo - Dojo is the Open Source JavaScript toolkit that helps you build serious applications in less time. It fills in the gaps where JavaScript and browsers don't go quite far enough, and gives you powerful, portable, lightweight, and tested tools for constructing dynamic interfaces. Dojo lets you prototype interactive widgets quickly, animate transitions, and build Ajax requests with the most powerful and easiest to use abstractions available. These capabilities are built on top of a lightweight packaging system, so you never have to figure out which order to request script files in again.
  • AjaxRequest Library - layer over the XMLHttpRequest functionality which makes the communication between Javascript and the server easier for developers.
  • Behaviour looks like a good event handler framework to let UI elements call js
  • Google has released to the public their AJAX framework based on Java. The same one they used to develop Google maps, gmail, etc. Pretty powerful stuff, with a lot of potential. Only it's Java. Only we wouldn't be allowed distribute it (i.e. package as a contrib).
  • http://sourceforge.net/projects/zk1 is another, GPL'ed, option.

Experiences using frameworks

While I can't comment on the other frameworks, I have done a little work with Dojo and YUI!.

I really like Dojo, but it has problems dealing with variable-content pages. You can run it in developer -mode, which loads each required js file. This is quite flexible, but it's not fast, even if the browser caches the files read over XHR, and not all do. Or you can roll a package, which copies the needed files into one file. This doesn't work as well if you've got js files that are required based on the usage of a plugin, since that would change what goes in the one file, unless you create one file that is everything that any of your pages will need, which is often overkill. Mixed mode is also possible, but having multiple packages isn't, unless I've missed something recent.

Dojo also tends to pull in too much stuff. A "trimmed" file just to handle tooltips weighs in at 178K ungzipped, because Dojo tooltips offer several animation options, and the options are specified at runtime, so the packager is forced to include any possible animation that the tooltip might want to use. (as a point of reference, the same functionality sans-animation only takes 80K in YUI!, and adding animation adds about 10K, if I recall correctly).

Both can be set up for a minimal support configuration, just addListener() and XHR support (I'm a firm believer in making sure you have a GOOD addListener() implementation and that all your javascript uses it). The rest of the frameworks are nice to have, those are the two essential parts.

-- EricSchwertfeger - 26 May 2006

Other AJAX work

Sven's JSPopupPlugin allows you to create a popup dialog containing either TWiki text or filled dynamically from a URL using =%<nopPOPUP{}%.

can be used to

  • popup the %COMMENT% textarea
  • popup the raw/more/attach screens without leaving the view screen.
  • use with HtmlFormsPlugin to popup dialogs to set TWikiVariables on other topics

(uses YahooUserInterfaceContrib )

AHAH, not AJAX

Harald Joerg has written MiniAhah, a way of loading HTML content instead of XML data. See Wikipedia:AHAH for more information. MiniAhah has a lot of demos.

TWikiAjaxContrib has adopted the use of loading HTML and the idea of caching the retrieved contents.

Harald has suggested to be able to specify a custom loading indicator for each request.

About graceful degrading

Pages should still function when JavaScript is turned off or not available. One way to achieve this is with BehaviourContrib.

Harald Joerg expressed a concern using Behaviour:

Shoving the javascript invocations into extra CSS blocks is elegant but lacks the ability for interaction with TWiki formatted search. I want to pass parameters to the url I retrieve, which then need to be passed again to TWiki for formatting.

If you move your event handlers from HTML onclick (or onchange or whatever) attributes to CSS (using Behaviour), then you can't pass TWiki variables to Javascript calls. You can't prepare all necessary CSS classes to map things like format="<input ... onchange=\"js('$topic')\"/>" in advance.

Word of warning when using POST

AJAX requests using POST cannot cross a domain:
XmlHttpRequest objects are bound by the same origin security policy of browsers, which prevents a page from accessing data from another server. This has put a serious limitation on Ajax developers: you can use XmlHttpRequests to make background calls to a server, but it has to be the same server that served up the current page.

Because of this security policy, some AJAX based MashUp applications use a small proxy script on the server that redirects a call to fetch data from other servers.

You still may wonder how secure this is. See The dangers of cross-domain scripting.

Possible usage of AJAX

-- Contributors: -- PeterThoeny, IsmaelAntadillas, ArthurClemens, SteffenPoulsen, SvenDowideit

Discussion

I am wondering what the best way is to get developers acquainted with this technology.

-- PeterThoeny - 03 Nov 2006

I like the idea of a fully ajax-supported interface for a wiki in general. That would speed up a lot of editorial processes. Just think of editing tables or sections of documents today. AJAX is cool. smile

-- MartinSeibert - 25 May 2008

Topic attachments
I Attachment History Action Size Date Who Comment
PNGpng Ajax_scheme.png r2 r1 manage 91.1 K 2006-05-26 - 09:26 ArthurClemens plugin-template setup for AJAX callback handlers
HTMLhtml ajaxtest7.html r2 r1 manage 12.6 K 2006-06-02 - 00:06 ArthurClemens Test file
HTMLhtml ajaxtest8.html r2 r1 manage 12.8 K 2006-07-25 - 23:17 ArthurClemens Test file
JavaScriptjs behaviour.js r1 manage 8.0 K 2006-05-28 - 01:10 ArthurClemens Behaviour javascript
JavaScriptjs connection.js r1 manage 14.6 K 2006-05-27 - 00:07 ArthurClemens Yahoo UI AJAX script
HTMLhtml contact.html r1 manage 181.6 K 2006-05-27 - 00:09 ArthurClemens Dynamically loaded content
HTMLhtml hamlet.html r2 r1 manage 56.6 K 2006-05-28 - 02:07 ArthurClemens Dynamically loaded content
GIFgif indicator.gif r1 manage 1.5 K 2006-05-27 - 00:08 ArthurClemens Loading animation
Cascading Style Sheet filecss style.css r4 r3 r2 r1 manage 0.8 K 2006-05-30 - 08:36 ArthurClemens Style sheet for test
JavaScriptjs twiki_html.js r2 r1 manage 0.8 K 2006-07-25 - 01:14 ArthurClemens TWiki Javascript for manipulating html
JavaScriptjs twiki_request.js r10 r9 r8 r7 r6 manage 12.7 K 2006-07-25 - 23:18 ArthurClemens TWiki Javascript for handling AJAX requests
XMLxml world.xml r1 manage 52.0 K 2006-06-02 - 00:05 ArthurClemens Test XML data
JavaScriptjs yahoo.js r1 manage 2.1 K 2006-05-27 - 00:07 ArthurClemens Yahoo UI base script
Edit | Attach | Watch | Print version | History: r43 < r42 < r41 < r40 < r39 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r43 - 2008-05-25 - MartinSeibert
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.