RockyCode

BackboneJs is a great resource for creating rich UIs. Rich means interactive. Interactivity grows when the client can do more of the work of an application itself, becoming more reactive and dynamic to user feedback, able to be more event-driven, and hopefully more quick and responsive. Here's a short history of how we've been creating rich UIs and a simple example of a rich UI in backbonejs

When you start writing applications with BackboneJS, that means that you're dealing with some dynamic UI. There are elements being pushed into and pulled out of the DOM. I was having problems trying to reference DOM elements that were dynamically inserted into the DOM by other Backbone views. The fix was simple but not immediately obvious without cracking open Backbone.

As web developers we're used to being able to write a jQuery selector and easily get the DOM elements back on the page that we're looking for. In the case of jQuery Mobile, it's slightly more complicated because a "page" is a different beast.

In running functional automation testing, it has always been difficult to know whether the AJAX call has finished. Most people just put a Thread.Sleep() in the code, but it clutters up things and isn't accurate. To handle this appropriately, we found a way to watch for those JQuery AJAX calls and drive the automation accordingly.

Jquery has made developing javascript fun and enjoyable. It is a fantastic library that essentially allows the creation of library extensions on top of it via plugins. Jquery plugins are surprisingly easy to write and elegant to read and use. Here are a few tips on where to find good plugin candidates, design principles for plugins, and an outline of the basic structure that I have found most useful when writing plugins.

When developing forms, we web developers always have to guard against the dreaded double-form submit, when impatient (or even patient) users, depending on the latency of form submissions, hit the “submit” or “enter” button multiple times, causing havoc to the application.

Okay, Okay, I admit it. I'm javascript challanged. As a Java developer, I've looked down my nose at paltry javascript, treating it as a "me-too" technology trying to cash in on the hype surrounding java all these years.
As a result, I've missed out on a lot of js goodies. And, with javascript entering a renaissance of sorts, combined with the wildfire-like buzz surrounding libraries such as jquery, it's high time I learn some.

Jquery gives a great, easy-to-use mechanism for extending its API and creating your own plugins. For stuff that looks like it could be useful generally, you should really try to put it into a nice little plugin package. For submit buttons, there is a general thought that they shouldn't be clicked twice (especially for functions such as financial transactions), so I created a plugin that fits an app that I have been working on recently, where there are many, many submit buttons, saving very granual pieces of content through ajax requests.

Jquery plugins are a joy to use, and they are surprisingly easy to write. Everyone that writes lots of Jquery code should seek to take potentially-resuable functionalities of code and put them into a nice, compact plugin. In the app I've been working on, we have a lot of user-generated content that we don't limit the length on, so it can grow very large. To combat this, there is the UI pattern on the site that there is a "read more" link available to show the remaining text for the long-winded texts, while just showing a snippet otherwise ...

Jquery and other sweeto js frameworks have some awesomeness to help you change the css classes of various elements on the page with ease and grace. They have some very convenient functions to add and remove classes. These are uber-useful and highly recommended for saving you precious time and jiggawatts, but if you don't have jquery available to you, sometimes you may want to do this in raw javascript.

I've been fooling around with a thumbnail gallery that pulls up either an associated video or image. Here is how I got the workings to work.

Callback functions are a nice feature of Javascript. It's nice to be able to just use a function handle to show that it should be called when a certain something completes. Sometimes, however, we want to do more than just specify a function handle. We want to pass parameters. Why? Because sometimes the callback method cares about other data that was available before the original request. Here's an example:

Jquery has some awesome event-handling abilities. The elusive ability to pass parameters into these event callbacks seems way harder than it should be. Nevertheless, I have found *a* solution. I really doubt it's the best one. I really hope it isn't.

Meet the new web. The simpler the better. The cleaner the better. The more pleasing the colors the better. The fuzzier feelings the better. The latest fuzzies have been brought on by a slew of modals. Previously, we haven't used many modals in our layouts and designs, so here's the first working pattern on how to get this kind of stuff working.

This solution allows content to appear in a modal, validation errors to post back to the modal, edits made in a modal to persist back to the database, and success messages to appear on parent page.

For our view layer on our current project at work, we use JSF/Facelets + some jQuery goodness. I have found that at some times these two tech's have a hard time working with each other. I ocassionally have problems with the id's. Here's a nice little way to guarantee you id's are awesome.

What a journey of discovery! I haven't done much many-to-many relationship management in JSF. Django makes it quite easy. But at work recently, I did it in JSF. It was quite the experience, hereafter chronicled.