Creating Your Own Glimpse Plugin

Last weekend I created a Glimpse plugin for PetaPoco. It was surprisingly easy. In this post I’ll show you how to create your own.

Please note as Glimpse is still in Beta, this example may change. but I will endeavour to update the post when and if the interface changes. This plugin is based on Glimpse 0.81.

Here is the complete code for our first plugin.

    [GlimpsePlugin(ShouldSetupInInit=true)]
    public class MyFirstGlimpsePlugin : IGlimpsePlugin
    {
        private int MaxValue;

        public object GetData(HttpApplication application)
        {
            // Return the data you want to display on your tab
            var data = new List<object[]> {new[]{ "Column1", "Column2", "Column3" }};

            for (int i = 0; i < MaxValue; i++)
            {
                // Usually get your data from application.Context.Items
                data.Add(new object[] {"Data " + i, 10*i, DateTime.Now.AddHours(i)});
            }

            return data;
        }

        public void SetupInit(HttpApplication application)
        {
            // Perform an initialisation that needs to be done.
            // Run once at startup
            MaxValue = 5;
        }

        public string Name
        {
            get { return "MyFirstPlugin"; }
        }
    }

There are three parts.

1. The Name get accessor: This is the name of the tab.

2. SetupInit method: This method will run once when the Plugin is loaded. Perform any initialisation code here.

3. GetData method: This is where the action happens. All data returned from here will be serialized into JSON and sent to the client to be rendered by the Glimpse client side framework. How it is exactly rendered depends on whether you return arrays or objects or arrays of objects etc. Initial details for this can be found on the Protocol page. Usually you would put the data you need to display in the HttpContext.Items dictionary in part of your application. You can then pull the data out using the application variable provided to you in the GetData method.

For example

-> data goes in:  HttpContext.Current.Items[“test”] = “Some data”;

-> data comes out:  var testdata = application.Context.Items[“test”]

The following is rendered by Glimpse.

Glimpse-firstPlugin

As you will see, it doesn’t matter what data you put in what column as Glimpse will do its best to render the data in the most approriate way. If I change the GetData method to be:

        public object GetData(HttpApplication application)
        {
            // Return the data you want to display on your tab
            var data = new List<object[]> {new[]{ "Column1", "Column2", "Column3" }};

            for (int i = 0; i < MaxValue; i++)
            {
                // Usually get your data from application.Context.Items
                data.Add(new object[] {"Data " + i, 10*i, DateTime.Now.AddHours(i)});
            }

            var nestedData = new Dictionary<string, object>
                                 {
                                     {"NestKey1", "NestedValue"},
                                     {"NestKey2", 2 },
                                     {"NestKey3", DateTime.Now }
                                 };

            data.Add(new object[] { "Data Nested", 60, nestedData });

            return data;
        }

the following is rendered by Glimpse.

Glimpse-firstPlugin2

As you can see the Glimpse team have made it super easy to create your own plugin. It literally takes minutes.

Enjoy

Adam

Advertisements
This entry was posted in .NET and tagged , , . Bookmark the permalink.

5 Responses to Creating Your Own Glimpse Plugin

  1. Nik says:

    Glad you enjoyed making the plugin Adam!

    Just a quick note, at this point Glimpse is still in Beta and the Interface for plugin’s may change. We will do our best to work with the community and gather before this happens.

  2. Pingback: A Glimpse into PetaPoco | Schotime.net

  3. Peter says:

    So how do I register the new plugin with Glimpse?

  4. Peter says:

    Thanks Adam, that’s just magic but it works.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s