Can HTMLViewer dialog component display a clickable link?

[jpuziano]

Hi Marcus and all,

I'm trying to use the new HTMLViewer component added to custom dialogs in the latest 14.1.01 version of Macro Scheduler.

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  Left = 640
  Top = 97
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 223
  ClientWidth = 484
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'MS Sans Serif'
  Font.Style = []
  OldCreateOrder = True
  ShowHint = True
  OnTaskBar = False
  PixelsPerInch = 96
  TextHeight = 13
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 115
    Top = 39
    Width = 302
    TabOrder = 8
    BorderStyle = htFocused
    DefFontName = 'Times New Roman'
    DefPreFontName = 'Courier New'
    HistoryMaxCount = 0
    NoSelect = False
    PrintMarginBottom = 2.000000000000000000
    PrintMarginLeft = 2.000000000000000000
    PrintMarginRight = 2.000000000000000000
    PrintMarginTop = 2.000000000000000000
    PrintScale = 1.000000000000000000
  end
end
EndDialog>Dialog1


LabelToVar>HTML1,myHTML
/*
HTML1:
<H1>Hello World</H1><p>This is a paragraph</p>
<a href="http://www.mjtnet.com">www.mjtnet.com</a>
*/

SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,myHTML

Show>Dialog1

Wait>10

I ran the code above, it displays my link, it looks clickable, I click it... nothing happens, the web page does not open.

Is there another parameter I have to set to make this work?

[Marcus Tettmar]

No, it's an html *viewer* not a web browser. Hence its name.

A frequent request was a way to be able to DISPLAY html content, as a way to format output. So we provided the HTML Viewer component to do just that.

It's aim is to allow you to use html markup to make text and so on look more pretty. It is not designed to work like a web browser. The html support is also much more basic than modern web browsers. Do not expect html 5 and CSS 3 support.

[Grovkillen]

Clickable links would be super useful though!

Thanks for the feature it's a lot of help for me in my work.

[JRL]

@Marcus
Thank you very much for the HTML viewer built into Macro Scheduler dialogs. This new feature will allow amazing visual effects. We all just need to learn how to use it.

@All
In the interest of learning, I would like to point out that though the HTML viewer is not a browser, Macro Scheduler is a programing/scripting language that has many capabilities some of which can be used to make it perform similarly to a web browser.

Following is jpuziano's script with an added AddDialogHandler> line that uses the MSHTMLViewer property's OnHotSpotClick event to call a subroutine when the "www.mjtnet.com" link is clicked. In the subroutine we simply use GetTextAtPoint to collect the text of the link.

Bear in mind that this is the text of the link and is not the underlying webpage URL. As the programmer you still need to relate the link text with the webpage then call the webpage or whatever it is you plan to do when a dialog user clicks the link. Basically the same thing you would do when you create a dialog that has a button. You write the code that performs a task whenever a button in your dialog is clicked.

Hope this makes sense.
Dick

Code: Select all

GetTextInit>

Dialog>Dialog1
object Dialog1: TForm
  Left = 640
  Top = 97
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 223
  ClientWidth = 484
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'MS Sans Serif'
  Font.Style = []
  OldCreateOrder = True
  ShowHint = True
  OnTaskBar = False
  PixelsPerInch = 96
  TextHeight = 13
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 115
    Top = 39
    Width = 302
    TabOrder = 8
    BorderStyle = htFocused
    DefFontName = 'Times New Roman'
    DefPreFontName = 'Courier New'
    HistoryMaxCount = 0
    NoSelect = False
    PrintMarginBottom = 2.000000000000000000
    PrintMarginLeft = 2.000000000000000000
    PrintMarginRight = 2.000000000000000000
    PrintMarginTop = 2.000000000000000000
    PrintScale = 1.000000000000000000
  end
end
EndDialog>Dialog1

AddDialogHandler>Dialog1,MSHTMLViewer1,OnHotSpotClick,GoThere

LabelToVar>HTML1,myHTML
/*
HTML1:
<H1>Hello World</H1><p>This is a paragraph</p>
<a href="http://www.mjtnet.com">www.mjtnet.com</a>
*/

SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,myHTML

Show>Dialog1,


SRT>GoThere
  GetCursorPos>CurX,CurY
  GetTextAtPoint>CurX,CurY,vStr,vpos
  MDL>vStr
END>GoThere

[jpuziano]

No, it's an html *viewer* not a web browser. Hence its name.

- Got it, thanks.

Clickable links would be super useful though!

- I think so as well...

@All
In the interest of learning, I would like to point out that though the HTML viewer is not a browser, Macro Scheduler is a programing/scripting language that has many capabilities some of which can be used to make it perform similarly to a web browser.

Following is jpuziano's script with an added AddDialogHandler> line that uses the MSHTMLViewer property's OnHotSpotClick event to call a subroutine when the "www.mjtnet.com" link is clicked. In the subroutine we simply use GetTextAtPoint to collect the text of the link.

Bear in mind that this is the text of the link and is not the underlying webpage URL. As the programmer you still need to relate the link text with the webpage then call the webpage or whatever it is you plan to do when a dialog user clicks the link. Basically the same thing you would do when you create a dialog that has a button. You write the code that performs a task whenever a button in your dialog is clicked.

Wow, thanks for going the extra yard JLR and showing us how we might code to simulate links opening the web page when clicked... even though this component is just an "HTML Viewer" and has not been designed to do this.

I tried your modified script above on a machine running MS 14.1.01 on XP and when I clicked the link, nothing appeared, it did not capture the text.

However when I tried the same script on a machine running MS 14.1.01 on Windows 7, it had no problem displaying the text: http://www.mjtnet.com

I wonder why this works on Win 7 but not XP, any ideas?

[JRL]

I tried your modified script above on a machine running MS 14.1.01 on XP and when I clicked the link, nothing appeared, it did not capture the text.

I wrote it on my XP computer so there must be something else at play other than the OS.

When you say "nothing appeared" do you mean the message box does not appear or that the message box appears but is empty?

[jpuziano]

When you say "nothing appeared" do you mean the message box does not appear or that the message box appears but is empty?

On my XP box, Message box did appear but was empty.

On my Win 7 box, Message box did appear and contained the text.

[JRL]

So if the message box appears the "link" clicking works as the click calls the "GoThere" subroutine. There is something not working with the GetTextAtPoint> function. I would suggest then that some other technique be used to decide what has been clicked, perhaps a little math to compare the location of the text in the dialog with the screen location of the cursor when the mouse button is pressed. Getting the text might not work in all cases anyway since the link text could be exactly the same in multiple locations on the dialog.

[jpuziano]

I tried your modified script above on a machine running MS 14.1.01 on XP and when I clicked the link, nothing appeared, it did not capture the text.

I wrote it on my XP computer so there must be something else at play other than the OS.

Perhaps... but what? I wonder if other folks find the above code working on just Win 7 or working just fine on both XP and Win 7.

Not a huge deal for me as our organization is finally upgrading the last machines from XP to Win 7 however it is a curious thing...

[Grovkillen]

The HTMLViewer component has always worked this way. Here's how to make a clickable list using links:

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,OnHotSpotClick,OBJECT_IS_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>OBJECT_IS_CLICKED
**BREAKPOINT**
Message>OBJECT_IS_CLICKED_onclick
END>OBJECT_IS_CLICKED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP

/*
form_html:
<a href="GoThere1">1 This is a <b>Link</b></a>
<br>
<a href="GoThere2">2 This is a <b>Link</b></a>
<br>
<a href="GoThere3">3 This is a <b>Link</b></a>
<br>
<a href="GoThere4">4 This is a <b>Link</b></a>
<br>
<a href="GoThere5">5 This is a <b>Link</b></a>
*/

And this one triggers when the link is hovered:

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,OnHotSpotCovered,OBJECT_IS_HOVERED
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>OBJECT_IS_HOVERED
**BREAKPOINT**
Message>OBJECT_IS_HOVERED_src
END>OBJECT_IS_HOVERED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP

/*
form_html:
<a href="GoThere1">1 This is a <b>Link</b></a>
<br>
<a href="GoThere2">2 This is a <b>Link</b></a>
<br>
<a href="GoThere3">3 This is a <b>Link</b></a>
<br>
<a href="GoThere4">4 This is a <b>Link</b></a>
<br>
<a href="GoThere5">5 This is a <b>Link</b></a>
*/

[Grovkillen]

New code:

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,OnHotSpotClick,OBJECT_IS_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>OBJECT_IS_CLICKED
**BREAKPOINT**
Message>OBJECT_IS_CLICKED_src
END>OBJECT_IS_CLICKED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP

/*
form_html:
<a href="GoThere1">1 This is a <b>Link</b></a>
<br>
<a href="GoThere2">2 This is a <b>Link</b></a>
<br>
<a href="GoThere3">3 This is a <b>Link</b></a>
<br>
<a href="GoThere4">4 This is a <b>Link</b></a>
<br>
<a href="GoThere5">5 This is a <b>Link</b></a>
*/

[Grovkillen]

Found another useful event, if a form control element has the attribute "OnFocus" set it'll fire of an event when the element is in focus. Great to use for having tooltip etc. visible.

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,OnObjectFocus,FORM_INPUT_IS_FOCUES
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_INPUT_IS_FOCUES
**BREAKPOINT**
/*
FORM_INPUT_IS_FOCUES_ATTRIBUTE=this one is focused
*/
END>FORM_INPUT_IS_FOCUES
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 OnFocus="this one is focused" type="text" name="lname" value="Johnson">
  <input type="submit" value="Submit">
</form>
*/

[Grovkillen]

And here's the "opposite" version which triggers once the input first has had focus and then loses it:

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,OnObjectBlur,FORM_INPUT_LOOSING_FOCUS
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_INPUT_LOOSING_FOCUS
**BREAKPOINT**
/*
FORM_INPUT_LOOSING_FOCUS_ATTRIBUTE=this one is focused
*/
END>FORM_INPUT_LOOSING_FOCUS
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 OnBlur="this one is focused" type="text" name="lname" value="Johnson">
  <input type="submit" value="Submit">
</form>
*/

[Grovkillen]

Here's an example how to create buttons using PNG files:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  ClientWidth = 800
  ClientHeight = 120
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 800
    Height = 120
  end
end
EndDialog>Dialog1
LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnObjectClick,OBJECT_IS_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>CLOSE_APP
  Exit>
END>CLOSE_APP
SRT>OBJECT_IS_CLICKED

**BREAKPOINT**  
END>OBJECT_IS_CLICKED
/*
form_html:
tesstar
<br>
<INPUT type="image" width="48" height="48" style="float:right" src="C:\..\file.png onclick="button1"></INPUT>
<INPUT type="image" width="48" height="48" style="float:right" src="C:\..\file.png" onclick="button2"></INPUT>
*/