This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-12-10
Channels
- # adventofcode (174)
- # announcements (5)
- # aws (9)
- # babashka (17)
- # beginners (259)
- # boot-dev (1)
- # calva (6)
- # cider (19)
- # circleci (7)
- # clj-kondo (9)
- # cljfx (51)
- # cljs-dev (4)
- # clojure (83)
- # clojure-australia (2)
- # clojure-dev (9)
- # clojure-europe (78)
- # clojure-nl (3)
- # clojure-spec (4)
- # clojure-switzerland (1)
- # clojure-uk (18)
- # clojurescript (22)
- # conjure (17)
- # cursive (17)
- # data-science (1)
- # datomic (15)
- # defnpodcast (1)
- # events (2)
- # fulcro (39)
- # graalvm (16)
- # graphql (1)
- # kaocha (5)
- # lambdaisland (11)
- # malli (6)
- # meander (1)
- # off-topic (26)
- # pathom (10)
- # re-frame (10)
- # reitit (6)
- # rewrite-clj (7)
- # sci (3)
- # shadow-cljs (28)
- # sql (12)
- # test-check (10)
- # tools-deps (31)
hello, I'm trying to use a web-view and have some control over it, how do I make an event listener to fire when the page is loaded? I'm trying to port this JavaFX example: http://www.java2s.com/Code/Java/JavaFX/WebEngineLoadListener.htm
Hi! Your message reminded me that I wanted to add extension lifecycle for web-view because there is a bunch of useful props that are currently missing. If you are in a hurry you can create needed props yourself using fx/make-ext-with-props
(documented in this readme section: https://github.com/cljfx/cljfx#included-extension-lifecycles)
hello, thanks for the pointers, I was able to know when the page loaded using a custom make-ext-with-props
, but the event handler only gets me the prop value, now I want to trigger a javascript exec on the web engine of the web view, how can I access those instances?
current code:
(ns com.wsscode.demos.reveal
(:require [vlaaad.reveal :as reveal]
[vlaaad.reveal.ext :as rx]
[cljfx.api :as fx]
[cljfx.prop :as prop]
[cljfx.mutator :as mutator]
[cljfx.lifecycle :as lifecycle])
(:import (javafx.scene.web WebView)))
(def web-view-with-ext-props
(fx/make-ext-with-props
{:on-load-state-changed
(prop/make
(mutator/property-change-listener #(-> (.getEngine ^WebView %)
(.getLoadWorker)
(.stateProperty)))
lifecycle/change-listener)}))
(comment
(tap>
{:fx/type web-view-with-ext-props
:desc {:fx/type :web-view
:url ""}
:props {:on-load-state-changed
(fn [e]
(tap> ["state changed" e]))}}))
my goal is to be able to do a postMessage
in the browser window after it loads, so I can communicate something to the page
I believe I can achieve it with (-> web-view (.getEngine) (.executeScript "window.postMessage('the-message')"))
tried to use a custom change-listener
, but when I try to do it the view stops working
(def web-view-with-ext-props
(fx/make-ext-with-props
{:on-load-state-changed
(prop/make
(mutator/property-change-listener #(-> (.getEngine ^WebView %)
(.getLoadWorker)
(.stateProperty)))
#(reify ChangeListener
(changed [a b c value]
(tap> [a b c])
(% value))))}))
Hmm, that’s because the second arg to prop/make
should be something that satisfies lifecycle protocol
not sure if I understand how to use it, can you send an example snippet?
(def web-view-with-ext-props
(fx/make-ext-with-props
{:on-load-state-changed
(prop/make
(mutator/property-change-listener #(-> (.getEngine ^WebView %)
(.getLoadWorker)
(.stateProperty)))
lifecycle/scalar)}))
{:fx/type web-view-with-ext-props
:desc {:fx/type :web-view
:url ""}
:props {:on-load-state-changed
(reify javafx.beans.value.ChangeListener
(changed [a b c d]
(tap> [a b c d])))}}
cool, thanks!
I got to render some of what I want, but seems like the built-in browser is lacking some features that cytoscape may require, didnt worked (it renders, but the graph itself doesn't work properly), do you know if there is another option for internal web view, some way to use webkit or something?
I just found this: https://jxbrowser.support.teamdev.com/support/solutions/articles/9000013137-jxbrowser-vs-javafx-webview
seems like the webkit renderer there is not been updated in a while
using Java 11
tried bumping:
org.openjfx/javafx-controls {:mvn/version "15"}
org.openjfx/javafx-base {:mvn/version "15"}
org.openjfx/javafx-graphics {:mvn/version "15"}
org.openjfx/javafx-media {:mvn/version "15"}
org.openjfx/javafx-web {:mvn/version "15"}
but still same results
I guess what you are seeing is about their desktop app, I'm using the JS version of it: https://js.cytoscape.org/
so, seems like I could try to use their Java version, but its a different thing (I'm trying to re-use the views I already made for the web)
I'm trying to take a spin on JxBrowser (which claims to solve the problem by using Chromium instead of webkit)
I'm trying to follow the code from other components, but Im not sure how to do the initialization described here https://jxbrowser-support.teamdev.com/docs/quickstart/hello-world.html#run-the-javafx-example with cljfx, because there is the Browser to control things and BrowserView to render it
is there something already written in cljfx that looks like that so I can try to base my impl on?
The idea is that you create one "composite lifecycle" per mutable object, and then use maps to describe the composition of those mutable objects
(require '[cljfx.composite :as composite]
'[cljfx.fx.node :as fx.node]
'[cljfx.mutator :as fx.mutator]
'[cljfx.lifecycle :as fx.lifecycle])
(import '[com.teamdev.jxbrowser.browser Browser]
'[com.teamdev.jxbrowser.engine Engine EngineOptions RenderingMode]
'[com.teamdev.jxbrowser.view.javafx BrowserView])
(def browser
(composite/lifecycle
{:props (composite/props Browser
:url [(fx.mutator/setter
(fn [^Browser browser ^String url]
(when url
(.loadUrl (.navigation browser) url))))
fx.lifecycle/scalar])
:args []
:ctor (fn []
(-> (EngineOptions/newBuilder RenderingMode/HARDWARE_ACCELERATED)
.build
Engine/newInstance
.newBrowser))}))
(def browser-view
(composite/lifecycle
{:props (merge
fx.node/props
(composite/props BrowserView
:browser [fx.mutator/forbidden fx.lifecycle/dynamic]))
:args [:browser]
:ctor (fn [^Browser browser]
(BrowserView/newInstance browser))}))
{:fx/type browser-view
:browser {:fx/type browser
:url ""}}
here is the snippet, it does not work for me without license, but it might work if you have license 😄
hehe, thanks, I'll try it out! but a bummer the license thing
its working! very bad its paid... but I learned a lot about cljfx in process, thanks for the help @U47G49KHQ 🙏
is there a way to start a view like this strait from the repl?
(instead of sending the form, and then requesting "view" via the context menu)
I have a couple of ideas, yes. Like, having "autoview" behavior that automatically executes "view" action on submitted values, or a special command object, akin to :repl/quit
yeah, maybe a new ns just to deal with ways to interact with reveal, so users could do something like (render-view-in-panel {...})
I wrote a blog post with some of the things from this process: https://blog.wsscode.com/extending-reveal/