Web Info & Tutorials

Over at Quirksmode.org, Peter-Paul Koch is researching if Event Delegation which works splendidly with click events is also possible for blur and focus.

Event Delegation means that you piggy-back on the behaviour of browsers to report events on child nodes up the tree to their parents. Instead of applying event handlers to each element you apply a single one on the main parent element and use the event target to determine which element was activated.
The benefits of Event Delegation are that you use a single event handler for a unknown amount of nodes. This is very handy when it comes to developing dynamic menus where the data is pulled via Ajax.

So far, PPK found that apart from IE all browsers play along, and there is a test page to give him feedback.

Davey Waterson of the Aptana Jaxer team has posted an article on using jQuery on the server-side with E4X and more that shows an example of server-side Ajax with a popular framework.

The article describes a polling application that features:

• Using jQuery server-side to manipulate a DOM before it's sent to the client
• Doing some database / SQL interactions, server-side in javascript of course
• User sessions in javascript (Jaxer.session.set('status', status);)
• Using E4X on the server-side.

There are fun little features such as nuking portions of the page if the permissions call for it:

Since the application delivers no JavaScript itself, this would all work even if the user has JavaScript turned off, on a simple mobile phone, etc.

I had a funny feeling that we would see frameworks and tools starting to support Google App Engine. Appcelerator has added support into their SDK, so you can now create an App Engine project.

They just ported Tejus’s appTunes demo to the App Engine and deployed it at http://apptunes.appspot.com.

The example uses embedded Flex components and sound.

If you take a look at the source, you will see the declarative markup that Appcelerator goes for:

I expect to see other integration points for libaries, especially those that have server side back ends.

Jon Davis created Using.js, a simple library to manage dependencies with the goals of:

• Seperate script dependencies from HTML markup (let the script framework figure out the dependencies it needs, not the designer)
• Make script referencing as simple and easy as possible (no need to manage the HTML files)
• Lazy load the scripts and not load them until and unless they are actually needed at runtime.

To use the script you simply:

As we see more and more tactics for getting performance by doing tricks with when scripts are loaded, I expect to see more of libraries like this. The key is working out exactly what script needs to be loaded right away, after the DOM is around, and what can wait for later. How do you want to load the script? Dynamic script element? Via iframe? XHR + eval? They all have pros and cons.

Malte has continuing to impact on Joose, his meta goal grouping for JavaScript. He has additional a aggregation of documentation, including cookbooks that verify the news nicely. He also told us most a feature that is nearby and love to my Google heart:

Joose today includes a ultimate goal relational clerk for the Gears database in the examples section. If you hit Gears installed, you crapper run it.

It power separate its effort flat and then pass a collection application that displays the plateau of a plateau for classes that equal a database
tables. The warning has digit entities (Car and Person in the MyEntities module).

Declaring the entities with this proof-of-concept OR-mapper looks like
this:

PLAIN TEXT

JAVASCRIPT:

1.  
2. Module(“MyEntities”, function (m) {
3.  
4.    Class(“Car”, {
5.        isa:  ORM.Entity,
6.  
7.        has: {
8.            owner: {
9.                metaclass: ORM.HasOne,
10.                isa:       function () { return m.Person }
11.            }
12.        },
13.  
14.        classMethods: {
15.            tableName: function () {
16.                return “car”
17.            }
18.        }
19.    })
20.  
21.    Class(“Person”, {
22.        isa:  ORM.Entity,
23.  
24.        classMethods: {
25.            tableName: function () {
26.                return “person”
27.            }
28.        },
29.  
30.        has: {
31.            mother: {
32.                metaclass: ORM.HasOne,
33.                isa:       function () { return m.Person }
34.            },
35.  
36.            cars: {
37.                metaclass:  ORM.HasMany,
38.                isa:        function () { return m.Car },
39.                foreignKey: “owner”
40.            }
41.        }
42.    });
43. });
44.  

And whatever warning usage:

PLAIN TEXT

JAVASCRIPT:

1.  
2. // Create the mother
3. var care = new MyEntities.Person();
4. mother.name(“elke”);
5. mother.city(“Elmshorn”);
6. mother.save();
7.  
8. // Create the son
9. var mortal = new MyEntities.Person();
10. person.name(“malte”);
11. person.city(“Hamburg”);
12. person.mother(mother); // ordered the mother
13. person.save();
14.  
15. // Give the son 10 cars
16. for(var i = 0; i <10; i++) {
17.     var automobile = new MyEntities.Car();
18.     car.model(“3.”+i);
19.     car.brand(“bmw”);
20.     car.owner(person);
21.     car.save();
22. }
23.  
24. // refetch the mortal from the db
25. var personFromDb = Entities.Person.newFromId(person.rowid());
26.  
27. alert(personFromDb.mother().name()) // power signal ‘elke’
28. alert(personFromDb.cars()[0].brand()) // power signal ‘bmw’
29.