Predefined Dialog Boxes Enhancing the Browser with GUI Items Copyright © 2008-2015 Curt Hill

What is a Widget? A widget is a name for any graphical user interface component that the user may interact with The common ones include: Buttons Edit boxes Menus Dialog boxes In this case we are interested in Dialog Boxes Copyright © 2008-2015 Curt Hill

Predefined Dialog Boxes Most systems have one or more predefined dialog boxes Easy to generate and use Two common ones in Windows are MessageBox A title and message with several different button combinations InputBox A title and message with an edit box to return results Copyright © 2008-2015 Curt Hill

JavaScript has several Alert One button Gives message to user Prompt Gets input string from user Confirm Returns true/false from one of two buttons Copyright © 2008-2015 Curt Hill

Alert This is a procedure or void function There is one parameter, which is the message to put on the dialog box Format: alert(“You have done something foolish”); If you assign the result of this you get: Undefined Copyright © 2008-2015 Curt Hill

Alert Picture Copyright © 2008-2015 Curt Hill

Page Processing The browser does not display text until it encounters it Thus the previous picture shows that the page is only partially displayed The last lines of the HTML are not shown until the script is complete This is true for all these dialogs Usually these are in event handlers so this is not an issue Copyright © 2008-2015 Curt Hill

Prompt This is a string function There are two parameters The first is the string to display as a message The second is the default value The second is optional Example: v=prompt(“Enter value”,”10”); Copyright © 2008-2015 Curt Hill

Prompt Picture Copyright © 2008-2015 Curt Hill

Prompt Again The item returned is a string However, a string that has a numeric form may be added to as if a numeric Dynamic typing forces a type change The second parameter is optional Leave it out and the edit box is blank In general a default value is better Gives an example of what is wanted Copyright © 2008-2015 Curt Hill

Confirm This is a boolean function There is one parameter The string to display as a message There are two buttons OK – returns true if clicked Cancel – returns false Example: y = confirm("Continue?"); Copyright © 2008-2015 Curt Hill

Confirm Picture Copyright © 2008-2015 Curt Hill

Modal Dialog Boxes All three of these dialog boxes are modal This means that the owning window may not accept input or regain focus until they are gone A modal dialog box must be responded to before anything else goes on Copyright © 2008-2015 Curt Hill

What and why Why would we use these boxes We will use prompt boxes for input values Either string or numeric Alerts for transient output Things you do not want on page Good for debugging Confirm boxes will get boolean input Copyright © 2008-2015 Curt Hill

Finally A predefined dialog box is quick and easy to use You may use Alert to notify the user of something You may use Prompt to get a single input String which can be numericized You may use Confirm to get a Boolean All three are modal, so they cannot be ignored Copyright © 2008-2015 Curt Hill