Orchard Training and Twitter Bootstrap Carousel Module

Orchard Training and Twitter Bootstrap Carousel Module

It's been a busy few month with the holidays and developing various Orchard websites, modules, and themes. I took a few months off from Orchard training. This past Monday (January 14, 2013) I taught a class on Orchard CMS to a handful of developers interested in learning how to develop custom Orchard modules. I kept the class small to clear the "cobwebs" and get back into the groove. We developed 5 custom Orchard modules (parts, widgets, types, fields, etc. ) in the 4 hours of training and I thought I would just touch upon them for kicks in a series of posts. Since Twitter Bootstrap is so popular, a lot of the various Orchard widgets and modules used Twitter Boostrap for various CSS, JavaScript, etc. It was a fun and very useful session!

Twitter Boostrap Orchard CMS Theme

Awhile back I mentioned I used Twitter Bootstrap as my default Orchard Theme for client projects if they haven't settled on a custom theme. Boostrap just has a lot of CSS features and JavaScript Components that satisfy a lot of needs for both marketing websites and web applications. I converted Twitter Boostrap to an Orchard Theme a long time ago as well as integrated a theme switcher that allows one to switch between numerous Twitter Boostrap themes in Orchard CMS on the fly.

Twitter Boostrap Carousel Module and Custom Orchard Widget

One of the JavaScript components that ships with Twitter Boostrap is a Carousel. If you are using Twitter Boostrap for your Orchard website, it makes sense to create a custom Orchard widget that allows one to add a carousel to the website with ease. As part of the Orchard Training I presented this past Monday, we went ahead and developed a Carousel Widget in Orchard CMS to make it very easy to add 1 or more Carousels to various pages on the Orchard website. The class was pretty amazed at what you can learn from such a simple widget, and this was just 1 of 5 items we built during the Orchard training.

Twitter Boostrap Carousel Orchard CMS Widget

By creating a simple custom Orchard widget to manage and display the Twitter Boostrap Carousel you learn the following and this is just a partial list :)

  • Use the code generation tools in Orchard to facilitate Orchard module development.
  • Create migration files to create custom content types and add custom Orchard fields to those types in Orchard.
  • Add custom admin menus to manage custom content types.
  • Create permissions and honor those permissions for authorization on an Orchard website.
  • Use Placement.info to override placement of fields and express alternatives.
  • Leverage dependency injection in Orchard.
  • Develop custom services and inject those services into Orchard using dependency injection.
  • Cache results in Orchard using various caching strategies to improve Orchard performance.
  • Register custom JavaScript and stylesheets in Orchard that can be applied across the entire Orchard website.
  • Use various shapes and the shape factory in Orchard to dynamically display shapes on the fly.
  • Create re-usable widgets that can be added multiple times on the Orchard Website and leveraged project-to-project.
  • etc...

It's amazing how much you can learn about Orchard CMS from developing a single Orchard widget that can be re-applied in your general Orchard development. And, again, we created a handful of Orchard assets in the Orchard training class that re-inforced these learnings as well as taught other Orchard development skills.

Conclusion

I am going to speak at a few .NET Developer Groups and Code Camps in Florida this year and will be using Twitter Bootstrap and the building of this custom Carousel widget as my example to help other .NET Developers learn Orchard and become interested in being Orchard CMS Developers. I've been developing with Orchard CMS full-time for about 2 years now and love it. I taught around 8 - 10 Orchard CMS classes last year to various development firms and enjoyed that as well. I hope to have another successfull year of Orchard CMS Development in 2013, and I hope all the best for you, too!

For continued series of posts, see: Orchard CMS Training and Developing SEO Meta Tags Module