Home > other >  33
33

Time:10-04

MTC UI development experience

MTC UI involves two parts on the code
1, the UI layout file
2, logic control part of the

UI layout of all the contents are specific path for existing theme directory: project/source/solution/theme/
Including colors, fonts, images, entry definition and interface layout file
Corresponding directory:
The theme/color
The theme font
The theme/image
The theme/language
The theme/widget

The following directory explain them one by one
Color
In the theme/color/color. XML defined in
Example:

On behalf of the meaning is: defines a color called ZTE_CID_TXT_N enumeration, the corresponding value is used to specify an RGB color # F0F0F0,
Need to pay attention to, in order to improve the readability of the code, the definition of color names need to be agreed by the name easy to understand: ZTE_CID heading, CID colorid, TXT representative definition to the font color is the color is used, the background color of the other use BG, N representing the color of the text is not selected, the selected is defined as S,
Such as ZTE_CID_BG_BLACK is refers to the definition of font colors of black,
Which need to pay special attention to the two color is:


These two colors are transparent color, ZTE_CID_DESKTOP is mainly used for the entire page, no background, need through to the video layer using transparent color
ZTE_CID_TXT_TRANS this color, it is mainly used for the control of the most common is the text control, control the background to transparent color, these two colors can't mix, subsequent introduction page layout will then introduce specific usage scenarios,
Above is about the definition of color, it is important to note that the core is to upgrade the SDK in January, after upgrading the color definition and alpha value, also is the subsequent need to define for ARGB color, the need to change to # 00 f0f0f0 ZTE_CID_TXT_N enumerated values

The font
In theme font font. XML defined in
Example:

ZFID_B24 & lt;/name>
Segoeuib. Ttf
24 & lt;/size>

ZFID_B24 to represent the font name FID fontid B 24 said the font size for coarse size and the size of the actual size corresponding to prevent misunderstanding,
The file specifies the font to use the the vera.ttf font file, the font file needs to be on the same level directory,
Size specifies the font type size,
If need to add a new font, can consult the example above, it is important to note that the name of the font should not exceed 10 bytes, because of the length of the font name of gxbus limited,

Image
Directory according to the different USES of files, divided into multiple folders, needs to execute the script in the Linux environment, generate image. The XML which images are defined as follows

Page layout file directly using the corresponding file name,
Need to pay attention to is the bit depth of the picture must be 32, 24 images known cause crashes,

Language
Focus on file i18n. XLS, according to the different columns of language points in this file, if need to increase the term, is listed in the corresponding language, increase the corresponding language translation, the first listed as the name of the entry, the page layout file, direct use of the name, can be specified using the corresponding entry,
Modified save the file, after the completion of project and enter the directory/source/solution/tools/language, execute the command
Python i18n_muti. Py Linux
Can update the entry to the corresponding language XML file, the MTC program only Russian and English, which is automatically updates the entry to the Russian. The XML and English. In the XML, it is important to note that all of the entry name needs to begin with ZSID according to specification,

The widget catalog
This directory to store all the layout of the interface file, first of all, it is important to note the file widget. The XML
File defines some global configuration such as:
1280 & lt;/width>
720 & lt;/height>
32 & lt;/bpp>
First two defines the width and height of the UI interface, all of the interface should not exceed the scope,
The interface specified in article 3 of the color gamut digits, 16 and 32 are two choices, in comparison, 16 display effect is poor in 32 bits, but refresh efficiency is superior to the 32-bit interface, and memory overhead 16 is less than 32 bits, MTC project at present, the configuration is 32-bit, according to the optimization of the core, response speed and almost like 16,
Lines in the fourth and fifth defines two transparent color, these two transparent color is before we in color. The XML emphasized the two transparent color,
Followed by the definition of interface layout file:
If we added a new interface, then according to the format, add such a record in the file, the name this line, modified into the name of the specified file, if you don't have to do this step, the APP won't find in the layout of the corresponding files, also won't be able to open the corresponding interface,
It is important to note that all of the page layout file, named begin with ZWIN_ must, in accordance with the specification, engineering at compile time, will automatically begin with ZWIN_ page layout file, generate a corresponding enumeration, convenient APP called

Then there's the page layout file, page layout file, is closely related to logic control file,
Here in the main menu interface for columns, said a few general function,
XML ZWIM_MAIN_MENU.

[0136128] 0584 & lt;/rect>
[ZTE_CID_DESKTOP, ZTE_CID_DESKTOP, ZTE_CID_DESKTOP]
[ZTE_CID_DESKTOP, ZTE_CID_DESKTOP, ZTE_CID_DESKTOP]

Attribute of the page defines the size and location of the page, the value of the rect x y w h left, namely, wide, high,
Forecolor and backcolor defines the interface of the foreground and background colors, you can see here is all set transparent color, that is we mentioned ZTE_CID_DESKTOP
Here you can also specify set an image as the background, combined with the following sentence can
Bg enumeration for the picture,

Zui_main_menu_create & lt;/create>
Zui_main_menu_destroy & lt;/destroy>
Zui_main_menu_show & lt;/show>
Zui_main_menu_keypress & lt;/keypress>

Involved here is the logic control part of the interface, the corresponding signal will automatically call the corresponding function, only need to implement the corresponding function in a logic control file,
Zui_main_menu_create & lt;/create>
Function: create signal is called the page to create, some initialization work can be realized in the midst of this function,
Zui_main_menu_keypress & lt;/keypress>
Keypress signal function: as the name implies, this function in the interface when receive the key message will automatically be invoked, and according to the Event in the middle of the function of enumeration values can determine which a keystroke messages are received, and according to the different keys for different operating,
Zui_main_menu_destroy & lt;/destroy>
Destroyed destroy the signal function: the page will be called when some work of initialization, and dynamic to apply for the release of memory can be implemented in this function, it is important to note that this function call order, such as the keypress functions of the closed operation interface, then will execute the destroy function first, and then execute statement after close the interface, if there are some dynamic application of memory, in the destroy function have been released, and in the subsequent statement to access, possible crash,
These two functions in the page to get and lose focus, will automatically be invoked,
In addition to this file is used in these signals, there are also several signal function, more common, there are the following:
Zui_service & lt;/service>
This function to receive some message, such as usb plug, hdmi plug, ca, the state of local broadcast news, etc., can be understood as if in addition to the key message of other news spread to this page will call this function, and according to the parameter values can determine the type of message,

In addition to the interface can respond to these messages, and the same controls can be response message, can control the concrete response message and the corresponding control we separate, which need special attention is
Keypress_function & lt;/keypress>
The signal function and buttons on each interface, the message will be distributed to focus controls, the focus control after receiving the corresponding key messages, whether their own need to response, determine whether need through to the other controls, or choose not to passthrough, key message liu stopped at the end of the control handle, the interface will not received the corresponding key messages,

Here for a few commonly used controls:
The text image listview

The text