JavaFX Mashups. Martin Gunnarsson, Pär Sikö, Jayway. fredag 26 oktober 12

Transcription

1 JavaFX Martin Gunnarsson, Pär Sikö, Jayway #javafxmashups

2

3

4 Loading a web page

5 Architecture Presentation Processing WebView WebEngine

6 Simple web page public class SimpleWebPage extends Application public void start(stage stage) throws Exception { WebView webview = new WebView(); webview.getengine().load(" } } stage.setscene(new Scene(webView, 1000, 800)); stage.show();

7 Simple web page public class SimpleWebPage extends Application public void start(stage stage) throws Exception { WebView webview = new WebView(); webview.getengine().load(" } } stage.setscene(new Scene(webView, 1000, 800)); stage.show();

8 Simple web page public class SimpleWebPage extends Application public void start(stage stage) throws Exception { WebView webview = new WebView(); webview.getengine().load("path/to/file.html"); } } stage.setscene(new Scene(webView, 1000, 800)); stage.show();

9 Simple web page public class SimpleWebPage extends Application { private static final String PAGE_CONTENT = "<html><body>... public void start(stage stage) throws Exception { WebView webview = new WebView(); webview.getengine().loadcontent(page_content); } } stage.setscene(new Scene(webView, 1000, 800)); stage.show();

10 Simple web page

11 Integration

12 Integration Show loading progress Handling alert calls Opening new windows

13 Demo

14 Progress WebView webview = new WebView(); ProgressBar progress = new ProgressBar(0); Worker<Void> loadworker = webview.getengine().getloadworker();

15 Progress WebView webview = new WebView(); ProgressBar progress = new ProgressBar(0); Worker<Void> loadworker = webview.getengine().getloadworker(); // Bind progress progress.progressproperty().bind(loadworker.progressproperty());

16 Alert webview.getengine().setonalert(new EventHandler<WebEvent<String>>() { } public void handle(webevent<string> event) { // event.getdata()

17 New windows engine.setcreatepopuphandler(new Callback<PopupFeatures, WebEngine>() public WebEngine call(popupfeatures features) { Stage popup = new Stage(); WebView webview = new WebView(); popup.setscene(new Scene(webView)); popup.show(); } }); return webview.getengine();

18 New windows engine.setcreatepopuphandler(new Callback<PopupFeatures, WebEngine>() public WebEngine call(popupfeatures features) { Stage popup = new Stage(); WebView webview = new WebView(); popup.setscene(new Scene(webView)); popup.show(); } }); return webview.getengine();

19 Communication JavaFX JavaScript

20 Communication WebView webview = new WebView(); final WebEngine engine = webview.getengine(); engine.loadcontent(page_content);

21 Communication WebView webview = new WebView(); final WebEngine engine = webview.getengine(); engine.loadcontent(page_content); engine.getloadworker().stateproperty().addlistener(new ChangeListener<State>() public void changed(observablevalue<? extends State> ov, State old, State state) { if (state == State.SUCCEEDED) { } }); } // More code

22 Communication WebView webview = new WebView(); final WebEngine engine = webview.getengine(); engine.loadcontent(page_content); engine.getloadworker().stateproperty().addlistener(new ChangeListener<State>() { } public void changed(observablevalue<? extends State> ov, State old, State state) { if (state == State.SUCCEEDED) { } engine.executescript("document.body.style.background='#bb0000';"); // More code

23 Communication

24 Communication WebView webview = new WebView(); final WebEngine engine = webview.getengine(); engine.loadcontent(page_content); engine.getloadworker().stateproperty().addlistener(new ChangeListener<State>() { } public void changed(observablevalue<? extends State> ov, State old, State state) { if (state == State.SUCCEEDED) { } html = (String)engine.executeScript("document.documentElement.innerHTML"); // More code

25 Communication WebView webview = new WebView(); final WebEngine engine = webview.getengine(); engine.loadcontent(page_content); engine.getloadworker().stateproperty().addlistener(new ChangeListener<State>() { } public void changed(observablevalue<? extends State> ov, State old, State state) { if (state == State.SUCCEEDED) { } engine.executescript("window.scrollto(100,500)"); // More code

26 Communication WebView webview = new WebView(); final WebEngine engine = webview.getengine(); engine.loadcontent(page_content); engine.getloadworker().stateproperty().addlistener(new ChangeListener<State>() { } public void changed(observablevalue<? extends State> ov, State old, State state) { if (state == State.SUCCEEDED) { } engine.executescript("existingjsfunction();"); // More code

27 Communication JavaFX JavaScript

28 Contexts Java JavaScript

34 Demo

35 Integration objects // Java code class Integration { } public void exit() { Platform.exit(); }... WebView webview = new WebView(); WebEngine engine = webview.getengine(); JSObject window = (JSObject) engine.executescript("window"); window.setmember("javaintegration", new Integration());

36 Integration objects // Web page <a href= javascript:javaintegration.exit() >Exit the application</a>

37 for ( var ky = 0; ky < yr; ky++) { y = ymin + (ymax - ymin) * ky / yr; for ( var kx = 0; kx < xr; kx++) { x = xmin + (xmax - xmin) * kx / xr; zx = x; zy = y; for ( var i = 0; i < maxit; i++) { if (zx * zx + zy * zy > 4.0) break; zx0 = zx * zx - zy * zy + x; zy = 2.0 * zx * zy + y; zx = zx0; } var p = (yr * ky + kx) * 4; pix[p] = (i % 8) * 32; pix[p + 1] = (i % 16) * 16; pix[p + 2] = (i % 32) * 8; pix[p + 3] = 256; } }

38 for ( var ky = 0; ky < yr; ky++) { y = ymin + (ymax - ymin) * ky / yr; for ( var kx = 0; kx < xr; kx++) { x = xmin + (xmax - xmin) * kx / xr; zx = x; zy = y; for ( var i = 0; i < maxit; i++) { if (zx * zx + zy * zy > 4.0) break; zx0 = zx * zx - zy * zy + x; zy = 2.0 * zx * zy + y; zx = zx0; } var p = (yr * ky + kx) * 4; pix[p] = (i % 8) * 32; pix[p + 1] = (i % 16) * 16; pix[p + 2] = (i % 32) * 8; pix[p + 3] = 256; } }

39 Debugging

40 Debugging Use alert to print simple debug messages: webview.getengine().setonalert(new EventHandler<WebEvent<String>>() { } public void handle(webevent<string> event) { System.out.println(event.getData());

41 Debugging Run this: webview.getengine().executescript("if (! document.getelementbyid('firebuglite')){e = document['createelement' + 'NS'] && document.documentelement.namespaceuri;e = E? document['createelement' + 'NS'](E, 'script') : document['createelement'] ('script');e['setattribute']('id', 'FirebugLite');E['setAttribute']('src', ' + 'firebug-lite.js' + '#startopened');e['setattribute']('firebuglite', '4'); (document['getelementsbytagname']('head')[0] document['getelementsbytagname']('body')[0]).appendchild(e);e = new Image;E['setAttribute']('src', ' + '#startopened');}");

42 Demo

43

44 Manipulating web objects <body> <div id="header">ugly Bridge, far far away</div> <img id="image" src="bridge.png"/> </body>

47 Manipulating web objects body div image

48 Manipulating web objects

50 Manipulating web objects HTMLImageElement

51 Manipulating web objects HTMLDivElement HTMLImageElement

52 Manipulating web objects HTMLBodyElement HTMLDivElement HTMLImageElement

53 Manipulating web objects Document document = engine.getdocument(); HTMLBodyElement body = (HTMLBodyElement) document.getelementsbytagname("body").item(0); body.setattribute("style", "background-color:#454545";); HTMLDivElement div = (HTMLDivElement) document.getelementbyid("header"); div.settextcontent("golden Gate, San Francisco"); div.setattribute("style","font-family:'verdana';font-size:26px; color: #EEEEEE;"); HTMLImageElement image = (HTMLImageElement) document.getelementbyid("image"); image.setsrc("golden_gate.png"); image.setattribute("style", "border-width:10px; border-color:#ffffff;");

58 Manipulating web objects body.insertbefore(newchild, refchild); body div image

59 Manipulating web objects body.appendchild(child); body div image link

60 Manipulating web objects body.removechild(child); body div image

61 Smart documentation

62 engine.setuserstylesheetlocation("newstyle.css"); engine.load("help.html");

63 Widgets

64 Show webpage

65

66 Maps

67 A mix of content or functionality from two or more Web-based services has become known as a mashup. This presentation takes the mashup concept one step further by mixing Web content and scripts with a JavaFX program, effectively blurring the line between Web and application. This is made possible by the powerful WebView component of JavaFX. The session shows how to display Web content in a JavaFX application and how to set up two-way communications between the Java code and JavaScript code run in WebView. It includes several cool and creative examples based on this technique.

68 A mix of content or functionality from two or more Web-based services has become known as a mashup. This presentation takes the mashup concept one step further by mixing Web content and scripts with a JavaFX program, effectively blurring the line between Web and application. This is made possible by the powerful WebView component of JavaFX. The session shows how to display Web content in a JavaFX application and how to set up two-way communications between the Java code and JavaScript code run in WebView. It includes several cool and creative examples based on this technique.

69 Demo

70 Thank you! Pär Martin Coolest demos!