1 Oct 28 2011 Sample

A Guide to Wijmo Theming

One of the major features of Wijmo is that it’s built on top of the jQuery plugin model. The benefit of this is that the Wijmo team took great care into making sure that you got the benefits of working with jQueryUI widgets. The major benefit being ThemeRoller support.

image

I always find it amazing when I talk to people and people haven’t heard about ThemeRoller. It’s just the greatest thing since sliced bread.

ThemeRoller

When jQueryUI was released, it provided a great array of user interface widgets for you to use in your applications. However, if you’ve used other component packs you know that theming can be really really hard or really really easy. Developers don’t really do theming or design well, so that’s where the ThemeRoller tool was born.

ThemeRoller lets you or another person design themes for your sites. It’s developer friendly, and awesome if you have a designer on your team. Build your own custom themes or tweak one of the many existing ones.

image

When I used to do consulting, I used <COMPETITOR NAME REDACTED>’s toolset. But it was so frustrating to do a lot of stuff that should be similar in terms of theming. Instead, I rewrote the majority of the site with jQueryUI widgets. I provided the ThemeRoller tool to my designer and within the day, she provided me the CSS file I needed to add to my project. It’s just that easy!

How Wijmo Uses ThemeRoller

Out of the box, Wijmo uses ThemeRoller themes. You don’t have to do ANYTHING. Imagine you have a grid:

image

It’s a nice grid, but you like the “Redmond” style better. That’s cool, just replace the CSS file.

image

BOOM! You’re done.

Editing Themes

I’m bringing this note up since someone asked a question in the forums. How do you edit a theme after you’ve downloaded it? That’s easy!

First, open up the CSS file. Scroll down a couple lines until you find this comment:

image

Note: if CSS is minified, you won’t see this.

See that link at the bottom, paste it into your browser and go. ThemeRoller will automatically load all the settings for that theme. Make your changes and download the new style. This is handy on jQueryUI updates. If they add new widgets, you can just load the file into ThemeRoller and it’ll create an updated style sheet for the theme.

So go have fun! Let me know if you have questions or comments! Go have fun with ThemeRoller, and make Wijmo your own!

Kevin Griffin
keving@componentone.com

Follow me on Twitter @1kevgriff

2 Aug 03 2011 Announcements Release

Wijmo 1.4.0 Released

That’s right 1.4.0 is here already. Hint, we are well on our way to a 2.0!

This added some nice new features and fixed quite a few bugs.

New Theme – Arctic
We added a new premium theme called “Arctic”. It is a very clean gray theme that works pretty much everywhere.

Grid – Added nested grouping
We added showGroupArea and groupAreaCaption options to provide a convenient way of grouping by as many columns as the end users wants. The end users can drag column headers to the top bar to create nested groups of data by column. Check out the new nested grouping feature in action.

We fixed a ton of bugs from a rendering issue in Combobox to click events in Upload. Make sure to download the latest version of Wijmo and read the change log!

3 Jan 27 2011 Sample Video

Webcast: Building UI with jQuery and Wijmo

We just finished up a Webcast on Wijmo! This session demonstrates how to use jQuery, jQuery UI and Wijmo to build killer User Interfaces. We walk through everything from making a simple Menu to building a dashboard with Charts and Grids.

Video

Slides

Building UI with jQuery and Wijmo
View more presentations from Chris Bannon.

Code

This file container a couple of HTML files that are used in the session. Feel free to follow along.

building-ui-with-wijmo.zip