Tuning Your ExtJS Theme
ExtJS is my favorite JavaScript favorite. The guys at Sencha have done an excellent job at building the best JavaScript framework for building intranet RIAs. The only flaw of ExtJS is the lack of themes. Although the provided blue and gray themes are very nice, after looking at them for two years you start to long for more variety.
There have been some attempts to theme ExtJS. Extthemes has built a pretty nice collection of commercial themes, but sometimes all I need is a little bling without the need to completely re-theme the framework. For example, on a recent project, I’m starting to introduce ExtJS and am making use of the Ext.Panel widget for laying out div elements.
Here’s what a basic Panel looks like in ExtJS:
And here’s the code I used to create the panel:
var panel = new Ext.Panel({ width: 200, height: 200, title: 'Test Panel', renderTo: 'box' });
I’ve got a div specified in the HTML like this <div id="box"></div> which is where the Panel is being rendered to. This is very nice if your site’s look-and-feel is baby blue, but this won’t cut it if you need a different color scheme. Fortunately, Panels are extremely easy to stylize through some simple CSS overrides.
The first step is to decide what color you need for the Panel’s header. The default theme uses a gradient image, which looks better than just specifying a background color. Gradients are pretty easy to created in Photoshop, but you can get a very nice gradient that exactly matches your needs by taking advantage of the Themeroller tool for JQuery UI. Use the Header/Toolbar customization and choose the color and gradient effect you want for the header.
After you have the header just the way you want it, download the whole theme bundle, extract it someplace and copy the image file for the header into your project directory.
There are three CSS selectors you need to override to apply your customization to the Panel. They are .x-panel-header, .xpanel-header-text and .x-panel-body. For my example, I just borrowed the header image for the Eggplant theme and configured these selectors to produce the following:
Here is what I specified in my CSS file to override the default style:
.x-panel-header { background: url(resources/images/eggplant.png) center left repeat-x; text-align: center; border-color: #000; } .x-panel-body { border-color: #000; background-color: #fafad2; } .x-panel-header-text { font: bold 14px Consolas, Arial, san-serif; color: #eee; }
In the .x-panel-header selector, I specified the background to be the header image I got out of the Themeroller theme. For a little added bling, I changed the text alignment to center the text and set the border color to black. Note, I renamed the gradient image from the cryptic name Themeroller created to eggplant.png.
For the .x-panel-body selector, I set the border color to match the one I specified in the selector above. If you don’t do this, you’ll still have the default border around the center. I also specify a light-yellow background color for the contents of the Panel.
Finally, for the .x-panel-header-text section, I change the appearance of the font from the default blue text to a white text in a different font.
Now you have a panel which can perfectly match any color scheme you need to support and it gives you a simple way to introduce ExtJS without it standing out from what you are already doing. For example, on my project, I’m going to use a pair of Ext.Panel widgets on the sidebar for navigation and a most-recently-used files list, which looks something like this:
In this example, the theme is still blue, but I changed the header gradient, the shade of blue for the lines, and applied a light-gray background.
Some Tips
- Firebug or Webkit (Chrome/Safari) are your friends. Use the element inspectors to look at what classes are applied to the various ExtJS widgets. Theming ExtJS is all about overriding the existing styles.
- Panels are about the easiest thing to style, and it gets harder from there. If you really want to get a custom theme, I suggest start by working with the
x-theme-gray.cssand then overriding from there. The gray theme will give you widgets that blend pretty easily with any theme, and then you can selectively add some bling to the elements you care about. - Remember that your overridden styles must come after the stylesheet link for ExtJS. For example, if your stylesheet with the overridden styles is called
custom.css, ensure your header section contains this:<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> <link rel="stylesheet" type="text/css" href="extjs/resources/css/xtheme-gray.css"/> <link rel="stylesheet" type="text/css" href="stylesheets/custom.css"/>
Kindle DX Graphite Review
My new, 2nd generation Kindle DX arrived today. I’ve had the small Kindle 2 for the past year-or-so, and I also have an iPad, but the new Kindle DX looked like the ideal platform to fill my needs. Being a computer programmer, I tend to have a lot of technical books in electronic format. Neither the Kindle 2 nor the iPad are especially adept at handling PDFs. The Kindle DX is about the same page size as a typical technical book, so I was hoping it would be the dream solution to my reading needs.
Size wise, the Kindle DX is a hair larger than the iPad:
The extra length is going to be a bit annoying for fitting in cases, but the two devices are about the same width. The biggest difference, which is immediately noticeable the first time you pick-up the Kindle DX, is the weight. The Kindle DX doesn’t feel much heavier than its smaller cousin, the Kindle 2, and it makes the iPad feel like a boat anchor by comparison. Here’s the Kindle DX compared to the Kindle 2:
One of the big selling points of the new Kindle DX is the improved screen contrast. While it is not clear in the picture above, the text on the Kindle DX is noticeably darker than on the Kindle 2.
Since I’m really interested in how each of the platforms handles itself as a PDF or book reader, I loaded the same PDFs on each and took some pictures. The images below are from a PDF of the outstanding GroovyMag, a must-read for Groovy and Grails developers.
First, here’s the Kindle 2, showing both the full page and a close-up of the text. Note that I also link to a very-high resolution image so you can drill in and see the difference. Also, none of the photos have been retouched or corrected in any way.
And here’s a close-up of the text on the Kindle 2:
Now here’s the Kindle DX with the same page:
And the close-up of the text on the Kindle DX:
And finally, here is the iPad rendering the same PDF side-by-side with the Kindle DX:
And the close-up of the text on the iPad:
I also have several ebooks in .mobi format for Kindle, and I loaded the same book onto both the Kindle DX and the iPad, using Amazon’s reader for the iPad. Here’s a screenshot of a page side-by-side:
The Kindle DX fits more text on a page, if we compare using the standard font. One big difference is that I can make the fonts even smaller than this on the Kindle DX, whereas I couldn’t make them smaller with the Kindle Reader on the iPad. As my eyes have spent too many years looking at computer displays, I can’t support reading microscopic text, so the default size is perfect.
Here’s where things get interesting and you can really see the benefits of the E-Ink technology. This is a close-up of a paragraph on the iPad:
And here is a close-up of the Kindle DX with the same text:
The differences are startling. There is no contest on text sharpness. The Kindle DX crushes the iPad. While this sharpness won’t make much of a difference checking email, there is literally a world of hurt between the two if you actually use the device to read for prolonged periods of time.
For one final comparison, lets take a look at the New York Times reader/application for both devices. The iPad “NYT Editor’s Choice” application really demonstrates what the iPad is good for. On the Kindle, for $2 a month, you can subscribe to NYT Latest News. There is a bit more content in Editor’s Choice, but there are also ads. Here is a comparison of the front page from today for each application:
Although it only has limited gray-scale abilities, the Kindle DX actually does really well with images, probably due to its ungodly resolution.
One thing I don’t like about the iPad when reading in bed is the metal edge. This bottom edge is not as rounded as it looks, and tends to dig in to my tummy. Here’s the edge on the iPad:
The Kindle DX has a slightly more curved, plastic edge on the bottom which makes it more comfortable for propping up when using a body part as a rest:
Summary
The new Kindle DX is a phenomenal device. It handled PDFs easily, much better than the iPad. The Kindle DX can be plugged in to a USB port and mounts as a drive. You can drap-and-drop PDFs or eBooks into the document and the Kindle DX will read them. Getting PDFs on to an iPad is a major nuisance. The Kindle DX is also faster rendering the PDFs. The iPad will sometimes loose itself and you’ll get a bunch of blank pages while it is trying to sort out the layout. I’ve also had the iPad PDF viewer crash on several PDFs.
For books, there is no contest. The Kindle DX has razor-sharp text and its light weight makes it disappear while reading. With the iPad, be assured you will never forget you are holding it.
Now I know it is not fair to compare these devices, as they really are like apples and oranges. The iPad is about Distraction. If you want a device to check email, surf the web, hit Twitter and Facebook, play games and watch videos, the iPad is really the only game in tablet-town that can do it all.
The Kindle DX, on the other hand, is about Concentration. If you want a device to read books or other text, the Kindle DX is a light-year beyond the iPad in handling that task. It really is an electronic book. It is sort of like comparing a swiss army knife to good survival knife. If you need to open a can, file the nails, uncork a bottle of wine and maybe cut open something, the swiss army knife is your tool. But if your in the woods trying to build a shelter, start a fire and cut wood, the survival knife is hands-down the tool to have.
If you’re in the market for a book reader, and not an entertainment platform, the Kindle DX is the king of the hill.