There are a few recommended practices to improve the organization, maintenance, and performance, and consequently loading your application. Some of them are very basic, like creating a class apart to store the colors used in the application and other more complex as working with loading images that are pulled from an external bank. In this chapter we will learn about these recommendations.
In the development of any application it is essential to have a design to prototype the user interfaces. It turns out that when the developer takes these prototypes and starts to develop, it often ends up adding these colors in the UI classes themselves, which makes it difficult to maintain this code.
you will find free website recommendations for screen prototyping in the part of references in the last topic of this chapter.
Now let's say you have an update to your application and the background color of the APP has changed. If your project has 2 or 3 screens, is it relatively quick to change these colors but if it is a more robust design of 15 screens? The developer would have to quit by changing the background color 15 times.
Thinking about this, TotalCross recommends that you create a class named Colors and create constants for each color that you will need to use in the application, and preferably with suggestive names such as BACKGROUND. The name of the constants must always be in upper case. Here is the standard suggested by TotalCross, feel free to adapt to the needs of your project.
Colors.class
importtotalcross.ui.gfx.Color;publicclassColors {// The entire color palette follows the default material selected by the// Material Color Tool:// https://material.io/tools/color/#!/?view.left=0&view.right=1// Primary Colorspublicstaticint PRIMARY =0xD32F2F;publicstaticint P_LIGHT =0xFF6659;publicstaticint P_DARK =0x9A0007;// Secondary Colorspublicstaticint SECONDARY =0xF44336;publicstaticint S_LIGHT =0xFF7961;publicstaticint S_DARK =0xBA000D;//Texts Colorspublicstaticint TEXT_ON_P =0xFFFFFF;publicstaticint TEXT_ON_P_LIGHT =0x000000;publicstaticint TEXT_ON_P_DARK =0xFFFFFF;publicstaticint TEXT_ON_S =0x000000;publicstaticint TEXT_ON_S_LIGHT =0x000000;publicstaticint TEXT_ON_S_DARK =0xFFFFFF;// Backcolor samples colorspublicstaticint BACKGROUND_GRAY_01 =Color.getRGB(245,245,246);publicstaticint BACKGROUND_GRAY_02 =Color.getRGB(225,225,226);publicstaticint BACKGROUND_GRAY_03 =Color.getRGB(205,205,206);// Otherspublicstaticint SOFT_PEACH =0xE9E2E1;publicstaticint GRAY =0XC0C1E8;}
The names we attributed to the contenders were not by chance but rather due to the Color Material standard. You can generate each of these colors and better understand this pattern through Material Color Tools. With this Material tool you select the primary and secondary color of your project and it already generates the application's color palette and font color.
We also provide the source code for you to download and adapt for the project. Just click here.
Images
To facilitate code maintenance, it is also recommended that all images be instantiated in a separate class called Images and only be called in the interface classes.
As with colors and images, it happens when we are going to edit the fonts and here the problem is even worse, because we still have to stick to the size of fonts, colors and type.
So we advised that before the developer can already take with Design all these details to pass through a class with everything custom, as in the example below:
Another way would be to create an enum to stylize and only apply where you need it. To learn how to do it this way just click here.
Material Constants
The Material recommends a series of size and spacing patterns, so it is ideal to create a class within the useful package and assigning these patterns to the constants, as in the example below:
MaterialConstants
importtotalcross.ui.Control;importtotalcross.util.UnitsConverter;/** * Constants of positioning and components size to make it easier to maintain * the app. * * @author brunoamuniz * */publicclassMaterialConstants {publicstaticfinalint BORDER_SPACING =UnitsConverter.toPixels(16+Control.DP);publicstaticfinalint COMPONENT_SPACING =UnitsConverter.toPixels(8+Control.DP);publicstaticfinalint FAB_SIZE =UnitsConverter.toPixels(56+Control.DP);publicstaticfinalint MINI_FAB_SIZE =UnitsConverter.toPixels(40+Control.DP);publicstaticfinalint EDIT_HEIGHT_NO_CAPTION =UnitsConverter.toPixels(40+Control.DP);publicstaticfinalint EDIT_HEIGHT =UnitsConverter.toPixels(52+Control.DP);publicstaticfinalint TABS_HEIGHT =UnitsConverter.toPixels(40+Control.DP);}
to apply this class:
Button btn =newButton("Button");add(btn, LEFT +MaterialConstants.BORDER_SPACING, AFTER +MaterialConstants.COMPONENT_SPACING, FILL -MaterialConstants.BORDER_SPACING, PREFERRED);
