I am creating a sample app in JavaFx.
I have loaded a local html file in webview in app. I want to apply style to that loaded html page from the app. When i try to do that the style is applied to entire webview.
I only want to apply on that loaded html page not the webview.
This is index.html page that I am loading.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()" id="btn">Try it</button>
</body>
</html>
This is demo.css
*{
padding: 0;
margin: 0;
}
#btn{
font-weight: bold;
font-size: 14px;
padding: 10px 20px;
}
body {
background-color: #00ff80;
font-family: Arial, Helvetica, san-serif;
}
This is my javafx app code.
Hyperlink hpl3 = new Hyperlink("Load Html File");
hpl3.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent e) {
String path = System.getProperty("user.dir");
path.replace("\\\\", "/");
path += "/html/index.html";
String path1 = System.getProperty("user.dir");
path1.replace("\\\\", "/");
path1 += "/css/demo.css";
webEngine.setUserStyleSheetLocation("file:///" + path1);
webEngine.load("file:///" + path);
}
});
As james-d said:
import javafx.application.Application;
import javafx.concurrent.Worker.State;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Text;
public class WebViewCssPlay extends Application {
private static final String CSS =
"body {"
+ " background-color: #00ff80; "
+ " font-family: Arial, Helvetica, san-serif;"
+ "}";
#Override
public void start(Stage stage) {
stage.setTitle("CSS Styling Test");
stage.setWidth(300);
stage.setHeight(200);
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
if (newState == State.SUCCEEDED) {
Document doc = webEngine.getDocument() ;
Element styleNode = doc.createElement("style");
Text styleContent = doc.createTextNode(CSS);
styleNode.appendChild(styleContent);
doc.getDocumentElement().getElementsByTagName("head").item(0).appendChild(styleNode);
System.out.println(webEngine.executeScript("document.documentElement.innerHTML"));
}
});
webEngine.loadContent("<html><body><h1>Hello!</h1>This is a <b>test</b></body></html>");
VBox root = new VBox();
root.getChildren().addAll(browser);
root.getStyleClass().add("browser");
Scene scene = new Scene(root);
stage.setScene(scene);
//scene.getStylesheets().add("/net/snortum/play/web_view.css");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Source:
Applying CSS file to JavaFX WebView
Related
I am using Java GWT to create a UiBinder control. I am having a problem getting the scrollbars to show up. The UI has a master HorizontalPanel containing a left and right flow panels. Each are a assigned three graph widgets of 300x750 pixels for a total of six. There should be horizontal and vertical scrollbars, but they don't appear. If I remove the ScrollPanel, I can get the horizontal scrollbars to appear. I've tried using a FlowPanel instead of a HorizontalPanel, but the left and right flow panel children line up vertically underneath each other. Any help to get this working would be appreciated. I've included the ui.xml and java code below.
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:cw="urn:import:com.caseware.commons.client.ui.widgets"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style type="com.caseware.analytics.client.ResultsWidgets.PreviewMultiGraphContainer.CssStyles">
.wrapper {
height: 100%;
width: 100%;
}
.message {
text-align: center;
font-size: 2rem;
width: 100%;
}
.tablesContainer {
overflow: auto !important;
width: 100%;
height: 100%;
padding: 10px;
}
.tablesContainerHalf {
overflow: auto !important;
width: 100%;
height: 50%;
padding: 10px;
}
.table {
}
.table > * {
display: inline-block;
}
.table + .table {
padding-left: 10px;
}
.table2 {
float: left;
}
.centerItem {
justify-content: center;
}
.drillDownArea {
width: 100%;
height: 50%;
}
.simplePanel {
overflow: auto !important;
}
</ui:style>
<ui:with field="ac" type="com.caseware.analytics.client.i18n.AnalyticsConstants" />
<ui:with field='global' type='com.caseware.commons.client.bundles.StylesBundle' />
<g:HTMLPanel styleName="{style.wrapper}">
<g:ScrollPanel addStyleNames="{style.simplePanel}">
<g:HorizontalPanel ui:field="table" addStyleNames="{global.globalStyles.flexInline} {style.tablesContainer} {style.table}">
<g:FlowPanel ui:field="leftTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel>
<g:FlowPanel ui:field="rightTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel>
</g:HorizontalPanel>
</g:ScrollPanel>
</g:HTMLPanel>
</ui:UiBinder>
java file
package com.caseware.analytics.client.ResultsWidgets;
import java.util.List;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Widget;
public class PreviewMultiGraphContainer extends Composite {
private static PreviewMultiGraphContainerUiBinder uiBinder = GWT.create(PreviewMultiGraphContainerUiBinder.class);
interface PreviewMultiGraphContainerUiBinder extends UiBinder<Widget, PreviewMultiGraphContainer> {
}
interface CssStyles extends CssResource {
String centerItem();
String tablesContainer();
String tablesContainerHalf();
}
#UiField CssStyles style;
#UiField HorizontalPanel table;
#UiField FlowPanel leftTable;
#UiField FlowPanel rightTable;
public PreviewMultiGraphContainer() {
initWidget(uiBinder.createAndBindUi(this));
HighChartsInjector.injectHighChart();
table.setStyleName(style.tablesContainer());
}
public void clear() {
leftTable.clear();
leftTable.setVisible(false);
rightTable.clear();
rightTable.setVisible(false);
}
public void addGraphs(final List<Widget> wc) {
for (final Widget w : wc) {
_getTableToAppendTo().add(w);
}
leftTable.setVisible(leftTable.getWidgetCount() != 0);
rightTable.setVisible(rightTable.getWidgetCount() != 0);
table.addStyleName(style.centerItem());
if (rightTable.isVisible()) {
table.removeStyleName(style.centerItem());
}
}
private FlowPanel _getTableToAppendTo() {
if (leftTable.getWidgetCount() > rightTable.getWidgetCount()) {
return rightTable;
}
return leftTable;
}
}
You cannot use HorizontalPanel - or any LayoutPanel - as a child of ScrollPanel, because these panels take their size from a parent. This means that your HorizontalPanel will always be the same height as your ScrollPanel - thus, no scroll bars will appear.
You need to use FlowPanel or similar panel that takes height from their content.
If you want two panels to be displayed side by side, you need to use standard CSS approaches: either use "float" property, or use flex-box CSS on the parent. Flex-box is supported by all modern browsers.
Also, unless you need specific functionality from ScrollPanel, you can simply remove it, and add "overflow: auto" property to your .wrapper style.
I am working on a JavaFX application which contains few html,css,JS files which are rendered by the internal webkit browser. Now, the problem is the CSS animations which we have are not getting rendered smoothly in the webkit browser provided by JavaFX, but same code in Firefox or chrome is quite smoother.
Also, no persistence is available(currently using variables in Java, and communication via JS for persistence).
What I am looking for is there any way to integrate some headless browser, or some settings to make CSS animations smoother. Only thing I came across was JxBrowser, but it's toooooo costly for personal usage.
Code :
public class Main extends Application {
private Scene scene;
MyBrowser myBrowser;
String completeText = "";
#Override
public void start(Stage primaryStage) throws Exception{
primaryStage.setTitle("Frontend");
java.net.CookieManager manager = new java.net.CookieManager();
java.net.CookieHandler.setDefault(manager);
myBrowser = new MyBrowser();
scene = new Scene(myBrowser, 1080, 1920);
primaryStage.setScene(scene);
primaryStage.setFullScreen(true);
primaryStage.show();
// # being the escape character
scene.setOnKeyTyped(new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent event) {
String text = event.getCharacter();
if (text.equals("0")) {
String tempText = completeText;
completeText = "";
processText(tempText);
}else {
completeText = completeText+text;
}
}
});
}
}
MyBrowser :
public class MyBrowser extends Region {
public MyBrowser() {
webEngine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {
if (newValue == Worker.State.SUCCEEDED) {
JSObject window = (JSObject) webEngine.executeScript("window");
window.setMember("app", this);
}
});
URL urlHello = getClass().getResource(hellohtml);
webEngine.load(urlHello.toExternalForm());
webView.setPrefSize(1080, 1920);
webView.setContextMenuEnabled(false);
getChildren().add(webView);
}
CSS code which contains animation :
#ball-container.go #ball{
-webkit-animation: rotating-inverse 2s ease-out 0s 1 normal;
animation: rotating-inverse 2s ease-out 0s 1 normal;
}
#ball-container {
height: 102px;
width: 102px;
position: absolute;
top: -95px;
left: 480px;
-webkit-transition: all 0.9s ease-in-out 0s;
transition: all 0.9s ease-in-out 0s;
}
#ball-container.shake .ball-wrapper{
-webkit-animation: yAxis 0.9s ease-in-out;
animation: yAxis 0.9s ease-in-out;
}
Thank you.
Try using Java 8u112, based in your code I created a working sample (Tested using Java JDK 8u112 64bit):
import javafx.application.Application;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class Example extends Application
{
public static void main(String[] args)
{
launch(args);
}
class MyBrowser extends Parent
{
private WebEngine webEngine;
private WebView webView;
public MyBrowser()
{
webView = new WebView();
webEngine = webView.getEngine();
// Ugly (but easy to share) HTML content
String pageContents =
"<html>"
+ "<head>"
+ "<style>"
+ "#-webkit-keyframes mymove {"
+ "from {top: 0px;}"
+ "to {top: 50px;}"
+ "}"
+ ".box { "
+ "width: 150px; "
+ "position: relative; "
+ "height: 150px; "
+ "background: red; "
+ "margin-top: 35px; "
+ "margin-left: auto; "
+ "margin-right: auto; "
+ "-webkit-transition: background-color 2s ease-out; "
+ "-webkit-transition: all 1s ease-in-out; "
+ "}"
+".box:hover {"
+" background-color: green;"
+ "width:350px;"
+ "-webkit-animation: mymove 1s infinite;"
+"}"
+ "</style>"
+ "</head>"
+ "<body>"
+ "<div class='box'></div>"
+ "</body>"
+ "</html>";
webEngine.loadContent(pageContents);
webView.setContextMenuEnabled(false);
getChildren().add(webView);
}
}
private Scene scene;
MyBrowser myBrowser;
#Override
public void start(Stage primaryStage) throws Exception
{
primaryStage.setTitle("Frontend");
myBrowser = new MyBrowser();
scene = new Scene(myBrowser);
primaryStage.setScene(scene);
primaryStage.show();
}
}
I suspect this is because they are now using a newer webkit JDK-8156698 but it might have been a bug before (you can take a look at the 8u112 bug fixes list.
I had same issue rendering the angular based web application using webview.and fixed it by upgrading the Java version to 1.8.0_121.
The leftside is the html page loaded in Google Chrome and on the right side is the html page loaded in JavaFx WebView, The problem is that the navagation panel for Google Map is not displayed in the JavaFx WebView. Im using Java 7u79.
GoogleMap.java
webView = new WebView();
webEngine = webView.getEngine();
webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<State>(){
#Override
public void changed(ObservableValue<? extends State> ov, State t, State t1) {
System.out.println("STATE : " + t1);
if(t1.equals(State.SUCCEEDED)){
root.getChildren().remove(indicator);
}
}
});
indicator = new ProgressIndicator();
indicator.setMaxSize(40, 40);
String htmlcode = getFileContent("GoogleMap.html");
webEngine.loadContent(htmlcode);
root = new StackPane();
root.setAlignment(Pos.CENTER);
root.getChildren().add(webView);
root.getChildren().add(indicator);
Scene scene = new Scene(root, 550, 400);
primaryStage.setTitle("Google Map");
primaryStage.setScene(scene);
primaryStage.show();
GoogleMap.html
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center : new google.maps.LatLng(51.508742,-0.120850),
zoom : 5,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
body
{
padding : 0;
margin : 0;
}
#googleMap
{
width : 550px;
height : 400px;
}
</style>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>
I have all ok with it.
java 1.8.0_73 maybe you should try to update your java or get newer JavaFX?
I would like to adjust the line height of an HTMLEditor in JavaFx with css rules but can't find the name of the rule.
I tried -fx-line-height and a few other but none of them worked. Is it even possible, or is the HTMLEditor too restricted?
The HTML editor edits HTML, you need to specify the line-height in HTML based CSS (not JavaFX CSS).
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
public class SpacedOut extends Application {
private static final String HTML_TEXT =
"<p style=\"line-height:1.5\">\n" +
" <span style=\"font-size:12pt\">The quick brown fox jumps over the lazy dog.</span><br />\n" +
" <span style=\"font-size:24pt\">The quick brown fox jumps over the lazy dog.</span>\n" +
"</p>";
#Override
public void start(Stage stage) throws Exception{
HTMLEditor editor = new HTMLEditor();
editor.setHtmlText(HTML_TEXT);
Scene scene = new Scene(new Pane(editor));
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I have a java applet embedded in we page. When i "Click Me" link get focus it calls a method "focusApplet" in java script. This method is calling "requestFocus()" method of applet. Function "focusApplet" is being executed successfully. But focus is not moving inside the applet on all the browsers on MAC including safari 5,Firefox and chrome. But the same piece of code is working on windows platform. I tried "requestFocusInWindow()" method also but it was not working. Please help me to get rid of the problem.
<HTML>
<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
function sayhello(){
var name = document.getElementById('hellotext');
name.focus();
name.click();
name.value = "raman";
}
function focusMe() {
alert('Hello world!!');
document.getElementById('hellotext').focus();
}
function show() {
var name = document.getElementById('name');
var address = document.getElementById('address');
alert("Hello " + name.value + " Your Address is : " + address.value);// + address.value
}
function focusApplet(){
document.getElementsByName('mediamaster')[0].requestFocus();
}
</script>
<form>
Text : <input type="text" id="mytext" >
Address : <input type="text" id="address" >
<div >
<a id="medialink" href="#" onfocus="focusApplet();">Click Me</a>
</div>
<div>
<APPLET name="mediamaster" CODE="FirstApplet.class" WIDTH="200"
HEIGHT="200" name="FirstApplet" id="fA"></APPLET>
</div>
Name : <input type="text" id="hellotext"> Address : <input type="text">
<input type="reset">
<button value="Show" onclick="show()">show</button>
</form>
</BODY>
</HTML>
The applet code:
import java.applet.Applet;
import java.awt.Button;
import java.awt.Choice;
import java.awt.Color;
import java.awt.Label;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import netscape.javascript.JSObject;
import org.w3c.dom.html.HTMLDocument;
import com.sun.java.browser.dom.DOMAccessor;
import com.sun.java.browser.dom.DOMAction;
import com.sun.java.browser.dom.DOMService;
import com.sun.java.browser.dom.DOMUnsupportedException;
public class FirstApplet extends Applet {
private Button clear_button;
private Choice color_choices;
private Button button;
public void init() {
this.setFocusable(true);
this.setBackground(Color.green);
try {
service = DOMService.getService(this);
} catch (DOMUnsupportedException e3) {
e3.printStackTrace();
}
final JSObject win = JSObject.getWindow(this);
// Create a button and add it to the applet.
// Also, set the button's colors
clear_button = new Button("Clear");
clear_button.setForeground(Color.black);
clear_button.setBackground(Color.lightGray);
button = new Button("Push Me");
this.add(clear_button);
this.add(button);
// Create a menu of colors and add it to the applet.
// Also set the menus's colors and add a label.
color_choices = new Choice();
color_choices.addItem("black");
color_choices.addItem("red");
color_choices.addItem("yellow");
color_choices.addItem("green");
color_choices.setForeground(Color.black);
color_choices.setBackground(Color.lightGray);
this.add(new Label("Color: "));
this.add(color_choices);
button.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent arg0) {
System.out.println("Hello World!!! Thread2");
win.eval("sayhello()");
}
});
}
}