ComponentOne just launched a brand new UI kit for client-side Web development called Wijmo. Wijmo contains over 30 widgets built on jQuery and jQuery UI that can help you build a better Web. This article will walk you through how ComponentOne built Wijmo and teach you how to develop your own widgets.
Wijmo contains over 30 widgets built on jQuery and jQuery UI that can help you build a better Web.
Intro to jQuery & jQuery UI
Microsoft’s decision to shift focus on using and contributing to jQuery was a big win for Microsoft, jQuery, and you.
The Wijmo Story
Wijmo was purposed to build a complete kit of jQuery UI Widgets as a client-side framework for ComponentOne’s ASP.NET controls. The team used the jQuery UI Widget Factory to build these widgets to all of jQuery UI’s guidelines and principles. The result has been a complete kit of widgets for developing applications to the high standards of jQuery UI.
Why ComponentOne Chose jQuery UI
There are a number of reasons ComponentOne chose jQuery UI. First, the team felt it was natural to follow Microsoft’s adoption of jQuery. It was only more natural to expand to jQuery UI for building UI components. Beyond that, there are some very significant reasons to use jQuery UI.
According to builtwith.com, jQuery is used on 19,901,925 websites and in more than 40% of the top 10,000 websites.
The Widget Factory
The Widget Factory is a model for building widgets provided by jQuery UI. It provides a common foundation for building jQuery UI widgets. Widgets are simply jQuery plugins that have state. The Widget Factory is the equivalent of a base class in an object-oriented programming model. The difference is you are not inheriting it, you are extending it. It provides common methods that every widget needs like “s” and “enable”. It also provides the options property, which is used to set any option on a widget. The Widget Factory helps guide you along the way by creating a clear organization and structure of code. It also helps other developers understand the code in your widget.
The CSS Framework
One of my favorite aspects of jQuery UI is the CSS Framework. This framework provides both common and specific CSS classes that are applied consistently throughout the widgets. The purpose of the framework is to be able to style an entire application in an object-oriented manner rather than styling individual pieces. For example, anything clickable will receive a ui-state-default class and when it’s hovered over it will receive a ui-state-hover class. Using this convention you can just define styles for common classes and impact every widget in doing so. Then, you can simply override the styles you do not want using the specific classes like ui-accordion.
The CSS Framework includes classes for layout helpers, containers, interaction states, interaction cues, icons, and other miscellaneous visuals. The cool thing about the framework is that it can be applied anywhere, even beyond jQuery UI widgets.
In addition to having a CSS Framework, jQuery UI also has a pretty powerful tool to help you add themes to the widgets that support it. This tool, Themeroller is a web app hosted by jQuery for customizing and downloading rich themes built using the CSS Framework. Themeroller also includes 24 pre-made themes that you can use or tweak to your liking. This tool does everything from generating background images to rounding your corners. Even if it doesn’t give you the final result, it can still save you countless hours of time. The generated CSS it outputs is well organized and you can easily modify it by hand.
By: Chris Bannon