一種為 Linux ARM 設備構建跨平台 UI 的新方法

為應用程序創建良好的用戶體驗（UX）是一項艱巨的任務，尤其是在開發嵌入式應用程序時。今天，有兩種圖形用戶界面（GUI）工具通常用於開發嵌入式軟體：它們要麼涉及複雜的技術，要麼非常昂貴。

然而，我們已經創建了一個概念驗證（PoC），它提供了一種新的方法來使用現有的、成熟的工具為運行在桌面、移動、嵌入式設備和低功耗 ARM 設備上的應用程序構建用戶界面（UI）。我們的方法是使用 Android Studio 繪製 UI；使用 TotalCross 在設備上呈現 Android XML；採用被稱為 KnowCode 的新 TotalCross API；以及使用 樹莓派 4 來執行應用程序。

選擇 Android Studio

可以使用 TotalCross API 為應用程序構建一個美觀的響應式用戶體驗，但是在 Android Studio 中創建 UI 縮短了製作原型和實際應用程序之間的時間。

有很多工具可以用來為應用程序構建 UI，但是 Android Studio 是全世界開發者最常使用的工具。除了它被大量採用以外，這個工具的使用也非常直觀，而且它對於創建簡單和複雜的應用程序都非常強大。在我看來，唯一的缺點是使用該工具所需的計算機性能，它比其他集成開發環境 （IDE） 如 VSCode 或其開源替代方案 VSCodium 要龐大得多。

通過思考這些問題，我們創建了一個概念驗證，使用 Android Studio 繪製 UI，並使用 TotalCross 直接在設備上運行 AndroidXML。

構建 UI

對於我們的 PoC，我們想創建一個家用電器應用程序來控制溫度和其他東西，並在 Linux ARM 設備上運行。


我們想為樹莓派開發我們的應用程序，所以我們使用 Android 的 ConstraintLayout 來構建 848x480（樹莓派的解析度）的固定屏幕大小的 UI，不過你可以用其他布局構建響應性 UI。

Android XML 為 UI 創建增加了很多靈活性，使得為應用程序構建豐富的用戶體驗變得容易。在下面的 XML 中，我們使用了兩個主要組件：ImageView 和 TextView。

<ImageView
android_id="@+id/imageView6"
android_layout_width="273dp"
android_layout_height="291dp"
android_background="@drawable/Casa"
tools_layout_editor_absoluteX="109dp"
tools_layout_editor_absoluteY="95dp" />
<TextView
android_id="@+id/insideTempEdit"
android_layout_width="94dp"
android_layout_height="92dp"
android_background="#F5F5F5"
android_text="20"
android_textAlignment="center"
android_gravity="center"
android_textColor="#000000"
android_textSize="67dp"
android_textStyle="bold"
tools_layout_editor_absoluteX="196dp"
tools_layout_editor_absoluteY="246dp" />

TextView 元素用於向用戶顯示一些數據，比如建築物內的溫度。大多數 ImageView 都用作用戶與 UI 交互的按鈕，但它們也需要實現屏幕上組件提供的事件。

用 TotalCross 整合

這個 PoC 中的第二項技術是 TotalCross。我們不想在設備上使用 Android 的任何東西，因為：

1。我們的目標是為 Linux ARM 提供一個出色的 UI。 2。我們希望在設備上實現低佔用。 3。我們希望應用程序在低計算能力的低端硬體設備上運行（例如，沒有 GPU、 低 RAM 等）。

首先，我們使用 VSCode 插件 創建了一個空的 TotalCross 項目。接下來，我們保存了 drawable 文件夾中的圖像副本和 xml 文件夾中的 Android XML 文件副本，這兩個文件夾都位於 resources 文件夾中：


為了使用 TotalCross 模擬器運行 XML 文件，我們添加了一個名為 KnowCode 的新 TotalCross API 和一個主窗口來載入 XML。下面的代碼使用 API 載入和呈現 XML：

public void initUI() {
    XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create("xml / homeApplianceXML.xml");
    swap(xmlCont);
}

就這樣！只需兩個命令，我們就可以使用 TotalCross 運行 Android XML 文件。以下是 XML 如何在 TotalCross 的模擬器上執行：


完成這個 PoC 還有兩件事要做：添加一些事件來提供用戶交互，並在樹莓派上運行它。

添加事件

KnowCode API 提供了一種通過 ID（getControlByID） 獲取 XML 元素並更改其行為的方法，如添加事件、更改可見性等。

例如，為了使用戶能夠改變家中或其他建築物的溫度，我們在 UI 底部放置了加號和減號按鈕，並在每次單擊按鈕時都會出現「單擊」事件，使溫度升高或降低一度：

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 上測試

最後一步！我們在一台設備上運行了應用程序並檢查了結果。我們只需要打包應用程序並在目標設備上部署和運行它。VNC 也可用於檢查設備上的應用程序。

整個應用程序，包括資源（圖像等）、Android XML、TotalCross 和 Knowcode API，在 Linux ARM 上大約是 8MB。

下面是應用程序的演示：


在本例中，該應用程序僅為 Linux ARM 打包，但同一應用程序可以作為 Linux 桌面應用程序運行，在Android 設備 、Windows、windows CE 甚至 iOS 上運行。

所有示例源代碼和項目都可以在 HomeApplianceXML GitHub 存儲庫中找到。

現有工具的新玩法

為嵌入式應用程序創建 GUI 並不需要像現在這樣困難。這種概念證明為如何輕鬆地完成這項任務提供了新的視角，不僅適用於嵌入式系統，而且適用於所有主要的操作系統，所有這些系統都使用相同的代碼庫。

我們的目標不是為設計人員或開發人員創建一個新的工具來構建 UI 應用程序；我們的目標是為使用現有的最佳工具提供新的玩法。

你對這種新的應用程序開發方式有何看法？在下面的評論中分享你的想法。

via: https://opensource.com/article/20/5/linux-arm-ui

作者：Bruno Muniz 選題：lujun9972 譯者：Chao-zhi 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive