Cannot display web page on WebView control - javascript

I tried to follow the instruction describe here: http://docs.oracle.com/javafx/2.0/webview/jfxpub-webview.htm to display a web page on javafx 2.1, but web page does not display although I've already signed my application using javafx-ant tool (this link mentions about signing javafx application How can I display a javascript webpage inside a WebView in JavaFx 2.0 in Browser).
I can view the web page when running javafx on browser, but can't view it when running application as java stand alone application.
Here's the code:
browser control:
public class Browser extends Region {
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();
public Browser() {
//apply the styles
getStyleClass().add("browser");
// load the web page
webEngine.load("http://www.google.com");
//add the web view to the scene
getChildren().add(browser);
}
//...
}
Display it:
Stage stage = new Stage();
stage.setTitle("Web View");
Scene scene = new Scene(new Browser(),590,400, Color.web("#666970"));
stage.setScene(scene);
scene.getStylesheets().add("/com/sai/javafx/calendar/styles/BrowserToolbar.css");
stage.show();
Any idea would be highly appreciated.

Here is a sample app:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class WebViewSample extends Application {
public static void main(String[] args) { launch(args); }
#Override public void start(final Stage primaryStage) {
final WebView webView = new WebView();
webView.getEngine().load("http://docs.oracle.com/javafx/");
primaryStage.setScene(new Scene(webView));
primaryStage.show();
}
}
Here is what it looks like in a browser, the inner scrollpane is the JavaFX WebView rendered browser and the outer text is the html page embedding the JavaFX WebView.
To run it I used NetBeans nightly build, JavaFX 2.2b4, JDK7u6ea, Win7, IE9.
Steps in NetBeans were:
New Project | JavaFX | JavaFX Application
Create a Java file with the sample app code.
After project created, right click Project | Properties
Build | Deployment | Check "Request Unrestricted Access"
Run | Check radio Run "in Browser"
OK to accept property changes
Press F6 to run the application in the browser.
Accept any security dialog warnings.
Wait a few seconds for the WebView to load.

As far as I know, the only way to solve my problem is loading the .html file locally (can't load web page from other domain, and this html file must not refer to any external link)
public Browser() {
//apply the styles
getStyleClass().add("browser");
// load the web page
final URL urlHello = Browser.class.getResource("sample.html");
webEngine.load(urlHello.toExternalForm());
}
Display it:
Stage stage = new Stage();
stage.setTitle("Web View");
Scene scene = new Scene(new Browser(),590,400, Color.web("#666970"));
stage.setScene(scene);
scene.getStylesheets().add("/com/sai/javafx/calendar/styles/BrowserToolbar.css");
stage.show();

Related

Is there a way to get back a result from a PWA I develop to Android using a startActivityForResult from the native app?

I am trying to use a PWA I develop with HTML and JavaScript to process data and send it back to the Android app.
The Android should open the PWA after the user clicks a button for example, I already did this by starting an activity with an intent using the page URL:
Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://examplePWA.com/"));
Log.d(TAG, "onClick() called with: view = [" + browserIntent.getDataString() + "]");
startActivity(browserIntent);
What I want now is to get a response intent from the PWA to a startActivityForResult (browserIntent, 123);
sent from Android for example.
How can I do this from the PWA side, is it possible to send an Android Intent from a PWA using JavaScript or any other way?
If I got you right, for the purpose of starting an activity from within the javascript env, you could employ the #JavascriptInterface which will allow you to invoke Java methods inside your javascript code (if you use WebView).
class WebBridge {
#JavascriptInterface
public void openBrowser(String href) {
// .. start your activity here
}
}
// Somewhere where you initialize your WebView
webView.addJavascriptInterface(new WebBridge(), "AndroidWebBridge");
// Inside your javascript app code
window.AndroidWebBridge.openBrowser("https://google.com");
The code below illustrates the overall concept, not a copy-paste solution. Hope that helps your.

Android WebView WebArchive freeze after loading

I'm currently developping an android app for a tablet and I want to cover the use case : "if there is no internet connection, I want the app to run as normal".
I used a webview to load a survey in the app so once installed inside our stores, I won't have to install a new version each time we need a new makeover or add questions.
To cover the case where there is no connection, I save a webArchive that I load if there is no wifi when I need to load the webpage.
private void setMainView() {
mainview = (WebView) findViewById(R.id.wvMain);
WebSettings webSettings = mainview.getSettings();
webSettings.setLightTouchEnabled(true);
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(this);
mainview.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");
if (DetectConnection.checkInternetConnection(this)){
mainview.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
File webpage = new File(context.getExternalFilesDir(Environment.DIRECTORY_DCIM).getAbsolutePath()+ File.separator +"home.mht");
mainview.saveWebArchive(webpage.toString());
editor.putString(BuildConfig.HOME_PAGE_WEB_ARCHIVE_FILE,webpage.toString() );
editor.commit();
}
});
mainview.loadUrl(BuildConfig.SERVER_URL + BuildConfig.HOME_PAGE);
}
else{
String filename = getSharedPreferences(BuildConfig.PREFERENCES_NAME, 0).getString(BuildConfig.HOME_PAGE_WEB_ARCHIVE_FILE,null);
mainview.setWebChromeClient(new WebChromeClient());
mainview.loadUrl("file:///"+filename);
}
}
The only problem is that the webarchive froze as soon as it is loaded. I tried many thing to make it works but the solution is escaping me.
When I set my application to plane mode and I reload the app, I see the home page fine but the click events don't work. My Android Javascript interface is also not working as I tested to send Toast to debug when the app is finished loading so I'm guessing the javascript is not working in my webarchive or maybe the webarchive is not including the CSS and Javascript that are from other website such as W3.css and JQuery?
Maybe if I used a local version of these asset they will be included in the webarchive.
Any suggestions would be welcome.
Thanks
I ended up using the cache of my webview instead of loading a web archive.
I first added a cache.appcache a the root of my webpage linking my main page to it.
<html manifest="cache.appcache">
At the root (wwww/http_doc) I added this file :
CACHE MANIFEST
/home
/thank-you
/css/w3.css
/js/jquery-3.3.1.min.js
/images/happy1.png
/images/happy2.png
/favicon.ico
#NETWORK
NETWORK:
/home
/thank-you
#FALLBACK
FALLBACK:
/home /offline.html
/thank-you /offline_thankyou.html
The fallback section allowed to have a html file to fall to if the network is available. I then activated the cache of my webview :
WebSettings webSettings = mainview.getSettings();
webSettings.setAppCacheEnabled(true);
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
webSettings.setAppCachePath(
getApplicationContext().getCacheDir().getAbsolutePath());
And now each time, I modified the file "cache.appcache" and reload the application, it take a copy of the current "offline.html" files and reload a working site according to the cache. A good thing I had a very static website to load from so it's 100% functionnal without an internet connection.

Audio Control in JavaFX WebKit?

I've recently started using JavaFX for it's WebKit browser instead of the one found in SWT (because it doesn't support any current browsers).
The application I'm developing loads up a browser page that has a pre-generated youtube playlist that plays automatically. There's nothing wrong with the youtube player itself (as in when viewed on a regular browser).
However, every time the song finishes and loads the next one, the volume ignores the youtube settings and goes straight to 100%. If I click the volume meter again it fixes.
Here is the code used to display the given url:
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();
public Browser(String url) {
getStyleClass().add("browser");
webEngine.load(url);
getChildren().add(browser);
}
Which gets wrapped in a JFXPanel:
private JFXPanel playerPanel;
....
Browser b = new Browser("google.com/youtubeplayer/");
Scene scene = new Scene(b, playerPanel.getWidth(), playerPanel.getHeight(), Color.web("#666970"));
playerPanel.setScene(scene);
I did find a similar question on here, but there was no solution listed (other than the authors self edit which left no explanation).

Debugging Android WebViews?

I'm trying to debug an Android app that makes heavy use of WebViews to display web pages from within the app.
The problem is simple - when I load the page, there's an anchor on one page that when clicked gives me a 404. The problem, it does this only when running the page from within the app's WebView. If I load the page in a desktop browser, or from within Chrome or from within the Android Browser on the mobile, I load the page just fine.
More confusingly, there's another anchor on the same page with the same basic architecture that's working just fine.
The URL for the anchor is being set via JQuery:
var url = ...;
$('#submitButton').attr('href', url);
When I load the page on a desktop browser, I can see the URL that the anchor points to, and it's correct. When I run the page within an app's WebView, I cannot see the URL that the anchor points to, so when it fails, I don't know why.
I'm currently running the website with VS2013 and IIS Express, with bindings and firewalls set so I can access it off my machine. I'm building the app in Android Studio 1.1.0, and am running the app within a GenyMotion emulator.
Is there any way I can examine the DOM of a web page loaded into a webview, so I can see exactly what URL we're trying to load? Or any way I can debug the javascript that is constructing that URL?
Is there any way I can examine the DOM of a web page loaded into a webview, >so I can see exactly what URL we're trying to load? Or any way I can debug >the javascript that is constructing that URL?
Yes, but maybe not with your current tools.
If you do however have an android device connected to your computer, you can actually easily debug the webviews with chrome on your computer.
See the following for more details :
https://developer.chrome.com/devtools/docs/remote-debugging
It is possible to configure a WebView so that console.log() messages show up in LogCat. You need to set a WebChromeClient on the WebView, then implement onConsoleMessage() in your client. From http://developer.android.com/guide/webapps/debugging.html:
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
public void onConsoleMessage(String message, int lineNumber, String sourceID) {
Log.d("MyApplication", message + " -- From line "
+ lineNumber + " of "
+ sourceID);
}
});
That got me far enough to figure out what my problem was - the javascript that initialized the link depended upon LocalStorage, and LocalStorage and SessionStorage aren't enabled, in WebViews, by default. You need to enable it with a call to setDomStorageEnabled(). (You also need to enable javascript, but I'd already been doing that):
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings settings = myWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);

Android WebView Javascript not enabled

I have the following code in my activity:
browser = (WebView)findViewById(R.id.webkit);
browser.getSettings().setJavaScriptEnabled(true);
browser.getSettings().setPluginsEnabled(true);
browser.getSettings().setDomStorageEnabled(true);
/*if (Build.VERSION.SDK_INT >= 16) {
browser.getSettings().setAllowFileAccessFromFileURLs(true);
browser.getSettings().setAllowUniversalAccessFromFileURLs(true);
}*/
// Loads html-string into webview
browser.loadUrl("file:///android_asset/index.html");
THe page loads fine, the css loads fine, the images all load fine. However I also have a local js file. WHich currently only contains an alert message alert("JSEnabled"); and yet the alert never appears. How can I go about diagnosing this?
I'm currently using the emulator to develop the project and have to support back to Gingerbread (2.3.3).
Incidently the same html / js works fine when I use the Browser app on the emulator (Pointing at a remotely served version of the same HTML / js)
I should also point out - all the files are in the assets folder in the project, and I've tried referencing the js as file:///android_assets/main.js and as main.js. I've even tried referencing the remote js file. Nothing works...
To work your javascript alert please add this to your webview
webview.setWebChromeClient(new WebChromeClient() {
#Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
return super.onJsAlert(view, url, message, result);
}
});

Categories