I spent a while on Friday searching for a way to replace the Euro symbol (€) in content pulled from a text area, using Javascript (jQuery). As it took me some time to track down an answer, here it is:

var theContent = $('#theTextArea').val().replace(/\u20ac/g, 'Euro');


This replaces using a global search to find instances of the euro symbol, and replaces them with the word “Euro”.  Using the actual Euro symbol (€) as the search pattern doesn’t work – so, for example, this won’t work:
.replace(/€/g, 'E');

Instead, this needs to be used: "\u20ac"

There were a  number of stand-out sessions for me. After a morning of fairly techy talks (including a first look for me at Django, given by Bartosz Ptaszynski) there was a session by Pat Phelan & Alexia Golez called “Lunch is for Wimps”. This was an informal talk about some of the business challenges facing people who have, or are thinking about setting up their own tech business. There was some great advice and experience shared, but two things stuck with me when it all finished:

• The first was to “just go and do it“. So, either launch a product / service or set up a company, and then work on developing it further from there. It’s often too easy to keep working away on a project without it getting finished and seeing ever the outside world. Being in a situation such as this at the moment, they are some wise words for me to get finished up;
• The second theme that stuck with me was the need for community. By this I mean helping out others working in the same area when you can. Parallels were drawn between the openness of tech community in the US, and the situation here in Ireland. I agree with this type of thinking (which is why I liked the Tuesday Push idea so much). I don’t think that sharing contacts or writing a blog post is a major hassle, particularly when it’s helping someone that’s starting out. (although, obviously it depends on the circumstances – just in case I drown in spam after saying that!)

The second stand-out session for me was by Eoghan & Des from Contrast who gave a talk on Violent Web App Design (with some of the best slides I’ve ever seen for a presentation!).

They gave a lot of great advice on developing clean, usable web applications that are “opinionated” – that users will want to use, will see a personality in, and will identify with. They also motivated me to go and pull out some of the fade-in, fade-out messages I spent ages adding into my latest work of art.

Other sessions I was impressed with were those by David Behan (on sales), Alan O’Rourke of Spoitchild (looking for interface solutions for Toddle), and the parts of the new media panel that I saw.

Other Barcamp Cork Related Stuff:

• Alexia Reflecting
• Paul’s Review
• Damien’s After-thoughts on Barcamp II
• Tagged photos on Pix.ie

Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated. [from Docs]

So, why would you need Live Query? In cases where you are dynamically adding elements to a page (i.e. DOM) using jQuery, you may want events attached to them. So, for example, I have a page that has been loaded. In response to user actions, I want to add a link that, when clicked on, triggers a “click” event. Because this link element has been generated dynamically, it won’t match any of the CSS declarations or have the same behaviours of elements which were there when the page loaded.

You can see a live (and very simple) example of this. The code behind the example is:

$(document).ready(function()
{
/*
Without Using Live Query:
*/
$('#add_new_box').click(function(){
$('#box_holder').append('<div class="new-box"><a id="add-again" href="#">Add Smaller</a></div>'); });
// a problem here - this doesn't fire as expected...
$('#add-again').click(function(){
$('#add_new_box').append('<div class="small-box"></div>');
});
/*
Using Live Query:
*/
$('#lq_add_new_box').click(function(){
$('#lq_box_holder').append('
<div class="lq-new-box"><a id="lq_add-again" href="#">Add Smaller</a></div>');
});
$('#lq_add-again').livequery('click', function(){
$('#lq_add_new_box').append('<div class="small-box"></div>');
});
});    // end document.ready(function)

In the example, the first link clicked adds a <div> with a link inside it. This new link, when clicked, should add a smaller yellow box. However, because the “Add Smaller” link was added dynamically, it does not have the click behaviour associated with it. It’s here that Live Query comes in.

In the second part of the example, Live Query is used to bind a click event to the link that was dynamically added. This ensures that the (my) expected behaviour of clicking the link in the red box and having a smaller yellow box appear goes to plan.

Having a web application be as responsive as possible is a target that should always be set. Doing so can be achieved in lots of ways, one of them being to minimise the number of page reloads the user needs to sit through. For what I am working on at the moment, Live Query just added a big lump of responsiveness to the interface. A great jQuery plugin.

I’m heading to Cork for Barcamp next weekend (1st of November). There are lots of interesting sessions planned by the looks of things, and a good list of people attending so far. And it’s still a week away. The sessions cover everything from the technical to the business side of working with the web, with an interesting sounding one planned on developing a web app in a day (no details released for that yet though).

The post about session ideas on the Barcamp site gives a good feeling of the type of event they’re looking to develop:

BarCamp is a non-commercial unconference and, as such, straight company or product pitches are not appropriate. We don’t want to sound negative about this but it’s important. We all love our own companies and our own apps but speaking for 20 minutes about you isn’t really that interesting or educational.

…so, there’ll be no whoring your work then!!

The community spirit is alive and well in Cork too, with a meetup for the Irish Webmaster Forum members planned for the Friday night before, and pre- and post-barcamp food & drinks on the cards too.

I went to the Barcamp in Galway last year (when I was only a couple of days into working for myself) and found some of the talks (and people) really helpful. Given the number of both successful and up-and-coming Web companies based in Cork at the moment, I reckon there’s a lot to learn from talking to them. And, of course, there’s the opportunity to meet some nice people too!

If you’re interested, you can register over here…

Related articles by Zemanta

• Barcamp Cork Deux
• Pre Barcamp Cork dinner
• BarCamp Cork II
• Pre-Barcamp Cork Food

In this section, I’ll show how to use the Gears WorkerPool to carry out operations without affecting the user interface. Also included is a simple example of using the Gears HTTPRequest object to retrieve data from the remote database.

Read the first part of the tutorial.

Using the WorkerPool

The Gears Workerpool allows JavaScript to run in the background without affecting the performance of browser window. This means that the user’s browser won’t slow down or lock up while there is processing going on behind the scenes. This gives the  opportunity to create more intensive scripts, and to have your web application process information while the user carries on with their other work.


// create a workerpool
var workerPool = google.gears.factory.create('beta.workerpool');
// handle messages from the worker
workerPool.onmessage = function(a, b, message) {
console.log('Received message from worker ' + message.sender + ': \n' + message.body);
};
// create a child worker from a URL
var childWorkerId = workerPool.createWorkerFromUrl('/scripts/gears/gears_db_load.js');
// send the child a message... (messageBody, Unique Worker ID)
workerPool.sendMessage("loadAllTreat", childWorkerId);


When the function is called it creates a Workerpool object (more details from the Gears Workerpool API). This is used to create individual Workers that can be set to do different jobs. The Workers do not have access to the Window object, which means that they must interact by sending messages to each other.  The “workerPool.onmessage” callback above is an example of how Workers accept messages from each other (in this case, the details of the message (the Worker that sent it, and the message body) are being written to the Firebug console window.

The line:

var childWorkerId = workerPool.createWorkerFromUrl('/scripts/gears/gears_db_load.js');

is creating a Worker from an external script – gears_db_load.js (more on that in a moment).  The createWorkerFromUrl method returns a unique id value for the Worker – it is using this that the destination of messages sent between Workers is known.

The final line above sends a message to the Worker; in this case, telling it what action to take. The second parameter is the id value of the Worker, which allows the message to be routed to the correct place.

My First Worker


// gears_db_load.js
/*
Workerpool JS to load remote data to local db after Setup
*/
(function(){
var wp = google.gears.workerPool;
var sender; // Parent Worker ID
// handle incoming messages:
wp.onmessage = function(a, b, message) {
try{
var msg = message.body; // what was the message
sender = message.sender; // Where did the message come from
var resp; // response to be returned to the Parent Worker
switch (msg)
{
case 'loadAllTreat':
getAllTreatments(); /* call a function to do something...*/
break;
default:
resp = 'Oops...no message sent!!';
wp.sendMessage(resp, sender);
break;
}
} // try
catch(ex)
{ // send back an error message if needed
wp.sendMessage('Error in worker: '+ err.message, sender);
}
} // onmessage


// handle any errors that come up...
wp.onerror = function( err ){
wp.sendMessage('Error in worker: '+ err.message, sender);
return true;
}

This is creating a new Worker, and uses the onmessage callback to check what message has been passed to it by the sender. A switch statement is used to decide what action is needed, based on the message passed in. In this example, if the message is “loadAllTreat" the function getAllTreatments() is called, otherwise, a message is passed back to the sender.

Also included is an onerror callback that is used to return an error message to the sender, should an error occur.

Gears HTTPRequest

The getAllTreatments() function uses the Gears HTTPRequest to get data from the server using AJAX. The code below demonstrates carrying out the request, and parsing the JSON response from the server. [Note: it stops short of doing anything with the data returned - this will depend on the application in question]

function getAllTreatments(){
var request = google.gears.factory.create('beta.httprequest');
// get Treatment & Treatment Category Data
request.open('GET', '/path/to/my/data/');
request.onreadystatechange = function() {
if (request.readyState == 4) {
try{
response = request.responseText;
var jsResp = json_parse(response); // using http://www.JSON.org/json_parse.js
//...
// do something with the json response, for example, insert it into local database..
//...
}// try
catch(ex){
wp.sendMessage("Worker Error: line - "+ ex.lineNumber + " Ex: "+ ex.message, sender);
} // catch
} // readystate
}; // onstatechange
request.send();
} // getAllTreatments()

The “var request” holds a Gears httpRequest object. It needs a place to request the data from, which is added using “request.open”, and supplying request type (“GET”) the path to the data (‘/path/to/my/data’). When the request completes, the if statement within the onreadystatechange callback is triggered. This parses the response (in this example, the server is supplying a JSON response) using json_parse (available from: http://www.JSON.org/json_parse.js.

The example above stops short of doing something with the response after it has been parsed. One example of what could be done with the data, is to insert it into the local database.

Other Alternatives

There are a number of options available for implementing offline web apps. Some examples include:

• Using a client side JavaScript database such as TaffyDB, although this doesn’t allow data to persist between sessions.
• Dojo Offline storage – View API
• Flash based storage options (used for in-browser storage)
• HTML 5 offline storage options

Related

• Internet-free Web Applications – Less technical perspective on offline web apps on my work blog.
• What’s New With Gears -Interesting YouTube Video (54mins long)

Offline access provides a way for a user to interact with the application when an Internet connection is unavailable, something “traditional” web applications cannot do. Gears also provides a means to improve the performance of apps by storing all the files necessary for them to operate on the user’s computer (meaning no need for downloads of images, script files, css, etc). An example of this is shown below.

Gears achieves this by providing a number of features through its API:

• A “Localserver” capable of serving files stored on the user’s machine, rather than relying on a remote web server;
• A local database (SqlLite) for storing information that can be queried & manipulated locally;
• Access to a “Workerpool” which allows multiple JavaScript processes to run simultaneously – something which allows scripts to run in the background without causing the user interface to slow down;
• Other APIs available include access to HttpRequest (for use in Workerpools using AJAX), the ability to create desktop shortcuts, and a Timer.

For Gears to be used, it must firstly be installed on the user’s machine. To protect users, they must opt-in to allow certain operations to be carried out (for example, installing a desktop shortcut, or creating a local database).

An Example

In an application under development, the user needs access to a set of data that is unique to them. The data changes infrequently, but is needed regularly as either a full set, or is queried based on different conditions. In a “traditional” web application, this means frequent calls to the server which takes time, bandwidth and server processing power.  However, Gears offers an alternative. By maintaining the data on the client side, and updating it as required, the burden is removed from the server. While using the Gears approach in this situation does allow for offline access, one of the main motivations was to increase the responsiveness of the application. So, how does it all work?

First off, you need to check Gears is installed and available:


<script src="gears_init.js"></script> <!-- This need to be included every time -->
<script type="text/javascript">
if (!window.google || !google.gears) {
location.href = "http://gears.google.com/?action=install&message=Please Install Gears ..." +"&return=http://www.example.com/setup/gears/installed/";
}
else{
var db;                // local database
var localServer;    // localServer
}// else

You can see that all the code is in JavaScript – this makes sense because it is all being run by the user’s browser, not a web server. The “gears_init.js” script makes sure Gears is installed (available from Gears documentation site).  If it’s not available, the user will be redirected to an install site, and then sent back to an address you specify (http://www.example.com/setup/gears/installed/). This script also creates a “Factory” object, which is used to create all other objects.

The next step is to create a database to use and add a table to it:
// Datbase Setup
db = google.gears.factory.create('beta.database');
db.open('treatmentDB');
db.execute('create table if not exists treatment ' + '(treatment_id int primary key, treatment_name text, treatment_price decimal, category_id int, timestamp int, toUpdate text)');
db.close();

This creates a database object, and opens the database “treatmentDB” (or creates it if it doesn’t exist). The “execute” command is used to run SQL commands (SqlLite version) against the database – in this case, if there is no table called treatment, create one. I also included two fields to ensure the database is up-to-date – a timestamp, and a toUpdate field (which holds true / false flag depending on whether a record has been added to the local database, but not yet updated in the remote database).

What’s Next?

In the second part of the tutorial, the database will be populated using data on the remote server. I’ll show an example of using a Workerpool to do this, so that the operation doesn’t affect the user interface. The data will then be queried and output.

Update: Part 2 of the Gears tutorial is now available

After much trawling of the Zend Framework Manual, ZF on Nabble, and Google, I finally tracked down how to include & manipulate radio buttons using Zend_Form (ZF 1.5).

The HTML code I was trying to output was something along the lines of:

<input type="radio" value="1" name="staff" /> <label>Jim</label> <br/>
<input type="radio" value="2" name="staff" /> <label>John</label>


Apparently, to do this the setMultiOptions needs to be used, although that this is required is not made clear in the Zend_Form Documentation. To do it:

Zend_Loader::loadClass('Zend_Form');
Zend_Loader::loadClass('Zend_Form_Element_Radio');
$form = new Zend_Form;

$staffname = array('Jim', 'John');
$staff = new Zend_Form_Element_Radio('staff');
$staff->setRequired(true)  // field required
->setValue('R') // first radio button selected
->setMultiOptions($staffname);  // add array of values / labels for radio group
$form->addElement($staff);

However, I also needed to specify the value attribute of each of the radio buttons. To set this value, the key value of the array being passed into setMultiOptions is used. So, for example,

$options = StaffTable::getStaff();  // get staff details from StaffTable
$staffname = array();
foreach($options as $st){
$staffname[$st['staff_id']] = $st['staff_name']; // set staff_id as the key
}

This is retrieving a recordset of staff id’s and staff names for use in the radio button group. It uses the value of staff_id for the key value of the $staffname array.  This will then be used as the value in the radio buttons. So if this $staffname array is passed into setMultiOptions, the output is: (note: the staff_id values for Jim and John were 32 and 28 respectively)


<label style="white-space: nowrap;"><input name="staff" type="radio" value="32" />Jim</label>
<label style="white-space: nowrap;"><input name="staff" type="radio" value="28" />John</label>

During all my searching, it seems that there’s an acknowledgement (but some frustration) that the documentation for certain parts of the framework (such as Zend_Form) is lacking in both detail and useful examples. That said, I’ve been finding it pretty useful despite the learning curve and the occasionally long bouts of searching the web to solve problems…

The images you get are much clearer than on the Google Maps close-ups of Galway. Although, they’re nothing compared to Google’s Streetview photography (for example, the Bay Bridge in San Francisco, below), but then that hasn’t made it to this side of the world yet.

To use it, you need to install a plugin (which is easy to do from their homepage), and view websites that are set up for it (including Google Images, Facebook, Bebo, Flickr, and lots more – full list on their site). When looking at pictures on these sites, you can choose to view in full screen by clicking on the “Play” button shown when you hold the mouse over an image, and you’ll see a “wall” of images that you can zoom in and out from.

An example of a portion of the results for a Google Images Search for “Galway” is shown below:

The plugin is fast, and works on Windows & Mac on Firefox, Internet Explorer & and Safari. There are tools for creating PicLens slideshows on their site, as well as a link to WordPress plugin.