I modifed the Neutron Bootstrap Example just as an exercise to see if i could 'replicate' how it worked. This is what i came up with.
Please correct anything i did grossly incorrect/inneficiently as i am still very green with the whole Webview2 and ahkV2 syntaxes. It does work though.
ah2
Code: Select all
Persistent
#SingleInstance
#Include "<JSON>"
#Include WebView2.ahk
main := Gui('+Resize'), main.MarginX := main.MarginY := 0
main.Title := "Webview2 Test"
main.OnEvent('Size', gui_size)
main.OnEvent('Close', (*) => (wvc := wv := 0))
main.Show(Format('w{} h{}', A_ScreenWidth * 0.6, A_ScreenHeight * 0.6))
wvc := WebView2.create(main.Hwnd, , 0, "", A_ScriptDir "\Runtime")
main.GetClientPos(,,&w,&h)
ctl := main.AddText('x0 y25 w' w ' h' (h - 25))
wv := wvc.CoreWebView2
wv.Navigate('file:///' A_ScriptDir '\bootstrap.html')
boundbtns := ButtonsFromHTML.Bind()
boundform := FormFromHTML.Bind()
wv.AddHostObjectToScript('btnsToAHK', {Func:boundbtns})
wv.AddHostObjectToScript('formdataToAHK', {Func:boundform})
ButtonsFromHTML(p*){
msgbox('You clicked: ' p[1])
}
FormFromHTML(p*){
rVal := p[1]
items := JxonDecode(&rVal)
for k,v in items
{
if(v)
msgbox(k "`n" v)
}
msgbox('Now lets send some data From AHK to JS.')
testArr:=['one','two','three']
wv.ExecuteScript("alert(" JxonEncode(testArr) ")",myHandler(wv,arg:=0))
return 0
myHandler(wv,arg){
return(0)
}
}
gui_size(GuiObj, MinMax, Width, Height) {
if (MinMax != -1) {
try ctl.Move(, , Width, Height - 23)
try wvc.Fill()
}
}
_exit_(*) {
ExitApp()
}
html
Code: Select all
<!DOCTYPE html>
<html>
<head>
<!--
The IE Compatibility flag, while not always necessary, makes sure your page
will always load in IE11+ rendering mode instead of being limited to IE7
features and behaviors. While IE11 is still relatively old as a rendering
engine, it supports the most fundamental parts needed for modern webpages to
function correctly.
Neutron will do its best to enable IE11+ rendering mode regardless of this
tag, but in current releases pages will not render correctly when compiled
unless this tag is present. Because of that and other edge cases, any page
you write to load in Neutron should contain this meta tag.
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
}
.title-btn {
padding: 0.35em 1.0em;
cursor: pointer;
vertical-align: bottom;
font-family: Webdings;
font-size: 11pt;
}
.title-btn:hover {
background: rgba(0, 0, 0, .2);
}
.title-btn-close:hover {
background: #dc3545;
}
</style>
</head>
<body class="d-flex flex-column">
<!-- Title Bar
<header>
<div class="d-flex align-items-stretch bg-dark text-white">
<span class="flex-grow-1 px-2 py-1" onmousedown="neutron.DragTitleBar()">AutoHotkey</span>
<span class="title-btn" onclick="neutron.Minimize()">0</span>
<span class="title-btn" onclick="neutron.Maximize()">1</span>
<span class="title-btn title-btn-close" onclick="neutron.Close()">r</span>
</div>
</header>
End Title Bar -->
<!-- Window Contents -->
<div class="flex-grow-1 d-flex">
<!-- Sidebar -->
<div class="nav flex-column nav-pills bg-dark text-light" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
<a class="nav-link text-light active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link text-light" id="v-pills-buttons-tab" data-toggle="pill" href="#v-pills-buttons" role="tab"
aria-controls="v-pills-buttons" aria-selected="false">Buttons</a>
<a class="nav-link text-light" id="v-pills-forms-tab" data-toggle="pill" href="#v-pills-forms" role="tab"
aria-controls="v-pills-forms" aria-selected="false">Forms</a>
<a class="nav-link text-light" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<!-- End Sidebar -->
<!-- Page Content -->
<div class="flex-grow-1 overflow-auto">
<div class="tab-content container p-2" id="v-pills-tabContent">
<!-- v-pills-home -->
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h1>Welcome to Neutron</h1>
<p>
Neutron provides a powerful set of tools for build HTML-based user interfaces with AutoHotkey. It leverages
the Trident engine, known for its use in Internet Explorer, because of its deep integration with the
Microsoft Windows operating system and its wide availability across systems.
</p>
<p>
This example is designed to show how you can use third party frameworks like Bootstrap to build advanced
user interfaces, while still keeping all the code local. This script can be compiled and still function
fine without the need to extract any files to a temporary directory.
</p>
<p>
As this example is more advanced, it assumes a stronger familiarity with the technology and may gloss over
some parts more than other examples. If you're just getting started it may be helpful to work with some of
the other example scripts first.
</p>
</div>
<!-- End v-pills-home -->
<!-- v-pills-buttons -->
<div class="tab-pane fade" id="v-pills-buttons" role="tabpanel" aria-labelledby="v-pills-buttons-tab">
<h1>Buttons!</h1>
<h2>Colored Buttons:</h2>
<div class="btns_to_trigger_ahk">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<h2>Outline Buttons:</h2>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-link">Link</button>
<h2>Block Buttons:</h2>
<button type="button" class="btn btn-block btn-primary">Block level
button</button>
<button type="button" class="btn btn-block btn-outline-primary">Block level
button</button>
</div>
</div>
<!-- End v-pills-buttons -->
<!-- v-pills-forms -->
<div class="tab-pane fade" id="v-pills-forms" role="tabpanel" aria-labelledby="v-pills-forms-tab">
<h1>Forms!</h1>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
<div class="form-group col-md-6">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button class="btn btn-primary">Sign in</button>
</form>
</div>
<!-- End v-pills-forms -->
<!-- v-pills-settings -->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
Settings
</div>
<!-- End v-pills-settings -->
</div>
</div>
<!-- End Page Contents -->
</div>
<!-- End Window Contents -->
</body>
<script>
var btns = document.querySelectorAll('.btns_to_trigger_ahk button')
for(i=0;i<btns.length;i++){
btns[i].addEventListener('click',() => getBtns(this,event), false)
}
async function getBtns(t,e){
obj1 = await window.chrome.webview.hostObjects.btnsToAHK;
obj1.func(e.target.innerText);
}
</script>
<script>
document.querySelector('#v-pills-forms > form').addEventListener("submit", () => getForm(this,event), true)
async function getForm(t,e){
e.preventDefault(); // before the code
var FormData = Object()
var els = document.querySelector('form').elements;
for(i=0;i<els.length;i++){
var name = els[i].name
if (name !== '')
FormData[els[i].name] = els[i].value
else
FormData[els[i].id] = els[i].value
}
obj = await window.chrome.webview.hostObjects.formdataToAHK;
obj.func(JSON.stringify(FormData));
}
</script>
</html>
can grab the other files, css/js etc from the neutron bootstrap github. These are the only things i modified.
Thanks!