WebDialogBox offers unique dialog box UI functionalities with highly customizable appearances and styles. It simulates a true "modal" dialog which has closest behavior to desktop's dialog box.
WebDialogBox introduced new breakthrough in Web User Interface by providing following key features:
- TrueModal behavior
One of the big challenges in web-based user interface is to create a custom dialog box which has true modal behavior similar to desktop's dialog boxes. Intersoft's WebDialogBox is so far the only web component being able to simulate modal behavior closely to desktop's style. The modal behavior consists of following attributes:
- When DialogBox shown, the parent window which own the DialogBox should become unclickable.
- Parent window and all objects inside the parent window must not be focusable, means that the focus should not change from the current dialog box to the parent window's objects.
- When tab key is pressed, focus should not move to the parent window. That means, focus must be cycled between objects in DialogBox scope only.
- When window has lost its focus, the DialogBox should stay on the top of parent window. And when the window gains back its focus, the focus should be automatically set on the DialogBox.
- DesktopManager Integration
WebDialogBox can be used in either StandAlone mode or Integrated mode. By default, DialogBox will use StandAlone mode when constructed at the first time. You can easily configure the Integration by setting IntegratedToDesktopManager property to True. When running in StandAlone mode, the dialog box will be displayed on the top of the document's body. The best usage would be integrating DialogBox into DesktopManager, where the DialogBox will be created on demand only when the ShowDialogBox method is called in client side. Furthermore, when Integrated, the DialogBox will automatically apply the Styles and Appearance of the Window and Button and therefore the DialogBox will have consistent look&feel throughout entire application.
- ClickAndEdit design time experience
Thanks to Intersoft's unique ClickAndEdit architecture which enables control rendering to take place inside IDE with combination of region editing. Extensively implemented in DialogBox and entire members of WebDesktop.NET, it enables developers to conveniently click on the editable area of the DialogBox and edit it right away. You can put any formatting on the text and even any kind of third party ASP.NET controls. With it, you can create rich dialog boxes for any kind of functionalities, for instance, a dialog box listing modified files to be saved, and much more.
- CommandButtons collection
WebDialogBox comes with built-in CommandButtons feature. This allows developer to easily add what buttons should appear in the dialogbox instead of having developer to create their own button. The advantage of the built-in CommandButtons is its tight integration with DesktopManager as well as correct implementation of DialogResult similar to Windows Form applications. You can easily set each Button's Type which will be used as DialogResult when the dialog box is closed.
- DialogResult and CommandButton's Type
DialogResult exposed the same concept and behavior as in Windows Form application. There are 8 predefined button types which will be used as DialogResult when the dialog box is closed. The enumerations are Abort, Retry, Ignore, OK, Cancel, Yes, No and Custom. You may set the Button's Text differently than the Button Type. You can also set the DisplayMode of each Button that is whether the Button should contain Image, Text or combination of both of them. The Image's position can also be configured to be displayed at left or right relatively to the Text.
- Predefined DialogBoxImage
The predefined DialogBoxImage lets developers easily create any type of DialogBox with default Image assigned to it. This feature simulates the behavior of Windows Form's MessageBox where the Icon of the box can be specified. The valid enumerations for DialogBoxImage are: Information, Error, Warning, Question, None and Custom. You can also set your own Image by setting the DialogBoxImage to Custom, and then specify the image source in CustomDialogBoxImage property.
- Highly customizable appearance
As of other Intersoft's components, the WebDialogBox also exposes fully customizable appearances and styles. Developers can change the style of every major elements of the DialogBox, such as the Window's CaptionStyle, the FrameStyle, ContainerStyle, CommandButtonStyle, CommandButtonDisabledStyle and more. Furthermore, you can also set the ControlBoxImage and taking advantages of powerful features exposed by the DesktopManager since the DialogBox inheritted the same architecture of Window and high performance user interaction library.
- Keyboard support
WebDialogBox fully support keyboard interaction as one of the standard in all Intersoft's components. When WebDialogBox is shown, users can press Tab key to change the focus from one button to another. Likewise, pressing Shift+Tab will move the focus to previous button. One of the proper implementation of Dialogbox is the focus will remain inside the DialogBox when pressing Tab repetitively. This enables the DialogBox to have true modal behavior described above.
- Client side events
WebDialogBox exposed 3 client side events which are OnCreated, OnClosed and OnButtonClicked. Developers can easily hook the OnClosed event to a function in javascript which will be fired when the dialog box has been closed as the result of button click. The OnClosed event will be mainly used to perform applications logic based on the pressed button which represented into the DialogResult parameter. The DialogResult enumeration can be found in above DialogResult description.
- StartPosition
When Integrated to Desktop Manager, WebDialogBox can be shown in one of three positions: Custom, CenterParent and CenterScreen. When set to Custom, the DialogBox will appear to the exact location specified in Location property. When set to CenterParent, the DialogBox will be automatically displayed at the center of parent's window. Finally when set to CenterScreen, the DialogBox will be displayd at the center screen of the entire desktop manager size.
Related Topics
WebDialogBox
{Integrating to DesktopManager}