LA/QM forum › Quick Macros › Help (QM) v
Integrating jquery/javacript type UI's into dialog's

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Integrating jquery/javacript type UI's into dialog's
stupomer Offline
Posting Freak
Posts: 1,006
Threads: 330
Joined: Mar 2007
#1
11-16-2011, 05:42 PM
Hi Gintaras,
I have been using a jquery/jscript like button maker from Likno
http://www.likno.com/web-button-maker/index.html
for the bitmaps to use for my qm dialog buttons. I don't get any of the hover-effects but the buttons are pretty (color gradient, fonts, etc).
However, I see on their site that they have software for all sorts of tabs, menus, modal dialog windows, etc., based on jquery.
http://www.likno.com/jquery-tabs/index.php
I was wondering if it was possible to incorporate these into qm dialogs for tabs/buttons, etc. I know that the jscript has to run in a browser window but don't know what kind of magical dialog browser windows could be used for this type of thing.
I tried something like this using some sample html/jscript from the software to test but it failed (see below)
Any thoughts on this or is this a dead-end? Is there anything out there in the Windows world instead of html world that could be incorporated more easily with QM. I am not a graphic designer so it would be great to use some slick work that's already out there to spruce up my qm dialogs.
Stuart

Macro Macro25
Code:
Copy      Help
str js=
;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
;<html xmlns="http://www.w3.org/1999/xhtml">
;<head>
;<meta http-equiv="X-UA-Compatible" content="IE=9"/>
;<title>Likno Web Tabs Builder - Sample Web Site</title>
;<link rel="stylesheet" type="text/css" href="global.css" />
;</head>
;<body class="page">
;
;<!-- ******** BEGIN LIKNO WEB TABS CODE FOR likno-tabs-project ******** -->
;<script type="text/javascript">var lwtbLinkedBy="LiknoWebTabs [1]",lwtbName="likno-tabs-project",lwtbBN="206";</script><script charset="UTF-8" src="likno-scripts/likno-tabs-project.js" type="text/javascript"></script>
;<!-- ******** END LIKNO WEB TABS CODE FOR likno-tabs-project ******** -->
;
;
;;;;;<div id="wrapper">
;;;;;;;;;<div id="section1"><h1 class="heading1">Likno Web Tabs Builder - Sample Web Site (using tab control)</h1></div>
;;;;;;;;;<div id="section2">
;;;;;;;;;;;;;<p class="text">Page content here... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
;;;;;;;;;;;;;<p class="text">&nbsp;</p>
;;;;;;;;;;;;;
;<div class="liknotabs_header" style="display: none;">
;;;;;CT
;</div>
;<div class="liknotabs_header" style="display: none;">
;;;;;MR
;</div>
;<div class="liknotabs_header" style="display: none;">
;;;;;PET
;</div>
;<div class="liknotabs_body" style="display: none;">
;;;;;<p>Here is the text of the <b>first tab body</b>.</p>
;;;;;;<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
;</div>
;
;<div class="liknotabs_body" style="display: none;">
;;;;;<p>Here is the text of the <b>second tab body</b>.</p>
;;;;;;<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
;;;;;;<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
;</div>
;
;<div class="liknotabs_body" style="display: none;">
;;;;;<p>Here is the text of the <b>third tab body</b>.</p>
;;;;;;<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
;</div>


;;;;;;;;;;;;<p class="text">&nbsp;</p>
;;;;;;;;;;;;<p class="text">More page content here... </p>
;;;;;;;;;;;;<p class="text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. </p>
;;;;;;;;</div>
;;;;</div>
;;;;
;</body>
;</html>




int hwnd = win("Dialog")

web js 0 hwnd
Find
Gintaras Offline
Administrator
Posts: 12,090
Threads: 142
Joined: Dec 2002
#2
11-19-2011, 05:27 AM
I think that this can be used only in web pages. In QM only web browser ActiveX control can host web pages. If relative URLs used, load the html from file, not from string.
Website Find
stupomer Offline
Posting Freak
Posts: 1,006
Threads: 330
Joined: Mar 2007
#3
05-18-2013, 08:26 PM
Hi Gintaras,
I am returning to this topic after a while with some progress but a a few additional questions.
I am able to add a toolbar easily to a dialog using a js menu generated in Likno AllWebMenus Pro. I add the following html code generated by the Likno software:

Code:
Copy      Help
<body>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="910";</script><script charset="UTF-8" src="menu.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
</body>

to an empty html file "Menu.html" referencing a file menu.js generated by the software at the same file directory level.
I then just reference the html in your ActiveX window like below:

Function DialogWithJsMenu
Code:
Copy      Help
\Dialog_Editor
function# hDlg message wParam lParam
if(hDlg) goto messages


;BEGIN DIALOG
;0 "" 0x90C80AC8 0x0 0 0 435 175 "Dialog"
;1 Button 0x54030001 0x4 120 116 48 14 "OK"
;2 Button 0x54030000 0x4 170 116 48 14 "Cancel"
;4 Edit 0x54030080 0x200 96 42 96 14 ""
;5 Static 0x54000000 0x0 0 44 92 13 "Text"
;3 ActiveX 0x54030000 0x0 0 0 434 38 "SHDocVw.WebBrowser"
;END DIALOG
;DIALOG EDITOR: "" 0x2030502 "" "" "" ""

str controls = "3"
str ax3SHD
if(!ShowDialog("DialogWithJsMenu" &DialogWithJsMenu &controls)) ret
ret
;messages
sel message
,case WM_INITDIALOG
,,SHDocVw.WebBrowser we0._getcontrol(id(3 hDlg));;reshub
,,we0.Silent=TRUE ;;prevent script error messages
,,we0.Navigate("C:\Menu.html")
,case WM_DESTROY
,case WM_COMMAND goto messages2
ret
;messages2
sel wParam
,case IDOK
,case IDCANCEL
ret 1


Couple questions from here though:

First, even though I size the browser window just right, I don't want the vertical slider bar element to be present. I can't figure out the right combination of style flags to get rid of it. Is it possible for a web browser Active X element.
Second (and maybe harder): This type of web menu is fine if there are no dropdowns but if there are, then the ActiveX element object in the dialog has to be size tall enough to handle it.So here is my idea, is it possible in a dialog, to have the element be transparent for the background (i.e. the empty portion of the html page), but the js menu be visible. Then other items in the dialog could be just underneath the menu portion of the ActiveX browser window but when the menu dropdowns are triggered they will superimpose on other dialog elements just like regular QM/windows menu. I have used this transparency with dialogs where some elements expand larger than the visible elements of the parent dialog. I am not sure whether this is possible within a dialog however.

(I know this may be crazy idea or too hard programatically but it would be so cool to open up the dialog making ability of QM with js themes and templates)

Thanks for your consideration, S
Find
Gintaras Offline
Administrator
Posts: 12,090
Threads: 142
Joined: Dec 2002
#4
05-19-2013, 04:29 AM
Can answer only the first. This is from archive.qml:
Function dlg_web_browser_without_scrollbar
Code:
Copy      Help
/Dialog_Editor
function# hDlg message wParam lParam
if(hDlg) goto messages

str controls = "8"
str ax8SHD
ax8SHD=
;<html>
;<style> BODY { margin: 15px 0px 0px 20px; overflow: auto; } </style>
;<body><img src="http://www.quickmacros.com/forum/images/smilies/icon_lol.gif"></body>
;</html>
if(!ShowDialog("dlg_web_browser_without_scrollbar" &dlg_web_browser_without_scrollbar &controls)) ret

;BEGIN DIALOG
;0 "" 0x90880A48 0x100 0 0 53 60 "Dialog"
;2 Button 0x54032000 0x0 6 42 42 14 "close"
;8 ActiveX 0x54030000 0x2020 6 6 42 32 "SHDocVw.WebBrowser"
;END DIALOG
;DIALOG EDITOR: "" 0x2030009 "" "" ""
ret
;messages
sel message
,case WM_INITDIALOG
,case WM_COMMAND goto messages2
ret
;messages2
ret 1
Website Find
stupomer Offline
Posting Freak
Posts: 1,006
Threads: 330
Joined: Mar 2007
#5
05-23-2013, 12:03 AM
Thank you...sorry I didn't find that myself in the archive.qml
:oops:
S
Find
seandoyle Offline
Member
Posts: 65
Threads: 32
Joined: Jan 2013
#6
05-23-2013, 09:00 PM
Gintaras -

What is the most elegant way to have JavaScript call back into QM from a page that was launched from QM?

Suppose I load a web page in the following way:
Macro Internet Explorer
Code:
Copy      Help
SHDocVw.IWebBrowser2 ie=web("" 9) ;;works on Vista too
ie._setevents("ie_DWebBrowserEvents2")
ie.Navigate("https://www.google.com/")

If this page contained JavaScript (and it's completely under my control) - how can the JavaScript from this page send a message back to QM? The message might be from a UI element event or it might from something listening to the network for an event (a callback from the SignalR protocol).

What would be easy (for me :-) ) would be a COM interface that QM exposed to IE so that from JavaScript I could pass an action and parameter arguments back to QM. I looked at some of the event callbacks but the only one that seemed to get invoked was PropertyChange (BeforeScriptExecute, DocumentComplete, ProgressChange, and CommandStateChange don't seem to get called). But there might be a much more elegant way to do this. Any suggestions appreciated.

Thanks

Sean
Find
Gintaras Offline
Administrator
Posts: 12,090
Threads: 142
Joined: Dec 2002
#7
05-24-2013, 07:49 AM
Could not find an elegant way.
If using web browser control, javascript can update text in a hidden input element, and QM then received COM event. But it does not work if using Internet Explorer.

Function dialog_javascript_callback
Code:
Copy      Help
\Dialog_Editor
function# hDlg message wParam lParam
if(hDlg) goto messages

str controls = "3"
str ax3SHD=
;<html><head>
;<script type="text/javascript">
;function OnTimer()
;{
;var d=new Date();
;document.getElementById("notifyQM").value=d.toLocaleTimeString();
;}
;</script>
;</head>
;<body onload="setInterval(OnTimer, 1000);">
;<input type="hidden" id="notifyQM" />
;<p>Text.</p>
;</body></html>
if(!ShowDialog("" &dialog_javascript_callback &controls)) ret

;BEGIN DIALOG
;0 "" 0x90C80AC8 0x0 0 0 223 135 "Dialog"
;3 ActiveX 0x54030000 0x0 0 0 224 116 "SHDocVw.WebBrowser"
;1 Button 0x54030001 0x4 120 116 48 14 "OK"
;2 Button 0x54030000 0x4 170 116 48 14 "Cancel"
;END DIALOG
;DIALOG EDITOR: "" 0x2030503 "*" "" "" ""

ret
;messages
sel message
,case WM_INITDIALOG
,SHDocVw.WebBrowser we3
,we3._getcontrol(id(3 hDlg))
,
,;get the HTML element and set events for onpropertychange event
,MSHTML.HTMLInputElement- ei
,ei=we3.Document.getElementById("notifyQM")
,ei._setevents("ei_HTMLInputTextElementEvents")
,
,case WM_DESTROY
,case WM_COMMAND goto messages2
ret
;messages2
sel wParam
,case IDOK
,case IDCANCEL
ret 1

Function ei_onpropertychange must be in folder ei_HTMLInputTextElementEvents
Code:
Copy      Help
;/
function MSHTML.DispHTMLInputElement'ei

out ei.value

err+ out "error"
Website Find


Forum Jump:


Users browsing this thread: 1 Guest(s)