Skip to main content

Writing your own JQuery Plugin and Widget



Ok, I'll admit it. When I was initially asked to work on the front-end components of our web application, I wasn't too happy. I thought I'd be writitng lines and lines of procedural Javascript code because Javascript is an inadequate language which does not supoort OOP principles ... or so I thought.

A few pluralsight videos later I discovered how JQuery was a brilliant JavaScript library that just simplified way I wrote javascript. Don't get me wrong, There is still room for improvement but it does let you do some pretty funky things.

In this post I'll be talking about writing your very own JQuery plugin and widget. My main reason of writing this post was for it to facilitate as a prequel to my next post about wrapping the Slick Grid. I've used a lot of recommendations from Project Silk.

So here we go ..


JavaScript, jQuery and jQuery UI.


JavaScript is a client-side scripting language, and also a prototyping language which means that its objects can have properties added dynamically at any time. The language itself is fine, but can be quite frustrating when different browsers get involved, and there are a few things that need smoothing over.

So, this is where jQuery steps in. jQuery is a JavaScript library that's been developed to get rid of most of those annoyances. The library simplifies a lot of common tasks, such as:
  • Selection, traversal and modification of DOM elements
  • Making AJAX requests
  • Cross-browser support (this is built into jQuery and virtually becomes a non-issue)
  • Extensibility and modular development with plugins and jQuery UI widgets
jQuery UI is a plugin for the jQuery library, that simplifies the process of creating specialised widgets to use in the web. You can think of widgets as being similar to ASP.NET user controls. A jQuery widget is targetted at an HTML element, and augments that element with richer functionality. You might have a simple, empty <div>, which is then used by a jQuery widget to display a customisable grid, or a text <input> that is turned into a date/time picker, or an autocomplete input.

JavaScript Objects, jQuery Plugins, and jQuery UI Widgets

Most of the client-side code that you're writing will fall into one of three categories:
  • UI Modules - Adding, removing and modifying UI elements
  • Behavioural Modules - Adding behaviour to elements
  • Infrastructural Modules - Completely separate from UI concerns
And the types of objects we work with will be:
  • JavaScript Objects - Collection of properties which may be functions, or just simple data.
  • jQuery Plugins - Extending the functionality of the jQuery framework
  • jQuery UI Widgets - Similar to User Controls, associated with HTML / DOM elements, encapsulates complexity

JavaScript Objects

These can be:
  • Native objects - Supplied by JavaScript, e.g. String, Number, Array, Image, Date, Math... etc.
  • Host objects - Supplied by the client/browser environment, e.g. window, document, forms... etc.
  • User-Defined objects - Defined by you, the programmer.

jQuery Plugins

Notice how an anonymous function is declared, which accepts a single argument ($). On the final line, the anonymous function is called with (jQuery).


The plugin itself is defined within an object, which is passed to jQuery's extend function.



jQuery UI Widgets

This offers a clear way of developing widgets that will require some setup, cleanup and a way of passing arguments in (similar to a normal constructor).

Some of the standards functions in a jQuery UI widget are:
  • _create - Used to perform all the general setup and attaching bindings to various different elements, instantiating children and injecting elements into the HTML as necessary.
  • destroy - Used to perform a complete cleanup of the widget and its elements.
  • options - Allows us to pass options into the widget when it is being instatiated.

Project Silk Recommendations


Comments

Popular posts from this blog

Internet Information Services(IIS) reveals its real or internal IP Address

In the ever changing world of global data communications, inexpensive Internet connections, and fast-paced software development, security is becoming more and more of an issue. Security is now a basic requirement because global computing is inherently insecure.

Keeping that in mind, we recently ran our flagship product through a security audit. It was such a helpful exercise in tying-off any remaining lose ends in our application in terms of application security. 
Based on the security audit report, there was a relatively minor issue that appeared when accessing the /images directory of our application. Turns out that the Location response header of the 301 request returns an Internal IP address. The issue is detailed below.

Issue reportedInternet Information Services (IIS) may reveal its real or internal IP address in the Location header via a request to the /images directory. The value returned whilst pen testing is https://10.0.0.10/images.

The riskInformation regarding internal IP add…

C# Console app that displays twitter feed using Linq To Twitter (using Single User Authorization)

I recently had to add a twitter feed to my existing ASP.NET MVC 4 application. All I had to do was pull the last 10 tweets for a given user. It took me a while (shamefully, 3 hours) to get it working so I thought of writing a simple tutorial that explains how to pull a twitter feed for a console app using LINQ to Twitter.

LINQ to Twitter is an open source 3rd party LINQ Provider for the Twitter micro-blogging service. It uses standard LINQ syntax for queries and includes method calls for changes via the Twitter API
What took me long to figure out was the way twitter has implemented authentication using OAuth. Before you do anything, make sure you read the Learning to use OAuth document.
In my example, I used Single User Authorization. Single User Authorization is designed for scenarios where you'll only ever have one account accessing Twitter. i.e. if your Web site does periodic Twitter updates, regardless of user or you have a server that monitors general information. 
Before we be…

Unit Testing HttpContext.Current.Session in MVC3 .NET

We recently changed some functionality where during the "CREATE" process, we go through a wizard to save application data. This data is saved only to the session in the final step when the user clicks the final submit.

This was easy enough to implement but when I started writing unit tests for my static methods that Add, Update, Delete or Modify the contents of our application data in the session, I got the following error:
System.NullReferenceException: Object reference not set to an instance of an object.

Turns out I had forgotten to setup the HttpContext.
The following "TestInitialise" method fixed my problem :)

[TestInitialize]
public void TestSetup()
{
// We need to setup the Current HTTP Context as follows:

// Step 1: Setup the HTTP Request
var httpRequest = new HttpRequest("", "http://localhost/", "");

// Step 2: Setup the HTTP Response
var httpResponce = new HttpResponse(new StringWriter());

// Step 3: Se…