JSweet là một công cụ có thể chuyển đổi Java thành JavaScript. Tôi có vào năm 2001 đã viết một vài applet Java không làm việc nữa với sự biến mất của các applet Java từ các trình duyệt. Tôi quyết định bởi sự tò mò để xem xét Jsweet để chuyển đổi những applet đó trong JavaScript, và điều đó không dễ dàng.
JSWEET có một bộ chuyển đổi trực tuyến khá dễ sử dụng, nhưng nó chỉ sử dụng các thư viện cơ bản của JSWEET (JSweet Core và J4ts). Thật không may, nó không bao gồm các chức năng AWT và applet cần thiết để di chuyển một applet. JSWEET có một kiến trúc phần mềm tốt với khả năng thêm các tính năng ngôn ngữ Java bổ sung mà JSweet gọi là kẹo kẹo. Và có một loạt các viên kẹo, với một cái cho AWT được gọi là J4TS-AWT-SWING.
Cincheo đã tạo ra một mẫu dự án để giúp di chuyển các applet với jsweet. Nó đã giúp ích rất nhiều, và cuối cùng tôi đã có một JavaScript hoạt động nhưng phải giải quyết rất nhiều vấn đề, như cần phải liệt kê tất cả các lần nhập khẩu, SetColor không hoạt động cho nền (kết quả là một màn hình đen rất đáng thất vọng!) , thay đổi kích thước không hoạt động trong khi đào một chút trong mã ban đầu và chuẩn bị cho bản thân để tạo một bản vá, tôi nhận ra rằng kho lưu trữ đã có các bản sửa lỗi, nhưng đã không phát hành kẹo tương ứng với kho lưu trữ Jsweet Maven. Vì vậy, tôi quyết định thử lại sự di chuyển của Applet với các phiên bản thư viện mới nhất.
Vì đó là cách sử dụng Maven đầu tiên của tôi, tôi đã gặp phải một cơn ác mộng về xung đột phiên bản. Đối với một công cụ nhằm mục đích giải quyết loại vấn đề đó, nó dường như không giúp ích gì nhiều, dù sao tôi cũng thấy sự kết hợp sau đây dường như hoạt động. Nó cần cài đặt làm việc với Maven, Node.js và Oracle, JDK 1.8 (các vấn đề đã được báo cáo với các JDK khác trong các diễn đàn JSWEET).
- Sử dụng phiên bản 2.0.1 của bộ chuyển đổi JSweet
- Sử dụng phiên bản 5-snapshot của jsweet-core
- Tập hợp lại các phụ thuộc khác từ github của họ, theo thứ tự đó:
- J4TS (GitHub gốc): mvn install
- J4TS-File (TMATZ Fork, di chuyển sang JSWEET 2.0.1): mvn install
- J4TS-AWT-SWING (GitHub gốc): mvn install (Lưu ý: Khi làm lại bước này trong khi viết bài viết này, tôi đã gặp các vấn đề với lỗi TS2322 với Swing, vì dự án chỉ sử dụng AWT khi loại bỏ thư mục SRC/Main/Java /javax/swing sẽ thực hiện thủ thuật)
Sau đó, hãy để bắt đầu cho những gì cụ thể cho dự án. Tôi đã bắt đầu với mẫu dự án Cincheo, nhưng đã xóa hầu hết mọi thứ ngoại trừ tệp POM và thư mục SRC/Main/Java và Webapp (nhưng đã xóa nội dung của chúng). Tôi đã thêm laby.java của mình trong src/main/java và thay đổi tệp pom.xml để chỉ để lại sự phụ thuộc vào jsweet-core và j4ts-awing-swing với các phiên bản trên.
Dưới đây là một tập tin zip với dự án đầy đủ.
<dependencies> <dependency> <groupId>org.jsweet</groupId> <artifactId>jsweet-core</artifactId> <version>5-SNAPSHOT</version> </dependency> <dependency> <groupId>org.jsweet.candies.j4ts</groupId> <artifactId>j4ts-awt-swing</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> </dependencies>
Sau đó, tôi đã phải thay đổi một số phần của tệp của mình:
Đầu tiên, chức năng GetParameter chưa được chuyển nên tôi đã sử dụng một cách giải quyết nhanh chóng với việc xác định chức năng GetParameter trong lớp Appel của mình để cung cấp các giá trị mặc định:
public String getParameter(String param) { switch(param) { case "xmax" : return "100"; case "ymax" : return "60"; case "updt" : return "true"; case "dbg" : return "false"; default: return ""; } }
Nhưng điều này không thực sự hiệu quả, vì vậy khi tôi có một môi trường phát triển sẵn sàng cho J4TS-AWT-SWING, tôi đã tạo một bản vá đơn giản để thêm chức năng này để lấy các tham số từ thẻ applet, trong SRC/Main/Java/Java/AWT/ Applet.java:
public String getParameter(String param) { return this.htmlElement.getAttribute((String)("param-").concat(param)); }
Đơn giản, có phải là nó không? Và không cần sửa đổi mã nguồn ban đầu.
Sau đó, Java Applet ban đầu sử dụng bộ đệm ngoài màn hình để tránh nhấp nháy, nhưng hình ảnh không được thực hiện đầy đủ trong AWT Candy (chỉ là các hàm hình ảnh bên ngoài cơ bản) và không có vấn đề nhấp nháy nào với Canvas hiện đại, vì vậy tôi chỉ cần xóa phần ngoài màn hình. Lưu ý Đây là thay đổi duy nhất tôi cần thực hiện trên tệp gốc.
Tệp hiện biên dịch với mvn generate-sources
Điều cuối cùng cần làm là tạo tệp HTML bằng cách sử dụng JavaScript được tạo, bằng cách điều chỉnh tệp gốc với các viên kẹo và phiên bản được sử dụng, và thêm các attrbibutes mới của param param-xx.
<html> <head> <script type="text/javascript" src="j4ts-0.6.0-SNAPSHOT/bundle.js"></script> <script type="text/javascript" src="j4ts-file-0.0.1-SNAPSHOT/bundle.js"></script> <script type="text/javascript" src="j4ts-awt-swing-0.0.1-SNAPSHOT/bundle.js"></script> <script type="text/javascript" src="../target/js/laby.js"></script> </head> <body> <div class="applet" data-applet="laby" data-width="1600" data-height="640" param-xmax="200" param-ymax="60" param-updt="true" param-dbg="false"></div> </body> </html>
Mở tệp HTML này trong trình duyệt và Hurray, nó sẽ hoạt động! (Nếu không, hãy tận hưởng thời gian gỡ lỗi ;-))
Một chút cải thiện: Khi thay đổi kích thước, toàn bộ vải biến mất. Điều này được gây ra bởi chức năng thay đổi kích thước luôn thay đổi kích thước vải nhưng không sơn lại nó. Và một tấm vải thay đổi kích thước luôn được xóa. Vì vậy, tôi đã sửa đổi hàm trong bảng.java để không thay đổi kích thước nếu phần tử HTML không được thay đổi kích thước (trường hợp điển hình của các phần tử có chiều rộng cố định, đó chính xác là trường hợp của thẻ appel html của chúng tôi) và ngay cả khi được thay đổi kích thước, để thêm một cuộc gọi vào Chức năng sơn lại.
window.onresize = e -> { if ((htmlCanvas.width != htmlElement.offsetWidth) || (htmlCanvas.height != htmlElement.offsetHeight)) { htmlCanvas.width = htmlElement.offsetWidth; htmlCanvas.height = htmlElement.offsetHeight; repaint(); } return e; };
Và cuối cùng, để làm cho việc lưu trữ và phân phối các tệp kết quả giảm bớt, tôi muốn có toàn bộ trong một tệp HTML. Tôi đã sử dụng công cụ inliner để cài đặt với npm install -g inliner và sử dụng rất đơn giản với public String getParameter(String param) { switch(param) { case "xmax" : return "100"; case "ymax" : return "60"; case "updt" : return "true"; case "dbg" : return "false"; default: return ""; } } 0.
Yêu cầu kéo kết quả của J4TS-AWT-SPRING là ở đây.
Dưới đây là ảnh chụp màn hình với phiên bản JavaScript ở bên trái và với applet gốc ở bên phải:
Bạn sẽ nhận thấy kết quả không hoàn toàn giống nhau, vì sự chống phân tích trong trình duyệt của tôi không thể bị vô hiệu hóa theo chương trình.
Muốn thử nó? bấm vào đây !
Để kết luận, tôi không chắc rằng tôi đã mất ít thời gian hơn khi viết lại JavaScript bản địa sạch sẽ, nhưng thật vui khi khám phá JSweet và tôi đã học được rất nhiều. Nó rất hiệu quả để chuyển đổi phần logic của nguồn, nhưng có một số hạn chế về phần UI.