Making a Reusable Framework for VoiceXML Apps

In this post we will look at making the core components for our MVC voice application more reusable. In a previous post we looked at making a simple Hello World application to see how we might use MVC and Razor to develop a VoiceXML application.  This was more or less a proof of concept for a framework that has the goal of making development of VoiceXML applications easy and could rival some of the VoiceXML development tools out there.

I have taken the reusable parts of this framework and put them into a class library which is open source and can be downloaded from CodePlex. I call this project VoiceModel because it replaces the ViewModel in the MVVM Design Pattern.  What is in our VoiceModel is the meta-data required to render VoiceXML to an IVR (VoiceXML Browser).  The challenge I came across was packaging up the Views developed in Razor that are also reusable across projects.  I did some research and found a solution that seems to work pretty well and is described in StackOverflow by Carson Herrick.  I modified this approach slightly to copy a web.config file into the temp View directory, because MVC requires a web.config in any View directory used.  To make this solutions work there is one slight change you need to make to the Global.asax file for your project, which I will explain in more detail later.

To get started create an empty MVC 3 project as described in the previous Hello World Tutorial.  In addition to the instructions listed I would also recommend deleting the Content and Script directories that are created in an empty project.  We do not require any CSS for these projects and will probably not use the JavaScript libraries included.

Next, make sure you reference the VoiceModel library in your project.  In the "Hello World Tutorial Revisited" download I have included the VoiceModel library in the solution.  So that the views embedded in the library are available to your application add the following code to your Global.asax file.

       public static void RegisterCustomViewEngines(ViewEngineCollection viewEngines)
        {
            viewEngines.Add(new VoiceViewEngine());
        }

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
            RegisterCustomViewEngines(ViewEngines.Engines);

        }

This will put the views in the ~/tmp/Views directory along with a web.confg.  Now all you need to do to create your Hello World application is to add the following code to HomeController.cs.

       public ActionResult Index()
        {
            Output output = new Output("greeting", "Hello World");
            return View("Output", output);
        }

Now to test your application just make sure your HelloWorld project is set as the default project and press Ctrl+F5.  This should bring up your default web browser and you should see the following.

That is all there is to create a simple voice application.  To test whether this will run on an IVR you can follow the instructions here for testing on Voxeo Prophecy for free.

In an upcoming post I will cover how we can use this framework to create more advanced applications and how we handle control of the application flow.