【Vaadin7 to 14】Javascript library import 方式

tags: Vaadin

¹

Import 方式

Annotation

• @JavaScript
• @JsModule
• 注意1：這種import方式，只要中間其中一個lib出錯，後續的lib皆import失敗
• 注意2：Vaadin會將這些import的檔案，重新處理壓縮並包成一個Vaadin自己的Javascritp file

@JavaScript("https://code.jquery.com/jquery-3.5.1.min.js")

Method

• addJavaScript()
• addJsModule()

NPM

• 推薦使用NPM，只要修改版號，重新build project即可
• 無須人工重新下載Javascript library，再取代舊檔案

Excute Javascript

Server calls Client
Executing JavaScript in the Browser

Execute JS的API

• The script is executed asynchronously
• 因為是異步，故不可將值回傳給server (單向)
• 亦可在Java端傳遞參數給Javascript，如：$0, $1
  • 型態：String, Boolean, Integer, Double, JsonValue and Element
  • 好處是利用Java 接將html element的實體

// executeJs
UI.getCurrent().getPage().executeJs("console.log($0 + ' size:', " + "$1.offsetWidth, $1.offsetHeight)", name, element);

// callJsFunction
getElement().callJsFunction("expand",component.getElement())

Add Javascript Function

Client calls Server

• 利用this.$server.方法名稱於client呼叫server的方法
• 方法1：直接於Java撰寫，executeJs()

private void init(){
    ...
    getElement().executeJs("this.$server.setFullscreenItem(screenfull.isFullscreen);"); // 根據瀏覽器當時狀況顯示
    ...
}

@ClientCallable
private void setFullscreenItem(boolean isFullscreen) {}

• 方法2：撰寫於Javascript file中

let self;
initModel = function (data) {
    ...
    // 先將server的實體從server丟到client
    self = data.element.$server;
    ...
}

function onDocumentMouseMove(event) {
    ...
    // 將client取得的資料，回傳給server
    self.getDataFromClient({target: 'BOX', x: point.x, y: point.y, z: point.z,});
    ...
}

@ClientCallable
private void getDataFromClient(JsonObject object) {}    

NPM 範例

jQuery²

• Java class

@NpmPackage(value = "jquery", version = "3.6.0")
@JavaScript("./src/jquery-loader.js")

• 需額外的loader.js，定義全域變數

import jQuery from "jquery";

// define jquery globally in the JavaScript file.
window.jQuery = jQuery;
window.$ = jQuery;

ThreeJS³

• Java class

@NpmPackage(value = "three", version = "0.126.0")

• 需額外的loader.js，定義全域變數

import * as THREE from three;
window.THREE = THREE;

PlotlyJS⁴

• 若官方給的library有BUG，如何處理?
• plotly.js
  • 關鍵字搜尋：define(d3)
  • 將 }(); 改為 }.apply(self);
• plotly.min.js
  • 關鍵字搜尋：{}],170
  • 處理方式同上

if (typeof define === "function" && define.amd) this.d3 = d3, define(d3); else if (typeof module === "object" && module.exports) module.exports = d3; else this.d3 = d3;
}();
},{}],170:[function(_dereq_,module,exports){

Local Import 範例

• 利用Annotation：@JavaScript, @JsModule進行import
• 將檔案置於專案的src\main\resources\META-INF\resources\frontend\js底下

Cesium.js

• 檔案路徑：src\main\resources\META-INF\resources\frontend\js\cesium\Cesium.js
• 若要於java使用

@JsModule("./js/cesium/Cesium.js")

• 若要於javasript使用

import * as Cesium from "./cesium/Cesium.js";

---

1. Creating a Vaadin Flow Server-Side API for a Javascript component
   https://www.flowingcode.com/en/creating-a-vaadin-flow-server-side-api-for-a-javascript-component/ ↩︎

2. Vaadin 官方教學文件
   https://vaadin.com/learn/tutorials/integrate-jquery-into-vaadin-flow ↩︎

3. https://github.com/Artur-/threejs-vaadin ↩︎

4. 參考解法
   https://github.com/plotly/plotly.js/issues/3518#issuecomment-517138019 ↩︎