用 XML 和 Java 構建樹莓派印表機的用戶界面

從頭開始構建 GUI 是一個非常耗時的過程，以硬編碼的方式處理所有的位置和對齊對於一些程序員來說確實很困難。所以在本文中，我將演示如何使用 XML 加快這一過程。

本項目使用 TotalCross 作為目標框架。TotalCross 是一個開源的跨平台軟體開發工具包（SDK），旨在更快地為嵌入式設備創建 GUI。TotalCross 無需在設備上運行 Java 即可提供 Java 的開發優勢，因為它使用自己的位元組碼和虛擬機（ TC 位元組碼 TC bytecode 和 TCVM）來增強性能。

我還使用了 Knowcode-XML，這是一個用於 TotalCross 框架的開源 XML 解析器，它可以將 XML 文件轉換為 TotalCross 組件。

項目需求

要重現此項目，你需要：

• KnowCode-XML
• VSCode 或 VSCodium
• 一個 Android 開發環境
• 用於 VSCode 的 TotalCross 插件
• 適用於你的開發平台（Linux、Mac 或 Windows）的 Java，需要 Java 11（或更高版本）
• Git

製作嵌入式應用程序

該應用程序由一個具有掃描、列印和複印等基本列印功能的嵌入式 GUI 組成。


構建這個 GUI 需要幾個步驟，包括使用 Android-XML 生成 GUI，然後使用 Knowcode-XML 解析器在 TotalCross 框架上運行它。

1、生成 Android XML

要創建 XML 文件，首先構建一個簡單的 Android 屏幕，然後對其進行自定義。如果你不知道如何編寫 Android-XML，或者你只是想簡單嘗試一下，你可以從這個 GitHub 項目 中下載這個應用程序的 XML。該項目還包含渲染 GUI 要用到的圖片。

2、調整 XML

生成 XML 文件後，你需要進行一些微調以確保所有內容都已經對齊、比例正確並且圖像的路徑正確。

將 XML 布局添加到 Layouts 文件夾，將所有資源添加到 Drawable 文件夾。然後你就可以開始自定義 XML 了。

例如，如果想要更改 XML 對象的背景，可以更改 android:background 屬性：

android_background="@drawable/scan"

你也可以使用 tools:layout_editor_absoluteX 和 tools:layout_editor_absoluteY 更改對象的位置：

tools_layout_editor_absoluteX="830dp"
tools_layout_editor_absoluteY="511dp"

或者使用 android:layout_width 和 android:layout_height 更改對象的大小：

android_layout_width="70dp"
android_layout_height="70dp"

如果要在對象上放置文本，可以使用 android:textSize、android:text、android:textStyle 和 android:textColor：

android_textStyle="bold"
android_textColor="#000000"
android_textSize="20dp"
android_text="2:45PM"

下面是一個完整的 XML 對象的示例：

    <ImageButton
           android_id="@+id/ImageButton"
           android_layout_width="70dp"
           android_layout_height="70dp"
           tools_layout_editor_absoluteX="830dp"
           tools_layout_editor_absoluteY="511dp"
           android_background="@drawable/home_config" />

3、在 TotalCross 上運行 GUI

完成所有 XML 調整後，就可以在 TotalCross 上運行它了。在 TotalCross 擴展（LCTT 譯註：在 VSCode 裡面）上創建一個新項目，並將 XML 和 Drawable 文件夾添加到 Main 文件夾里。如果你仍然不確定如何創建 TotalCross 項目，請參閱我們的 入門指南。

配置好環境後，使用 totalcross.knowcode.parse.XmlContainerFactory 和 import totalcross.knowcode.parse.XmlContainerLayout 在 TotalCross 框架上使用 XML GUI。 你可以在其 GitHub 頁面 上找到更多關於使用 KnowCode-XML 的信息。

4、添加過渡效果

這個項目的平滑過渡效果是由 SlidingNavigator 類創建的，它使用 TotalCross 的 ControlAnimation 類從一個屏幕滑到另一個屏幕。

在 XMLpresenter 類上調用 SlidingNavigator：

new SlidingNavigator(this).present(HomePresenter.class);

在 SlidingNavigator 類上實現 present 函數：

public void present(Class<? extends XMLPresenter> presenterClass)
         throws InstantiationException, IllegalAccessException {
      final XMLPresenter presenter = cache.containsKey(presenterClass) ? cache.get(presenterClass)
            : presenterClass.newInstance();
      if (!cache.containsKey(presenterClass)) {
         cache.put(presenterClass, presenter);
      }

      if (presenters.isEmpty()) {
         window.add(presenter.content, LEFT, TOP, FILL, FILL);
      } else {
         XMLPresenter previous = presenters.lastElement();

         window.add(presenter.content, AFTER, TOP, SCREENSIZE, SCREENSIZE, previous.content);

使用動畫控制項中的 PathAnimation 來創建從一個屏幕到另一個屏幕的滑動動畫：

         PathAnimation.create(previous.content, -Settings.screenWidth, 0, new ControlAnimation.AnimationFinished() {
            @Override
            public void onAnimationFinished(ControlAnimation anim) {
               window.remove(previous.content);
            }
         }, 1000).with(PathAnimation.create(presenter.content, 0, 0, new ControlAnimation.AnimationFinished() {
            @Override
            public void onAnimation Finished(Control Animation anim) {
               presenter.content.setRect(LEFT, TOP, FILL, FILL);
            }
         }, 1000)).start();
      }
      presenter.setNavigator(this);
      presenters.push(presenter);
      presenter.bind2();
      if (presenter.isFirstPresent) {
         presenter.onPresent();
         presenter.isFirstPresent = false;
      }

5、載入環形進度條

印表機應用程序的另一個不錯的功能是顯示進度的載入屏幕動畫。它包括文本和旋轉動畫。


通過添加定時器和定時器監聽器來更新進度標籤，然後調用函數 spinner.start() 來實現此功能。所有的動畫都是由 TotalCross 和 KnowCode 自動生成的：

public void startSpinner() {
        time = content.addTimer(500);
        content.addTimerListener((e) -> {
            try {
                progress(); // Updates the Label
            } catch (InstantiationException | IllegalAccessException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
        });
        Spinner spinner = (Spinner) ((XmlContainerLayout) content).getControlByID("@+id/spinner");
        spinner.start();
    }

這裡的環形進度條被實例化為對 XML 文件中描述的 XmlContainerLayout spinner 的引用：

<ProgressBar
android_id="@+id/spinner"
android_layout_width="362dp"
android_layout_height="358dp"
tools_layout_editor_absoluteX="296dp"
tools_layout_editor_absoluteY="198dp"
   android_indeterminateTint="#2B05C7"
style="?android:attr/progressBarStyle" />

6、構建應用程序

是時候構建應用程序了。你可以在 pom.xml 中查看和更改 目標系統 target systems 。 請確保 Linux Arm 目標可用。

如果你使用的是 VSCode，請按下鍵盤上的 F1 鍵，選擇 TotalCross: Package 並等待完成。 然後就可以在 Target 文件夾中看到安裝文件了。

7、在樹莓派上部署和運行應用程序

要使用 SSH 協議在 樹莓派 上部署應用程序，請按鍵盤上的 F1。選擇 TotalCross: Deploy&Run 並提供有關你的 SSH 連接的信息，如：用戶名、IP地址、密碼和應用程序路徑。






總結

KnowCode 讓使用 Java 創建和管理應用程序屏幕變得更加容易。Knowcode-XML 將你的 XML 轉換為 TotalCross GUI 界面，然後生成二進位文件以在你的樹莓派上運行。

將 KnowCode 技術與 TotalCross 相結合，使你能夠更快地創建嵌入式應用程序。 你可以訪問我們在 GitHub 上的 嵌入式示例 並編輯你自己的應用程序，了解你還可以做什麼。

如果你有問題、需要幫助，或者只是想與其他嵌入式 GUI 開發人員互動，請隨時加入我們的 Telegram 小組，討論任何框架上的嵌入式應用程序。

via: https://opensource.com/article/21/3/raspberry-pi-totalcross

作者：Edson Holanda Teixeira Junior 選題：lujun9972 譯者：CoWave-Fall 校對：wxy

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

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