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.
function InitializeMenu()
{
nCount=0;
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;
menuHeightCollection[nCount] = objSpan.childNodes.item(1).clientHeight;
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.
Groups object is the collection of Group objects.
Group object is the parent of Items object.
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.
- How to relate
CollectionBase class object to collection property at design time?
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.
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.
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.
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
- Put MenuRef.xml to C:\Inetpub\wwwroot\aspnet_client\eCoolSoft\MenuRef.xml.
- Put WebPanelBarScript.js to /aspnet_client/eCoolSoft/, and / represents the virtual directory putting your .aspx file with eCoolWebPanelBar.dll.
- Put eCoolWebPanelBar.dll to the bin directory of the root or the virtual directory with your aspx file.
- 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.
- Drag and drop
eCoolWebPanelBar to WebForm.
1.0.0.0
//This is the content of MenuRef.xml.
="1.0" ="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.
