Tags

, , , , , , , , , ,

Content
Part 1: Defining and analyzing basic view structure and components
Part 2: Designing Client side object module

Introduction
This is my first post in this series of creating a widgets based web portal (Dashboard) particularly for .Net MVC using power of JQuery. At the end of this series, my efforts will be toward making a reusable component that should leverage an optimal solution for integrating different types of contents into widgets. In particular interest to this series will be utilizing existing behavior of ASP.Net WebPart as following:

  1. Page Layout customization
  2. WebPart drag drop
  3. Edit WebPart
  4. Customize WebPart
  5. WebPart Personalization
  6. WebPart connection
  7. Remove, Minimize, Refresh WebPart

Let’s first start with the rough design of portal. For this we will look into existing implementation and my favorite one BBC.com dashboard. Like in ASP.net WebParts, one WebPartManager is mandatory in page which will provide common accessibility for other components at server and client side. WebPartCatalogZone will act as storage of WebPart description like its title, URL, image, etc… These descriptions can be added or removed from server and client side which in turn will get reflected in catalog zone or customization pane. We could enhance this widget by providing customized templates which can be customized at design time to introduce verity of looks for same content types. For now we will support simple template like lists, image cover flow, grids. And will keep on adding as required.  Once the use selects this widget from pane will gets added into relevant WebPartZone using templates. For templates currently I’m considering Microsoft Ajax Dynamic templates. This article shows excellent implementation of dynamic templates for portal.

This dashboard will be composed of following components/elements (we will add it as we proceeds with implementation):

  1. WebPartManager
  2. WebPartCatalogZone
  3. WebPartTemplate
  4. WebPartZone
  5. WebPart (Widget Description)
  6. Client Side Object Module for above components

Class Diagram:

Page Layout:
So let’s decide how our server side implementation should look like. We are currently not going to look into styling but will start with basic HTML elements first. Then we will convert them into components and add required functionalities.

CSS:

 #CotalogZoneContainer
 {
 width: 990px;
 margin-left: auto;
 margin-right: auto;
 background-color: #ababab;
 padding: 5px;
 }

 #CotalogZoneContainer .add
 {
 text-align: right;
 }

 #CotalogZoneContainer .template
 {
 background-color: gray;
 overflow: auto;
 height: 100px;
 }

 #CotalogZoneContainer .layouts
 {
 width: 250px;
 float: left;
 overflow: auto;
 margin-top: auto;
 margin-bottom: auto;
 height: 100px;
 }

 #CotalogZoneContainer .webparts
 {
 width: 730px;
 float: left;
 margin-top: auto;
 margin-bottom: auto;
 overflow: auto;
 height: 100px;
 }

 #WebPartZonesContainer
 {
 width: 990px;
 margin-left: auto;
 margin-right: auto;
 padding: 0px;
 }

 #WebPartZonesContainer #StaticWebPartZone1
 {
 width: 48%;
 height: 500px;
 }

 #WebPartZonesContainer #WebPartZone1
 {
 width: 50%;
 height: 500px;
 }

 #WebPartZonesContainer #WebPartZone2, #WebPartZonesContainer #WebPartZone3, #WebPartZonesContainer #WebPartZone4
 {
 width: 320px;
 }

 #WebPartZonesContainer .WebPartZone
 {
 margin: 2px;
 border: 1px solid #ababab;
 float: left;
 }

HTML:

<div>
<div id="CotalogZoneContainer">
<div class="add">
                Customize Page</div>
<div class="template">
<div id="LayoutZone1" class="layouts">
                    layouts</div>
<div id="CatalaogZone1" class="webparts">
                    catalog</div>
</div>
</div>
<div id="WebPartZonesContainer">
<div id="StaticWebPartZone1" class="WebPartZone">
                zone</div>
<div id="WebPartZone1" class="WebPartZone">
                zone</div>
<div id="WebPartZone2" class="WebPartZone">
                zone</div>
<div id="WebPartZone3" class="WebPartZone">
                zone</div>
<div id="WebPartZone4" class="WebPartZone">
                zone</div>
</div>
</div>

OK, so this will look like something

That’s it for now. I’ll try to add new post every week. Till then please add any suggestions and questions.