Objective of a good dialog Dave Massy
September 2000
Editor's note: DHTML DUDE has been very busy (we don't know what he has been doing, but we feel that the newborn baby may be busy), so this month's article is provided by passenger columnist DHTML DAVE, people are more often called him Dave Massy, he is a project manager for the Internet Explorer development group.
As a guest column writer of this month, I want to talk about the dynamic HTML (DHTML) dialog and answer several common problems related to these dialogs. The dialog is a common feature of many applications; they usually either allow users to enter basic data, either issue something to take action to take action. Examples of dialogs include dialogs that appear when you select "Save ..." in the File menu. In this particular example, the dialog box allows the user to select a location where the file should be saved, and what is the name of the file. When using DHTML programming, you can use the dialog as part of your application, and you can use the HTML to specify the contents of the dialog.
As an interesting narrator and a lot of people don't understand, the dialog in Internet Explorer is built using DHTML, which helps the development group to prove the basic technology. For example, the "Find" dialog box in Internet Explorer (you can choose from "Edit" menu "Find (on the current page) ..." See) the appearance is designed as a traditional Windows dialog, it has gray Three-dimensional appearance of the unevenness. In fact, it is a DHTML dialog box that uses the HTML element to display the input field and buttons. In this particular case, we choose a Windows interface style because Internet Explorer is a Windows application. However, the HTML user interface can have a lot of flexibility on style, so you can make your dialog as a complete part of your DHTML application.
Which type of dialog should I use?
Before we enter how to create and use the DHTML dialog, I want to explain the two types of dialogs that programmers can use, namely: Mode and no mode.
The Mode dialog will get the fully focused application, and will not be interactively operated before the dialog closes. The "Save As" mentioned earlier is an example of this situation because the dialog must be turned off (either save the file, or by canceling the dialog), the user can perform other interactions with the application.
The Mode dialog box allows for some type of interaction with the application when the dialog box is displayed. An example of this situation is the "Find" dialog in Internet Explorer; the "Find" dialog box is displayed, you can scroll and view the contents of the document. Since both types of dialogs are useful in different cases, the DHTML dialog supported in Internet Explorer has been enhanced in version 5.0, joining support for the Mode dialog, which makes you select the most Suitable for your application dialog box type.
"Why should I use a new window to create a browser using Window.Open?" You may ask such a problem. Window.open methods and two forms of dialogs provide solutions to slightly different issues. Here are the difference between these three options, and some typical situations are given, which helps you choose the right solution.
WINDOW.OPEN Method: This method opens a new instance of the browser, usually loads a specific URL specified document. The specific named instance of the open window is possible, so you can avoid opening a new window, but using the existing window you have opened for another purpose. For more information, see the Open (English) method in Web Workshop. By opening another example of the browser, the user can switch freely in the open window. One of you can use Window.Open is an email application that allows users to open an email message in a further window while maintaining a full interaction with the message list in the original window. No mode dialog: Non-Mode dialog allows users to interact with the original window while dialogging. In this case, the dialog remains on top of the browser and is disabled. If the user removes other browsing from the original document, the Non-Mode dialog will be automatically turned off because all contexts of the dialog have been lost. Advanced search features can use such dialogs well in order to allow users to select text found in the document, while keeping the dialog opens, so that the user can quickly advance to the next instance of the text that has been found. There is a mode dialog: The Mode dialog is often made allows the user to fully focus on a particular dialog and requires interacting with them before proceeding. One example of this situation is that the data input operation is in this operation, and the application must continue after some data. Dialog Basics
Below is a simple example of a mode dialog, which consists of two files. The first file calls the dialog box when pressing a button; the second file contains the contents of the dialog.
Dialog1.htm:
This Page Will Invoke My DHTML DIALOG BOX WHEN THE button is click.
Body>
Html>
DContent1.htm:
This Is Some Content for My DHTML Dialog Box.
Body>
Html>
View the first example of the Mode dialog box.
Dialog1.htm file Execute the ShowModalDialog method when clicking the button and uses the second file DContent1.htm as the content of the dialog. DContent1.htm files have some HTML content and an OK button, turn off the dialog box when you click the button. Note how the dialog box appears with a status bar. It can be removed by operating the value of the optional SFEATURES parameter of the function. Try to change the value of each parameter, which can display different styles of the dialog. For example, you can change the method in Dialog1.htm call to remove the status bar and adjust the size of the dialog.
ShowModalDialog ('dcontent1.htm', '', 'status: no; resizable: yes'); Now, the method is changed from ShowModalDialog to ShowModelessDialog, and see how the Mode dialog allows users to interact with the document below the dialog. . You can view the full description of all dialog settings in the Web Workshop DHTML Reference (English) section.
Exchange information
Isn't this the content that the dialog is really involved? To make the dialog help, we need to pass information to it. Then, when the dialog is closed, we need to retrieve the information based on the dialog options you have chosen.
The second parameter of the ShowModalDialog method allows us to deliver information between the dialog. Below is a simple example of how it does this:
Dialog2.htm
HEAD>
Function dodialog ()
{
Var x = showmodaldialog ('dcontent2.htm', ip1.value, 'status: no; resizable: yes');
D1.INNNERHTML = "The Dialog Box Return Value WAS:" X;
}
Script>
This Page Will Invoke My DHTML DIALOG BOX WHEN THE button is click.
Body>
Html>
DContent2.htm
>This Is Some Content for My DHTML Dialog Box.
& nbsp & nbsp & nbsp
Body>
Html>
View the second example of the Mode dialog box.
Dialog2.htm file calls the DHTML dialog, the latter uses the DContent2.htm file as its content. The value of the input element is passed to the dialog box, and the dialog uses this value to display the content. The return value is set according to the selection of OK or Cancel according to the user. In the case of the Mode dialog, the return value is different. The dialog will be displayed, but the code that calls ShowModelessDialog will continue to run. For the Mode dialog, the return value from ShowModelessDialog is the Window object of the document included in the DHTML dialog, which can then be used to communicate with the open dialog. Let's take a look at the example below the Mode dialog. In this example, a value in the main page can affect the open dialog, and set a value in the dialog, you can also affect the main page.
Dialog3.htm
HEAD>
VAR dwin = null;
Function dodialog ()
{
Dwin = showmodelessdialog ('dcontent3.htm', Window, 'Status: no; resizable: yes');
}
Function setDialogvalue ()
{
IF (dwin! = null)
{
dwin.d1.innerhtml = ip1.value;
}
}
Script>
This Page Will Invoke My DHTML DIALOG BOX WHEN THE button is click.
Body>
Html>
DContent3.htm
Function window.onloyd ()
{
Dialogarguments.dwin = NULL;
}
Script>
This Is Some Content for My DHTML Dialog Box.
& nbsp & nbsp & nbsp
& NBSP & NBSP & NBSP
Body>
Html>
View the Mode Dialog Example.
Dialog3.htm file calls a dialog and passes its Window object as a parameter. Dialog, DContent3.htm, then use the Window object to communicate with the page, and set the text properly. The home page uses ShowModelessDialog called return value, that is, the WINDOW object of the dialog is communicated with the dialog, and sets the text appropriately.
What is a useful dialog?
I know that all examples given are very simple and are all set to how to run in the DHTML dialog. Now, I want to show you a dialog box, which can do a slightly useful thing. For this example, I "borrow" some of the code created by some web team talking Heidi Housten, which automatically generates the directory (TOC) according to the
View the Toc example.
Advanced dialog
I mentioned earlier Internet Explorer using the Design Appearance Similar to the DHTML dialog box for dialogs used in Windows. If you are a programmer using a more traditional Windows application using the Win32 API, you can also use the DHTML dialog. However, if your application requires a unique way, the DHTML dialog box supports you can build an exciting user interface by using filter, conversion, and some multimedia effects, select another style to build an exciting user interface. If you would like more information about this, you can take a look at the Showhtmldialog API (English) and read the created HTML resource (English).
End this "conversation"
The use of dialogs to boot to user experience is an important part of any user interface (excessive use of the dialog will make people distracted, so please use the dialog box). The support herein allows you to construct a desired user interface without the restrictions of the technology used. I also hope that I have tried the standard of the DHTML Dude column, I hope you feel useful. I am very happy to be a guest columnist for this month.
DAVE MAVE MAVE MAVE MAVE MAVE MAVE MAVE Massy is committed to Internet Explorer.
Archive DHTML Dude column articles