AndroidXML 和 TotalCross 的運用為樹莓派和其他設(shè)備創(chuàng)建 UI 提供了更簡單的方法。
為應(yīng)用程序創(chuàng)建良好的用戶體驗（UX）是一項艱巨的任務(wù)，尤其是在開發(fā)嵌入式應(yīng)用程序時。今天，有兩種圖形用戶界面（GUI）工具通常用于開發(fā)嵌入式軟件：它們要么涉及復(fù)雜的技術(shù)，要么非常昂貴。
然而，我們已經(jīng)創(chuàng)建了一個概念驗證（PoC），它提供了一種新的方法來使用現(xiàn)有的、成熟的工具為運行在桌面、移動、嵌入式設(shè)備和低功耗 ARM 設(shè)備上的應(yīng)用程序構(gòu)建用戶界面（UI）。我們的方法是使用 Android Studio 繪制 UI；使用 TotalCross在設(shè)備上呈現(xiàn) Android XML；采用被稱為KnowCode的新TotalCross API；以及使用樹莓派 4來執(zhí)行應(yīng)用程序。
選擇 Android Studio
可以使用 TotalCross API 為應(yīng)用程序構(gòu)建一個美觀的響應(yīng)式用戶體驗，但是在 Android Studio 中創(chuàng)建 UI 縮短了制作原型和實際應(yīng)用程序之間的時間。
有很多工具可以用來為應(yīng)用程序構(gòu)建 UI，但是 Android Studio是全世界開發(fā)者最常使用的工具。除了它被大量采用以外，這個工具的使用也非常直觀，而且它對于創(chuàng)建簡單和復(fù)雜的應(yīng)用程序都非常強大。在我看來，唯一的缺點是使用該工具所需的計算機性能，它比其他集成開發(fā)環(huán)境 （IDE） 如 VSCode 或其開源替代方案VSCodium要龐大得多。
通過思考這些問題，我們創(chuàng)建了一個概念驗證，使用 Android Studio 繪制 UI，并使用 TotalCross 直接在設(shè)備上運行 AndroidXML。
構(gòu)建 UI
對于我們的 PoC，我們想創(chuàng)建一個家用電器應(yīng)用程序來控制溫度和其他東西，并在 Linux ARM 設(shè)備上運行。
我們想為樹莓派開發(fā)我們的應(yīng)用程序，所以我們使用 Android 的 ConstraintLayout來構(gòu)建 848×480（樹莓派的分辨率）的固定屏幕大小的 UI，不過你可以用其他布局構(gòu)建響應(yīng)性 UI。
Android XML 為 UI 創(chuàng)建增加了很多靈活性，使得為應(yīng)用程序構(gòu)建豐富的用戶體驗變得容易。在下面的 XML 中，我們使用了兩個主要組件：ImageView和TextView。
TextView 元素用于向用戶顯示一些數(shù)據(jù)，比如建筑物內(nèi)的溫度。大多數(shù) ImageView 都用作用戶與 UI 交互的按鈕，但它們也需要實現(xiàn)屏幕上組件提供的事件。
用 TotalCross 整合
這個 PoC 中的第二項技術(shù)是 TotalCross。我們不想在設(shè)備上使用 Android 的任何東西，因為：
1。我們的目標是為 Linux ARM 提供一個出色的 UI。 2。我們希望在設(shè)備上實現(xiàn)低占用。 3。我們希望應(yīng)用程序在低計算能力的低端硬件設(shè)備上運行（例如，沒有 GPU、 低 RAM 等）。
首先，我們使用 VSCode 插件創(chuàng)建了一個空的 TotalCross 項目。接下來，我們保存了drawable文件夾中的圖像副本和xml文件夾中的 Android XML 文件副本，這兩個文件夾都位于resources文件夾中：
為了使用 TotalCross 模擬器運行 XML 文件，我們添加了一個名為 KnowCode 的新 TotalCross API 和一個主窗口來加載 XML。下面的代碼使用 API 加載和呈現(xiàn) XML：
public void initUI { XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create(\"xml / homeApplianceXML.xml\"); swap(xmlCont);}
就這樣！只需兩個命令，我們就可以使用 TotalCross 運行 Android XML 文件。以下是 XML 如何在 TotalCross 的模擬器上執(zhí)行：
完成這個 PoC 還有兩件事要做：添加一些事件來提供用戶交互，并在樹莓派上運行它。
添加事件
KnowCode API 提供了一種通過 ID（getControlByID） 獲取 XML 元素并更改其行為的方法，如添加事件、更改可見性等。
例如，為了使用戶能夠改變家中或其他建筑物的溫度，我們在 UI 底部放置了加號和減號按鈕，并在每次單擊按鈕時都會出現(xiàn)“單擊”事件，使溫度升高或降低一度：
Button plus = (Button) xmlCont.getControlByID(\"@ id/plus\");Label insidetempLabel = (Label) xmlCont.getControlByID(\"@ id/insideTempLabel\");plus.addPressListener(new PressListener { @Override public void controlPressed(ControlEvent e) { try { String tempString = insideTempLabel.getText; int temp; temp = Convert.toInt(tempString); insideTempLabel.setText(Convert.toString( temp)); } catch (InvalidNumberException e1) { e1.printStackTrace; } }});
在樹莓派 4 上測試
最后一步！我們在一臺設(shè)備上運行了應(yīng)用程序并檢查了結(jié)果。我們只需要打包應(yīng)用程序并在目標設(shè)備上部署和運行它。VNC也可用于檢查設(shè)備上的應(yīng)用程序。
整個應(yīng)用程序，包括資源（圖像等）、Android XML、TotalCross 和 Knowcode API，在 Linux ARM 上大約是 8MB。
下面是應(yīng)用程序的演示：
在本例中，該應(yīng)用程序僅為 Linux ARM 打包，但同一應(yīng)用程序可以作為 Linux 桌面應(yīng)用程序運行，在Android 設(shè)備 、Windows、windows CE 甚至 iOS 上運行。
所有示例源代碼和項目都可以在 HomeApplianceXML GitHub存儲庫中找到。
現(xiàn)有工具的新玩法
為嵌入式應(yīng)用程序創(chuàng)建 GUI 并不需要像現(xiàn)在這樣困難。這種概念證明為如何輕松地完成這項任務(wù)提供了新的視角，不僅適用于嵌入式系統(tǒng)，而且適用于所有主要的操作系統(tǒng)，所有這些系統(tǒng)都使用相同的代碼庫。
我們的目標不是為設(shè)計人員或開發(fā)人員創(chuàng)建一個新的工具來構(gòu)建 UI 應(yīng)用程序；我們的目標是為使用現(xiàn)有的最佳工具提供新的玩法。
你對這種新的應(yīng)用程序開發(fā)方式有何看法？在下面的評論中分享你的想法。
via: https://opensource.com/article/20/5/linux-arm-ui
作者：Bruno Muniz選題：lujun9972譯者：Chao-zhi校對：wxy
本文由 LCTT原創(chuàng)編譯，Linux中國榮譽推出
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。
