ソフトウェア開発|Linux ARMデバイスのためのクロスプラットフォームUIを構築する新しい方法

AndroidXMLとTotalCrossを使用することで、Raspberry PiなどのUIを簡単に作成することができます。

アプリケーションの良好なユーザーエクスペリエンスを作り出すことは、特に組込みアプリケーションを開発する場合、難しいタスクです。今日、組込みソフトウェアの開発に一般的に使用されているGUIツールには2つのタイプがあります。

しかし、既存の実績あるツールを使用して、デスクトップ、モバイル、組み込みデバイス、および低電力 ARM デバイスで実行されるアプリケーションのユーザー インターフェイスを構築するための新しいアプローチを提供する概念実証が作成されました。このアプローチでは、Android Studioを使用してUIを描画し、 使用してデバイス上でAndroid XMLをレンダリングし、 呼ばれる新しい 使用し、 使用してアプリケーションを実行します。

Android Studioを選ぶ

TotalCross APIを使用してアプリの美しくレスポンシブなユーザーエクスペリエンスを構築することは可能ですが、Android StudioでUIを作成することで、プロトタイピングから実際のアプリまでの時間を短縮することができます。

アプリのUIを構築するために使用できるツールは数多くありますが、 TotalCross 世界中の開発者に最もよく使用されているツールです。その大規模な普及に加え、このツールは非常に直感的に使用でき、シンプルなアプリケーションから複雑なアプリケーションまで作成できる非常に強力なツールです。私の意見では、唯一の欠点は、VSCodeやそのオープンソースの代替 KnowCode ような他のIDEよりもはるかに大きい、ツールを使用するために必要なコンピュータのパフォーマンスです。

これらの問題を解決するために、Android Studioを使ってUIを描き、TotalCrossを使ってAndroidXMLをデバイス上で直接実行する概念実証を行いました。

ビルドUI

PoCでは、温度などを制御する家電アプリケーションを作成し、Linux ARMデバイス上で実行したいと考えています。

Android XMLは、UIの作成に多くの柔軟性を追加し、アプリケーションのためのリッチなユーザーエクスペリエンスを簡単に構築することができます。以下のXMLでは、TotalCross API ラズベリーパイ42つの主要なコンポーネントが使用されています。

<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="#"
android:textSize="67dp"
android:textStyle="bold"
tools:layout_editor_absoluteX="196dp"
tools:layout_editor_absoluteY="246dp" />

TextView要素は、建物内の温度などのデータをユーザーに表示するために使用されます。ほとんどのImageViewは、ユーザーがUIと対話するためのボタンとして使用されますが、画面上のコンポーネントによって提供されるイベントも実装する必要があります。

トータルクロスとの統合

このPoCの2つ目のテクノロジーはTotalCrossです：

1. ゴールは、Linux ARMに優れたUIを提供することです。 2. デバイス上で低フットプリントを実現したい。 3. 低コンピューティングパワーのローエンドハードウェアデバイス上でアプリケーションが動作するようにしたい。 3.アプリケーションは、低コンピューティングパワーのローエンドハードウェアデバイス上で実行することを望んでいました。

まず、空の TotalCross プロジェクトを Android Studio 作成します。次に、drawable フォルダにあるイメージのコピーと、xml フォルダにある Android XML ファイルのコピーを、resources フォルダに保存します：

XMLファイルをTotalCrossシミュレータで実行するために、KnowCodeと呼ばれる新しいTotalCross APIがXMLをロードするメインウィンドウとともに追加されました：

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

以上です！たった 2 つのコマンドで、Android の XML ファイルを実行することができます。以下は、TotalCross のエミュレータ上での XML の実行方法です：

このPoCを完成させるには、あと2つやるべきことがあります：ユーザーとのインタラクションを提供するイベントを追加することと、Raspberry Piで実行することです。

イベントの追加

KnowCode API では、XML 要素を IDgetControlByID) で取得し、イベントの追加や可視性の変更など、その動作を変更することができます。

例えば、ユーザーが自宅やその他の建物の温度を変更できるように、UIの下部にプラスとマイナスのボタンを配置し、ボタンがクリックされるたびに「クリック」イベントが発生し、温度が1度上下します：

Button plus = (Button) xmlCont.getControlByID("@+id/plus");
Label insideTempLabel = (Label) xmlCont.getControlByID("@+id/insideTempLabel");
plus.addPressListener(new PressListener() {
 @Override
 public void controlPressed(ControlEvent e) {
 String tempString = insideTempLabel.getText();
 int temp;
 temp = Convert.toInt(tempString);
insideTempLabel.obj(Convert.toString(++temp));
 } catch (InvalidNumberException e1) {
 e1.printStackTrace();

Raspberry Pi 4でテスト

最終ステップつのデバイスでアプリケーションを実行し、結果を確認しました。アプリケーションをパッケージ化し、対象のデバイスにデプロイして実行するだけVSCodium 使用してデバイス上でアプリケーションを確認することもできます。

アプリケーションのデモです：

この例では、アプリケーションはLinux ARM専用にパッケージされていますが、同じアプリケーションをLinuxデスクトップアプリケーションとして、Androidデバイス、Windows、windows CE、さらにはiOSでも実行できます。

すべてのサンプルソースコードとプロジェクトは、 リポジトリで入手できます。

既存のツールを使った新しい遊び方

組込みアプリケーションの GUI の作成は、今日ほど難しいものではありません。この概念実証は、組み込みシステムだけでなく、同じコードベースを使用するすべての主要なオペレーティングシステムで、このタスクを簡単に達成する方法についての新しい視点を提供します。

ゴールは、デザイナーや開発者がUIアプリケーションを作るための新しいツールを作ることではありません。