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 libraryimport totalcross.ui.MainWindow;import totalcross.sys.Settings;import totalcross.ui.ScrollContainer;public class myfirstapp extends MainWindow {
// declaring variableprivate ScrollContainer sc;public myfirstapp() { setUIStyle(Settings.MATERIAL_UI);}@Overridepublic void initUI() {try {// defining characteristics// ScrollContainersc = 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 libraryimport totalcross.ui.ImageControl;
Instantiating objects.
// declaring variableprivate ImageControl background, logo;
defining its characteristics.
// defining characteristicsbackground = new ImageControl(imgBack);background.scaleToFit = true; // Maintains the proportionbackground.strechImage = true; // allows you to resizelogo=new ImageControl(imgLogo);logo.transparentBackground = true; // make transparent backgroundlogo.scaleToFit = true;logo.strechImage = true;logo.tempHwScale=0.6; // scale the image
add in the container.
// including in the containersc.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 libraryimport 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 variableprivate ScrollContainer sc;private Image imgBack, imgLogo;private ImageControl background, logo;public myfirstapp() {setUIStyle(Settings.MATERIAL_UI);}@Overridepublic void initUI() {try {// defining characteristics// ScrollContainersc = new ScrollContainer(false,true);add(sc, LEFT, TOP, FILL, FILL); // including in the application// ImageimgBack = new Image(“images/imagem-template-01.png”);background = new ImageControl(imgBack);background.scaleToFit = true; // Maintains the proportionbackground.strechImage = true; // allows you to resizeimgLogo = new Image(“images/logo-branca.png”);logo=new ImageControl(imgLogo);logo.transparentBackground = true; // make transparent backgroundlogo.scaleToFit = true;logo.strechImage = true;logo.tempHwScale=0.6; // scale the image// including in the container// Imagesc.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 libraryimport totalcross.ui.Label;// declaring variableprivate 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 libraryimport totalcross.ui.gfx.Color;// defining characteristicsTitle = new Label(“Registration Form”);Title.transparentBackground=true; // make background transparentTitle.setForeColor(Color.WHITE); // changes the color of the objectGender = new Label(“Gender”);Gender.transparentBackground=true;Gender.setForeColor(Color.WHITE);// including in the containersc.add(Title, CENTER, TOP);sc.add(Gender, CENTER, AFTER+15 );
Code
package com.totalcross;// import libraryimport 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 variableprivate ScrollContainer sc;private Image imgBack, imgLogo;private ImageControl background, logo;private Label Title, Gender;public myfirstapp() {setUIStyle(Settings.MATERIAL_UI);}@Overridepublic void initUI() {try {// defining characteristics// ScrollContainersc = new ScrollContainer(false,true);add(sc, LEFT, TOP, FILL, FILL); // including in the application// ImageimgBack = new Image(“images/imagem-template-01.png”);background = new ImageControl(imgBack);background.scaleToFit = true; // Maintains the proportionbackground.strechImage = true; // allows you to resizeimgLogo = new Image(“images/logo-branca.png”);logo=new ImageControl(imgLogo);logo.transparentBackground = true; // make transparent backgroundlogo.scaleToFit = true;logo.strechImage = true;logo.tempHwScale=0.6; // scale the image// LabelTitle = new Label(“Registration Form”);Title.transparentBackground=true;Title.setForeColor(Color.WHITE); // changes the color of the objectGender = new Label(“Gender”);Gender.transparentBackground=true;Gender.setForeColor(Color.WHITE);// including in the container// Imagesc.add(background, LEFT, TOP);sc.add(logo, CENTER , TOP-15);sc.add(Title, CENTER, TOP); // Labelsc.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 variableprivate Edit FullName, Date;// defining characteristicsFullName= new Edit();FullName.caption = “Full Name”; // changes what is written in the capture stateFullName.captionColor=Color.WHITE; // changes the object’s color in the capture stateFullName.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 dateDate.transparentBackground=true;Date.setForeColor(Color.WHITE);// including in the containersc.add(FullName, CENTER, AFTER + 125 );sc.add(Gender, CENTER, AFTER + 20 );
Code
package com.totalcross;// import libraryimport 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 variableprivate ScrollContainer sc;private Image imgBack, imgLogo;private ImageControl background, logo;private Label Title, Gender;private Edit FullName, Date;public myfirstapp() {setUIStyle(Settings.MATERIAL_UI);}@Overridepublic void initUI() {try {// defining characteristics// ScrollContainersc = new ScrollContainer(false,true);add(sc, LEFT, TOP, FILL, FILL); // including in the application// ImageimgBack = new Image(“images/imagem-template-01.png”);background = new ImageControl(imgBack);background.scaleToFit = true; // Maintains the proportionbackground.strechImage = true; // allows you to resizeimgLogo = new Image(“images/logo-branca.png”);logo=new ImageControl(imgLogo);logo.transparentBackground = true; // make transparent backgroundlogo.scaleToFit = true;logo.strechImage = true;logo.tempHwScale=0.6; // scale the image// LabelTitle = new Label(“Registration Form”);Title.transparentBackground=true;Title.setForeColor(Color.WHITE); // changes the color of the objectGender = new Label(“Gender”);Gender.transparentBackground=true;Gender.setForeColor(Color.WHITE);//EditFullName= new Edit();FullName.caption = “Full Name”; // changes what is written in the capture stateFullName.captionColor=Color.WHITE; // changes the object’s color in the capture stateFullName.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 dateDate.transparentBackground=true;Date.setForeColor(Color.WHITE);// including in the container// Imagesc.add(background, LEFT, TOP);sc.add(logo, CENTER , TOP-15);sc.add(Title, CENTER, TOP); // Labelsc.add(FullName, CENTER, AFTER + 125 ); // Editsc.add(Gender, LEFT+25, AFTER+25 ); // Labelsc.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 libraryimport totalcross.ui.Check;// declaring variableprivate 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 characteristicssubject1 = new Check(“Male”);subject1.transparentBackground=true;subject1.setForeColor(Color.WHITE);subject1.effect = null; // turn off click effectsubject2 = 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 containersc.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 libraryimport 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 variableprivate 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);}@Overridepublic void initUI() {try {// defining characteristics// ScrollContainersc = new ScrollContainer(false,true);add(sc, LEFT, TOP, FILL, FILL); // including in the application// ImageimgBack = new Image(“images/imagem-template-01.png”);background = new ImageControl(imgBack);background.scaleToFit = true; // Maintains the proportionbackground.strechImage = true; // allows you to resizeimgLogo = new Image(“images/logo-branca.png”);logo=new ImageControl(imgLogo);logo.transparentBackground = true; // make transparent backgroundlogo.scaleToFit = true;logo.strechImage = true;logo.tempHwScale=0.6; // scale the image// LabelTitle = new Label(“Registration Form”);Title.transparentBackground=true;Title.setForeColor(Color.WHITE); // changes the color of the objectGender = new Label(“Gender”);Gender.transparentBackground=true;Gender.setForeColor(Color.WHITE);//EditFullName= new Edit();FullName.caption = “Full Name”; // changes what is written in the capture stateFullName.captionColor=Color.WHITE; // changes the object’s color in the capture stateFullName.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 dateDate.transparentBackground=true;Date.setForeColor(Color.WHITE);// Checksubject1 = new Check(“Male”);subject1.transparentBackground=true;subject1.setForeColor(Color.WHITE);subject1.effect = null; // turn off click effectsubject2 = 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// Imagesc.add(background, LEFT, TOP);sc.add(logo, CENTER , TOP-15);sc.add(Title, CENTER, TOP); // Labelsc.add(FullName, CENTER, AFTER + 125 ); // Editsc.add(Gender, LEFT+25, AFTER+25 ); // Label// Checksc.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 colorFinish.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 libraryimport 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 variableprivate 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);}@Overridepublic void initUI() {try {// defining characteristics// ScrollContainersc = new ScrollContainer(false,true);add(sc, LEFT, TOP, FILL, FILL); // including in the application// ImageimgBack = new Image(“images/imagem-template-01.png”);background = new ImageControl(imgBack);background.scaleToFit = true; // Maintains the proportionbackground.strechImage = true; // allows you to resizeimgLogo = new Image(“images/logo-branca.png”);logo=new ImageControl(imgLogo);logo.transparentBackground = true; // make transparent backgroundlogo.scaleToFit = true;logo.strechImage = true;logo.tempHwScale=0.6; // scale the image// LabelTitle = new Label(“Registration Form”);Title.transparentBackground=true;Title.setForeColor(Color.WHITE); // changes the color of the objectGender = new Label(“Gender”);Gender.transparentBackground=true;Gender.setForeColor(Color.WHITE);//EditFullName= new Edit();FullName.caption = “Full Name”; // changes what is written in the capture stateFullName.captionColor=Color.WHITE; // changes the object’s color in the capture stateFullName.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 dateDate.transparentBackground=true;Date.setForeColor(Color.WHITE);// Checksubject1 = new Check(“Male”);subject1.transparentBackground=true;subject1.setForeColor(Color.WHITE);subject1.effect = null; // turn off click effectsubject2 = 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;// ButtonFinish = new Button(“Submit”);Finish.setForeColor(Color.WHITE);Finish.borderColor=Color.WHITE; // changes the border colorFinish.transparentBackground=true;Clear = new Button(“Clear”);Clear.setForeColor(Color.WHITE);Clear.borderColor=Color.WHITE;Clear.transparentBackground=true;// including in the container// Imagesc.add(background, LEFT, TOP);sc.add(logo, CENTER , TOP-15);sc.add(Title, CENTER, TOP); // Labelsc.add(FullName, CENTER, AFTER + 125 ); // Editsc.add(Gender, LEFT+25, AFTER+25 ); // Label// Checksc.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// Buttonsc.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.