Christian Decker wrote this at around evening time:
Ajaxian today has a feature about the most useful information sources on Ajax, CSS, DOM and JavaScript (or as many will know them: the basis on which the whole Web 2.0 is built ), so I’ve skimmed through my del.icio.us account looking for stuff to add and here are my favorites:
JavaScript Scope and Binding: scope is a really difficult topic for most JavaScript beginners, here you get the chance of getting it right the first time.
YUIBlog: while running through the list I noticed that many great tutorials were actually published on this Blog, including the Event-Driven Web Application Design and many good screencasts, definitely worth a try, even if you don’t use YUI! yourself.
JSON: The X in Ajax is redundant some developers thought and replaced it with the JavaScript Object Notation.
Having an Apache server is really a great thing, every day you can discover something new:D Today I discovered that I can use a reverse proxy to point to a server behind my firewall. Even better I can use a subdomain to access it, which is exactly what I need.
So let’s see, what I need is that every request to a certain subdomain to be mapped to another server, with a private IP-Address. This is great because I only expose parts of my server to the Network that I want.
First things first: in the apache configuration, which is usually located at /etc/sysconfig/apache2 edit the APACHE_OPTS to contain -D REVERSE, -D PROXY and -D PROXY_HTML (actually the last one’s not needed as we wont be adjusting any URLs, but let’s keep it anyway).
Now that we have enabled the proxy stuff, we can start configuring it. In the vhost directory (something like /etc/apache2/vhosts.d/) create a new file that will hold the configurationfor the subdomain:
<virtualhost your-ip-here>
DocumentRoot /srv/www/subdomain/htdocs
ServerName subdomain.domain.tld
ServerAdmin webmaster@subdomain.domain.tld
AccessFileName .htaccess
ScriptAlias /cgi-bin/ /srv/www/subdomain/cgi-bin/
ServerAlias subdomain.domain.tld sudomain
<directory /srv/www/subdomain/htdocs>
Order allow,deny
Allow from all
</directory><directory /srv/www/subdomain/cgi-bin>
AllowOverride None
Order allow,deny
Options ExecCGI
Allow from all
</directory></virtualhost>
Ok so by bow we have created the new subdomain, just to let apache shut up about missing folders we’ll create the required folder:
mkdir -p /srv/www/subdomain/{htdocs,cgi-bin}
What’s missing now? Right, the reverse Proxy so we have to add two new lines to the definition above:
John Ferguson Smart has written a great tutorial about how to integrate the Google Maps API with Java Servlets. He starts off with the usual introduction to Ajax, but soon goes on to more interesting topics, and after just a few lines he already has a fully functional Map in his application.
function load(){if(GBrowserIsCompatible()){var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-41.5, -187.5), 5);
map.addControl(new GSmallMapControl());
map.addControl(new GOverviewMapControl());
}}
Details are then added a few at a time, and what he ends up with is a fully fledged Maps Application, with asynchronous fetching of data and detail Overlays.
function processSiteData(xmlDoc){// obtain the array of markers and loop through it
siteMarkers = xmlDoc.documentElement.getElementsByTagName("marker");
displaySitesMarkers();
}function displaySitesMarkers(){
map.clearOverlays();
for(var i = 0; i < siteMarkers.length; i++){// obtain the attributes of each markervar lat = parseFloat(siteMarkers[i].getElementsByTagName("latitude")[0].firstChild.nodeValue);
var lng = parseFloat(siteMarkers[i].getElementsByTagName("longitude")[0].firstChild.nodeValue);
var id = siteMarkers[i].getElementsByTagName("id")[0].firstChild.nodeValue;
var label = siteMarkers[i].getElementsByTagName("name")[0].firstChild.nodeValue;
createSiteMarker(new GLatLng(lat,lng),label,id);
}}
All is explained step by step and is really easy to follow, if only all tutorials were this easy
P.S.: I like people that aren’t too shy to add some humour to their posts:
Of course, the advantage of storing geographical site coordinates in a database is that they can be updated as necessary; for example, in the case of a major earthquake or land slide, or continental drift, or to keep track of the famous migrating mud-transporting camel caravans of the central Elbonian steppes.
The concept was very well received - many smiles around the room when the idea was introduced. With Joe talking and Bram typing they took a pre-created boilerplate (configuration and some of the simpler tasks completed beforehand due to the time constraint) and turned it into a simple, but fully functional, multiplayer game.
I’m happy to report that I don’t have an awful lot to report regarding the complex inner workings of the application. Those familiar with DWR will find that the code contains few things unfamiliar or even ‘advanced’. As someone with only an intermediate DWR skillset - I had no trouble following the code Joe and Bram were creating. The final product was simple but functional - intentionally avoiding features that would improve the game but cloud the demo. Joe and Bram were able to hide from each other, fire, and even chat as they played. The code for the demo can be found here (near the bottom at the time of this post).
The most contested point was the use of “reverse ajax†to sync with the current server status at timed intervals. Reverse Ajax was introduced in v2.0 m1 (current stable release is v1.1.3) Concerns centered on potential security issues - Joe explained that they do as much as reasonably possible to stop malicious users, but in the end if you are a malicious user: there are many ways that you can bring the server down without DWR.
image stolen from this post on Joe’s blog where he also talks about the concept of developing the game live in a session
Especially because I’m currently using DWR for some minor projects and I just love it
), so I’ve skimmed through my del.icio.us account looking for stuff to add and here are my favorites:
1 Comment
