當前位置：首頁 > 编程语言 > java >内容正文

java

无处不在_Java无处不在：使用DukeScript在任何地方运行一次编写

發布時間：2023/12/3 java 53 豆豆

生活随笔收集整理的這篇文章主要介紹了无处不在_Java无处不在：使用DukeScript在任何地方运行一次编写小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

無處不在

在相當長一段時間內，Java都未能兌現“一次編寫，隨處運行”的承諾。 DukeScript希望通過在跨平臺應用程序中實現視圖和邏輯的清晰分離來改變這種狀況。在本文中，一個簡單的場景用于介紹DukeScript的基礎。

多年以來，Java Swing使開發人員能夠編寫可以在任何操作系統上運行的應用程序。隨著智能手機，平板電腦和嵌入式計算機的到來，一切都結束了。在企業中，臺式機占據了很多年。但是，與此同時，每個IT項目都包括未來的計劃，將來需要將應用程序移植到移動平臺。為所有平臺構建本機應用程序需要特殊技能，并且在維護和開發方面都非常昂貴。什么是要做？

DukeScript（ DukeScript.com ）再次為您提供了基于Java的解決方案，使您可以開發跨平臺應用程序。 DukeScript提供了視圖和邏輯的清晰分離，使UI設計人員可以專注于UI設計，而編碼人員可以專注于編寫經過良好測試的應用程序代碼。

兩全其美的

DukeScript的基本思想很簡單。每個操作系統都可以運行基本的Java應用程序。在Android上，這是通過Dalvik Runtime和ART原生完成的，在iOS上您擁有RoboVM ，在其他許多平臺上，您擁有OpenJDK和Oracle的Java SE Embedded 。同時，有一系列Java虛擬機可用于瀏覽器（ TeaVM ， Doppio ， Bck2Brwsr ），所有這些虛擬機都可以在沒有瀏覽器插件的情況下運行。但是，這里缺少的是統一視圖技術，而與此同時，幾乎所有平臺上都提供了現代HTML渲染器組件。將這些不同的技術，虛擬機和組件組合在一起時，便具有了全面框架的基礎。

通過將所有這些部分組合在一起，可以同時利用其所有優勢。例如，由于Java具有靜態類型，因此在所有編程語言中，Java都提供了最佳的IDE支持，并使可維護的代碼得以編寫并易于重構。由于這些原因，它比JavaScript更適合用作大型項目的語言。在UI方面，對于HTML和CSS，您可以訪問免費的商業框架和服務庫。當UI和業務邏輯彼此清晰地分開時，我們可以毫無例外地，不受任何限制地利用完整的武器庫。為了證明這些觀點，我們現在將開發和設計“待辦事項列表”應用程序。

ViewModel

DukeScript使用Model-View-ViewModel（MVVM）設計模式將可視化和邏輯分離。 View是用標記語言定義的，并且將活動元素聲明性地綁定到ViewModel的屬性。通過這種架構，ViewModel不需要了解View。無需任何更改，即可從ViewModel換出View。所有View邏輯都在ViewModel中定義。在MVVM模式中，模型是應用程序的其余部分，而如何可視化模型則是未定義的，因此不受限制。

讓我們從ViewModel開始。清單1顯示了如何創建ViewModel。 @Model批注確保將生成名為Task的類。同時，將自動創建屬性title和complete的 setter和getter。這使開發人員不必編寫一堆代碼，并且ViewModel類的結構緊湊且一目了然。創建過程會在后臺自動進行，因此在IDE中進行開發時可以立即使用該類。

清單1

@Model(className = "Task", properties = { @Property(name = "title", type = String.class), @Property(name = "complete", type = boolean.class) }) public static class TaskModel {}

對于更復雜的任務，我們可以包裝模型。清單2顯示了一個TaskListViewModel ，它表示Tasks列表以及其他屬性。 @Function注釋標記可以從View調用的方法。

清單2

@Model(className = "TaskListViewModel", properties = {@Property(name = "input", type = String.class),@Property(name = "tasks", type = Task.class, array = true),@Property(name = "editing", type = Task.class) }, targetId = "body") final class TaskListViewModelDefinition {@Functionpublic static void editTask(TaskListViewModel list, Task data) {list.setEditing(data);}@Functionpublic static void stopEditing(TaskListViewModel list) {list.setEditing(null);}@Function@ModelOperationpublic static void deleteTask(TaskListViewModel model, Task data) {model.getTasks().remove(data);}@Function@ModelOperationpublic static void addTask(TaskListViewModel model) {if (null == model.getInput() || model.getInput().length() == 0) {return;}Task task = new Task(model.getInput(), false);model.setInput(""); model.getTasks().add(task);} }

使用DukeScript進行單元測試

上面代碼中的兩個方法被標記為@ModelOperation 。在DukeScript中，您使用的方法也需要從View外部調用，在我們的示例（清單3）中，這是一個單元測試。該測試顯示了如何使用生成的ViewModel。在第一個測試用例中，我們模擬用戶輸入新任務（輸入一個輸入（ setInput ）并確認輸入，例如通過按鈕或Enter鍵（ addTask ）來鍵入新任務。即使還沒有View，我們已經可以測試ViewModel的方法了。這種情況確實很好地顯示了組件的干凈去耦。

清單3

public class TodoListTest {@Testpublic void testAddTask() {TaskListViewModel taskList = new TaskListViewModel();Assert.assertEquals(taskList.getTasks().size(), 0);taskList.setInput("Buy milk!");taskList.addTask();Assert.assertEquals(taskList.getTasks().size(), 1);Task task = taskList.getTasks().get(0);Assert.assertEquals(task.getTitle(), "Buy milk!");}@Testpublic void testDeleteTask() {TaskListViewModel taskList = new TaskListViewModel();taskList.getTasks().add(new Task("Buy milk!", false));Assert.assertEquals(taskList.getTasks().size(), 1);Task task = taskList.getTasks().get(0);taskList.deleteTask(task);Assert.assertEquals(taskList.getTasks().size(), 0);} }

JSON序列化

當您查看定義ViewModel類的注釋時，您應該注意到它們看起來有點像JSON消息。這并非巧合，因為DukeScript能夠輕松地與JSON集成，因此具有巨大的價值。 ViewModel類的toString方法返回JSON字符串。正如您可以輕松地從JSON字符串創建ViewModel對象一樣。清單4展示了ViewModel如何再次序列化和反序列化。當您只需要一個對象的副本時，請使用clone方法。 Models.parse的目的是反序列化來自服務器或本地持久化數據的消息。

清單4

TaskListViewModel copy; String json = original.toString(); InputStream inputStream = new ByteArrayInputStream( json.getBytes(StandardCharsets.UTF_8)); try {copy = Models.parse(BrwsrCtx.findDefault(TaskListViewModel.class),TaskListViewModel.class, inputStream); } catch (IOException ex) {Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex); }

風景

默認情況下，DukeScript使用HTML定義視圖。由于將View與ViewModel完全分開，因此也可以使用其他格式。 dukescript-javafx項目演示了它是如何工作的。通過該項目，可以在JavaFX應用程序中輕松可視化DukeScript ViewModels。在這種情況下，用于定義視圖的語言是FXML。 Controls.js還使用另一種格式定義Views，本文稍后將對此進行討論。

對于本文中創建的“待辦事項列表”應用程序，我們將僅使用清單5所示的標準HTML格式。依賴于ViewModel的元素將使用data-bind屬性。這樣，它們以聲明方式綁定到ViewModel的屬性和方法。同樣，可以用這種方式定義for-each循環和條件語句。

在大多數情況下， data-bind屬性可以滿足您的所有需求。但是，有時您需要創建一個HTML元素，盡管View可能不需要HTML元素。對于這些情況，有特殊的評論。在下面清單5的示例中，通過<！– ko foreach：tasks –>遍歷Tasks列表，而<！– / ko –>關閉循環。可以從清單5中的注釋以及DukeScript網站中了解有關綁定語法的更多信息。

清單5

<ul><li><input type="checkbox" name="" data-bind="checked: complete"/><span data-bind="text: title"></span><span class="btns"><button data-bind="click: $root.editTask">Edit</button><button data-bind="click: $root.deleteTask">Delete</button></span><form data-bind="submit: $root.stopEditing"><input type="text" data-bind="textInput: title"/></form></li><li><form data-bind="submit: addTask"><input type="text" data-bind="textInput: input"/></form></li> </ul>

上面定義的功能原型如下圖所示。從外觀上看，它可能看起來有點謙虛，所以讓我們在以下各節中進行更改！

設計者/開發者實驗

在DukeScript到來之前，已經出現了其他幾個框架，它們有望將設計與開發脫鉤。在現實世界中，幾乎沒有任何東西可以實現。設計往往需要專有的工具，這些工具所帶來的不僅僅是專業設計師的疲倦之笑。 JavaFX就是一個例子。使用JavaFX Scene Builder，您甚至都無法創建多邊形，而該工具的未來卻一無所獲。此外，創建設計的任務往往留給開發人員，開發人員需要花費時間來適應各種不同且相互沖突的工具。

為了測試DukeScript是否可以更好地解決所有問題，我給自己設定了一個小挑戰。首先，我為“待辦事項列表”應用程序找到并購買了完整的設計，如下面的屏幕快照所示。

然后，我到處找人將PSD文件更改為HTML（當您搜索“ PSD到HTML”時，可以在線找到數百個用于此任務的服務）。我最終選擇了Rapidxhtml，因為該服務價格便宜，盡管如此，但受到了好評。

對于“真實”項目，并確保更好的溝通，我絕對希望與設計師直接互動。但是，對于本實驗而言，通信僅限于信用卡和Web表單是一個優點，因為通過這種方式，我們可以確保設計人員不了解DukeScript可能需要的任何特殊要求。

我將PSD文件上傳到網站并指出我的樣式要求。例如，由于適用的樣式更加精細，因此復選框和滾動條會額外花費。因此，我決定不進行這些更詳細的選擇。最后，完整的訂單并不昂貴。每頁的轉換成本，包括所有選定的額外功能（寬度調整大小，帶有CSS3HTML5大小），約為170歐元。預付款并在原則上在24小時內交付。聽起來不錯，我等著懸念。

6小時后，我已經收到一封包含該設計鏈接的電子郵件。不錯。乍一看，結果看起來不錯，盡管寬度調整沒有用。兩個小時后，在回發了我的評論后，我有了一個可以正確調整大小的新版本。下面的屏幕截圖顯示了結果。

關于小缺陷的進一步評論被忽略。對于“實際”項目，優質服務或具有適用建議的設計機構可能是一個更好的選擇。清單6顯示了我收到HTML。

清單6

<!DOCTYPE html>     <html class="no-js"> <head><title>TODO</title><meta name="robots" content="index, follow"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="author" content="RapidxHTML" /><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/style.css"></head><body><div id="box"><div class="box-cont"><header class="box-header"><div class="box-title">My tasks for today</div><div class="box-links"><a href=""><img src="images/btn-cal.png" alt="" /></a><a href=""><img src="images/btn-settings.png" alt="" /></a></div></header><section class="todo"><section class="todo-bg"><ul class="todo-list"><li class="done"><input type="checkbox" name="" class="toggle" checked="checked" />Design a to-do list <span class="btns"><a href=""><img src="images/icon-edit.png" /></a><a href=""><img src="images/icon-delete.png" /></a></span></li><li><input type="checkbox" name="" class="toggle" />Design a super task<br />with 2 lines <span class="btns"><a href=""><img src="images/icon-edit.png" /></a><a href=""><img src="images/icon-delete.png" /></a></span></li><li><input type="checkbox" name="" class="toggle" />fix the dog toy <span class="btns"><a href=""><img src="images/icon-edit.png" /></a><a href=""><img src="images/icon-delete.png" /></a></span></li><li><input type="checkbox" name="" class="toggle" />buy coffee <span class="btns"><a href=""><img src="images/icon-edit.png" /></a><a href=""><img src="images/icon-delete.png" /></a></span></li><li><input type="checkbox" name="" class="toggle" />feed the dog <span class="btns"><a href=""><img src="images/icon-edit.png" /></a><a href=""><img src="images/icon-delete.png" /></a></span></li><li><input type="checkbox" name="" class="toggle" />take a walk with the dog <img src="icon_smile.gif" alt=":)" class="wp-smiley"> <span class="btns"><a href=""><img src="images/icon-edit.png" /></a><a href=""><img src="images/icon-delete.png" /></a></span></li></ul></section></section></div></div><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script></body> </html>

接下來，我不得不為UI添加生命。從原型開始，您已經在下面看到的綁定已經很熟悉了。清單7顯示了重寫的代碼。

清單7

<!DOCTYPE html> <head><title>TODO</title><meta charset="utf-8"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/style.css"> </head> <body id="body"><div id="box"><div class="box-cont"><header class="box-header"><div class="box-title">My tasks for today</div><div class="box-links"><a href=""><img src="images/btn-cal.png" alt="" /></a><a href=""><img src="images/btn-settings.png" alt="" /></a></div></header><section class="todo"><section class="todo-bg"><ul class="todo-list" > <li><input type="checkbox" name="" class="toggle" data-bind="checked: complete"/><span data-bind="text: title"></span><span class="btns"><img src="images/icon-edit.png" alt="" data-bind="click: $root.editTask" /><img src="images/icon-delete.png" alt="" data-bind="click: $root.deleteTask" /></span><form data-bind="submit: $root.stopEditing"><input type="text" data-bind="textInput: title"/></form></li><li><form data-bind="submit: addTask"><input type="text" data-bind="textInput: input"/></form></li></ul></section></section></div></div> </body> </html>

在下面的屏幕截圖中，您可以看到結果。

UI看起來像設計示例，并且在所有平臺上均起作用。這樣，實驗取得了圓滿成功-可以完全委托設計。在沒有特殊要求的情況下，設計人員和轉換服務能夠提供可用的資產，這些資產可以以最小的更改集成到應用程序中。

通過這種方式，開發人員能夠完全專注于所需功能的實現，并專注于應用程序的業務邏輯。那些具有桌面應用程序開發經驗的人都知道，定期轉換應用程序設計會浪費大量開發時間。使用DukeScript，您可以放心地將這些問題委托給設計專業人員，這可以節省寶貴的時間來實現應用程序的功能要求。

如何開發DukeScript應用程序

目前，DukeScript支持各種桌面平臺以及iOS，Android和瀏覽器。可用的Maven原型為每個受支持的平臺創建一個單獨的子項目。對于每個平臺，可以使用特定任務來測試和打包子項目。例如，Android和iOS的子項目提供了在模擬器或連接的設備上運行它們的可能性，而瀏覽器的子項目則自動構建了一個靜態網站。

最新的增強功能已啟用對嵌入式平臺的支持，以使DukeScript可以在IoT應用程序中使用。因此，由于Oracle 結束了對嵌入式平臺上JavaFX的支持，因此現在再次有可能在嵌入式設備上使用Java開發專業的GUI。在這些情況下，OpenJDK通常足以用作JVM，因此，即使對于商業項目，也不需要昂貴的Java SE嵌入式許可。

借助Maven原型，可以通過各種Java IDE完成DukeScript應用程序的開發。專門針對NetBeans IDE，還有一個具有一系列支持功能的插件，使開發更加舒適。例如，HTML編輯器中有data-bind指令的代碼完成，而DOM Inspector使您可以檢查正在運行的應用程序。對HTML和CSS的更改將由正在運行的應用程序自動獲取。從0.8版開始，甚至Maven原型都引入了熱插拔。代碼更改將自動部署到正在運行的應用程序中，并且可以立即進行測試，如下面的屏幕快照所示。甚至JavaScript開發人員也應該嫉妒，因為與JavaScript開發不同，應用程序的狀態得以保持，而無需進行任何手動重新加載。

用于Java的Controls.js-不帶HTML的DukeScript

DukeScript致力于在沒有JavaScript的情況下實現跨平臺開發。通常，DukeScript應用程序的前端是在HTML和CSS的幫助下編寫的。如已顯示的，可以委派應用程序開發的這一方面，同時繼續要求編寫測試并針對各種平臺進行修改以及手動編輯HTML文件。

作為一種替代方法， Controls.js for Java項目使您可以通過拖放來開發完整的UI。采用這種方法時，您將擁有Maven原型和一個NetBeans插件來為您提供支持。 Controls.js利用其自己的組件庫。每個單獨的控件都可以通過皮膚進行可視化，同時提供了用于創建自定義皮膚的皮膚編輯器。 ViewModel保持不變，而綁定是在可視編輯器的幫助下完成的。

結論

最后，讓我們研究一下百萬美元的問題：“ DukeScript是否適合我的項目？” 優點很明顯。

使用通用代碼庫，可以為許多平臺開發應用程序。
工作流程結構合理，同時可用豐富且完善的工具來為您提供支持。
可以委派設計任務，從而極大地減少了應用程序維護和開發的成本。

盡管如此，DukeScript并不是每個應用程序的最佳解決方案。與那些對本機外觀和風格感興趣的人相比，那些重視自己的品牌以及統一的跨平臺設計的人，可以通過DukeScript獲得更好的服務。我也不會嘗試通過DukeScript創建3D建模工具，也不會嘗試通過優化的渲染管道來使用任何類型的應用程序。

但是，DukeScript是業務應用程序的很好選擇。對于簡單的業務應用程序，使用Controls.js for Java會有所回報，從而可以實現快速的應用程序開發工作流程。此外，由于其簡單的通信機制，對于具有服務器后端的應用程序，DukeScript非常適合。總體而言，DukeScript為Java開發人員提供了一個跨平臺開發的順利切入點，而無需放棄世界上使用最廣泛的編程語言，該語言以靜態方式提供最好的IDE支持，無疑比當今世界上任何其他編程語言都要好。

本文經Geertjan Wielenga的翻譯，由Anton Epple 用德語翻譯而成。

翻譯自: https://www.javacodegeeks.com/2015/08/java-everywhere-write-once-run-anywhere-with-dukescript.html