Cu3er .Net HttpModule Updates Your Configuration

Jan 8th

Posted by Khalid in Code

No comments

image

So I’ve been playing around with Cu3er, a great flash component for websites. It gives you the ability to create dynamic looking slideshows with great transition effects. I highly recommend you go over to Cu3er site and check it out. What I don’t like about Cu3er is that you can’t point it at a directory and let it pick up the image files dynamically. So I decided to help the .Net crowd with this little speed bump. I’ve done all the tedious work of mapping Xml to objects (trust me, I dislike doing this).

The main goal was to be able to drop images into a directory and update the configuration. I didn’t want to exclude anybody using Asp.Net, regardless whether you are using WebForms or ASP.NET MVC. So I finally ended up going with an HttpModule. The code executes every time a request is made and checks to see whether the contents of the image folder have been updated. For me it isn’t quite ideal, because I am reading the file system every time a request is made. I attempted to to use FileSystemWatcher but I couldn’t seem to get it firing in an ASP.NET environment.

So what are the advantages to using this HttpModule?

  • Minimal editing of Xml. Just setup the main settings node in the config.xml file and it will be preserved.
  • Could add great functionality to a CMS or dynamic site.
  • Configurable from a configuration section

So What are the disadvantages

  • Can only define one type of transition for all images.
  • It is an HttpModule that fires every request (not ideal in my mind)

How do you make it work better for you?

  • If you are using Asp.Net WebForms, create a HttpHandler that creates the configuration every time the config.xml is requested.
  • If you are using Asp.Net MVC, create a controller action that returns a ContentResult containing the config.xml every time it is requested.

This is still an initial start to what I think can be a great helper to an already great flash component. Maybe V2 of Cu3er will have this functionality already built in, so this could be obsolete by then as well. But until then you are welcome to use this library and modify this library. I consider the code I wrote as an Alpha, if that. Realize that there could be bugs. Their is no warranty or guarantee expressed or implied (a little CYA).

To make this solution work you will need to do the following.

  1. Add a reference to the Cu3er .Net Library or Project to your web project.
  2. Add the configuration section to your web.config
  3. define the directory path to watch, and the location of the config.xml
  4. define the Cu3er module in the HttpModules section
  5. import the Html and Swf into the page you’d like to use Cu3er.

Check out the example I included with the Cu3er .Net project to see how to accomplish the steps above, and be sure to read the Cu3er documentation (the example is in ASP.NET MVC, but doesn’t really use the features of ASP.NET MVC to accomplish the goal).

Cu3erExample

, , , , ,

Open Flash Chart in ASP.NET MVC

Dec 10th

Posted by Khalid in ASP.NET MVC ...

7 comments

If you’ve ever developed an application of any type, you know that the business function of that application is only half the story. Most business applications also have to take into mind that your business user is going to want reporting. As a developer I find reporting the most boring part of the development process, but it is becoming less and less painful for me as a developer to implement it into my applications. Within the last year Microsoft has released a charting addition to the .Net framework based on the Dundas charts package, but they only output static images. In most cases this is ok, but it doesn’t make for a very compelling experience. Open Flash Chart is one alternative to the .Net charting; it is interactive and dynamic, which can help you build those compelling interfaces that your clients look for. So the point of this walkthrough is to show you how to implement Open Flash Chart into your MVC application.

image

Step 1 – Download the Open Flash Chart package

Obviously you’ll need Open Flash Chart, you can download it from the Official Open Flash Chart. When you download it there is going to be a lot of files, but don’t worry about it I’ll tell you which ones you need.

Step 2 – Import The Files You Need

You are going to need two files at a minimum. There is a .Net library in the package but I’ll show you, you don’t need it. The first file is the open-flash-chart.swf. This file is the major component of the open flash chart package. I transferred this file directly into my content folder in my ASP.NET MVC project.

image

image

The next file you’ll need is the swfobject.js file, this will make placing your charts on the page much cleaner and simpler. Transfer this file into your scripts folder.

image

image

Step 3 – Integrating Open Flash Chart into your View

There are a couple things that I do to get Open Flash Chart into my view. I first modify my master page and add a new ContentPlaceHolder called “Scripts”. This allows me to inject custom scripts per view if necessary. My head tag in the master page looks like the following.

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/swfobject.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="Scripts" runat="server" />
</head>

The next step is to inject the Chart into the page. The following code does that.

<asp:Content ContentPlaceHolderID="Scripts" runat="server">
    <script type="text/javascript">
        swfobject.embedSWF(
              "/Content/open-flash-chart.swf", "my_chart", "550", "200",
              "9.0.0", "expressInstall.swf",
              { "data-file": "Home/GetData" }
              );
    </script>
</asp:Content>

Notice what is done here. You first point to the open-flash-chart.swf in your content folder. Next you specify the div you would like to inject the chart into. Thirdly, you specify the size. Right after that is about the flash version and the install if your client is missing flash on their machine. Lastly, the most important thing, the location of your data. Notice that it points to a controller action. I’ll show you how to code that next.

Step 4 – Data, Data, Data

A chart wouldn’t be a chart without data. This is where we will leverage the power of the newest .Net frameworks with anonymous types. Open Flash Chart uses JSON objects to create you chart, but we don’t want to spend hours creating a library or adding references to assemblies we don’t need. So I went ahead and created an action relating to the one seen above. The code looks like this.


        public JsonResult GetData()
        {
            var data = new
            {
                title = new { text = "Many data lines", style = "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}" },
                y_legend = new { text = "Open Flash Chart", style = "{color: #736AFF; font-size: 12px;}" },
                elements = new object[] {
                        new { type = "bar", alpha = 0.5, colour = "#9933CC", text = "Page views", values = new []   {9,6,7,9,5,7,6,9,7}},
                        new { type = "bar", alpha = 0.5, colour = "#CC9933", text = "Page views 2", values =  new [] {6,7,9,5,7,6,9,7,3}}
                },
                x_axis = new { stroke = 1, tick_height = 10, colour = "#d000d0", grid_colour = "#00ff00",
                    labels = new {
                        labels = new[] { "January", "February", "March", "April", "May", "June", "July", "August", "Spetember" }
                    }
                },
                y_axis = new { stroke = 4, tick_length = 3, colour = "#d000d0",  grid_colour = "#00ff00", offset = 0, max = 20 }
            };

            var result = Json(data);

            // Allow Open Flash Chart to
            // make request for data through GET
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return result;
        }

There are two catches here. The first catch is that Open Flash Chart has some properties that have a dash in them, like “font-size”. The other problem is that Open Flash Chart does a GET Request for all data, that is why I have the funky code at the bottom of the action. Don’t forget to look at the Open Flash Chart documentation to get an idea of what you need to get your chart looking like you want it to.

Conclusion

So there you have it. Now you have integrated Open Flash Chart with the addition of two files and a new action. I love how easy it is to use this project in an Asp.net application. Look into the Open Flash Chart package, because I’m sure there are more and better ways to implement this charting package into your applications.

, , , ,