Using Datalist Elements With jQuery UI Themes

While you can't necessarily style the actual drop-down rendered by the browser you you implement the datalist element, you can at least style the input itself. For example, if you want to use the datalist element in your jQuery UI application, you might apply some theme framework CSS classes to the input element. The trick is, finding something that looks acceptable across browsers.

Linear Gradients With Progressbars

There are two aspects of the jQuery UI progressbar widget we can style. First, there's the container. This is essentially the progressbar border. While you can style the background of the container, it's best to just leave it alone. The second aspect is the value div. This goes inside the container and increases or decreases in width as the value of the progressbar changes. This is the part the user is interested in, and we can apply interesting styles to it, such as a linear gradient.

Theming Tooltip Box Shadows

The jQuery UI tooltip widget is themable, just like every other widget. Except, to a certain extent, it isn't. The tooltip uses the box-shadow CSS property to apply a decent-looking shadow around the element when it's displayed. It looks good with the smoothness theme, but with others, it's a little awkward.

Full Screen Tabs Styles

When using the tabs widget as a top-level container — as in there's nothing else on the outside of the tabs — it's a "full-screen" widget. If you're using the tabs widget this way, you may want to strip away some of the style properties from the tab navigation. Especially if you have a background on your page - this way it gets through to the user better.

Themed Resizable Helpers

The resizable interaction widget found in jQuery UI guides users by displaying a helper element. This is just a transient div, styled so that the user can see an outline of the new size once the mouse is released. This is especially useful when the animate option is set to true — you can see the outline, and the space is filled with the resize animation. These helper elements don't, however, use styles from the theme framework. But we can change that.

Applying Themes To Selected Text

When the user selects text in the browser, they generally get the browser default styles. That is, the default background color and the default text color for selected text. This is fine, in most cases. But if you want that extra level of polish added to your page, you can do so by using the CSS ::selected pseudo element. What's more is you can directly transfer jQuery UI theme property values to selected text using the following technique.

Smoothness Theme Using Roboto Condensed Web Font

Sometimes, little changes to jQuery UI themes make all the difference in the world. Take for example, the use of web fonts. Here's an illustration of how to apply the Roboto Condensed web font to the default jQuery UI theme - smoothness.

jQuery UI: Simplified Accordion

Maybe you're using the jQuery UI accordion widget, and you don't necessarily like the way it looks by default. Maybe this isn't a tunable theme setting that the theme roller can fix either. I know I've been faced with this situation before, I just want the widget simplified, right down to the bare essentials. There is a quick hack we can use to achieve this with the accordion if all you're looking for is a visual simplification.

Themes and Structure

At first glance, a theme is nothing more than aesthetics, the visual polish applied to the structural layout of a user interface. The colour combinations, the the gradients, the proximity of one thing to another. These properties are the eye-candy that make or break the whole experience. This view marks aesthetics as a blanket, coating the structural scaffolding of each widget, and collectively, the whole UI. But is it actually as clean a distinction as that? Can a theme really be thought of as no more than a collection pf appealing CSS rules? Can we detach the aesthetics from the UI, and it's constituent widgets, cleanly and without worry? It turns out, yes, we can and do. Thinking about the patterns of software reuse, the theme, or rather, the ability to theme, is crucial to user interface reuse.

CSS3 Transitions in jQuery UI Themes

You can add CSS3 transitions to your jQuery UI theme without much effort. You can use a single selector to apply the same transitions to multiple jQuery UI widget components. As a simple example, the following code illustrates how we can apply CSS3 transitions to the hover state for buttons, accordion headers, and tab navigation.

Themes: The New Web Resource

Web resources are an integral part of web applications.  So what exactly is a web resource?  A web resource, generally speaking, is anything returned by an HTTP request.  For example, HTML pages are  the quintessential web resource.  But there are other resource types too — images, CSS style sheets, etc.  The browser depends on these resources to properly render the page for the user.  So in this sense, what the user sees is actually a decoupled collection of smaller resources.

A few resources are more prevalent than others — HTML, CSS, Javascript.  But the fact of the matter is that anything can be a resource — data a remote agent solicits or modifies.  We're not limited to what we can serve — can make available to clients.  There is no predefined set of resource types.

With the ever growing complexity of applications, the limitless dependencies required to make the thing work — introducing new composite resource types is a foremost advancement toward a better web.  Themes are like web pages — a composite type of resource — one that'll be ever more germane to web applications over the next couple years.

Why resources?
So why do we call the things we retrieve with HTTP requests resources?  Why not call them web objects or files?  The term resource has more to do with the client software than the actual resource itself.  The term resource reflects the fact that what the client is fetching is something it needs to function correctly.  A dependency of sorts.  For example, your television makes use of a digital content stream resource.

The term resource is especially useful when we're describing stuff that has to do with the web.  Things that live on the web.  The web is called the web because it's interconnected.  The the nodes in this graph are the resources.

When we're talking about a particular site, we're more inclined to refer to resources by their type — the page, the image, the flash, the video.  But when we're talking on a pure HTTP web-as-hypermedia level, we're better with the ambiguity resources suggest.  If some application has an API that lists resources, and an API that retrieves a specific resource, we can design the client around those concepts.  Resources are an architectural design idiom while specific resource types describe specific resource attributes.

Themes are abstract
Up until now, we've only touched upon the most general ideas of what makes a resource on the web.  Put simply, it's any web-accessible data — you can retrieve it by issuing a GET request.  But the client must know about the resource's URI — where is it?  Where does the client get such information?  From other resources that know about it — this is the interconnectedness that makes the web so powerful.

Now that we have this resource, how does the client know what to do with it?  The web browsers people use to surf the web on a daily basis know how to interpret dozens of resource types.  In HTTP terms, the resource type is the content type, usually specified in the response headers.  If the client knows what the resource contains — it's structure — it can make use of it.

Imagine getting a CSV row with twenty columns in it.  Suppose you've hadn't received any schema for this data.  You might be able to make sense of some things in the data be deriving their meaning, but you're essentially playing a guessing game.  Without a standard (schema), making use of web resources is a lost cause.  Web standards dictate a common set of rules so that browsers know how to display information.  This is how the browser knows that a CSS web resource is used to alter the appearance of another — the HTML page.

The HTML page and the CSS stylesheet are so commonplace that we hardly think of them as abstract anymore — but they are.  They're a simplified set of instructions — more abstract than saying "this group of pixels should be positioned here and should be coloured blue".  Humans know how to make sense of higher-level instructions that hide the low-level details.

But even with high-level languages like those of HTML and CSS — languages that hide the messy stuff — we're still able to build applications that are incredibly difficult to comprehend let alone maintain.  Web sites and web applications are getting bigger and bigger — there is a cost to that volume.  Complexity means longer development time and or more development resources.

Themes are the next level up on the abstraction ladder.  A theme is simply the appearance of the site — like how desktop themes let users change the appearance of their local environment.  Themes are more abstract than CSS styles because of the standards imposed on them — the same style rules are found in each theme — only the properties change.

Nothing new, just improved
You might be wondering what exactly sets themes apart from any other typical web resource we're used to.  Like CSS style sheets.  That is what themes are after all — a collection of styles and images.  Both of these things we're used to seeing in every web page we visit.

But unlike your typical CSS that we're used to, themes carry a standardized interface HTML pages can utilize.  The jQuery UI project really pioneered themes — the new resource type that we've come to expect.  This is how we're able to achieve a consistent look and feel across all our applications.  The standard theme interface allows this because the applications that use them must adhere to the theme styles.

Themes simply tie together older, more familiar resources that we're used to.  They're more abstract, enabling us to build better user interfaces for the web.  So are they justified in being referred to as a new resource type?  I think so.

jQuery UI Themes: Beginner's Guide

I'm pleased to announce the availability of my new book — JQuery UI Themes Beginner's Guide.  Also available directly from Packt Publishing.  Here is a brief chapter outline:

1. Themeable User Interfaces — Just a little theory on themes.
2. Using Themes — Introduction to using jQuery UI and themes.
3. Using The ThemeRoller — Guide to using the ThemeRoller.
4. Working With Widget Containers — Learn about the fundamental building block of the jQuery UI theme framework.
5. Transforming Interaction States — Theme your interface based on the state of interactions.
6. Customizing Interaction Cues — Bring theme styles to your user notifications.
7. Creating Theme Icons — Extend the theme icon set with your own icons.
8. Special Effects — Add further embellishments to your theme with shadows and overlays.
9. Theming Custom Widgets — Build your own widget and learn to theme it accordingly.

Stay tuned — I'll be posting some variations on the examples in book here over the coming months.

Themes Have Changed

Themes offer a look and feel that can enhance the appearance of a web application. Web application frameworks usually provide a framework for building themes along with a few pre-built themes. Themes in web applications have two components to them; the HTML markup for the structure of the page and CSS styles that actually change the look and feel. Wait a second, if the CSS styles are responsible for changing the look and feel, what does the HTML markup have to do with the theme? Conceptually, it has nothing to do with the theme if it is strictly defined as the look and feel. This isn't the case with traditional themes most of the time. With some themes, not only are the look and feel different, but the entire layout is vastly different.

Lets assume that a theme is strictly look and feel. That is, we can change the look and feel of the entire application simply by changing the CSS stylesheet. These stylesheets don't typically contain layout definitions, just colors, fonts, etc. So has this idea been adopted by many frameworks if any?

jQueryUI is a really good example of themes in practice. The CSS framework offered by jQueryUI is strictly a look and feel framework. There aren't any layout restrictions imposed by the CSS definitions. The jQueryUI CSS framework exists for the purpose of adding theme capabilities to the widgets in the jQueryUI library. The framework is flexible enough to be useful with HTML elements that fall outside of the widget set.

CSS classes inside the jQueryUI famework dictate the look and feel of the user interface. There really aren't any restrictions on what elements these classes can be applied to. If you have a container HTML element with several jQueryUI widget descendants, the widgets will have a distinct look and feel while the container element does not. It turns out that the container element can in fact share the same theme as the widgets by giving it an appropriate class from the CSS framework.

By eliminating structural layout requirements from the theme, you add a new level of flexibility. Javascript widgets actually look like they belong in the application. Also, by basing themes entirely on CSS styles, we make creating new themes much easier as well because the classes are standardized and there are no layout surprises. jQueryUI has proven to be very powerful theme-driven user interface framework and it looks as though it will continue to improve into the future as the widget set is expanded.

Themable UML

The unified modeling language, UML, is a modeling notation used for visualizing the design of software systems. Since it is used to visualize the system in question, the UML can be considered to be largely graphical by nature. But the UML specification only provides a base for the notation of each modeling element in addition to the underlying semantics of the language. What the specification doesn't say is anything about the overall look and feel of a finished diagram such as a class or a sequence diagram.

Most UML tools allow users to alter the color of certain aspects of certain model elements, like the fill color or the border color. This color value, for instance, can be set as the default for all new class elements that are placed in the diagram. Tools such as this become useful for emphasizing certain modeling elements in a particular diagram. Or to group certain elements. One may argue that the UML provides grouping elements already such as package elements. The package element is only a single dimension in the organization of a model.

A very useful feature of a UML modeling tool would be a theme selector. This would, of course, offer themable UML. But in the context of the UML, what exactly constitutes a theme? Would it just simply be the feature mentioned above that gives the modeler the ability to change the color of certain elements for emphasizing purposes? I would think not. A themable UML diagram would probably be more along the lines of a color scheme of the various UML modeling elements. In addition to the color scheme, subtle element shape variations could be offered by the theme. The idea behind the theme is that there is no need for the modeler to choose appropriate colors that work. The theme just makes the diagram look good.

This would be a good use case for implementing a UML profile. Since the profile can add visual distinctions to the elements in which stereotypes of the profile are applied, this fits the requirements.

With this feature enabled, some more advanced UML diagram output would be required. For instance, HTML output could be used while the various theme distinctions are defined in CSS. This way, a CSS theme framework, similar to that found in jQueryUI could be used.