New release of Bildr

I have submitted a new release of my Bildr project on OpenNTF.

In case you are unaware of this project, the application allows you to quickly upload and share images within your network. Images are scaled and you can group them in albums.

The idea behind this app was to have a real case scenario to learn XPages, and frankly the learning experience has gone beyond expectations. I also have to thank Mark Leusink for his contributions.

This release fixes the problems I had with Google Maps. Although the solution is not ideal ( I would like to group markers) due to lack of time I am now satisfied with it.

I also used DDE and it’s search capabilities to remove redundant design elements.

Below you can see some screenshots of the application:

 

 

 

Landing page … Google maps

Some time ago I asked if anyone has recommendations for a geotargeting service.

Since the service from Google is simple and free I implemented this one for a demo for a customer. Below you can find the code. For now I display a dojo dialog when there are visitors from Canada, United States and … Sweden (because I am located there). You could of course do a redirect automatically or store the user selection in a cookie for next time. You get the point.

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221; dojoTheme=”true”
dojoParseOnLoad=”true”>
<xp:this.resources>
<xp:styleSheet href=”../resources/dojo.css”></xp:styleSheet>
<xp:styleSheet href=”../dijit/themes/tundra/tundra.css”></xp:styleSheet>
</xp:this.resources>
<script type=”text/javascript”
src=”http://www.google.com/jsapi?key=ACME_GOOGLE_MAPS_KEY”&gt;
</script>
<script type=”text/javascript”
src=”https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js”&gt;
</script>
<script>
dojo.require(“dojo.parser”);
dojo.require(“dijit.Dialog”);
dojo.require(“dijit.form.TextBox”);
dojo.addOnLoad(checkPref);
function checkPref(){
var location_redirect = getCookie(“site_pref”);
if (location_redirect == “”){
showDialog();
}
else{
top.location.href = window.location = location_redirect;
}
}
function showDialog(){
var cl = google.loader.ClientLocation;
var ccode = cl.address.country_code;
if ((ccode == “CA”)||(ccode == “US”)||(ccode == “SE”)){
//document.getElementById(‘your_location’).innerHTML = “Your country code = ” + ccode;
var dlg = dijit.byId(‘dialog1’);
dlg.show();
}
}
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ “=” +escape(value)+
((expiredays==null) ? “” : “;expires=”+exdate.toUTCString());
}
function getCookie(c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + “=”);
if (c_start!=-1){
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(“;”,c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return “”;
}
function loadPreferences(){
var location_redirect = getCookie(“site_pref”);
top.location.href = location_redirect;
}
</script>
<div dojoType=”dijit.Dialog” id=”dialog1″ title=”Select country”
style=”display:none;width:600px;”>
<h1>
Welcome to
<b>ACME</b>
</h1>
<div id=”your_location”></div>
<table border=”0″ width=”100%”>
<tr>
<td colspan=”2″>Visit:</td>
</tr>
<tr>
<td>
<b>USA site</b> <a href=”http://www.acme.com/us&#8221; target=”_top”>(English)</a>
<b>USA site 2</b> <a href=”javascript:setCookie(‘site_pref’,’http://www.acme.com/us&#8217;,’1000′);loadPreferences();” target=”_top”>(English)</a>
</td>
<td>
<b>Global site</b> <a href=”http://www.acme.com/&#8221; target=”_top”>(English)</a>
<b>Global site2</b> <a href=”javascript:setCookie(‘site_pref’,’http://www.acme.com/&#8217;,’1000′);loadPreferences();” target=”_top”>(English)</a>
</td>
</tr>
</table>

<div id=”divider”
style=”border-top:dashed 1px grey;margin:10px 0 10px 0″>
</div>

<div style=”float:left;width:272px;”>
<table width=”100%”>
<tr>
<td>
<b>Americas</b>
<br />
Canada,
<a href=”http://www.acme.com/us&#8221;
target=”_top”>
English
</a>
<br />
Latin America regional site,
<a href=”http://www.acme.com/cl&#8221;
target=”_top”>
Español
</a>
</td>
</tr>
<tr>
<td>
<b>Asia Pacific</b>
<br />
Asia Pacific regional site,
<a href=”http://www.acme.com/sg&#8221;
target=”_top”>
English
</a>
<br />
Australia,
<a href=”http://www.acme.com/au&#8221;
target=”_top”>
English
</a>
<br />
中国(China),
<a href=”http://www.acme.com/cn&#8221;
target=”_top”>
中文
</a>
<br />
日本 (Japan),
<a href=”http://www.acme.com/jp&#8221;
target=”_top”>
日本語
</a>
<br />
남한 (South Korea),
<a href=”http://www.acme.com/kr&#8221;
target=”_top”>
한국어
</a>
</td>
</tr>
</table>
</div>

<div>
<table width=”300px;”>
<tr>
<td>
<b>Europe</b>
<br />
CIS,
<a href=”http://www.acme.com/ru&#8221;
target=”_top”>
Россия
</a>
<br />
Suomi (Finland),
<a href=”http://www.acme.com/fi&#8221;
target=”_top”>
Suomeksi
</a>
<br />
Norge (Norway),
<a href=”http://www.acme.com/no&#8221;
target=”_top”>
Norsk
</a>
<br />
Polska (Poland),
<a href=”http://www.acme.com/pl&#8221;
target=”_top”>
Polski
</a>
<br />
Sverige (Sweden),
<a href=”http://www.acme.com/se&#8221;
target=”_top”>
Svenska
</a>
<br />
United Kingdom &amp; Ireland,
<a href=”http://www.acme.com/uk&#8221;
target=”_top”>
English
</a>
</td>
</tr>
<tr>
<td>
<b>Middle East and Africa</b>
<br />
Africa regional site,
<a href=”http://www.acme.com/za&#8221;
target=”_top”>
English
</a>
</td>
</tr>
</table>
</div>
</div>

</xp:view>

Here an example how it will look like: