Using xstyle with ArcGIS API for JavaScript
Recently I have been toying around with a library called xstyle that is maintained by the same guys that maintain the Dojo Toolkit. At first glance, it may seem like another css preprocessor, similar to Sass or less, which are both great tools. However, once you dive in, it can do so much more.
Keeping it dynamic
If you’ve read my blog before, you know I’m a big fan of using Dojo to keep my code modular, even using dynamic loading. The first thing I had tried with xstyle was loading my css files dynamically. You can find some details here. But you can basically load the css only when needed when a module is loaded, like this.
This is great for working with modules that may or may not be used in your application. In my case however, this is a little less important to me because I use less and my build process will typically handle this, but that’s not to say it doesn’t come in handy. The aspect of xstyle that really got me excited was building UI components from css templates. Now that sounded like fun.
How xstyle nearly broke me
My first dive into trying xstyle components was a miserable failure, sort of. It worked when I used it in a standalone non-esri project, just to get my feet wet. As soon as I tried the same thing using the ArcGIS API for JavaScript the whole thing blew up. It was error after error with no luck at all. At this moment, the latest version of xstyle as 1.3.1. The version that ships with ArcGIS JavaScript API is 0.1.3. That’s a big difference. I suspect it’s because that it is the minimum version used with dgrid. At this point, I had other things to finish up and xstyle fell off my radar, but not quite…
I couldn’t get that nagging feeling out of the back of my head. I knew it worked standalone, I had seen it work outside the ArcGIS JavaScript API, so I had to keep trying. Every once in a while I’d go on a twitter rant about these trials and experiments, random errors. Even when I loaded the most recent build of xstyle into my ArcGIS API projects, I would get errors. I finally spent some time tracking it down to an odd error when using the @import rule in my css. So I did what any good dev would do, I submitted a pull request and that fixed the issue enough for me to really get the party rolling.
Component abuse
Let’s dive right in. I used bower to load xstyle into my project. Here is what my bower.json looks like.
The next important step was to override the xstyle that ships with the ArcGIS JavaScript API. This can be done where you define your dojoConfig.
Next I have a widget that doesn’t really do much other than load the css and sets up a module used as the model for the component.
Now, let’s look at what the css looks like.
Here is a look at the model that does all the work.
By using model = module(‘widgets/mywidget/model’); in the css, you now have access to methods on the model. This is just a plain object with methods. You can’t really initialize a constructor the way you do with dijit widgets. This is why I used this widget to pass some parameters, including the map to the model. If you look at the css, you can see that we can bind a method of the model to the keyup event by using on-keyup: model/updateValue(event). Then the button can bind the click event to another method by using on-click: model/find(). This find method fires off a FindTask and will zoom to a location. The search is configured for state names, so search for Texas or California.
This is just a quick rundown, you can find the whole project on github.
Components rule, Dijits drool
Ok, slow down. xstyle is still fairly new and it’s not going to replace Dijits in Dojo 2.0, but is a very interesting way of building components. I’m thinking this might be a great way to build tiny widgets, something similar to the LocateButton or HomeButton. I’m still experimenting with it myself. I for one use simple buttons to activate more complex widgets all the time, so this could be a great way to build small reusable components in my applications.
I highly encourage you to give it a shot and experiment. If anything you may find just dynamically loading your css files with the accompanying widget to be well worth the effort.