Category: Sample Code

Object JavaScript – Code Walkthrough of a jQuery UI Widget

imageIn the last post, Building Stateful jQuery UI Plugin Using Widget Factory, you were introduced to the working structure of jQuery UI Widgets. You learned that it uses the factory pattern is a way to generate different objects with a common interface. And that it Widget Factory adds features to jQuery plug-in.

jQuery UI Widget Factory is under jQuery UI, but you can use it separately for your own widgets. In this post, you will learn the steps you can take to build your own widget. This posts walks through an implementation of the filterable dropdown from Adam J. Sontag’s and Corey Frang’s post: The jQuery UI Widget Factory WAT? 

My motivation in this post is to show what goes where when you are designing your widgets. And provide some direction in the steps you can take when building a widget from scratch.

Continue reading

Advertisements

Object JavaScript – Building Stateful jQuery UI Plugin Using Widget Factory

imageIn this post, you will learn step-by-step to build your own custom, reusable, testable jQuery UI widget.

You will extend the jQuery library with custom UI code and then use it on a page. The initial plug-in will be trivial to demonstrate the jQuery Widget Factory pattern. You will provide properties that you can change to change the look of your widget and you will provide some methods that will respond to user input.

In this post example, you will learn how to create a simple click counter. Click a button, increase the count. The idea is to show you the steps to create a jQuery UI Widget.

The Widget Factory system manages state, allows multiple functions to be exposed via a single plugin, and provides various extension points.

Continue reading

Dev Patterns – Dependency Injection (aka Inversion of Control)

diamond-cubes-2-pattern-clip-art“Dependency Injection” (DI), also more cryptically known as “Inversion of Control” (IoC), can be used as a technique for encouraging this loose coupling.

John Munsch explains it like this:

When you go and get things out of the refrigerator for yourself, you can cause problems. You might leave the door open, you might get something Mommy or Daddy doesn’t want you to have. You might even be looking for something we don’t even have or which has expired.

What you should be doing is stating a need, “I need something to drink with lunch,” and then we will make sure you have something when you sit down to eat.

In designing an object-oriented application, a major tenet of design is “loose coupling”. Objects should only have as many dependencies as is needed to do their job – and the dependencies should be few.

There are three primary approaches to implementing DI:

  • Constructor injection
  • Setter injection (also called Property injection)
  • Method injection

Constructor injection uses parameters to inject dependencies. In setter injection, you use setter methods to inject the object’s dependencies. Finally, in interface-based injection, you design an interface to inject dependencies.

Continue reading

Azure – 24 Must Know Cloud Patterns With Sample Code

azurecloudYour application may start with a single idea as a single website. It will often have a website, some business logic tied to a database. Those stand alone applications have a way of adding features.

Or your application may want to be “cloud ready” from the beginning. The vision may begin with a set of servers, each doing a specific task, each that can be scalable to meet demand, provide reliability. As soon as you take that second step, it’s time to look to well known practices.

Microsoft’s Patterns and Practices team has put together architectural guidance to help you design your cloud applications,  Cloud Design Patterns: Prescriptive Architecture Guidance for Cloud Applications. Each pattern is provided in a common format that describes the context and problem, the solution, issues and considerations for applying the pattern, and an example based on Azure.

It also discusses the benefits and considerations for each pattern. Most of the patterns have code samples or snippets that show how to implement the patterns using the features of Microsoft Azure.

Although the guidance helps you adopt Azure, the patterns are relevant to all kinds of distributed systems, whether or not they are  hosted on Azure or on other cloud platforms.

Continue reading

Object JavaScript – ECMAScript 6 Code Preview

imageECMAScript 6 specification and implementation is underway and promises to bring many of the features that you’ve learned about in the posts on Object JavaScript.

This post gives you an idea of what the code looks like in ECMAScript 6. This post doesn’t cover ever feature. But you will learn about how ECMAScript 6 relates to:

  • Scope
  • Arrow Functions and Lexical this
  • Default Function Parameters
  • Classes
  • Inheritance
  • Modules
  • for-of
  • Arrow functions
  • Promises

I won’t come close to covering all the features. But you can get an idea of how ECMAScript 6 works to support the idea of Object JavaScript. Look to the references and to the specification for information about: Parameter handling, multiple return values, collections, destructuring, rest parameters & spread operator, iterators, array comprehension, and more.

Special thanks to Axel Rauschmayer for many of the snippets.

Continue reading

Tip – Serving .json File on Windows (IIS, IIS Express)

imageSo what is wrong with the simple getJSON call? Why doesn’t it work?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
     $.getJSON('data.json',function(result){
      alert("success");
    });
  });

It works fine in Firefox 11 but not in IE and Chrome. By default, IIS6 does not serve .json (no wildcard MIME type). So you will see a 404 not found thrown.

By default, IIS in Windows Server 2003 and beyond does not serve files that aren’t of a MIME type that it knows about (instead returning 404 errors).

So, to serve up JSON files you need to add a MIME type to IIS to allow it to serve that type of file. You can set it at the site level or at the server level.

Continue reading

Object JavaScript – Code Walkthrough Initializing a Module That Needs RequireJS, jQuery, LoDash

image6[1]RequireJS is a JavaScript file and module loader. In Getting Started with Modules Using RequireJS, you have learned a lot about how you can use it to load your dependencies using define() and require().

In this code snippet, you will learn how you can load the dependencies, initialize a module with values that you pass in, and then make public some of the methods.

And you will see how to put files in folders to help keep identify which modules you write in your app and which modules are from third parties.

Continue reading

Snippets – Filtering JSON Using jQuery Grep, Filter, Map

6327_image_58FAEDFAWhen you have a JSON array, you may want to get one or more items from the array and display. jQuery offers two functions that can help: grep and filter.

  • $.grep(). Finds the elements of an array which satisfy a filter function. The original array is not affected.
  • $filter(). Reduce the set of matched elements to those that match the selector or pass the function’s test.
  • $.map(). applies a function to each item in the array, thus returning a modified array

In other words, $.grep() removes items from an array as necessary so that all remaining items pass a provided test; .filter() constructs a new jQuery object from a subset of the matching elements.

Also, filter is intended to be used with html elements, and that is why it is a chainable function that returns a jQuery object and it accepts filters like “:even”, “:odd” or “:visible” etc. You can’t do that with the grep function, which is intended to be a utility function for arrays.

Continue reading

Single Page App – isLoading jQuery Plugin to Indicate Content Loads

imageWhen you’re loading information using jQuery AJAX, you may want to provide visual feedback when loading data or for any action that would take time.

In this Snippet, you will learn how to:

  • Load JSON data from a getJSON call to our server.
  • Show and hide a spinning indicator inside a div.
  • Bind the incoming data to a view model object.
  • Use the view model to populate an external template.

image

Then once the page is loaded, it will display the data based on an external template.

image

And we’ll provide some tips on how you you can use the IsLoading library to display the loading indicator on top of the page while loading and on top of the div itself.

Continue reading

Single Page App – Separate UI from Model Using Publish, Subscribe Pattern using AmplifyJS

image8AmplifyJS is a set of components designed to solve common web application problems with a simplistic API. Amplify’s goal is to simplify all forms of data handling by providing a unified API for various data sources.

Your application may need more sophisticated control than is offered in Knockout, which provides for automatic updates in your view model. Knockout provides the observable pattern. But in the pattern described here Amplify’s publish/subscribe you do the publishing and the subscription.

In this post, you’ll learn the basics of how you can implement publish/subscribe pattern on the client using Amplify.

Continue reading

Single Page Apps – Retrieving, Caching Server Requests Using AmplifyJS

image8You may want to use storage to store data. You can save the data your user has entered in a wizard. Or you might want to save data so you can provide an offline experience. Or you may want to store user preferences. Local storage is a good idea anytime you do not want, or need your user or your application to start all over.

AmplifyJS is a very neat library that provides a consistent API to handle client storage that works in most browsers.

In this post, you will learn to retrieve the data through amplify.request without concern for data caching, server interface, resource location, data types, wrappers, and all the other specificities of the client/server interaction.

Requests made through amplify.request will always be resolved asynchronously, even if the resource invokes the callbacks immediately.

You will probably need jQuery for Amplify Request. The default request type shipped with AmplifyJS does utilize jQuery AJAX, but you can just as easily create a new request type that uses Dojo, MooTools, etc.

However the publish/subscribe and store components do not use jQuery at all.

Continue reading

Single Page Apps – Store Your Data Locally in Knockout Using AmplifyJS

image8[3]Amplify store and Knockout can be great partners. For example, you can use client storage to improve user experience, remembering user preferences or previously entered values such that the user doesn’t have to start all over.

There is a tutorial on Knockout that provides for client storage. In the tutorial, Knockout uses Amplify to restore user data when the user revisits the site.

You can augment Knockout observables with additional functionality, by using extenders.

You can use extender to automatically store and restore any observable property. Continue reading

Single Page Apps – Writing a LoDash/Underscore Plugin for SammyJS

Sammy.jsAlthough SammyJS is a router that provides you with file loading of data and templates. You load templates and data using Sammy’s plugins.

In this tutorial, you will learn how you can use sammy.load to load JSON data, and then use LoDash (or Underscore) to _.find() to retrieve the item based on the value provided in the sammy route. And you will combine the template and data using a custom Sammy plugin.

Why LoDash?

LoDash or Underscore provide great methods for working with collections and arrays. There are subtle differences in these two libraries. But for this tutorial, they provide the same functionality.

Use these libraries to “slice and dice” your data. In the case of this tutorial, you will use _.find(). In your real life applications, there will be more complex ways of manipulating your data, that LoDash can provide.

LoDash includes _.template(). The template method compiles a set of HTML code and turns it into JavaScript. The templates can include _ and complex JavaScript functions.

Continue reading

Snippet – Fixing Errors When Using jQuery, Sammy, RequireJS

Sammy.jsWhile I was trying out Sammy.js with Require.js I kept getting several errors, among them:

  • jQuery is not defined
  • Uncaught TypeError: Object function ( selector, context ) { // The jQuery object is actually just the init constructor ‘enhanced’ return new jQuery.fn.init( selector, context, rootjQuery ); } has no method ‘sammy’

Here’s a code sample that shows how you can get the two to work together.

Continue reading

Single Page Apps – Deep Dive into Loading Templates Using Sammy, Mustache, RequireJS

Sammy.jsIn this tutorial you will learn how Sammy renders a Mustache template and then load and interpolate the template. In addition, you will use Sammy and templates as Asynchronous Module Definition (AMD) modules.

The tutorial builds on the previous postings Getting Started with SammyJS – Routes, where you learned you can use Sammy to provide client side routing, and Loading JSON Using Sammy where you learned how to load JSON data using sammy.load().

This tutorial goes beyond the getting started with Sammy tutorial, JSON Store, provided in Sammy’s documentation. In this tutorial you will learn what happens behind the scenes with each of the important calls. The idea is to help you choose the right Sammy calls as your application gets more complex.

Continue reading