My first cross-platform app built with Java

A project to demonstrate some of the basic features and objects that can be used in TotalCross cross-platform.

I’m Patrick Martins student of Control and Automation Engineering at the University of Fortaleza (Brazil). I have been a TotalCross intern since February 2020. This project was given to me to demonstrate some of the basic features and objects that can be used in TotalCross. So, if you want to learn how to create a cross-platform app with Java, stay with me!

The basic requirements for doing the steps in this article are:

• Java 8 SDK
• Maven
• VS code
• Plugin TotalCross
• TotalCross Key

This is the guide to create your first TotalCross app to Android and Linux arm with VS Code. If you still don’t have the basic requirements installed you can go to the link with the guide to installation.

• Download images for the implementation link.
• For visualization of the full code, this project goes to the link.

Step 1: Creating the project

Open the VS code, press Ctrl + shift + p and search TotalCross: create a new project. Doubts about creating base file go to the link.

created project go to myfirstapp > src > main > java > com > totalcross in the class myfirstapp.java it will be where you will build the code.

Remove these lines of the project, before init next Step.

Label helloWord = new Label(“Hello World!”);
add(helloWord, CENTER, CENTER);

In folder myfirstapp > src > main create the resources folder and images folder inside now paste the images for this folder.

Step 2: Creating the Scroll Container

Scroll Container is a component used to add components at points that do not fit naturally on the screen, which need to go down or go to the sides.

First, you have to import the library to create the object, line 5 from the code below, these steps were repeated for all objects that will be used, then name and define your initial variables in the constructor method, inline 21 in the code below were set to false and true, thus disabling the horizontal scroll. If you want the scroll to be possible for both situations you must keep the method empty.

Next, you have to add the screen using the add method, which has to be configured with the object to be inserted on the screen and the position variables respectively, object, horizontal position, vertical position, width, height, as shown on line 22.

Code

package com.totalcross;
// import library
import totalcross.ui.MainWindow;
import totalcross.sys.Settings;
import totalcross.ui.ScrollContainer;
public class myfirstapp extends MainWindow {

// declaring variable
private ScrollContainer sc;
public myfirstapp() {
   setUIStyle(Settings.MATERIAL_UI);
}
@Override
public void initUI() {
try {
// defining characteristics
// ScrollContainer
sc = new ScrollContainer(false,true);
add(sc, LEFT, TOP, FILL, FILL); // including in the application
}
catch (Throwable e) {
e.printStackTrace();
}
}
}

With the created container you can add the objects in it using the add method as follows:

sc.add(object, horizontal position, vertical position,width,height);

Step 3: ADD images

Two images will be added, one to be the background of the app and the other one logo. how the previous object must add the library before it can be used.

import totalcross.ui.image.Image;

Then he had created the objects to receive the images.

private Image imgBack, imgLogo;

You should now import the image using the builder.

imgBack = new Image(“images/imagem-template-01.png”);
imgLogo = new Image(“images/logo-branca.png”);

To be able to change the image parameters, it is necessary to use another ImageControl object adding its library.

// import library
import totalcross.ui.ImageControl;

Instantiating objects.

// declaring variable
private ImageControl background, logo;

defining its characteristics.

// defining characteristics
background = new ImageControl(imgBack);
background.scaleToFit = true; // Maintains the proportion
background.strechImage = true; // allows you to resize
logo=new ImageControl(imgLogo);
logo.transparentBackground = true; // make transparent background
logo.scaleToFit = true;
logo.strechImage = true;
logo.tempHwScale=0.6; // scale the image

add in the container.

// including in the container
sc.add(background, LEFT, TOP);
sc.add(logo, CENTER , TOP-15);

The complete code should look like this at that point.

Code

package com.totalcross;
// import library
import totalcross.ui.MainWindow;
import totalcross.sys.Settings;
import totalcross.ui.ScrollContainer;
import totalcross.ui.image.Image;
import totalcross.ui.ImageControl;
public class myfirstapp extends MainWindow {
// declaring variable
private ScrollContainer sc;
private Image imgBack, imgLogo;
private ImageControl background, logo;
public myfirstapp() {
setUIStyle(Settings.MATERIAL_UI);
}
@Override
public void initUI() {
try {
// defining characteristics
// ScrollContainer
sc = new ScrollContainer(false,true);
add(sc, LEFT, TOP, FILL, FILL); // including in the application
// Image
imgBack = new Image(“images/imagem-template-01.png”);
background = new ImageControl(imgBack);
background.scaleToFit = true; // Maintains the proportion
background.strechImage = true; // allows you to resize
imgLogo = new Image(“images/logo-branca.png”);
logo=new ImageControl(imgLogo);
logo.transparentBackground = true; // make transparent background
logo.scaleToFit = true;
logo.strechImage = true;
logo.tempHwScale=0.6; // scale the image
// including in the container
// Image
sc.add(background, LEFT, TOP);
sc.add(logo, CENTER , TOP-15);
}
catch (Throwable e) {
e.printStackTrace();
}
}
}

Application

Step 4: ADD Label

Labels are the object you can use to add text to the application.

Two labels will be used, one to title the application and the other to title a questionnaire.

// import library
import totalcross.ui.Label;
// declaring variable
private Label Title, Gender;

As the background is a predominantly red image, it is necessary to change the color of some objects, for this, you can use the Color library.

// import library
import totalcross.ui.gfx.Color;
// defining characteristics
Title = new Label(“Registration Form”);
Title.transparentBackground=true; // make background transparent
Title.setForeColor(Color.WHITE); // changes the color of the object
Gender = new Label(“Gender”);
Gender.transparentBackground=true;
Gender.setForeColor(Color.WHITE);
// including in the container
sc.add(Title, CENTER, TOP);
sc.add(Gender, CENTER, AFTER+15 );

Code

package com.totalcross;
// import library
import totalcross.ui.MainWindow;
import totalcross.sys.Settings;
import totalcross.ui.ScrollContainer;
import totalcross.ui.image.Image;
import totalcross.ui.ImageControl;
import totalcross.ui.Label;
import totalcross.ui.gfx.Color;
public class myfirstapp extends MainWindow {
// declaring variable
private ScrollContainer sc;
private Image imgBack, imgLogo;
private ImageControl background, logo;
private Label Title, Gender;
public myfirstapp() {
setUIStyle(Settings.MATERIAL_UI);
}
@Override
public void initUI() {
try {
// defining characteristics
// ScrollContainer
sc = new ScrollContainer(false,true);
add(sc, LEFT, TOP, FILL, FILL); // including in the application
// Image
imgBack = new Image(“images/imagem-template-01.png”);
background = new ImageControl(imgBack);
background.scaleToFit = true; // Maintains the proportion
background.strechImage = true; // allows you to resize
imgLogo = new Image(“images/logo-branca.png”);
logo=new ImageControl(imgLogo);
logo.transparentBackground = true; // make transparent background
logo.scaleToFit = true;
logo.strechImage = true;
logo.tempHwScale=0.6; // scale the image
// Label
Title = new Label(“Registration Form”);
Title.transparentBackground=true;
Title.setForeColor(Color.WHITE); // changes the color of the object
Gender = new Label(“Gender”);
Gender.transparentBackground=true;
Gender.setForeColor(Color.WHITE);
// including in the container
// Image
sc.add(background, LEFT, TOP);
sc.add(logo, CENTER , TOP-15);
sc.add(Title, CENTER, TOP); // Label
sc.add(Gender, LEFT+25, AFTER+25 ); // Label
}
catch (Throwable e) {
e.printStackTrace();
}
}
}

Application

Step 5: ADD Edit

this an input component used to receive text and date, it has a method that allows you to receive dates by default, setMode must have as input Edit.DATE, true for that to be possible.

import totalcross.ui.Edit;
// declaring variable
private Edit FullName, Date;
// defining characteristics
FullName= new Edit();
FullName.caption = “Full Name”; // changes what is written in the capture state
FullName.captionColor=Color.WHITE; // changes the object’s color in the capture state
FullName.transparentBackground = true;
FullName.setForeColor(Color.WHITE);
Date = new Edit();
Date.caption = “Birth Day”;
Date.captionColor=Color.WHITE;
Date.setMode(Edit.DATE, true); // change capture mode to date
Date.transparentBackground=true;
Date.setForeColor(Color.WHITE);
// including in the container
sc.add(FullName, CENTER, AFTER + 125 );
sc.add(Gender, CENTER, AFTER + 20 );

Code

package com.totalcross;
// import library
import totalcross.ui.MainWindow;
import totalcross.sys.Settings;
import totalcross.ui.ScrollContainer;
import totalcross.ui.image.Image;
import totalcross.ui.ImageControl;
import totalcross.ui.Label;
import totalcross.ui.gfx.Color;
import totalcross.ui.Edit;
public class myfirstapp extends MainWindow {
// declaring variable
private ScrollContainer sc;
private Image imgBack, imgLogo;
private ImageControl background, logo;
private Label Title, Gender;
private Edit FullName, Date;
public myfirstapp() {
setUIStyle(Settings.MATERIAL_UI);
}
@Override
public void initUI() {
try {
// defining characteristics
// ScrollContainer
sc = new ScrollContainer(false,true);
add(sc, LEFT, TOP, FILL, FILL); // including in the application
// Image
imgBack = new Image(“images/imagem-template-01.png”);
background = new ImageControl(imgBack);
background.scaleToFit = true; // Maintains the proportion
background.strechImage = true; // allows you to resize
imgLogo = new Image(“images/logo-branca.png”);
logo=new ImageControl(imgLogo);
logo.transparentBackground = true; // make transparent background
logo.scaleToFit = true;
logo.strechImage = true;
logo.tempHwScale=0.6; // scale the image
// Label
Title = new Label(“Registration Form”);
Title.transparentBackground=true;
Title.setForeColor(Color.WHITE); // changes the color of the object
Gender = new Label(“Gender”);
Gender.transparentBackground=true;
Gender.setForeColor(Color.WHITE);
//Edit
FullName= new Edit();
FullName.caption = “Full Name”; // changes what is written in the capture state
FullName.captionColor=Color.WHITE; // changes the object’s color in the capture state
FullName.transparentBackground = true;
FullName.setForeColor(Color.WHITE);
Date = new Edit();
Date.caption = “Birth Day”;
Date.captionColor=Color.WHITE;
Date.setMode(Edit.DATE, true); // change capture mode to date
Date.transparentBackground=true;
Date.setForeColor(Color.WHITE);
// including in the container
// Image
sc.add(background, LEFT, TOP);
sc.add(logo, CENTER , TOP-15);
sc.add(Title, CENTER, TOP); // Label
sc.add(FullName, CENTER, AFTER + 125 ); // Edit
sc.add(Gender, LEFT+25, AFTER+25 ); // Label
sc.add(Date,CENTER, AFTER);// Edit
}
catch (Throwable e) {
e.printStackTrace();
}
}
}

Application

Check is an input with a checkbox that indicates when it was clicked. In this case, it will be used so that the user can define his gender in the form. For that, it will be necessary to use 3 objects.

// import library
import totalcross.ui.Check;
// declaring variable
private Check subject1, subject2, subject3;

When clicked, the check generates a wave that propagates from the clicked point to fill the entire object, in this case, this damages the aesthetics, to remove the effect method must be null.

// defining characteristics
subject1 = new Check(“Male”);
subject1.transparentBackground=true;
subject1.setForeColor(Color.WHITE);
subject1.effect = null; // turn off click effect
subject2 = new Check(“Female”);
subject2.transparentBackground=true;
subject2.setForeColor(Color.WHITE);
subject2.effect = null;
subject3 = new Check(“Other”);
subject3.transparentBackground=true;
subject3.setForeColor(Color.WHITE);
subject3.effect = null;

When you add PREFERRED in the add method, the object’s borders will be the size that accommodates only the checkbox and the text.

// including in the container
sc.add(subject1, LEFT+15, AFTER-5 , PREFERRED, PREFERRED+25 );
sc.add(subject2, LEFT+15, AFTER-5 , PREFERRED, PREFERRED+25 );
sc.add(subject3, LEFT+15, AFTER-5 , PREFERRED, PREFERRED+25 );

Code

package com.totalcross;
// import library
import totalcross.ui.MainWindow;
import totalcross.sys.Settings;
import totalcross.ui.ScrollContainer;
import totalcross.ui.image.Image;
import totalcross.ui.ImageControl;
import totalcross.ui.Label;
import totalcross.ui.gfx.Color;
import totalcross.ui.Edit;
import totalcross.ui.Check;
public class myfirstapp extends MainWindow {
// declaring variable
private ScrollContainer sc;
private Image imgBack, imgLogo;
private ImageControl background, logo;
private Label Title, Gender;
private Edit FullName, Date;
private Check subject1, subject2, subject3;
public myfirstapp() {
setUIStyle(Settings.MATERIAL_UI);
}
@Override
public void initUI() {
try {
// defining characteristics
// ScrollContainer
sc = new ScrollContainer(false,true);
add(sc, LEFT, TOP, FILL, FILL); // including in the application
// Image
imgBack = new Image(“images/imagem-template-01.png”);
background = new ImageControl(imgBack);
background.scaleToFit = true; // Maintains the proportion
background.strechImage = true; // allows you to resize
imgLogo = new Image(“images/logo-branca.png”);
logo=new ImageControl(imgLogo);
logo.transparentBackground = true; // make transparent background
logo.scaleToFit = true;
logo.strechImage = true;
logo.tempHwScale=0.6; // scale the image
// Label
Title = new Label(“Registration Form”);
Title.transparentBackground=true;
Title.setForeColor(Color.WHITE); // changes the color of the object
Gender = new Label(“Gender”);
Gender.transparentBackground=true;
Gender.setForeColor(Color.WHITE);
//Edit
FullName= new Edit();
FullName.caption = “Full Name”; // changes what is written in the capture state
FullName.captionColor=Color.WHITE; // changes the object’s color in the capture state
FullName.transparentBackground = true;
FullName.setForeColor(Color.WHITE);
Date = new Edit();
Date.caption = “Birth Day”;
Date.captionColor=Color.WHITE;
Date.setMode(Edit.DATE, true); // change capture mode to date
Date.transparentBackground=true;
Date.setForeColor(Color.WHITE);
// Check
subject1 = new Check(“Male”);
subject1.transparentBackground=true;
subject1.setForeColor(Color.WHITE);
subject1.effect = null; // turn off click effect
subject2 = new Check(“Female”);
subject2.transparentBackground=true;
subject2.setForeColor(Color.WHITE);
subject2.effect = null;
subject3 = new Check(“Other”);
subject3.transparentBackground=true;
subject3.setForeColor(Color.WHITE);
subject3.effect = null;
// including in the container
// Image
sc.add(background, LEFT, TOP);
sc.add(logo, CENTER , TOP-15);
sc.add(Title, CENTER, TOP); // Label
sc.add(FullName, CENTER, AFTER + 125 ); // Edit
sc.add(Gender, LEFT+25, AFTER+25 ); // Label
// Check
sc.add(subject1, LEFT+15, AFTER-5 , PREFERRED, PREFERRED+25 );
sc.add(subject2, LEFT+15, AFTER-5 , PREFERRED, PREFERRED+25 );
sc.add(subject3, LEFT+15, AFTER-5 , PREFERRED, PREFERRED+25 );
c.add(Date,CENTER, AFTER);// Edit
}
catch (Throwable e) {
e.printStackTrace();
}
}
}

Application

Step 7: Add Button

The buttons will be used to complete the registration or to clear the added information.

import totalcross.ui.Check;
private Button Finish,Clear;

The colors of the buttons will be changed to contrast with the red background.

Finish = new Button(“Submit”);
Finish.setForeColor(Color.WHITE);
Finish.borderColor=Color.WHITE; // changes the border color
Finish.transparentBackground=true;
Clear = new Button(“Clear”);
Clear.setForeColor(Color.WHITE);
Clear.borderColor=Color.WHITE;
Clear.transparentBackground=true;
sc.add(Finish, CENTER-60, AFTER+25,100, 50);
sc.add(Clear, CENTER+60, SAME, 100,50);

Full Code

package com.totalcross;
// import library
import totalcross.ui.MainWindow;
import totalcross.sys.Settings;
import totalcross.ui.ScrollContainer;
import totalcross.ui.image.Image;
import totalcross.ui.ImageControl;
import totalcross.ui.Label;
import totalcross.ui.gfx.Color;
import totalcross.ui.Edit;
import totalcross.ui.Check;
import totalcross.ui.Button;
public class myfirstapp extends MainWindow {
// declaring variable
private ScrollContainer sc;
private Image imgBack, imgLogo;
private ImageControl background, logo;
private Label Title, Gender;
private Edit FullName, Date;
private Check subject1, subject2, subject3;
private Button Finish,Clear;
public myfirstapp() {
setUIStyle(Settings.MATERIAL_UI);
}
@Override
public void initUI() {
try {
// defining characteristics
// ScrollContainer
sc = new ScrollContainer(false,true);
add(sc, LEFT, TOP, FILL, FILL); // including in the application
// Image
imgBack = new Image(“images/imagem-template-01.png”);
background = new ImageControl(imgBack);
background.scaleToFit = true; // Maintains the proportion
background.strechImage = true; // allows you to resize
imgLogo = new Image(“images/logo-branca.png”);
logo=new ImageControl(imgLogo);
logo.transparentBackground = true; // make transparent background
logo.scaleToFit = true;
logo.strechImage = true;
logo.tempHwScale=0.6; // scale the image
// Label
Title = new Label(“Registration Form”);
Title.transparentBackground=true;
Title.setForeColor(Color.WHITE); // changes the color of the object
Gender = new Label(“Gender”);
Gender.transparentBackground=true;
Gender.setForeColor(Color.WHITE);
//Edit
FullName= new Edit();
FullName.caption = “Full Name”; // changes what is written in the capture state
FullName.captionColor=Color.WHITE; // changes the object’s color in the capture state
FullName.transparentBackground = true;
FullName.setForeColor(Color.WHITE);
Date = new Edit();
Date.caption = “Birth Day”;
Date.captionColor=Color.WHITE;
Date.setMode(Edit.DATE, true); // change capture mode to date
Date.transparentBackground=true;
Date.setForeColor(Color.WHITE);
// Check
subject1 = new Check(“Male”);
subject1.transparentBackground=true;
subject1.setForeColor(Color.WHITE);
subject1.effect = null; // turn off click effect
subject2 = new Check(“Female”);
subject2.transparentBackground=true;
subject2.setForeColor(Color.WHITE);
subject2.effect = null;
subject3 = new Check(“Other”);
subject3.transparentBackground=true;
subject3.setForeColor(Color.WHITE);
subject3.effect = null;
// Button
Finish = new Button(“Submit”);
Finish.setForeColor(Color.WHITE);
Finish.borderColor=Color.WHITE; // changes the border color
Finish.transparentBackground=true;
Clear = new Button(“Clear”);
Clear.setForeColor(Color.WHITE);
Clear.borderColor=Color.WHITE;
Clear.transparentBackground=true;
// including in the container
// Image
sc.add(background, LEFT, TOP);
sc.add(logo, CENTER , TOP-15);
sc.add(Title, CENTER, TOP); // Label
sc.add(FullName, CENTER, AFTER +  125 ); // Edit
sc.add(Gender, LEFT+25, AFTER+25 ); // Label
// Check
sc.add(subject1, LEFT+15, AFTER-5 , PREFERRED, PREFERRED+25 );
sc.add(subject2, LEFT+15, AFTER-5 , PREFERRED, PREFERRED+25 );
sc.add(subject3, LEFT+15, AFTER-5 , PREFERRED, PREFERRED+25 );
sc.add(Date,CENTER, AFTER);// Edit
// Button
sc.add(Finish, CENTER-60, AFTER+30,100, 50);
sc.add(Clear, CENTER+60, SAME, 100,50);
}
catch (Throwable  e) {
e.printStackTrace();
}
}
}

Application

Conclusion

Now with the finished project, a cross-platform app built with Java, we have a front end of forms with some of the most used objects, with that it is possible to see the functionality and the use of these, from that point on the functionality of the app is in charge of the developer.