Easily create Drag & Drop dashboards in ASP.NET

In the previous version of Gaia Ajax we introduced the sample above. It served as a great starting point for creating dashboard solutions, but we got a lot of feedback on the poor readability of the sample. In the upcoming release of Gaia Ajax 3.5, we’re refactored the example completely to make it much more reusable in terms of easily adding your widgets to the containers. Hopefully you will be able to use the code out-of-box to create dashboard solutions for your users. We’ve also made the chrome around the widgets optional and configurable. That means you don’t have to use ExtendedPanel as a chrome around your widget. Maybe a simple Panel will do ?

Many online providers today offer dashboard options for their customers. IGoogle, Netvibes and Pageflakes to name a few. I guess the comparison stops there, because thanks to Gaia Ajax we were able to create the desired functionality with less than 200 lines of code of C#. That’s mostly because of the powerful building blocks we offer in the library.

Now let’s walk through some code showing you howto add your custom widgets to the dashboard. Just by populating the Widgets Array and specify a default container you have done most of your part of the job. Of course you have to create the widgets too, but that’s as easy as creating a control and we’ll show you an example of that.

   1:  private readonly Widget[] widgets =
   2:  new Widget[]
   3:  {
   4:     new SearchWidget("search", "Search", WidgetContainer.Left),
   5:     new AdWidget("ads", "Ad", WidgetContainer.Left),
   6:     new ImageGalleryWidget("gallery", "Image Gallery", WidgetContainer.Center),
   7:     new ScratchPadWidget("scratch", "ScratchPad", WidgetContainer.Center),
   8:     new NewsWidget("news", "News", WidgetContainer.Right),
   9:     new OpenWindowWidget("window", "Open Window", WidgetContainer.Right),
  10:
  11:  };

Without furher delay, let’s move to the construction of a widget for the dashboard. We’re going to create the Ajax Image Gallery and then we define three members including the ImageButton. Then we use the InitializeComponent function to set default properties and initialize the controls. In the click handler of the ImageButton we circulate through the items in the collection. Notice the clever use of the “properties of remainders” to loop through the items.

   1:  public class ImageGalleryWidget : ChromedWidget
   2:  {
   3:      private readonly Label _lit = new Label();
   4:      private readonly Panel _panel = new Panel();
   5:      private readonly ImageButton _imgGallery = new ImageButton();
   6:
   7:      public ImageGalleryWidget() { }
   8:      public ImageGalleryWidget(string id, string caption, WidgetContainer container) : 
base(id, caption, container) { }
   9:
  10:      protected override void CreateChromeControls()
  11:      {
  12:          _panel.Controls.Add(_imgGallery);
  13:          _panel.Controls.Add(_lit);
  14:          ChromeControls.Add(_panel);
  15:
  16:          base.CreateChromeControls();
  17:      }
  18:
  19:      protected override void InitializeComponent()
  20:      {
  21:          _panel.ID = "imgGallery";
  22:          _panel.Style["padding"] = "10px";
  23:          _panel.Style["padding-bottom"] = "25px";
  24:
  25:          _imgGallery.ID = "imgWidg";
  26:          _imgGallery.Click += imgGallery_Click;
  27:          _imgGallery.Style["float"] = "left";
  28:          _imgGallery.Style["padding-right"] = "10px";
  29:          _imgGallery.Style["margin-bottom"] = "15px";
  30:          _imgGallery.ImageUrl = string.Format("media/contentImages/jazz_albums/{0}", 
musicImg[ImgNo]);
  31:
  32:          _lit.Text = "Click image to browse Image Gallery";
  33:          _lit.ID = "clickText";
  34:
  35:          base.InitializeComponent();
  36:      }
  37:
  38:      private int ImgNo
  39:      {
  40:          get
  41:          {
  42:              if (HttpContext.Current.Session["JazzImgNo"] == null)
  43:                  return 0;
  44:              return (int)HttpContext.Current.Session["JazzImgNo"];
  45:          }
  46:          set { HttpContext.Current.Session["JazzImgNo"] = value; }
  47:      }
  48:
  49:      void imgGallery_Click(object sender, ImageClickEventArgs e)
  50:      {
  51:          ImageButton img = sender as ImageButton;
  52:          ImgNo = (++ImgNo) % musicImg.Length;
  53:          img.ImageUrl = string.Format("media/contentImages/jazz_albums/{0}", 
musicImg[ImgNo]);
  54:      }
  55:
  56:  }

Because you can load ANY control in the framework, it should be easy for you to load ASCX controls dynamically if you want to provide those. We’ve really put a lot of effort into simplifying the samples and the code reductions for the IGoogle sample was more than 60%. Less code == Less errors Laughing

If you want to extend the sample further, here’s a couple of ideas for you.

  • Create a plugin framework that automatically loads modules into the dashboard
  • Create a persistence layer that load/save the layout configuration.
  • Create different chromes around the widgets.

About eagle081183

Passionate, Loyal
This entry was posted in ASP.NET MVC, C#. Bookmark the permalink.

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