Wednesday, November 30th, 2005
Category: Books
The Pragmatic Programmers recently released a short title in their new Pragmatic Fridays set of short books.
Their latest book is devoted to the Google Maps API, and the Pragmatic Programmers have given the chapter on Ajax for Ajaxian.com members to download for free.
Scott Davis, the author, gets deep into the API, and covers:
- Google Maps
- For Those in a Hurry…. Getting basic Google Map windows
up and running.
- The Excruiciating Details. Core objects, map controls,
user data, evens, AJAX, and documentation.
- Core Objects. The low-level objects that define your
interactions: GMap, GPoint, GSize, and GBounds.
- Map Control Objects. Panning, zooming, map types.
- User Data Objects. Adding your own markers: GMarker,
GIcon, Info Window, and GPolyline.
Read
an extract
- Events. Adding interaction to your maps: GEvent,
GBrowserIsCompatible, GMap Events, GMarker Events, Examples.
- AJAX. DHTML and AJAX, GXmlHttp, Geocoder Web Services, Example.
- Where do we go from here?.
Download Google Maps Ajax Book Chapter
Category: Articles, Dojo, JavaScript, Toolkit
Andy Smith has posted an article (if thats 404, try this) about getting up to speed with Dojo quickly. He takes a simple javascript example and walks through the steps of converting it to a Dojo widget. Dojo’s packaging system, event system, and widgets are covered. Note that he is using the latest Subversion checkout for the example, so no guarantees on how long all the details will be accurate with the speed at which Dojo is moving.
Also check his blog entry:
You’ve got a project that uses JavaScript in a mean sorta way, you’re boss told you that you need to be using “that AJAX stuff� and your mother’s cat just died; you better learn how to use Dojo (the superslick JavaScript library) and FAST.
Category: ColdFusion, Examples, Showcase
John Theis has built a demo ajaxian contact manager, using ColdFusionMX and SQL Server. The demo ties Ajax calls to select, insert, update, delete and search, and the widget itself is dragable, and minimizable.
The demo comes along with source code for CF heads.
Category: Toolkit
DomAPI is an application-centric development environment targeted at version 5.0 or better browsers running on Windows, MacOS and Linux, written by the authors of JSCruncherPro.
It has a lot of components, and also has an RPC Wrapper. The components need a designer to go through and pretty them up though.
Components
DomAPI comes with a rich set of components:
Advanced:
Resources
Tuesday, November 29th, 2005
Category: JavaScript, Toolkit, UI, Usability
Tooltip.js is a simple library that builds on top of Prototype and Script.aculo.us.
You can create tooltips programatically, or just by using special CSS classes.
CSS Styling Tooltips
The most simple example is to add a div with the class of tooltip immediately after the item that you wish to activate a tooltip. E.g.
<p>Click this to show the tooltip</p>
<div class='tooltip'>
<h1>Header</h1>
<p>Contents</p>
</div>
Since this is just a div, you can put anything you want in it. You can also create custom activators and such. E.g.
<p><img src="images/dvd.jpg" alt="DVD Cover"></p>
<div style="opacity: 0.999999;" class="netflix tooltip" id="tt3">
<h1>Star Wars: Episode III</h1>
<p>In the third and final installment of the Star Wars prequel trilogy, Anakin Skywalker ... </p>
<p>
<b>Starring</b>: Ewan McGregor, Hayden Christensen ...
<br>
<b>Director</b>: George Lucas
...</p>
<p class="close" style="margin: 0pt; text-align: right;"><a style="cursor: pointer;">Close</a></p></div>
<p id="customActivator">This is a custom activator</p>
<p style="display: none;" id="customTip">This is the custom tooltip.
<p class="close" style="margin: 0pt; text-align: right;"><a style="cursor: pointer;">Close</a></p></p>
<script type="text/javascript">
Tooltip.add("customActivator", "customTip");
</script>
JavaScript Activation
You can draw the lines yourself with JavaScript
Tooltip.add('idOfActivator', 'idOfTooltip');
// Or
activator = document.getElementById('idOfActivator');
tooltip = document.getElementById('idOfTooltip');
Tooltip.add(activator, tooltip);
You can also simply choose the events that you want to show or hide the tooltip:
// Show on clicking and tabbing on to the activator
Tooltip.showEvent = new Array("click", "focus");
// Show on clicking on and tabbing off the activator
Tooltip.hideEvent = new Array("click", "blur");
Category: Browsers, IE, JavaScript, Utility
We announced Drip, the IE Leak Detector back in June.
Since then, the project got picked up by Matthias Miller, and his team has released a new version of the tool.
The new features of Drip are:
Major enhancements include:
Resources
Category: Articles
Abe Fettig, of JotLive and Twisted fame, has written up his experiences trying to get XMLHttpRequest calls working across domains.
He discusses three approaches that he took to make this happen:
- The naive approach
Abe verified that he couldn’t access one domain from another.
- Using an iframe and document.domain
iframes aren’t limited to pulling pages from same web server as their containing page - they can load any URL. To prevent cross-site security problems, browsers enforce the same origin policy in the javascript object model: scripts running in one frame can’t access any objects inside another iframe, unless both pages came from the same server.
There’s an exception to this rule, however. If both pages come from the same parent domain, and both of them set the property document.domain to the same parent domain, scripts running in either frame will be allowed to talk to each other. For example, say the page http://www.example.com/ loads the page http://ajax.example.com/ in an iframe. Since both pages are in the domain example.com, if both set document.domain to “example.com” they will be be given the ability to programatically access each other’s data.
So, can you use an iframe with document.domain to make XmlHttpRequest connections? Yes, with two restrictions:
- The iframe must be served from the server to which you’ll be making XmlHttpRequest calls.
- You have to open the XmlHttpRequest connection before you set document.domain.
- Repeated XmlHttpRequests
Although the iframe approach is working for a single XMLHttpRequest, what about if you want to do multiple requests to different domains? Abe tried a technique that changes document.domain for different XHR hits. This worked in IE and Safari, but not Mozilla or Opera.
- Making it work in Mozilla
To get multiple XHRs working in Mozilla, Abe uses a bridge iframe:
parent window
bridge iframe
child iframe
And he programatically creates iframes that he needs:
<html>
<head>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript">
function gotTime(result) {
window.parent.gotTime(result); // pass result up to the parent
}
window.onload = function(){
var subframe = document.createElement('iframe');
document.body.appendChild(subframe);
subframe.src = "test4-iframe.html";
subframe.contentWindow.bridgeGotTime = gotTime;
document.domain = "fettig.net";
}
</script>
</head>
<body></body>
</html>
Update: Abe found that Firefox 1.5 fixed things, so he didn’t need the bridge.
Monday, November 28th, 2005
Category: Utility
Brendon Crawford has created a little Regular Expression Tester called Rejax, that gives you instant feedback on your test regex queries.
Brendon built the engine on his AJFORM Ajax toolkit, and it allows you to query both PHP and JavaScript-style regular expressions.
I wrote about a regex application called Regex Coach, and would love to see Rejax taken to this level.
The first feature I would love to see, is the ability to put in ( )’s and see the matches separately.
Category: Utility
The creatively named JavaScript Utilities Project is oriented at developing a set of tools and components geared toward enhancing the development model around JavaScript as used for implementing rich Web applications.
The project introduces the notion of .jsx (extended JavaScript) and .jsa (JavaScript assembly) files. JSX files provide the ability to include conditional code via familiar preprocessor directives such as #if, #else, #endif and so on. I have also introduced a special single-line syntax to avoid requiring a terminating #endif for convenience: ## DEBUG. The tool processes these directives in order to produce a standard .js file. JSA files build on top of .jsx files. While they can include normal JavaScript and preprocessor directives, they are primarily there for including individual .jsx and .js files via #include directives. This allows you to split your script into more manageable individual chunks.
The functionality can be used in three modes:
- A set of standalone tools that output standard .js files that you can then deploy to your web site. Command line parameters are used to control the behavior of the tools.
- A couple of IHttpHandler implementations that allow you to dynamically convert your code into standard .js files. This is the mode where you can benefit from implementing per-browser code in a conditional manner. AppSetting values in configuration are used to control the conversion behavior.
- As a script project in VS using an msbuild project along with an msbuild task that comes along with the project. MSBuild project properties are used to control the conversion behavior.
Are these additions compelling? There are issues with extending the language in this way, because now any of your tools that grok .js files, are going to be confused by the #directives.
Category: Showcase
Tradeover is a new Ajax trading simulation, a multi-user game. Shades of 37betterbank.com, 37Signals’ wakeup call to online banks. New trading technologies are just the thing for every bubble :-).
XMLHttpRequest is used to speed up navigation, and there’s a nice multi-user feature: a chart showing current user count is updated every fifteen seconds. Awareness of other users is a big advantage of Ajax that’s not discussed much: firstly, the display of other users’ status can be kept fresh; secondly, the browser can keep the server informed of each user’s activity - who’s active, who’s idle, who’s logged out?
Category: JavaScript, Testing, Toolkit
Joseph Moore recently wrote about how his team is working with Selenium to test their ajax apps. Most of the normal Selenium actions weren’t working well for the ajax calls, as they are expecting synchronous communication.
So Joseph used the “waitForValue” and “waitForCondition” features, which can just sit and watch for the DOM or input values to change after the async call was made. He says:
Why the Selenium folks don’t have bright red “hey, use this for your Ajax testing!” flag on these two items is beyond me.
Right now it seems there are so many different approaches to testing Ajax that developers aren’t sure where to start. There isn’t a clear cut framework or approach that has the dominance of the xUnit approach for the server side code.
Further resources to muddy the waters =) :
Sunday, November 27th, 2005
Category: Ajax
Dominik Hahn has started a German Ajax community site called AjaxTalk.de, and is looking to support the German Ajax community. So if you are looking for discussion and resources for ajax in German, give his new site a try.
Category: Showcase
Gollum is a “browser within a browser” app specialised for wikipedia reading. The aim is provide a simpler interface and some value-add features.
Rendering a wiki with an Ajax app is also an idea used in the Ajax Patterns Reader (featured earlier). There are also Ajax wikipedia mashups like Placeopedia. All of this will likely be followed by more of the wikis themselves adopting Ajax features: Jotspot is into Ajax in a big way, but the open-source wiki engines - including mediawiki, which powers wikipedia - haven’t done much Ajax to date.
Friday, November 25th, 2005
Category: Business
A new Forbes article introduces Ajax’s benefits to business in a novel way: what’s offered by the A, the J, and the X.
… It’s Asynchronous! Writely’s Sam Schillace:
“In terms of using asynchronous processing, the most significant is to send small updates back to the server from the editor as the user is working and to have the server send messages back to the editor,”
…It’s Javascript! Zimbra’s Scott Dietzen: “JavaScript and Ajax allows Zimbra to do what we have always wanted to do”. Examples include: “Right click on a phone number to make a call with your soft phone”.
…It’s XML: GOffice’s Kevin Warnock: “XML is useful because once a document is encoded into XML, it can be easily and reliably processed by many computer systems … Also, we can do part of the PDF creation process on the browser. This means we can scale our system to allow the creation of, literally, billions of PDF files.”
The article also suggests some caution on search engines and advertising opportunities.
“A complete AJAX application would be a mistake because search engines won’t be able to index it. And without a search engine, a site won’t be able to sell products.”
Search and Ajax is an interesting problem, and Backbase has some good advice on dealing with search engines (covered earlier).
Category: Flash, Toolkit
OpenLaszlo 3.1 has been released.
OpenLaszlo is an open-source platform for the development and delivery of rich Internet applications on the World Wide Web. The OpenLaszlo platform consists of three main components:
- The OpenLaszlo compiler takes an OpenLaszlo source files and compiles it into a Flash file that runs in any browser.
- The OpenLaszlo Runtime Framework includes user interface components, data binding, and network services.
- The OpenLaszlo Servlet enables runtime support for additional media types and for SOAP and XML-RPC.
Now with Ajax!
The feature that jumps out is the addition of the XMLHttpRequest class:
For AJAX style applications, there now is an XMLHttpRequest class. This class implements XMLHttpRequest as specified by the WHATWG consortium.
XMLHttpRequest() implements the functionality of the <dataset> tag in a syntax that is more familiar to people with AJAX programming experience. If you are comfortable using datasets there is no reason to use this class.
As this paragraph says, they are basically porting the XHR interface to do what you have been able to do with Laszlo for awhile with data sets.
An interesting marketing move huh :)
( via Geert Bevin )
Category: Security
It was great to see browser developers getting together to take on security:
Core KDE developer George Staikos recently hosted a meeting of the security developers from the leading web browsers. The aim was to come up with future plans to combat the security risks posed by phishing, ageing encryption ciphers and inconsistent SSL Certificate practise.
Addressing PKI in the browser
The first topic and the easiest to agree upon is the weakening state of current crypto standards. With the availability of bot nets and massively distributed computing, current encryption standards are showing their age. Prompted by Opera, we are moving towards the removal of SSLv2 from our browsers. IE will disable SSLv2 in version 7 and it has been completely removed in the KDE 4 source tree already.
KDE will furthermore look to remove 40 and 56 bit ciphers, and we will continually work toward preferring and enforcing stronger ciphers as testing shows that site compatibility is not adversely affected. In addition, we will encourage CAs to move toward 2048-bit or stronger keys for all new roots.
Colour Indication
As soon as I saw different colours as backgrounds to the URL in the browser, I knew it was a good idea. That little lock at the bottom of the browser goes totally ignored, and anything to increase awareness is a good thing.
George wasn’t sure at first, but changed his mind:
I was initially resistant to the idea of using colour to indicate security - especially the colour yellow! However the idea we have discussed have been implemented by Microsoft in their IE7 address bar, when I saw it in action I was sold. I think we should implement Konqueror the same way for KDE4. It involves the following steps:
- The location toolbar becomes a permanent UI fixture along with the status bar
- The padlock goes into the location combo-box permanently, is the only place it appears, and the location bar stays white by default
- When verification on a site fails, the location bar is filled in red
- When a high-assurance certificate is verified, the location bar is filled in green, the organisation name is displayed beside the padlock, and it rotates displaying the name of the CA
I am afraid that the missing yellow will confuse our users, but at the same time I think it was misguided to add the yellow when it was added, and I think this is the price we must pay.
Next Page »
