TotalCross Plugin for VSCode

Short tutorial on how to use VSCode TotalCross Plugin =)

I want to introduce you to the TotalCross plugin for VSCode and explain why we choose VSCode. TotalCross is agnostic, that is, you can develop apps on Windows, Linux, or MacOS and use any IDE of your choice, like Eclipse, IntelliJ, etc. We decided to do it that way, with no attachments to any specific technology or OS. Up until now….

It all started with a challenge to run an application on a Toradex Module as fast as possible to present in their webinar in 2019. As time is precious for the audience we needed to deploy the application on the device in seconds and in an easy way. Fabio Sobral, TotalCross dev advocate, had the idea to try to build a plugin for that, and Italo Bruno, TotalCross tech leader, took on the task and started the plugin. In a few hours he was using SSH to connect to an embedded device and to deploy the app. That was a big surprise for us. What in other IDEs was really painful and complex, in VSCode was really easy and smooth. The presentation was a big success. It was decided to improve our VSCode plugin and make it our main development tool for TotalCross apps. =)

It is super easy to install our plugin. Search for “totalcross” at VSCode Marketplace and you will find it.

Marketplace of VSCode

Click on it and you will see the dependencies needed to run it. Basically:

1. Java SDK 1.8
2. Maven
3. Java plugin for VSCode

TotalCross Extension at the Marketplace

After that you are good to go. =)

Remember: you don’t need anything else besides the plugin and its dependencies to run, package and deploy your application with TotalCross

After the installation, you are ready to create some apps. To take a look at plugin functions hit COMMAND+SHIFT+P (if you are a mac user or CONTROL+SHIFT+P if you are using a Windows machine) and type “totalcross”. You will see some options, like these:

Features of TotalCross plugin

Let’s go through every menu option:

1. Register: first you need to create your account with TotalCross. You will provide Name, Email, Username and define a Password;
2. Login: after registering, you will login using your email and password. You are then ready to create your first project;
3. Create a new Project: this option creates an empty project. You will define:

• Folder for your source code;
• GroupId, usually your URL backwards like com.totalcross.sample;
• ArtifactId, your project name;
• TotalCross Version, you should pick up the latest version;
• Select which operating systems you want to package your application.

Remember: you can choose more than one and also you can change it later using the pom.xml.

List of supported Operating Systems

I just followed the steps and created a “PluginApp” project. The structure looks like this:

Java class to run the simulator

Two Java classes (PluginApp.java, RunPluginAppApplication.java) and one Maven xml (pom.xml)

RunPluginAppApplication.java: you will use this class to run the device simulator. The default configuration is a smartphone screen size but it can be changed to any screen size by adding the parameter “/scr”, “848x480”. Find more about the simulator in the TotalCross Documentation.

Adding new parameters to the simulator

Your simulator should look like this:

Simulator adjusted to look like an embedded screen

4. Package: the app can now be packaged to run on any device. This process will compile your Java classes to TotalCross bytecode (tcz) and add everything needed to run the application (TotalCross Virtual Machine, SQLite, assets, bytecodes, etc). Remember: TotalCross does not use Java Virtual Machine at runtime. TotalCross VM is used instead to guarantee performance on your device.

The packaging process will create new files, as shown below:

Binaries of your application

Inside the Target folder you will see a new folder for each selected operating system. This example is being packaged for LinuxArm and you can see all the files needed to run the app on the device.

5. Deploy and run: last command. You can run the application directly on your device and to do it you need to provide SSH access to your device (username, password, ip address and folder to copy the executable files).

The example below shows this basic app running on my Raspberry Pi connected via VNC. As your application is deployed, you will see a message at the bottom of VSCode informing that the process has finished.

Running the application on my Raspberry PI

Conclusion

VSCode is a powerful IDE and it’s getting more and more attention from the developer community, especially because it’s light and easy-to-use. Also, plugins for this tool inherit the same benefits.

In this short article, I demonstrated TotalCross Plugin for VSCode main functions and I showed you how to create your own applications for embedded devices, mobile devices and desktop.

Also, if you want to take a look at the source code of TotalCross Plugin, feel free to access our Github page.

If you have any questions or suggestions, let me know =) and don’t forget to access TotalCross documentation to get more information on our plugin.

Talk to you soon. .