hans/racket-webview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

-

Browse Source
This commit is contained in:
Hans Dijkema
2026-03-03 22:52:39 +01:00
parent 8f49007930
commit 89000aa890
6 changed files with 439 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
example1/example-1-dialog.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
<title>This is a Dialog for Example 1</title>
</head>
<body>
<h1>Preferences for Example 1</h1>
<table>
<tr><th>Input 1</th><td><input type="text" id="inp1" /></td></tr>
<tr><th>Input 2</th><td><input type="text" id="inp2" /></td></tr>
<tr><th>Input 3</th><td><input type="text" id="inp3" /></td></tr>
<tr><th></th><td><button id="ok-btn">Ok</button></td></tr>
</table>
</body>
</html>

20
example1/example-1-second.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<!--<script type="javascript" src="https://code.jquery.com/jquery-3.7.1.min.js" />-->
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
<title>This is test 1</title>
</head>
<body>
<h1>This is test 1</h1>
<p>
<ul>
<li><a href="https://wikipedia.org">To Wikipedia</a></li>
</ul>
</p>
<div class="buttons">
<a href="example-1.html"><b><ul><li style="color:red;">Back to test1</li></ul></b></a>
</div>
</body>
</html>

67
example1/example-1.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
<title>This is Example 1</title>
<script>
window.setInterval(function() {
let el = document.getElementById('pos');
el.innerHTML = window.screenX + ", " + window.screenY;
}, 250);
</script>
</head>
<body>
<h1>This is Example 1</h1>
<div class="right">
<img class="logo" src="racket-logo.png" />
</div>
<p><span id="pos">screen coöords</span></p>
<h2>Opening a link to some website</h2>
<p>
<ul>
<li><a href="https://wikipedia.org">To Wikipedia</a></li>
<li id="folder">No folder</li>
</ul>
</p>
<h2>Opening a second page</h2>
<div class="buttons">
<button class="btn-1" onclick="window.location.href='example-1-second.html';">Open the second page using javascript</button>
<button class="btn-2"><a href="example-1-second.html" id="click-url" style="color:green;">Open the second page uring url</a></button>
</div>
<h2>And some other buttons</h2>
<div class="buttons">
<button class="btn-2" id="dialog-button">Open a dialog</button>
<button class="btn-1" id="select-dir-button">Select a directory</button>
</div>
<h2>Menu responses</h2>
<table>
<tr>
<td colspan="3" class="counter">
<button id="start-stop-button">Start Counter</button>
<span class="counter" id="div-counter">counter = 0</span>
</td>
</tr>
<tr>
<td id="div-open">Open</td>
<td id="div-close">Close</td>
<td></td>
</tr>
<tr>
<td id="div-copy">Copy</td>
<td id="div-cut">Cut</td>
<td id="div-paste">Paste</td>
</tr>
</table>
<h2>Some inputs</h2>
<div style="margin:0.5em; border: 1px solid #909090; padding: 5px;" id="my-id">
<p>This is <span id="spanner">replacable</span> text</p>
<input type="text" id="input-name" name="input-name" value="a" /><br>
<input type="text" id="inp2" value="i2" />
<input type="date" id="date-input" /><br>
<input type="datetime-local" id="dt-input" />
<input type="time" id="time-inp" />
</div>
</body>
</html>

267
example1/example.rkt Normal file
View File

@@ -0,0 +1,267 @@
#lang racket/gui
(require "../main.rkt"
racket/runtime-path
racket/gui
simple-ini/class
)
(provide
(all-from-out racket/gui)
example-1-window%
)
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Example 1
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(define-runtime-path html-start "example-1.html")
(define-runtime-path dialog-html "example-1-dialog.html")
(define test-menu (menu 'main-menu
(menu-item 'm-file "File"
#:submenu
(menu (menu-item 'm-open "Open File")
(menu-item 'm-close "Close File")
(menu-item 'm-select-dir "Select Folder" #:separator #t)
(menu-item 'm-quit "Quit" #:separator #t)))
(menu-item 'm-edit "Edit"
#:submenu
(menu (menu-item 'm-copy "Copy")
(menu-item 'm-cut "Cut")
(menu-item 'm-paste "Paste")
(menu-item 'm-prefs "Preferences" #:separator #t)
))
(menu-item 'm-auto "Processes"
#:submenu
(menu (menu-item 'm-start "Start counter")
(menu-item 'm-sub "Submenu"
#:submenu
(menu (menu-item 'm-sub1 "Submenu 1")
(menu-item 'm-sub2 "Submenu 2")
(menu-item 'm-sub3 "Submenu 3")
)
)
(menu-item 'm-stop "Stop counter")
)
)
))
(define example-1-dialog%
(class ww-webview-dialog%
(inherit-field settings)
(super-new [html-file dialog-html]
[width 400]
[height 300])
(define/override (html-loaded)
(super html-loaded)
(ww-debug "html-loaded for example-1-dialog%")
(let* ((btn (send this element 'ok-btn)))
(send btn connect 'click (λ (data)
(send this close))))
(let* ((inp1 (send this element 'inp1))
(inp2 (send this element 'inp2))
(inp3 (send this element 'inp3)))
(send inp1 set! (send settings get 'inp1 "<input 1 not set yet>"))
(send inp2 set! (send settings get 'inp2 "<input 2 not set yet>"))
(send inp3 set! (send settings get 'inp3 "<input 3 not set yet>"))
(send inp1 on-change!
(λ (val)
(send settings set! 'inp1 val)))
(send inp2 on-change! (λ (val) (send settings set! 'inp2 val)))
(send inp3 on-change! (λ (val) (send settings set! 'inp3 val)))
)
)
)
)
(define-syntax inc
(syntax-rules ()
((_ var)
(λ ()
(set! var (+ var 1))
var))))
(define example-1-window%
(class ww-webview%
(inherit-field settings)
(super-new [html-file html-start]
)
(define go-on-counter #f)
(define c-counter 0)
(define counter-inc 1)
(define counter-thread #f)
(define div-counter #f)
(define my-dir (send settings get 'folder "."))
(define/override (can-close?)
(eq? counter-thread #f))
(define/public (reset-counter)
(set! go-on-counter #f)
(set! counter-thread #f)
)
(define/public (inc-counter)
(set! c-counter (+ c-counter counter-inc))
(when (>= c-counter 1000)
(set! counter-inc -1))
(when (<= c-counter 0)
(set! counter-inc 1))
(send this update-counter))
(define/public (update-counter)
(send div-counter set-inner-html! (format "Count = ~a" c-counter))
(when (and (> c-counter 0) (<= c-counter 100))
(send div-counter set-style!
(css-style '((background white)))))
(when (and (> c-counter 100) (<= c-counter 200))
(send div-counter set-style!
(css-style '((background green) (color white)))))
(when (and (> c-counter 200) (<= c-counter 300))
(send div-counter set-style!
(css-style '((background yellow) (font-size: 120%)))))
(when (and (> c-counter 300) (<= c-counter 400))
(send div-counter set-style!
(css-style '((color white) (background orange) (font-size 110%)))))
(when (and (> c-counter 400))
(send div-counter set-style!
(css-style '((color white) (background red) (font-size 120%) (font-weight bold)))))
)
(define/public (start-counter)
(set! counter-thread
(thread
(λ ()
(letrec ((f (λ ()
(when go-on-counter
(send this inc-counter)
(sleep 0.01)
(f)))))
(set! go-on-counter #t)
(f)))))
)
(define/public (set-folder new-dir)
(set! my-dir new-dir)
(send settings set 'folder new-dir)
(let ((el (send this element 'folder)))
(send el set-inner-html! (format "Selected folder: <b>~a</b>" my-dir))
)
)
(define/override (choose-dir)
(let ((handle (super choose-dir "Select a folder" my-dir)))
(displayln (format "choosen dir handle: ~a" handle))
)
)
(define/override (dir-choosen handle choosen dir)
(displayln (format "dir-choosen: ~a ~a ~a" handle choosen dir))
(when choosen
(send this set-folder dir)))
(define/public (prefs)
(new example-1-dialog% [parent this] [settings (send this clone-settings 'example-1-dialog)]))
(define/override (handle-navigate url type kind)
(send this reset-counter)
(super handle-navigate url type kind))
(define/override (html-loaded)
(ww-debug "HTML LOADED")
(super html-loaded)
(set! div-counter (send this element 'div-counter))
(send this update-counter)
(send this set-folder my-dir)
(ww-debug "CONNECTING BUTTONS")
(let* ((dialog-btn (send this element 'dialog-button))
(start-stop-btn (send this element 'start-stop-button))
(choose-dir-btn (send this element 'select-dir-button))
)
(send dialog-btn connect 'click
(λ (data) (send this prefs)))
(send start-stop-btn connect 'click
(λ (data)
(if (eq? counter-thread #f)
(begin
(send this start-counter)
(send start-stop-btn set-inner-html! "Stop Counter"))
(begin
(send this reset-counter)
(send start-stop-btn set-inner-html! "Start Counter"))
)
)
)
(send choose-dir-btn connect 'click
(λ (data)
(send this choose-dir)))
)
(ww-debug "SETTING MENU")
(let* ((div-open (send this element 'div-open))
(c-open 0)
(div-close (send this element 'div-close))
(c-close 0)
(div-copy (send this element 'div-copy))
(c-copy 0)
(div-cut (send this element 'div-cut))
(c-cut 0)
(div-paste (send this element 'div-paste))
(c-paste 0)
)
(send this set-menu! test-menu)
(send this connect-menu! 'm-quit
(λ ()
(send this reset-counter)
(send this close))
)
(let ((make-menu-executor (λ (item elem string count)
(send this connect-menu! item
(λ ()
(send elem set-inner-html! (format "~a ~a" string (count)))))))
)
(make-menu-executor 'm-open div-open "Open file" (inc c-open))
(make-menu-executor 'm-close div-close "Close file" (inc c-close))
(make-menu-executor 'm-copy div-copy "Edit Copy" (inc c-copy))
(make-menu-executor 'm-cut div-cut "Edit Cut" (inc c-cut))
(make-menu-executor 'm-paste div-paste "Edit Paste" (inc c-paste))
(send this connect-menu! 'm-start
(λ () (send this start-counter)))
(send this connect-menu! 'm-stop
(λ () (send this reset-counter)))
(send this connect-menu! 'm-prefs
(λ () (send this prefs)))
(send this connect-menu! 'm-select-dir
(λ () (send this choose-dir)))
)
)
)
(begin
(displayln "Yes this works!")
)
)
)
(define (run-example)
(let* ((ini (new ini% [file 'web-racket-example1]))
(settings (new ww-simple-ini% [ini ini] [section 'example-1-window]))
(window (new example-1-window% [settings settings]))
)
window))

BIN
example1/racket-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

68
example1/styles.css Normal file
View File

@@ -0,0 +1,68 @@
body {
font-family: Arial;
font-size: 11pt;
}
h1 {
color: #303030;
}
h1:hover {
color: #606060;
}
a {
text-decoration: none;
}
button.btn-1 {
background: #1adb4e;
border: 1px solid black;
padding: 1em;
}
button.btn-2 {
color: white;
background: #3e5c46;
border: 1px solid green;
padding: 1em;
margin-left: 1em;
}
button.btn-2 a {
color: white;
}
table {
margin: 1em;
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid #909090;
padding: 0.5em;
width: 70%;
}
table th {
border-collapse: collapse;
border: 1px solid #909090;
padding: 0.5em;
width: 30%;
}
td span.counter {
padding: 1em;
border: 1px solid grey;
}
.right {
float: right;
}
.right img.logo {
margin: 2em;
border: 2px solid grey;
max-width: 250px;
}