[added in 15.0.27] Scrollable menu/dialog

[Marcus Tettmar]

Are we talking about scrolling dialogs or getting the results of an HTML form submission?

The html viewer was added as a convenient way for people to style dialogs. Handling form submits was beyond the scope. But we can look at it.

As for results of selections, radio buttons and so forth, you can already get the selected value of a radio or checkbox, or drop down ... if you are talking about native controls.

[Grovkillen]

or getting the results of an HTML form submission?

Sorry for the confusion in having this request in this topic. I mean getting the results from a form submit, I figured it was fairly straight forward since the library already have that mechanism in place.

I know about the native control but since I'm having dynamic data forms based on file data the dynamic approach would be ideal. If not I have to either create psudo-dynamic dialogs using the hack where I write an .scp file and re-read it before showing the dialog or add a ton of *maybe* used input elements which I then show/hide if they are needed.

So, please investigate the HTMLViewer's functions and see if they are easily added to MS as well.

[bennie]

Hi Grovkillen,
Did you ever get this working?
Shame no one from ms respond on this anymore.

[Grovkillen]

No for this to work we need the internal mechanism of MS to give us the data.

[Grovkillen]

This now works like a charm! 15.0.27

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  ClientWidth = 250
  ClientHeight = 120
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 120
  end
end
EndDialog>Dialog1
LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP

Show>dialog1

Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP

SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
/*
FORM_IS_SUBMITTED_METHOD=post <-- only post/get are accepted input values
FORM_IS_SUBMITTED_ACTION=custom action
FORM_IS_SUBMITTED_TARGET=custom target
FORM_IS_SUBMITTED_ENCTYPE=custom enctype
FORM_IS_SUBMITTED_RESULTS=<array> with all inputs and their names
*/
END>FORM_IS_SUBMITTED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
/*
form_html:
<form action="custom action" method="post" target="custom target" enctype="custom enctype">
  <input type="text" name="fname" value="John">
  <input type="text" name="lname" value="Johnson">
  <input type="submit" value="Submit">
</form>
*/

[Grovkillen]

Here's a more in-depth code snippet for inspiration:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 220
  ClientWidth = 250
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 220
    Anchors = [akLeft, akTop, akRight, akBottom]
  end
end
EndDialog>Dialog1
Let>PERCENT=%
LabelToVar>form_html,TEMP_html
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP
Show>dialog1
Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP
SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
END>FORM_IS_SUBMITTED
SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
/*
form_html:
<form action="custom action" method="post" target="custom target" enctype="custom enctype">
  <input type="text" name="fname" value="John">
  <input type="text" name="lname" value="Johnson">
  <hr>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <hr>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
  <hr>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
  <hr>
  <b>Select a maintenance drone:</b><br>
    <input type="radio" id="huey" name="drone" value="huey" checked />
    <label for="huey">Huey</label>
    <input type="radio" id="dewey" name="drone" value="dewey" />
    <label for="dewey">Dewey</label>
    <input type="radio" id="louie" name="drone" value="louie" />
    <label for="louie">Louie</label>
  <hr>
  <textarea style="width:98%PERCENT%;" name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br>
  <input type="submit" value="Submit">
</form>
*/

[Grovkillen]

Just the same example but with some extra style and settings for elements (nowrap etc.):

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 220
  ClientWidth = 250
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 220
    Anchors = [akLeft, akTop, akRight, akBottom]
  end
end
EndDialog>Dialog1
Let>PERCENT=%
LabelToVar>form_html,TEMP_html
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP
Show>dialog1
Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP
SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
END>FORM_IS_SUBMITTED
SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
/*
form_html:
<style>
form {
  color: blue;
  font-family: "Lucida Console", "Courier New", monospace;
}
hr {
  color: red;
}
textarea {
  border: 3px solid green; 
}
</style>
HEADER
<hr>
<form action="custom action" method="post" target="custom target" enctype="custom enctype">
  <input type="text" name="fname" value="John">
  <input type="text" name="lname" value="Johnson">
  <hr>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <hr>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
  <hr>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
  <hr>
  <b>Select a maintenance drone:</b><br>
    <input type="radio" id="huey" name="drone" value="huey" checked />
    <label for="huey">Huey</label>
    <input type="radio" id="dewey" name="drone" value="dewey" />
    <label for="dewey">Dewey</label>
    <input type="radio" id="louie" name="drone" value="louie" />
    <label for="louie">Louie</label>
  <hr>
  <textarea style="width:98%PERCENT%;" name="message" rows="10" cols="30" wrap="off">The cat was playing in the garden.</textarea>
  <br>
  <input type="submit" value="Submit">
</form>
*/

From the CHM file of the object:

Code: Select all

<FORM>...</FORM>
   METHOD=post|get
   ACTION=url
<FIELDSET>...</FIELDSET>
<LEGEND>...</LEGEND>
<INPUT>...</INPUT>
   TYPE=text|password|submit|reset|radio|checkbox|hidden|image|button|file
   NAME=string
   VALUE=string
   PLACEHOLDER=string
   SIZE=chars       (text, password)
   MAXLENGTH=chars  (text, password)
   CHECKED          (radio, checkbox)
   ONCLICK=string   (button, radio, checkbox, edit)
   TABINDEX=n
   DISABLE
<SELECT>...</SELECT>
   NAME=string
   PLACEHOLDER=string
   MULTIPLE
   SIZE=lines
   OnClick
   <OPTION>...(</OPTION>)
      SELECTED
      VALUE=string
   TABINDEX=n
   DISABLE
<TEXTAREA>...</TEXTAREA>
   NAME=string
   PLACEHOLDER=string
   ROWS=n
   COLS=n
   WRAP=off|soft|hard
   OnClick
   TABINDEX=n
   DISABLE
<OPTION>...</OPTION>

[Grovkillen]

Snippet with multiple submit/forms:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 220
  ClientWidth = 250
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 220
    Anchors = [akLeft, akTop, akRight, akBottom]
  end
end
EndDialog>Dialog1
Let>PERCENT=%
LabelToVar>form_html,TEMP_html
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP
Show>dialog1
Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP
SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
END>FORM_IS_SUBMITTED
SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
/*
form_html:
<form action="custom action" method="post" target="custom target" enctype="custom enctype">
  <input type="text" name="fname" value="John">
  <input type="text" name="lname" value="Johnson">
  <br>
  <input type="submit" value="Submit">
</form>
<hr>
<form action="other action" method="get" target="other target" enctype="other enctype">
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br>
  <input type="submit" value="Submit">
</form>
*/

[Grovkillen]

Not sure about the use-case but here's a way of adding buttons with data stored in the forms attributes:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 220
  ClientWidth = 250
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 220
    Anchors = [akLeft, akTop, akRight, akBottom]
  end
end
EndDialog>Dialog1
Let>PERCENT=%
LabelToVar>form_html,TEMP_html
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP
Show>dialog1
Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP
SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
END>FORM_IS_SUBMITTED
SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
/*
form_html:
<form action="first action" method="post" target="first target" enctype="first enctype">
  <input type="submit" value="FIRST">
</form>
<form action="second action" method="get" target="second target" enctype="second enctype">
  <input type="submit" value="SECOND">
</form>
*/

[Grovkillen]

One button is in the lower left while the other one is in the lower right:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 220
  ClientWidth = 250
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 220
    Anchors = [akLeft, akTop, akRight, akBottom]
  end
end
EndDialog>Dialog1
Let>PERCENT=%
LabelToVar>form_html,TEMP_html
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP
Show>dialog1
Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP
SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
END>FORM_IS_SUBMITTED
SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
/*
form_html:
<style>
.float_left {
  float:left;
}
.float_right {
  float:right;
}
</style>
THIS STUFF WILL NOT FLOAT
<form class="float_left" action="first action" method="post" target="first target" enctype="first enctype">
  <input type="submit" value="FIRST">
</form>
<form class="float_right" action="second action" method="get" target="second target" enctype="second enctype">
  <input type="submit" value="SECOND">
</form>
*/

[Grovkillen]

Cluster buttons on the right side, test to resize the dialog and you'll see that the buttons adapt.

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 220
  ClientWidth = 250
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 220
    Anchors = [akLeft, akTop, akRight, akBottom]
  end
end
EndDialog>Dialog1
Let>PERCENT=%
LabelToVar>form_html,TEMP_html
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP
Show>dialog1
Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP
SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
END>FORM_IS_SUBMITTED
SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
/*
form_html:
<style>
form {
  float:right;
}
</style>
<form action="first action" method="post" target="first target" enctype="first enctype">
  <input type="submit" value="1">
</form>
<form action="second action" method="get" target="second target" enctype="second enctype">
  <input type="submit" value="2">
</form>
<form action="third action" method="get" target="third target" enctype="third enctype">
  <input type="submit" value="3">
</form>
<form action="forth action" method="get" target="forth target" enctype="forth enctype">
  <input type="submit" value="4">
</form>
<form action="fifth action" method="get" target="fifth target" enctype="fifth enctype">
  <input type="submit" value="5">
</form>
*/

[Grovkillen]

@Marcus. Perhaps look and see what the _OBJ is passing when using the OnObjectClick? It seems to lock MS if used.

[Grovkillen]

I downloaded the image from this example and found out that the Viewer will automatically load a href:ed local html file if clicked:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 400
  ClientWidth = 400
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 400
    Height = 400
    Anchors = [akLeft, akTop, akRight, akBottom]
  end
end
EndDialog>Dialog1
Let>PERCENT=%
LabelToVar>form_html,TEMP_html
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
SetDialogProperty>Dialog1,MSHTMLViewer1,OnImageClick,IMAGE_WAS_CLICKED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP
Show>dialog1
Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP
SRT>IMAGE_WAS_CLICKED
**BREAKPOINT**  
END>IMAGE_WAS_CLICKED
SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
//https://www.w3schools.com/tags/workplace.jpg
/*
form_html:
<img style="width:100%;height:100%" src="C:\Users\jimmy\Downloads\workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" href="C:\Users\jimmy\Downloads\HtmlViewer-1110\HtmlViewer-11.10\HtmlHelp\html\activeviewer_property.htm">
  <area shape="rect" coords="290,172,333,250" href="C:\phone.htm">
  <area shape="circle" coords="337,300,44" href="C:\coffee.htm">
</map>
*/