home links tools blog about

toolpanel examples


Basic ToolPanel Examples

There are a number of ToolPanel Control: Labels, TextBoxes, CheckBoxes, Images, Buttons, ImageButtons, Hyperlinks, etc. A smattering of them are shown below. Just mouse over the controls below to begin getting an idea of what is possible.

Text here could indicate to the user what happens if they 'take the red pill' and click this button.

HyperLink Control

This hyperlink has it's href attribute set to #, but shows that if you WANTED, you could put extra explanation next to a hyperlink.

Because of the way ToolPanels work, they just create a little 'panel' of HTML that pops-up when invoked. Because it's HTML instead of just text, like ToolTips, you can do spiffy things like add images to your ToolPanel content.


ToolPanel logic is pretty simple to implement, and acts, effectively like decorator logic on top of existing ASP.NET controls (even controls you've created can be 'decorated' with ToolPanel Functionality). (Note that you can type in the text box while these instructions remain intact.)


Note, there's one ToolPanel Control that isn't displayed above: the DynamicToolPanel Control. Like ASP.NET validators which allow you to pick a control to validate, this control just drops onto the page, and allows you to 'target' another ASP.NET (or 3rd party) control to 'ToolPanel.' This means that complex controls, like DataGrids, Repeaters, Tables, etc. (which aren't included in the ToolPanel Control Suite) can be 'Paneled' as well.

Basic ToolPanel Functionality

Using just the ToolPanelLabel Control, here are some more examples of what ToolPanels can do. Just mouse over the Labels below...

Interactive ToolPanel

This ToolPanel is interactive, meaning that you can mouse on to it, and interact with it.

Non Interactive ToolPanel

This ToolPanel can't be interacted with. As soon as the mouse leaves the invoking control, this panel is extinguished. Even if you're fast enough to get the mouse on to this panel before it closes, it still extinguishes. Changing interactivity is just a flip of a switch in the designer...

Mouse-Relative ToolPanel

This Panel has been placed relative to the cursor. Mouse relative panels aren't interactive and dissappear when you mouse-away from the invoking control.

Page-Relative ToolPanel

This is a page relative panel, meaning that the panel was positioned relative to the page, and not the invoking control.

ToolPanel with a close 'button'

Using a special token in your ToolPanel allows you to inject a 'close()' functionality inside hyperlinks, buttons, etc. Like this this [close] link.


Advanced ToolPanel Functionality

Given that ToolPanels are just floating chunks of HTML, a number of powerful options become available functionality-wise. Couple those options with a skinning and variable-replacement framework that is baked-in, and ToolPanel Controls expose some advanced functionality that can be exploited by experienced developers.

iFrame ToolPanel


So, what are ToolPanels?

What are ToolPanels? They're just a bit of .NET functionality that lets page designers add 'pop-up' functionality to their pages in a jiffy. Want to add some extra help/instructions on a complex form? Drop in a ToolPanelTextBox, and it behaves exactly like an ASP.NET TextBox Control, but has new properties that allow you to specify what the corresponding pop-up will look like. You can quickly and easily specify WHERE the pop up appears (it can appear relative to the invoking control (in this case the TextBox), relative to the page (maybe you've got a 'help-pane' off to the right of the page), or it can follow the mouse around and pop up relative to the user's cursor). You can also specify the format of the ToolPanel, with border, width, background color, assign a cssclass to it, etc. And, of course, you can specify the contents of the ToolTip.

Since these controls are ASP.NET controls, all properties can be set at design time, or at run time (or both). And all of this functionality is available at your fingertips in the designer and via Intellisense while you code.

Furthermore, ToolPanels also expose a Skinning Framework that allows you to specify HTML templates to wrap your content in, allowing you to provide very professional looking 'pop ups' to your page with very little effort. ToolPanel Controls also expose a Variable Replacement framework that allows you embed ${tokens} in your Toolpanel content or skin which are then replaced during rendering with a simple string representation of a variable collection expressed as $token=somevalue;$aDifferentToken=some other value;. These tokens/variables can be utilized to further improve the functionality of basically static templates by allowing a quick infusion of context relative help.