Aggregate Window Functions

If you have used SQL’s GROUP BY clause, then you are probably familiar with aggregates.  Aggregate functions allow you to perform a calculation over a set of data records. Each product sold by Adventure Works belongs to a subcategory which in turn belongs to a category.  For example, “Mountain-500 Silver, 48″ belongs to the “Road Bikes” subcategory and the “Bikes” category.  Adventure Works sells 4 categories of product: Clothing, Bikes, Accessories, and Components.  Imagine you wanted to see the total sales for each product category.  You can use the following query:

SELECT C.Name AS Category,
       SUM(D.LineTotal) AS TotalSales
FROM Production.Product P
  INNER JOIN Production.ProductSubcategory S
    ON S.ProductCategoryID = P.ProductSubcategoryID
  INNER JOIN Production.ProductCategory C
    ON C.ProductCategoryID = S.ProductCategoryID
  INNER JOIN Sales.SalesOrderDetail D
    ON D.ProductID = P.ProductID
GROUP BY C.Name

The query uses a GROUP BY clause to split the results into groups by Category Name.  It the performs the SUM aggregate function over the LineTotal for each group.  The final result set has a single row for each group.  The results are as follows:

As I said before, a GROUP BY clause forces the result set to only contain a single row for each group.  Sometimes you may want to preserve the original rows instead of returning only a row for each group.  Adventure Works splits Sales Orders up into individual line items called Order Details.  Each Order Detail that makes up an Sales Order contains the sales information for a single product.  You can take advantage of the OVER clause and aggregate window functions to find the percentage of the order’s total sale price that each Order Detail takes up.  Look at the following query:

SELECT SalesOrderID,
       ProductID,
       LineTotal AS ProductLineTotal,
       SUM(LineTotal) OVER (PARTITION BY SalesOrderID) AS OrderTotal,
       LineTotal / (SUM(LineTotal) OVER (PARTITION BY SalesOrderID)) * 100 AS SalePercentage
FROM Sales.SalesOrderDetail
ORDER BY SalesOrderID, ProductID

The syntax of an aggregate window function is [AggregateFunction] OVER ([PartitionClause]).  In this example, the OVER clause is used to partition the results by SalesOrderId and then perform a SUM over LineTotal just like we did in the previous query with the GROUP BY, the main difference being that the grouping and the aggregation is done without affecting the rows returned in the result set.  Instead of just returning a single row for each group, the OVER clause allows you to return each individual SalesOrderDetail row while still taking advantage of the power of aggregate functions.  This allows us to find the sales percentage of a product within an order.  Some of the results of the query are below:

Ranking Window Functions

Ranking window functions allow you to assign a number to each row in the result set.  The number gives an “order” to the rows based on the type of ranking function used.  SQL Server provides four ranking functions:

• ROW_NUMBER
• RANK
• DENSE_RANK
• NTILE

I will discuss ROW_NUMBER and RANK next.

The ROW_NUMBER Function

The ROW_NUMBER function assigns a value to each row in the result set based on its position in the ordered set.  This technique is often used to implement paging in database queries.  For example, imagine that we wanted to retrieve Products from the database ordered by Name in increments of ten at a time.  We could use the following query:

SELECT P.ProductID,
       P.ProductName
FROM
(
    SELECT ProductID,
           Name AS ProductName,
           ROW_NUMBER() OVER (ORDER BY Name) AS RowNum
    FROM Production.Product
) P
WHERE P.RowNum BETWEEN 1 AND 10
ORDER BY P.RowNum

This query utilizes the OVER clause, the ROW_NUMBER function, and inner queries to retrieve the first ten products ordered by Name.  The OVER clause this time uses the syntax [RankingFunction] OVER ([PartitionClause] [OrderByClause]).  You can optional provide the partition clause which will cause the row numbering to be restarted at 1 for each group.  In the above example, we are only using the ORDER BY clause.  This causes each row in the result set to be assigned a number based on the ordering by name.  This is contained within an inner query, and the RowNum column can then be used to limit the results based on the row number.  Above, we are simply returning rows where the row number is between 1 and 10.  To retrieve the next page of results we would issue the same query with 1 replaced by 11 and with 10 replaced by 20.  Of course, in reality we would programmatically set these numbers rather than hard-coding them.  The results of the query are below:

The RANK Function

One of the other ranking window functions is called RANK.  RANK, like ROW_NUMBER, will assign a number to each row in the result set.  The difference between RANK and ROW_NUMBER is how they number values that are equal to each other.  For example, if we are ranking sales people by how many sales they made, some sales people might have made the same number of sales.  If Alan made 6 sales, Bernie made 3 sales, Carl made 4 sales, and Dan made 4 sales, then they would be ranked as follows: Alan(1), Carl(2), Dan(2), Bernie(4).

Notice that Carl and Dan are both assigned 2 as their rank.  This is because the both made the same number of sales.  Also notice that the rank of 3 was skipped since there were two people with the rank of 2.  If you wish to not skip a number, then use DENSE_RANK instead.

An example of using RANK appears below along with the results:

SELECT S.FirstName,
       S.Sales,
       RANK() OVER (ORDER BY S.Sales DESC) AS SalesRank
FROM
(
	SELECT C.FirstName, COUNT(O.SalesOrderID) AS Sales
	FROM Sales.SalesPerson SP
	  INNER JOIN HumanResources.Employee E
		ON E.EmployeeID = SP.SalesPersonID
	  INNER JOIN Person.Contact C
		ON C.ContactID = E.ContactID
	  INNER JOIN Sales.SalesOrderHeader O
		ON O.SalesPersonID = SP.SalesPersonID
	GROUP BY SP.SalesPersonID, C.FirstName
) S
ORDER BY SalesRank

Conclusion

The OVER clause  and window functions available in SQL Server can provide a lot of value if you know how to use them.  I can’t tell you how many times I have seen team members struggling with a query where the OVER clause would be a perfect fit, but they did not even know of its existence.  The OVER clause is a valuable tool that should be a part of every developer’s SQL arsenal.

For the past year or so I have been working on a web development project using Java.  Like many Java projects, the project I was working on used 3rd party frameworks like Spring and Hibernate rather than utilizing the official Java EE stack.  Many developers have turned to these frameworks because the official Java EE stack had been notoriously cumbersome and difficult to use.  That is starting to change.  Java EE 5 started moving Java EE in a new direction.  Inspired by the ideologies of the 3rd party frameworks, the JCP, the standards community that works on the Java specification, began to make radical changes to the core of Java EE.  These changes have continued in the latest iteration, Java EE 6.

Interested in comparing Java EE 6 to my experiences with Spring and Hibernate, I picked up a book on the topic and began playing around with some code.  It was easy to see the influence of Spring and Hibernate in components such as JPA, Java EE’s ORM solution; a dependency injection component; and a focus on using POJOs.  The purpose of this article will be to give a brief overview of the core Java EE 6 technologies.

Java Persistence API

The Java Persistence API (JPA) is Java EE’s ORM solution.  It is meant to be a replacement for EJB Entity Beans, which have been deprecated in Java EE 6.  If you are familiar with Hibernate, then you will feel right at home with JPA.  In fact, many Hibernate developers played a role in the design and development of JPA.  For those of you unfamiliar with Object-Relational Mapping (ORM); it is a technique used to map your programs domain objects to the tables of your database.  ORMs usually make it very easy to perform CRUD operations on your data as well provide you with methods to query the underlying database using your object model rather than a standard SQL query.  ORMs commonly abstract away the underlying database and present a clean, cross-database API for accessing data.  JPA, like the latest versions of Hibernate, allow two methods of mapping your classes to the database: XML and annotations.  Following the trends of the day, use of annotations is encouraged over XML, but both are fully supported.  Using JPA is easy.  You only have to create a single, simple XML file containing database connection information, place the appropriate JPA annotations on your, and then you are ready to go!

Enterprise JavaBeans

Enterprise JavaBeans (EJB) is Java EE’s business layer solution.  The EJBs are where you will place most of your business logic.  The EJB engine will take care of many cross cutting concerns such as transactions and security for you.  EJB was heavily frowned upon in previous versions for being very heavy-weight and complicated.  Starting with version 3, EJB received a complete makeover.  It is now much more lightweight.  You can work almost entirely with POJOs and no longer need to inherit from EJB classes.  Like the rest of Java EE 6, EJB uses convention over configuration so the very little configuration you do have to do can be done using simple annotations.  There are two main types of EJB: Session Beans and Message Driven Beans.

Session Beans themselves can be classified into three types: Stateless, Stateful, and Singleton.  Stateless session beans are great for functionality that does not need to maintain state.  For example, a bean that simply queries the database to received the latest news updates can be stateless.  Because state does not need to be maintained, stateless beans can be kept in a pool and reused for multiple requests.  Stateful Beans are good for situations where you need to maintain state, such as keeping track of a customers shopping cart.  Stateful beans stay alive for the duration of the session.  Finally, Singleton Beans can be used for logic that you want to have available globally.  Only a single copy of Singleton bean is created and it is shared by all requests.

Message Driven Beans (MDB) are used to receive messages from Java Message Service (JMS).  An MDB can subscribe to messaging queues and can act on messages that appear in the queue.

JavaServer Faces

JavaServer Faces (JSF) is Java EE’s presentation technology.  It is similar to ASP.NET Web Forms in that it uses controls, called components in JSF, that emit HTML code.  Unlike ASP.NET Web Forms, however, JSF is an MVC framework.  Previous versions of JSF used JSPs as the view engine.  In Java EE 6, Facelets are the default view engine.  Unlike JSPs, Facelets are valid XML files that work a lot better with the JSF component model.  The model can be accessed through something called a managed bean.  A managed bean is a simple POJO that is annotated as a managed bean.  The properties of the managed bean can be used directly in the facelet and can be bound to the components.

Other Changes

The latest version of Java EE also provides dependency injection functionality.  This makes your application more loosely coupled and also helps make unit testing easier.  As mentioned earlier, Java EE 6 favors the use of annotations over XML configuration.  The people who complained of “XML Hell” in previous versions of Java EE can breathe a sigh of relief.  Convention over configuration has also taken a hold in the Java EE world.  Instead of having developers create a ton of configuration, Java EE will default to using reasonable defaults and allow for configuration when you wish to override the defaults.  This combined with the use of annotations over XML allows you to hit the ground running with Java EE faster than ever before!

Conclusion

Overall, I feel that Java EE 6 is a huge step in the right direction.  I think JPA is great and very comparable to Hibernate.  EJB has been improved a lot and is now much easier to use.  As far as JSF goes, I prefer to use a framework like Spring MVC with JSPs as the view engine.  I think that the JSP view engine is very powerful and I like working close to the HTML rather than abstracting it away.  Others may definitely enjoy the power of JSF though.  I feel that dependency injection in Java EE is a little lacking compared to what is available in Spring.  I would say that if you are working on an existing project using Spring or another third party framework, you probably shouldn’t bother changing over to Java EE 6.  However, if you are starting out on a new project, I would take a look at Java EE 6.  It is powerful and much easier to use now, having learned a lot from frameworks like Spring and Hibernate.

Want to learn more?

I recommend the book Beginning Java EE 6 Platform with Glassfish 3 by Antonio Goncalves.  It is well written and gives a great overview of development with Java EE 6.

-Dylan

Welcome to the third and final installment of the jQuery saga.  This post will cover some of the more advanced features of jQuery such as Ajax, utility functions and plugins.  Along the way I will give examples that show how to use the functionality.  I suggest that you read through the first two parts of my jQuery overview which cover the basics of jQuery before reading this post.

Ajax

In addition to all of the goodness that jQuery provides that we covered in previous posts, jQuery also enables developers to easily make Ajax calls to a server.  In this post we will cover a few of the different methods available for making asynchronous calls.

The first and simplest Ajax method that jQuery provides is the load() function.  This function can be called on a jQuery wrapped set of elements and allows you to make an Ajax call to a server and insert the Ajax response into the selected elements.  The function has the following signature:

• load(url, [data], [complete])

where url is the url you want to send the Ajax request to, data is an optional key-value map that you can send as parameters with the request, and complete is an optional callback function that is called when the request completes.  This function is great if you just want to receive data from the server and display it directly to the user.  For example, let’s say you have a SELECT list containing a list of products.  When the user selects a product from the list you can use the id of the product to send a request to the server that returns the corresponding description for the given id.  Using the load() function of jQuery you can fill a DIV with the description.  Here is the html for the example:

...
<select id="products">
  <option value="">Select...</option>
  <option value="1">Toaster</option>
  <option value="2">Microwave</option>
  <option value="3">Stove</option>
</select>
<div id="description"></div>
...

And here is the JavaScript:

$(function() {
  $('#products').change(function () {
    if ($(this).val() != "") {
      $('#description').load('GetPageDescription.php', { 'productId' : $(this).val() });
    }
  });
});

The result of this code is that when the product dropdown is changed, an Ajax request will be made to the server passing the value of the selected option as the productId parameter.  jQuery will take care of inserting the description into the DIV when the response returns from the server.

If you want to do more that simply load the response from the server into a DOM element then jQuery providers two additional functions: jQuery.get() and jQuery.post().  Both of these functions have the same signature:

• jQuery.get(url, [data], [complete], [datatype])
• jQuery.get(url, [data], [complete], [datatype])

The first three parameters are exactly the same as the parameters for load().  The datatype parameter allows you to specify what data type you are expecting to receive from the server.  This can have values such as “html”, “xml”, “script”, “json” and “text”.  The main difference between these functions and the load() function is that these are not called on a jQuery wrapped set, but instead are standalone functions.  If you want to do something with the response from the server you will have to pass in a handler function for the complete parameter.

Finally, if you want very fine control of the Ajax call, jQuery provides the jQuery.ajax() function.  This function takes in a single parameter: an object containing key-value pairs that allow you to set specific options for the Ajax call.  In addition to the parameters used by the other Ajax functions, you can pass a parameter that specifies whether the request should be asynchronous or not, parameters that allow you to specify callback functions for different stages in the Ajax lifecycle, and many more.  Regardless of your required level of control, jQuery will provide you with tools that will make Ajax easy and accessible.

Utilities

jQuery provides many useful utility functions that allow you to perform common tasks easily.  A small subset of these functions follows:

• jQuery.inArray(value, array)
• jQuery.map(array, callback(element, index))
• jQuery.parseJSON(json)
• jQuery.trim(string)

The jQuery.inArray() function will allow you to check if a value is in an array.  It takes the value and the array as parameters and returns a number.  The number will be -1 if the value is not in the array, otherwise it will be the index of the value in the array.

The jQuery.map() function should be familiar to those who have worked with functional programming languages.  It will take an array and a function as a parameter and apply the function to each element in the array to return a new array of the results.  For example, if we wish to take an array of numbers and square them we can use the following code:

var numbers = [2,3,5,6];
var squares = $.map(numbers, function(element,index) {
  return element * element;
});

The squares array will contain the values: 4, 9, 25 and 36.

The jQuery.parseJSON() function is especially useful when using the Ajax functionality.  The server may return a JSON string in the response.  In that case you can pass the JSON string to this function.  The function will parse the string and return a JavaScript object.

Finally, the jQuery.trim() function allows you to trim all whitespace off of the beginning and end of a string.  Simply pass the string to the function and it will return the trimmed string.

As you can see, the jQuery utility functions are very helpful.  While they are not as significant as the rest of jQuery’s features, they certainly do contribute to making JavaScript easier to use.

Plugins

The ability to extend jQuery with plugins may be one of its most important features.  The core of jQuery provides a strong foundation for your JavaScript code, so it is only natural that you may want to tie additional functionality to jQuery’s existing functionality.  In addition to creating your own jQuery plugins, you also can go to http://plugins.jquery.com to get access to hundreds of existing plugins that have been created.  If you can think of a problem, chances are that somebody has already created a plugin to help get around it.  Two useful jQuery plugins are the jQuery Validation plugin and the jQuery UI plugin.

The jQuery Validation plugin makes doing client-side validation easy!  In fact, Microsoft has chosen to use both jQuery and jQuery Validation by default in their latest version of ASP.NET.  Utilizing jQuery Validation in an ASP.NET MVC 3 is as easy as turning on client-side validation in the web.config (which is on by default) and setting some data annotation attributes on your model classes.  jQuery Validation contains many useful validation constraints.  For example, you can easily check to make sure that the user input is a valid email address or credit card number.  jQuery Validation has built in error messages that are displayed to the user when there is a problem.  The error messages can easily be customized.

The jQuery UI plugin is another very useful jQuery plugin that is available.  It makes doing tasks such as making your DOM elements draggable or resizable trivial.  For example, if you have a div with an id of “box” that you want to be able to drag around, simply do the following:

$('#box').draggable();

That’s it!  Your box is now draggable.  In addition to easily adding behaviors, you can also you jQuery UI to create cool widgets.  For example, jQuery UI comes with a great date picker widget.  If you have a textbox with id “postDate” that you want to use for dates, simply do the following:

$('#postDate').datepicker();

This will cause a calendar widget to appear on the screen below the textbox whenever the textbox receives focus.  Very useful!

Another cool widget that you can use it the dialog widget.  With the dialog widget you can turn any div into a dialog that pops up on the screen.  You can easily customize the appearance and behavior of the dialog, and even make it a modal dialog, a dialog that causes the rest of the page behind it to become grayed out and inaccessible until the dialog is closed.  This is just the tip of the iceberg when it comes to jQuery plugins.  I strongly encourage you to check out the jQuery Plugins page to see what else is available.

Conclusion

We have finally reached the end of our jQuery journey.  I hope you were able to learn about some of the amazing features that have made jQuery the most popular JavaScript library in use today.  In this article we covered some of the more advanced jQuery features such as its Ajax support, utilities, and its huge library of plugins.  At this time I encourage you to dive into jQuery.  Read some tutorials on the jQuery website, pick up a book, and start using jQuery in your own code today!  You may even contribute to the jQuery community by creating your own plugin and sharing it on the jQuery website.

Want to learn more?

As I mentioned in the first two parts of this series, two great resources for learning jQuery are the jQuery website at http://jquery.com as well as the book jQuery in Action by Bear Bibeault and Yehuda Katz, which I highly recommend.  I hope you enjoyed this article!

-Dylan

Welcome to the second part of my overview of jQuery. This article is part of a 3 part series. If you did not read the first article, you may want to go back and read that first. This article is going to pick up where the last article left off and cover more jQuery basics. Specifically, the events and effects functionality will be discussed. Afterwords, I will show some example code that utilizes many of the techniques that we have learned.

Events

Event handling can sometimes be a problem when developing cross-browser applications. There are often at least two different ways of doing things depending on which browser is being used. jQuery helps us by abstracting the event handling logic. Behind the scenes jQuery will use feature detection to figure out which browser the code is being run on and then utilize the appropriate functionality for the specific browser. The user of the library is presented with a single, clean, unified API that they can use to add event handling to any element on the page in a cross browser fashion. The first of these functions that I am going to cover is the bind function. This function accepts two arguments; a string containing the type of event, and a function to handle the event. Multiple event handlers can be bound to an element this way. Here is an example:

$('#myButton').bind('click', function() {
  $('p').css('color', 'red');
});

This code finds the element with an id of “myButton” and adds an event handler to it. The handler, when the element is clicked, will find all paragraph elements and make their text a red color. If you wish to remove an event handler from an element, you can use the unbind function. There are many useful overloads of the function. If you pass it no parameters then it will remove all events from the selected elements. If you pass it the name of the event it will remove all handlers for that event type. If you pass it the name of the event and the handler function it will remove only that handler from the element. If we run the follow code then the button will no longer respond to the click event we set up previously.

$('#myButton').unbind('click');

jQuery also provides shortcuts for most of the events. Instead of using the bind function you can use a specialized event function. An example of this is the click function. It takes a handler function as its sole argument. Here is a copy of the above code using the click function instead of bind:

$('#myButton').click(function() {
  $('p').css('color', 'red');
});

All event handlers can optionally take in an argument of the event object. The event object also has cross browser differences. jQuery creates a cross-browser version of the event object for us to use in our handlers. The details of this object are described on the jQuery website.

Effects

Another cool feature of jQuery is its support for effects. jQuery provides a handful of simple effects out of the box, but allows for extending the library by adding new effects. We will cover a couple effects in this article. The hide and show effects can be used to make elements on the page appear and disappear. At their simplest they take no arguments, and when called simply make the element appear or disappear from the page. You can also pass them a number specifying the milliseconds that the effect should take. When a number is provided, the element will shrink in size while also becoming transparent until it disappears from the screen if using hide, or will appear on the screen and grow in size and opacity if using show. Here is a demo:

$('img.hideable').click(function() {
  $(this).hide(2000);
});
$('#myButton').click(function() {
  $('img.hideable').show();
});

This demo selects all images with class “hideable” and assigns a click handler to them. If they are clicked on the will disappear from the screen over a two second interval. Because a time is given the image will shrink and become transparent over the time period. A click handler is also assigned to a button. When clicked it will make the image appear on the screen (if hidden). It is not passed a number so it will appear instantly. Another useful function is the toggle function. When used it will cause an element to appear if hidden, or disappear if visible. It also can take a time value. It is demonstrated below:

$('#myButton').click(function() {
  $('img.magic').toggle(3000);
});

When the button is clicked the images with class “magic” either appear or disappear, depending on their current state. There are other available effects such as slideUp, slideDown, fadeIn, and fadeOut. If you wish to make more complex animations you can use the animate function which allows very fine control. You can read about all of these on the jQuery website and many other effects exist on the plugins page of the site.

Example

Now it is time to look at a complete example. You can download a zip file containing all of the source code here. In this example we are going to create a simple page containing nested lists. The levels of the list will be able to expand or collapse when clicked on. If there is no sublist under the current list element, then clicking on the element will do nothing. Here is the code for the HTML page:

<html>
  <head>
    <title>jQuery Part 1 Example</title>
    <link rel="stylesheet" type="text/css"
          href="jQueryExample1.css" />
    <script type="text/javascript" src="jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript" src="jQueryExample1.js">
    </script>
  </head>
  <body>
    <h1>jQuery Part 1 Example</h1>
    <p>Here is a list containing other nested lists.
         We can use jQuery to hide or show the list
         elements.</p>
    <ul>
      <li>
        jQuery Part 1: The Basics
        <ul>
          <li>
            Introduction
            <ul>
              <li>What is jQuery?</li>
              <li>Where to Get jQuery</li>
            </ul>
          </li>
          <li>
            Core jQuery
            <ul>
              <li>Selectors</li>
              <li>The Wrapped Set</li>
              <li>The jQuery Function</li>
              <li>Traversing the DOM</li>
              <li>
                Manipulation
                <ul>
                  <li>Attributes</li>
                  <li>CSS</li>
                  <li>Other</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>Events</li>
          <li>Effects</li>
          <li>Example</li>
          <li>
            Conclusion
            <ul>
              <li>Summary</li>
              <li>
                Want To Learn More?
                <ul>
                  <li>Next Article</li>
                  <li>jQuery.com</li>
                  <li>jQuery In Action</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

And here is the JavaScript code for the example:

$(function() {
  $('li > ul').hide().each(function() {
    var sublist = this;
    $(this).parent().addClass('collapsed').click(function(event) {
      if (this == event.target) {
        $(this).toggleClass('collapsed expanded');
        $(sublist).toggle(1000);
      }
    });
  });
  $('li:not(:has(ul))').removeClass('collapsed
                                     expanded').addClass('leaf');
});

You will see that the HTML for the example is very clean. All styles are in an external stylesheet (not shown, but included in the download) and all the Javascript is in a separate file. The jQuery code starts with the jQuery function setting up a function to be run when the page is ready. We first select all of the ul elements on the page that are children of li elements. These are the sublists. We call the hide function to immediately hide the sublists. Next we use the each function to run code on each element of the wrapped set. The first thing we do inside of the each is set a variable called sublist to the current element (using ‘this’). This allows us to create a closure to access the element from within event handlers defined below it.

Next, we get the parents of the wrapped set elements and make a wrapped set out of them using the parent function. This set contains the li elements that the sublists reside in. We then add a class called “collapsed” to the li elements. This refers to a style declared in the external stylesheet that makes the bullet for the li element into a plus sign. This makes it easier to see that the list can be expanded at this point. We create a click handler for the li elements which first check if the element handling the event is the actual element that was clicked. This is done to ensure that no other elements respond to the event when the event is bubbling up or down the DOM. Next we use the toggleClass function to set the class to either collapsed or expanded. We also use the toggle function to toggle the visibility of the sublist of that element. Finally, in a completely new jQuery statement, we select all li elements that do not contain sublists. We remove any existing collapsed or expanded class and add the leaf class to them. This replaces the bullet for the list element with an empty circle. This shows that there is no sublist below this node.

That’s it! In this small about of code we were able to create some pretty cool functionality. I suggest that you download the code and try it out for yourself. Tweak the code to see what else you can do with it. Have fun!

Conclusion

That is all that I am going to cover in this article. We learned about how jQuery handles events as well as how to create some cool effects to liven up your page. Finally, we went through an example that brought everything we learned together.

Want to Learn More?

The next and final article in this series will cover some advanced jQuery functionality. I will be covering the topics of ajax, utilities, and plugins, as well as another exciting example! Again, keep in mind that I am only covering a very small subset of what is available in the jQuery library. I suggest you check out the jQuery documentation page at jQuery.com. The documentation for jQuery is excellent and provides many useful examples. I also recommend jQuery In Action by Bear Bibeault and Yehuda Katz. It is an excellent book and worth checking out. I hope you enjoyed this article. The next part should be out within the next couple of weeks.

-Dylan

The Unstandard Tag Library is a JSP tag library that was developed as part of the Jakarta Project. Its purpose is to provide a collection of useful tags that people have been requesting for JSTL. The library serves as a place to keep all of these tags until they are officially added to the Standard Tag Library. This article focuses on the use of one of the tags contained within the library, the useConstants tag.

The Problem

While working on a project for a client, I realized that they were using a Java class with constants to define strings used within the application. The idea was to use the constants everywhere in the application where the strings were needed so they could easily be maintained in one location without having to search through the whole application when making a change. This makes sense, and is a common best practice. I was working on a JSP page that needed to use the constants from the class. It is now considered bad practice to use Java Scriptlets in your JSP page. It is much better to use the Expression Language (EL) in combination with JSTL and other custom tags. Trying to keep to this rule I quickly ran into a problem. The EL does not allow and easy way to access constants from a Java class. That is where the Unstandard Tag Library’s useConstants tag comes in handy.

How To Use It

Once you have added the library to your project it is very simple to use. Let’s assume we have a java class containing constants such as the one below:

package com.tallan.unstandard;  

public class MyConstants {    

  public static final String MY_CONSTANT_1 = 'Hello World';
  public static final String MY_CONSTANT_2 = 'Goodbye World';  

}

Let’s also assume that we added the tag library to our page as follows:

<%@ taglib uri="http://jakarta.apache.org/taglibs/unstandard-1.0"
           prefix="un"%>

We can then utilize the useConstants tag as follows:

<un:useConstants var="Constants"
                 className="com.tallan.unstandard.MyConstants" />

After we run this line of code, an object called Constants will be available for use on the page. We can use it with the EL and access the constants as properties of the object. For example:

<p>${Constants.MY_CONSTANT_1}</p>

This solves our problem of using constants from a Java class within a JSP page without relying on scriptlets.

Where To Get It

You may be thinking “This is great, but where can I find this library?” Unfortunately the Jakarta project has stopped development of the library and no longer makes it obvious where you can get the code. If you look around on the Jakarta site you will find that they allow you to get the project out of source control and build it with Maven, but this is a little bit of a hassle. If you want an easier way to get the library just go here. This site contains old binaries of the library and they should work just fine.

Conclusion

The Unstandard Tag Library contains many useful tags that can help in the development of our JSP pages. While it is no longer being actively developed, it can still be a very useful tool. We covered how to access constants from a Java class using the library’s useConstants tag.

Want to Learn More?

If you want to learn more about the tags available in the Unstandard Tag Library and how to use them, then head over to the documentation page for the library located here.

Welcome to my first blog post on the topic of jQuery. This is the first part of a three part series. This post will cover most of the basic features of jQuery. The next post will wrap up the basic jQuery features and go through an example using what we learned. The final post will cover jQuery’s more advanced features and include another example.

What is jQuery?

jQuery is a Javascript library. At its core, jQuery enables authors to easily select and manipulate the elements of an HTML page. But jQuery is much more than just that. jQuery was designed for extension. There are over a thousand plugins available for jQuery with functionality ranging from rich UI features to Ajax. With all of this power it is easy to see why jQuery has become one of the web’s most loved Javascript libraries.

Where to Get jQuery

jQuery is available for download from jQuery.com. You can download the library right from the home page. There are two versions available. The production version has a tiny footprint of just 24KB! The code has been compressed though, so if you feel like reading through the actual library code to see how jQuery works then you should download the development version. Once you download the library, simply add the script reference to your HTML file and you are good to go!

Core jQuery

Selectors

The central feature of jQuery is its ability to make finding the elements that you want to manipulate ridiculously easy. To find elements jQuery uses something called a selector. These are the same selectors that are available in CSS, so if you already know how to use CSS (If you don’t, then you should learn!) then you will be able to directly apply your knowledge to jQuery. For those of you who don’t know CSS, a selector is, in essence, a string that defines a pattern that identifies a set of elements that you would like to apply a style to or, in the case of jQuery, manipulate with Javascript. The selectors available in jQuery are very powerful and allow you to easily apply your code to whatever elements you like.

There are many types of selectors. The most simple specify an HTML tag. For example, the selector img will match all image elements in the HTML. Other common types of selectors include:

You can also combine selectors:

jQuery selectors also include ways to filter the match:

This is only the tip of the iceberg. jQuery supports many more selectors that allow you have very precise control over which elements you are selecting.

The jQuery Function

Now that we have covered selectors, we can talk about the jQuery function. The jQuery function is at the heart of the library and has many overloads. We will be covering two of these overloads. The first overload simply takes in a string containing a selector. This version of the jQuery function uses the selector passed to it to find and return all elements matched by selector. Another overload of the jQuery function takes in a function. The purpose of this overload is to be able to run the code in the passed in function once the DOM tree for the page is ready to be worked with. This works much better than the onready event because, unlike the onready event, this overload of the jQuery function does not need to wait for images or page assets to finish loading. This allows us to work with the page as soon as possible. By default, jQuery gives an alias for the jQuery function. The dollar sign ($) can be used in the place of “jQuery”.

The Wrapped Set

You may be wondering what the first version of the jQuery function returns. This functions returns an object called the wrapped set. The wrapped set is essentially an array of all the elements matched by the selector. Most jQuery functions are called upon the wrapped set and commonly returns the wrapped set after the main body of the function runs. This allows jQuery functions to be chained together, making it very easy to accomplish a lot with a single line of code.

Traversing the DOM

Sometimes once you have a wrapped set containing a group of DOM elements, you may want to obtain a new wrapped set based on the initial wrapped set. For example, we may want a wrapped set containing all of the parent elements of the elements of the current wrapped set. jQuery provides a number of functions that provide functionality like this. If we wish to obtain a set of all of the parent elements of all of the paragraph elements on the page we would write: $(‘p’).parent(). The first part of this statement uses the dollar sign alias of the jQuery function to find all of the paragraph elements on the page. Next, the parent function is called on the wrapped set of paragraphs and returns a wrapped set of all of the parent elements of the paragraphs.

Manipulation

Now that we can find the elements that we are interested in, what can we do with them?

Manipulating Attributes

jQuery provides functions which allow you to manipulate the attributes of wrapped set elements easily. If we wish to read the value of an attribute we can use the attr function. The attr function takes in a string of the attribute name and returns the value of the attribute for the first element of the wrapped set. An overload of the attr function allows you to set the value of an attribute for all elements of the wrapped set. This is done by passing a second argument containing the value. For example, if we wish to set the alt attribute of an image with an id of “myImage” to the value of the image’s title attribute we would write: $(‘#myImage’).attr(‘alt’, $(‘#myImage’).attr(‘title’)). If you wish to do this for each member of the wrapped set instead of just the first we can take advantage of the each function. The each function allows you to define a function that will be run on each element of the wrapped set. Within the function, the “this” keyword refers to the element. For example:

$('img').each(function() {
  $(this).attr('alt', $(this).attr('title'));
});

This code will take all the images on the page and set their alt attribute to the value of their title attribute.

Manipulating CSS

jQuery also allows you to easily work with the styling of the elements of the wrapped set. We will cover four functions: css, addClass, removeClass, and toggleClass. The css function works similarly to the way the attr function works. Passing it the name of a CSS property will return the value of the property for that element. Passing it the name of the CSS property and a value will set the property to that value for the element. For example, $(‘div.special’).css(‘color’, ‘red’) sets the text within all div elements with class “special” to a red color.

The addClass function allows you to add classes to HTML elements. The function accepts a string containing a space separated list of classes that you wish to add to the element. For example, $(‘div:has(p)’).addClass(’special’) will add the class “special” to all div elements that have a paragraph element within them. If the class already is associated with the element then nothing happens. The removeClass function is similar to addClass. It also accecpts a space separated string of classes. The classes you pass to the function will be removed if they are declared on the element. The toggleClass function will either remove a class from the element if it exists on the element or it will add a class to the element if it does not already exist on the element. Assuming we have a div with class “bad” and id “myDiv”, if we run the code $(‘#myDiv’).toggleClass(‘bad good’) then we will remove the bad class form the div and add the good class to the div.

Other Manipulation

Sometimes we may wish to manipulate the position of elements within the DOM. One example of this is the append function. This function will append an element to the end of the children of the selected element in the wrapped set. The overload we will be covering takes a single string containing valid HTML tags. The DOM objects for the HTML you specify will be generated and appended onto the elements you specify in the wrapped set. Take a look at this example: $(‘div.myClass > ul’).append(‘<li>New item</li>’). This code will append a new list element onto any unordered list that is a direct child of a div element with class “myClass”.

Conclusion

That’s about all that I am going to cover for now. We looked at the core features of jQuery that allow us to find elements on the page based on the power of CSS selectors as well as many functions that operate on the elements in the wrapped set. These functions allow us to easily manipulate any element on our page.

Want to Learn More?

If you want to learn more jQuery, be sure to read that next part of this article. I will be covering the topics of events and effects, as well as showing a fun example demonstrating all of the skills we have learned. Keep in mind that I am only covering a very small subset of what is available in the jQuery library. I suggest you check out the jQuery documentation page at jQuery.com. The documentation for jQuery is excellent and provides many useful examples. If books are more your style then I would strongly recommend the book jQuery In Action by Bear Bibeault and Yehuda Katz. I have read through the entire first edition of the book and it was very helpful. The second edition just came out and it looks very similar except that it contains much more coverage of the jQuery UI plugin (which will be covered a little in Part 3 of this article). You should definitely check it out. The next part of this article should be posted soon. See you then!