Today, we're announcing the availability of a RubyGem that helps you quickly add Kendo UI to your Rails applications. In this post, I'll share an overview of the Gem, a quick tutorial on how to use it, and even a video of the new Gem in action.
$ rails new shoe_fodderThen, edit your Gemfile by adding a reference to the gem, just after `gem 'jquery-rails'`:
$ cd shoe_fodder
gem 'kendoui-rails'
Now, return to your console and run `bundle install.` Check that wall of text that Bundler sends your way to confirm that kendoui-rails (v0.0.5 at the time of this post) has been properly installed.
This step is where many JavaScript-enabling RubyGems would drop you off, leaving you to handle asset configuration on your own. Not our Gem, though! We said 'little manual effort,' and we meant it. The kendoui-rails Gem includes a custom install generator that will make sure you have all the JavaScript and CSS you need to get cracking with Kendo. Just type the following in your console:
$ rails generate kendoui:install
Now, depending on your Rails version and environment, one of two things will happen here. If you're using Rails 3.1 or later, and have the new asset pipeline features enabled--they are, by default--the Gem will add the appropriate references to your `app/assets/javascripts/application.js` and `app/assets/stylesheets/application.css` files:
// app/assets/javascripts/application.js
//= require kendo/kendo.all.min
/* app/assets/stylesheets/application.css */
*= require kendo/kendo.common.min
*= require kendo/kendo.default.min
Ok, we have a switch for that. You no doubt noticed that the generator command used the 'default' theme upon installation. 'default' is, of course, the default, but you can use the '--theme' switch on the generator command to install another theme instead. Let's say I prefer BlueOpal:
$ rails generate kendoui:install -- theme=blueopal
Now that I've added Kendo UI into my rails app, I can do some quick scaffolding to see just how easy it is to use. I'll run the following in my terminal to generate a `shoe` model, including views and controller:
$ rails g scaffold shoe name price:decimal url replacement_mileage
Once that's finished, I'll migrate the database:
$ rake db:migrate
Now, I'll navigate to my `shoes/new` view and add some Kendo goodness to the bottom of the page. In this case, an AutoComplete box that provides some assitance to the user when naming a new shoe:
<script> $(function() { $("#shoe_name").kendoAutoComplete(["Nike Free", "Saucony Series 7", "Vibram Five Fingers"]); }); </script>
$ rails server
That's it! I'm rocking and rolling with Rails and Kendo UI from scratch in under three minutes. Or two minutes and twenty-seven seconds, to be exact. To show you just how quick this whole process can be--and prove that I didn't make that 2:27 figure up--I recorded myself going through the exact same steps as above. Check out the embedded video below, or watch it over on our YouTube channel (Note: be sure to watch in Fullscreen mode to get all of the detail.)
Brandon is the founder of Carrot Pants Press, a maker education and publishing company, the founder and CEO of Tangible Labs and an avid tinkerer.