New control from scratch....

[Chris Fink]

I am curious...how do you go about building a new control from scratch? Just
for example, suppose you want to rebuild an asp:textbox control just like the
one provided in the framework, but are not allowed to use the textbox base
class. Is this even possible? This would involve drawing the textbox, then
defining an area where text can be entered into it and handle some basic
events such as OnTextChanged, etc. This example is not practical, but if the
need did arise I am curious as how this can be accomplished? I am given the
impression the sky is the limit in control building and am very interested in
understanding how the .NET team built many of the their own base control
library.

 

[Dimitri Glazkov]

Chris,

Building a new control is not a rocket science. Basically, all you have to
do is create a new class, which inherits either from System.Web.UI.Control
or System.Web.UI.WebControls.WebControl. Use the former if you are planning
to manage rendering completely on your own or if your control doesn't have
anything to render and use the latter if you would like to use built-in
style facilities.

Once you have created this class, you have two options to pursue:

a) Composition -- here you override CreateChildControls method to compose
your newly created control out of existing controls, such as textbox.

b) Rendering -- here you override the Render method and use the
HtmlTextWriter, supplied as method's argument to render the HTML for the
control.

For more information, use MSDN library:

http://msdn.microsoft.com/library/d...uide/html/cpcondevelopingwebformscontrols.asp

Remember, there is no "drawing" going on -- all ASP.NET controls are simply
chunks of HTML code. Thus, in order to learn how to render the control, you
need to have a good understanding of how (D)HTML/CSS thing works.

Hope this helps.

G<

 

[Chris Fink]

Dimitri,

Thanks for the response. Let me elaborate a little bit on my objective so
the question makes the challenge a bit clearer - I believe the answer to this
is that it cannot be done.

What I want to accomplish is extending on the <select><option> html tags to
make it appear on a web page just like the visual studio.net intellisense
drop down list. This includes an image/icon to the left of each item and a
dropdown list with more than one row displayed at a time (example <select
id="isense" name="optSelect" size="7">) This will allow the user to use the
scroll bar on the right of the drop down list to browse through items.

The challenge in this is creating this functionality. I do not know any way
to accomplish this desired affect. True, I can write a flyout menu using
Javascript but this will not produce the scrollbar effect on the right hand
side. The main problem using a flyout menu is that the amount of items in
the list could become quite lengthy, just as in the .net intellisense window.

So I pose the question. If you can't create controls from scratch by
drawing them and they are not part of the underlying html/dom
framework....how do you accomplish this? I understand the power of building
controls is limited to their lowest common demoninator(html/javascript/dom
specifications)....if you can't do it using DHTML that it can't be done.....

Building controls will never be rocket science when we don't have the
ability to build a rocket.....from scratch....

 

[Dimitri Glazkov]

Chris,

You may not be able to get exactly the same functionality as VS.NET
intellisense, but you could get pretty darn close. True, you can not extend
the existing SELECT element. However, I wouldn't even if I could. The
purpose of the SELECT element is to populate form data, not to provide
navigation. In your case, I would definitely go with DHTML.

Scrollbars are possible to implement by setting CSS property overflow to
"auto" or "visible" and controlling the height of your drop-down menu panel.

As far as the number of the items is concerned, you should be able to get
away with a 100 or so without visible performance impact. If you have lots
more than that, I would question application design rather than attempt to
create an all-satisfying solution.

Also, I would not think of this development as one of creating a new HTML
element like SELECT and such. You already have all HTML elements needed to
accomplish your task: UL, LI, and A. All you're doing is changing the
rendering of these elements using ECMAScript (the proper name of JavaScript)
and CSS.

G<