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…

IIS Request Filtering to block HTTP Verbs (For example Trace)

The issueRequest Filtering is a built-in security feature that was introduced in Internet Information Services (IIS) 7.0. This can be used to block specific verbs like "Trace".

When request filtering blocks an HTTP request, IIS 7 will return an HTTP 404 error to the client and log the HTTP status with a unique substatus that identifies the reason that the request was denied. Verb Denied.

HTTP SubstatusDescription404.5URL Sequence Denied404.6Verb Denied404.7File Extension Denied404.8Hidden Namespace404.1Request Header Too Long404.11URL Double Escaped404.12URL Has High Bit Chars404.13Content Length Too Large

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…