Demo 4 is composed of 3 HTML files: demo4.html,demo4_d1.html and demo4_d2.html and an SM32 program called DEMO4.
When Load Html is run we end up with D_DEMO4,D_DEMO4_D1,D_DEMO4_D2.
demo4.html has no <FORM> tag. It has an <INPUT> Text Box tag,
2 <BUTTON> tags and 2 <A>nchor tags. This demo shows:
1. How to use subroutine 6000 to retrieve
the data from the text box.
2. How to use p!["url"] as input information. Demo's 1,2 and 3 all used forms so P!["url"] was always the ACTION= from the
FORM tag so it contained no information(p!["url"] was in affect a constant).
3. How to bring a dialog box.
Following is the contents of the demo4.html:
<html>
<head>
<title>This is DEMO 4</title>
</HEAD>
<body>
<H2> DEMO 4</h2>
This demo shows 2 things:<br>
1. Getting information when not using forms.(via the url and subroutine 6000)<br>
2. Bringing up dialog box<br>
<br>
Enter Something to pass into the Dialog Box:
<input TYPE="Text" SIZE=40 ID="TBOX" VALUE="Enter something"><br>
Then click the button or click the link:<br>
<BUTTON onclick="location.replace('DO_DIALOG1')">Dialog 1</button>
<a HREF="DO_DIALOG1">Or Click Here for Dialog 1</a><br><br>
<BUTTON onclick="location.replace('DO_DIALOG2')">Dialog 2</button>
<a HREF="DO_DIALOG2">Or Click Here for Dialog 2</a><br><br>
</body>
</html>
Note from the above html that we are requesting a destination url of either DO_DIALOG1 or DO_DIALOG2 when
a button or anchor is clicked. Since D_DEMO4 (any Load HTML program) is displaying the file:
DIR(-1)+"HTML\TEML.HTML"
Internet Explorer would be expecting to display:
DIR(-1)+"HTML\DO_DIALOG1" or DIR(-1)+"HTML\DO_DIALOG2"
Under SM32 when one of the buttons or anchor tags is clicked Internet Explorer will
ask D_DEMO4 if it can navigate to one of the above 2 destinations (the destination will be contained in
P!["url"]). D_DEMO4 will tell Internet explorer it
cannot navigate there. At this point D_DEM04 calls subroutine 6000 and then returns to the DEM04 program.
subroutine 6000 below gets the data in the text box and places it in P!["TBOX"]:
6000 REM 6000,5
6005 CALL GET_ID_HTML,"TBOX",A$
6010 LET P=POS("value="=A$)
6015 IF P=0 THEN LET A$="";GOTO 6055
6020 LET A$=A$(P+6)
6025 IF A$(1,1)=$22$ THEN LET A$=A$(2),P=POS($22$=A$),A$=A$(1,P-1);GOTO 6055
6030 LET P=POS(" "=A$)
6035 IF P<>0 THEN LET A$=A$(1,P-1);GOTO 6055
6040 LET P=POS(">"=A$)
6045 IF P=0 THEN ESCAPE
6050 LET A$=A$(1,P-1)
6055 LET P!["TBOX"]=A$
6060 RETURN
010 REM "DEMO4"
100 REM 100,5
105 DIM P!
110 PRINT 'gwin'("WEB"),
115 CALL "D_DEMO4",P![ALL]
120 PRINT "P!["+$22$+"url"+$22$+"] was:",P!["url"],'lf',"P!["+$22$+"TBOX"+$22$+"] was:",P!["TBOX"]
125 DIM A!
130 LET P=POS("DO_DIALOG1"=P!["url"])
135 CALL "$__DIALOG",-1,-1,300,200,"Demo Dialog"
140 IF P<>0 THEN CALL "D_DEMO4_D1",A![ALL],P!["TBOX"] ELSE CALL "D_DEMO4_D2",A![ALL],P!["TBOX"]
145 IF A!["url"]<>"Dialog Cancelled" THEN CALL "$__ENDDIALOG",""
600 REM 600
610 PRINT 'gwin'("CONSOLE"),
When DEM04 gets control back from D_DEMO4 it knows that P!["url"] has to contain DO_DIALOG1 or DO_DIALOG2.
It brings up a dialog box (see $__DIALOG)
and calls either D_DEMO4_D1 or D_DEMO4_D2 to display the html for the dialog box. Note that the procedure
to display HTML in a dialog is identical to the WEB view - that is uses the Load HTML utility and call the
generated program. SM32 dialog boxes are
always modal. A modal dialog box requires the user to supply information or close the dialog box before
SM32 can continue. While your debugging your application if you enter console mode
with a dialog box up the only way out is to use the close. The close closes the dialog box and sets the url to
"Dialog Cancelled". This is the check in line 145 above - you only have call $__ENDDIALOG if the user has
not closed it via a close. In this demo's case it is either the close or the OK button that would return
control.
Dialog Boxes have a Fixed Size
Since dialog boxes are of fixed size you will probably want to force your HTML content to
have a fixed size also. For example you would want your dialog to appear the same no matter what text size
was selected in Internet Explorer. Most of the utility Dialog boxes do this by placing the following STYLE block
inside the header block:
<STYLE>
H2 {font-size: 22PX}
BODY {font-size: 12px}
TABLE {font-size: 12px}
INPUT {font-size: 12px}
</STYLE>