Click here to Skip to main content
15,867,756 members
Articles / Web Development / ASP.NET
Article

eCoolWebPanelBar - Outlook style Web Panel Bar

Rate me:
Please Sign up or sign in to vote.
3.20/5 (10 votes)
30 Jul 20036 min read 439.2K   6.5K   82   11
eCoolWebPanelBar provides us a web GUI, like Outlook.

Sample Image - eCoolWebPanelBar.gif

Introduction

1.0.0.0

eCoolSoft had kept focusing on MFC for the development of Windows GUI for a while. eCoolSoft had changed its mind to focus on ASP.NET and DHTML for the web client GUI development.

This is mainly because the controls in ASP.NET are server side controls, and they don't have the same capability as the Windows GUI on the browser.

After eCoolSoft made a search, eCoolSoft found that the combination of ASP.NET and DHTML is the best choice to develop client side ASP.NET components.

1.1.0.0

eCoolWebPanelBar now supports the collection properties of both Groups and Items in VS.NET properties box. This means that you can define eCoolWebPanelBar properties from both XML file and the properties of VS.NET IDE.

Also, version 1.1.0.0 supports the bold or non-bold font to the letter of the menu head and adding the left image of the menu head.

Reference

1.0.0.0

This demo consists of three files called eCoolWebPanelBar.dll, MenuRef.xml and WebPanelBarScript.js.

  • MenuRef.xml is an XML file to fulfill the properties of the menu head and menu item of eCoolWebPanelBar.
  • WebPanelBarScript.js is JavaScript file for eCoolWebPanelBar to shrink and expand the panel actually.
  • eCoolWebPanelBar.dll is the custom control created by ASP.NET.

eCoolSoft found the weird bug in Mr. Zek3vil JavaScript code since WebPanelBarScripts.js gets the error of SPAN tag if we use his code with ASP.NET control. This is mainly because ASP.NET creates SPAN tag for the server control, and JavaScript tries to assign OnClick event to the Label control, for example.

To solve this bug, eCoolSoft adds the array object declared realMenuObj defined by SPAN ID named ecoolx, and x represents the number. X (count) is generated by HtmlTextWriter in Render function through the number of Menu Head defined by MenuRef.xml.

After this, only realMenuObj is considered to process to shrink or expand the menu item.

JavaScript
//This is the part of WebPanelBarScripts.js 
function InitializeMenu() 
{
nCount=0;
//get a collection of menus
objSpanCollection =document.body.getElementsByTagName("SPAN");
for (var i = 0; i < objSpanCollection.length; i++)
{
var objSpan = objSpanCollection(i);
if(objSpan.id .indexOf("ecool") != -1)
{
realMenuObj[nCount] = objSpan;
// get a collection of Menus' height
menuHeightCollection[nCount] = objSpan.childNodes.item(1).clientHeight;
// assign the click event to every Menuheader
// prevent the bug if asp.net control has the tag called span;
if(objSpan.childNodes.item(0).id=="xpmenu" )
{
realMenuObj[nCount].childNodes.item(0).onclick = ControlMenu;
if(nCount != 0) realMenuObj[nCount].childNodes.item(1).style.display = "none";
}
nCount++;
}
}
}

eCoolWebPanelBar.dll is almost same structure as Mr. yanhao's code after eCoolSoft confirms that the raw HTML code shows Outlook style bar.

Render function has the same HTML code in HtmlTextWriter to make loops by Group and Item count by MenuRef.xml.

This time, eCoolSoft can't provide the source code of eCoolWebPanelBar.dll mainly because eCoolSoft fails to create the different versions of code. This seems to be very frustrating to keep developing the new version with the same TagPrefix of the custom control.

eCoolSoft gets the error message saying that eCool:Goup is defined at multiple places in same directory. As a result, eCoolSoft keeps working with the same project of eCoolWebPanelBar. This means that eCoolSoft doesn't have the same code of this eCoolWebPanelBar.dll any more.

1.1.0.0

eCoolSoft tries to support the collections property at design time. MS Press Book - Developing Microsoft ASP.NET Server Controls and Components gives eCoolSoft many hints to solve the collection property at design time.

However, this book uses IList base class, and then eCoolSoft must write the code by CollectionBase class approach. This solution is shown in a later paragraph.

How to work CollectionBase class in eCoolWebPanleBar

Before eCoolSoft makes CollectionBase class work to the collection properties, eCoolSoft tries to find the sample code for this. However, eCoolSoft never finds any good article about this. One sample has the code for tab collection control, but tab actually has its object because tab control object is created at the other place.

That is, at eCoolWebPanelBar has the following relationship.

  1. Groups object is the collection of Group objects.
  2. Group object is the parent of Items object.
  3. Items object is the collection of Item object.

    So, Groups, Group, Items, and Item are not GUI objects, so we have to take care of the creation of these objects by ourselves.

  4. How to relate CollectionBase class object to collection property at design time?

    C#
    public class Groups : System.Collections.CollectionBase, IStateManager
    public class Items : System.Collections.CollectionBase

    After we declare Groups and Items class, we need define GroupsEditor class derived from CollectionEditor class.

    C#
    namespace eCool.WebPanelBar.Design
    {
    public class GroupsEditor : CollectionEditor
    {
    public GroupsEditor(Type type) : base(type)
    protected override Type[] CreateNewItemTypes()
    {
    Type[] types = new Type[]
    {
    typeof(eCool.WebPanelBar.Group)
    };
    return types;
    }
    }
    }

    After this, we must map GroupEditor class to Groups class for the design editor to understand the relationship between these.

    C#
    namespace eCool.WebPanelBar
    {
    [
    Editor(typeof(
    eCool.WebPanelBar.Design.GroupsEditor),
    typeof(UITypeEditor)),
    ]
    ..... 
    }

    So, last issue is how we make the design editor know the parent and child relationship between Group and Items object.

    C#
    namespace eCool.WebPanelBar
    {
    [
    TypeConverter(typeof(ExpandableObjectConverter)),
    DefaultProperty("Items"),
    ParseChildren(true, "Items")
    ]
    public class Group : IStateManager
    .....
    }

    Without the above code, eCoolSoft gets the error message saying that eCool:Items is not defined ...

Another issue is that eCoolSoft has to face the conflict between XML format and the design editor format. That is, if we add the new group to eCoolWebPanelBar by the design box, the duplication happens, and then one more Group and Item are created. To solve this issue, eCoolSoft changes the location to load the data from XML file in OnRender(...) function. Before, this happened in constructor in WebPanelBar.

As a result, we can now define the data from both XML file and the design tool.

How to use eCoolWebPanelBar

  1. Put MenuRef.xml to C:\Inetpub\wwwroot\aspnet_client\eCoolSoft\MenuRef.xml.
  2. Put WebPanelBarScript.js to /aspnet_client/eCoolSoft/, and / represents the virtual directory putting your .aspx file with eCoolWebPanelBar.dll.
  3. Put eCoolWebPanelBar.dll to the bin directory of the root or the virtual directory with your aspx file.
  4. Add eCoolWebPanelBar to Toolbox of VS .NET by clicking the right mouse button on the panel which you want to add in, selecting "Customize Toolbox" and choosing eCool.WebPanelBar.dll after browsing the file in .NET tab selection.
  5. Drag and drop eCoolWebPanelBar to WebForm.

1.0.0.0

XML
//This is the content of MenuRef.xml. 

<?xml version="1.0" encoding="utf-8" ?>
<menudata> <menuhead id="Product" caption="OutLook" imageurl="./images/up.gif">

<menuitem id="item10" caption="Today" 
  url="www.ecoolsoft.com/products.aspx" imageurl="./images/Today.gif" />

<menuitem id="item11" caption="Calendar" 
  url="www.ecoolsoft.com/product_2.aspx" imageurl="./images/Calendar.gif" /> 

<menuitem id="item12" caption="Inbox" 
  url="www.ecoolsoft.com/product_3.aspx" imageurl="./images/Inbox.gif" />

</menuhead>
</menudata>
//eCoolWebPanelBar doesn't support target of html tag of URL yet.

You can modify MenuRef.xml to point to a different image file, caption and URL as long as you keep the same format.

Known Bugs

1.0.0.0

  • eCoolWebPanelBar works only with IE5.5 and its later versions.
  • Don't modify Group and Item properties in IDE design box. If you modify these, eCoolWebPanelBar doesn't work.
  • When eCoolWebPabelBar shows, we see that the panels except the first one shrink
  • eCoolWebPanelBar doesn't work for Group and Item collection properties of design box yet.

Currently, eCoolSoft is working to fix these bugs except Netscape and IE5.0 support.

Future Issue [1.1.0.1]

eCoolSoft focuses on the following issue to protect ASP.NET against the decompiler.

  • JavaScript code should be encoded?
  • XML file should be loaded from resx file ?
  • DHTML code should be loaded from XML format to XSLT?

eCoolSoft notices that several competitors use this kind of approaches to protect their intellectual rights. Furthermore, XSLT expands the capability of XML file for the reusable code.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer (Senior)
Japan Japan
Visual C++ developer & Master of Business Administration (MBA) holder.
My interests moves from MFC to C#, especially ASP.NET, Web Service and Mobile Development.

I have lived in Atlanta, GA of USA from 1995.
As my name shows, I'm a Japanese.
This is my name in Japanese.
大西 正明

I have moved to NJ to work for the project to rebuild GUI (MFC) of some big Japanese electrioc company product. Sometimes, I enjoyed to walk around NYC. Smile | :)

(April 09, 2006 updated)
I have come back to Japan from August, 2004. Currently, I live in Tokyo in Japan, and work as a contract software engineer in the Japanese major securities company. The languages of the project are VC++(MFC) and VB.

Comments and Discussions

 
GeneralRe: I get by with a little help..... Pin
Masaaki Onishi23-Jun-03 3:24
Masaaki Onishi23-Jun-03 3:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.