Integrating Dojo in blogger post

So I have been working on integrating Dojo within my blog... so here goes.

Open lightbox

So first, I should thank this blog post on integrating an external JavaScript module within a blogger post. So essentially all the work is done in an external file. But this document still contains the markup that the dojo parser parses to render the light box.

Click on the 'Open lightbox' link below and it will open up a dojo lightbox. These are photos of a sunset I took while in Vancouver in August. Use the keyboard cursor keys to navigate through the photos.

<div class="tundra">

<a href="..." dojoType="dojox.image.Lightbox" group="sunset" title="A beautiful sunset">Open lightbox</a>
<a href="..." dojoType="dojox.image.Lightbox" group="sunset" title="The colors where AMAZING"></a>
<a href="..." dojoType="dojox.image.Lightbox" group="sunset" title="Taken from my friend's apartment"></a>
<script type="text/javascript" src="http://ecodevil.net/dev/blog/blogger_lightbox.js"></script>

</div>

Thats it.

The Mobile Web

So recently the guys in the ArcGIS Mobile team (Fred, Jeff & Myles) asked me whether I could put together a blog posting about integrating the JSAPI to work in mobile browsers. So here's a first of several blog posts on The Mobile Web. If you're interested in the bringing your ArcGIS Server content to mobile devices, watch the the ArcGIS Mobile Blog.

This particular post simply shows how to make REST calls and doesn't have any JSAPI, but this one will work on any mobile browser, even IE Mobile.

You can find the page hosted here. So whip out that mobile phone of yours and go to http://ecodevil.net/dev/blog/basicMap.php and check it out. Click the +/- to zoom in/out and the N/E/S/W to pan in the specific direction.

DDD & AjaxExperiece

A couple of weeks ago the Dojo guys gave me the opportunity to present the ArcGIS JavaScript API at the Dojo Developer Day and Ajax Experience. Here's a wrap up on the proceedings from both at Uxebu's blog and Sitepen's blog. Btw, I'm in the right corner in the red shirt in the group photo. I wore my Dojo shirt the previous day and didn't wear it that morning.

SVG events in Safari vs FF3/Opera

So don't get me wrong... FF3 is awesome, but when it comes to rendering HTML/SVG/JavaScript... I think WebKit kicks Gecko's butt! So recently while doing some R&D, where I wanted to layer 2 SVG containers on top of each other, I noticed that the events actually work differently. So check out this sample.

So this is a really simple test page. The code essentially creates and adds an svg element (z-index:0) to the root div. To this new surface, a rectangle is added to it. Next an image to the root div (z-index:1). Finally another svg element (z-index:2) is created and added to the root div and a circle added to it.

Now to test this out, make sure to have Safari/WebKit's console open and in Firefox, Firebug. Click on the 'green rect', 'image', the 'red circle' & finally the 'white background' div.

In Safari, the output looks like:

rect : rect
IMG : image
circle : circle
DIV : div

Where as in Firefox (and Opera)

svg : surface2
svg : surface2
circle : circle
svg : surface2

So basically you can see that, since the 2nd surface is above in z-ordering, it traps all events outside the itself and doesn't let it go through. But Safari seems to have a different algorithm for determining the event source/target. Googling around, I have not been able to find more details on how the each rendering engine determines the event source/target.